ms в CSS


Вендорные префиксы в CSS

Применим вендорные префиксы, используемые браузерами для экспериментальных CSS-свойств.

Вендорные префиксы это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.

Приведу список некоторых префиксов для наиболее распространенных браузеров.

  • -o- — префикс для браузера Опера
  • -moz- — префикс для браузеров из семейства Mozilla
  • -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
  • -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
  • -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
  • -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

Использовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство text-overflow в старых версиях Opera не поймет, если не написать его таким образом:

А CSS-фильтры от Microsoft можно использовать в ИЕ8 следующим образом:

Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге

CSS3 -ms-max-content in IE11

We can set in CSS3 -moz-max-content (for Firefox) and -webkit-max-content (for Chrome, Safari) as width , but it seems -ms-max-content is not working in Internet Explorer (IE11).

Update: Here is a sample code:

3 Answers 3

-max-content it is not supported by IE, according to CanIuse.

So I created a fallback for IE that might help you, by setting .button to display:inline-block :

UPDATE:

Based on OP comment:

It’s working, but I don’t want to display the elements inline.

Ms в CSS

)

  • Вписать туда: net_graph 1 (Там будет значение Lerp’а)
    Обязательно: если вы находитесь на сервере, требуется зайти в наблюдатели.
  • Вписать: cl_cmdrate 66;cl_updaterate 66;rate 20000 (Прописать рейты)
    Внимание: Рейты зависят от сервера. Узнать рейты можно прописав в консоли cl_updaterate и выветится значение этого CVAR’а на данном сервере.
  • Вписать: cl_interp 0.021;cl_interp_ratio 1 (Это уже сам Lerp)
  • По дефолту Lerp = 100.0 ms (Написан Белым цветом)
    В данном случае будет Lerp = 21.0 ms (Будет помечен Оранжевым цветом, что объясняется потерей пакетов, чтобы пакеты не терялись, прописать cl_interp 0.031 и лерп будет Белый.)

    • Чтобы lerp был постоянно 21 нужно:
      Перейти в папку cstrike ( C:\Program Files\Steam\SteamApps\common\Counter-Strike Source\cstrike )
      Найти там папку cfg, в ней создать файл autoexec.cfg ( Если файл уже имеется, просто открыть )
      Вписать в autoexec.cfg это — cl_cmdrate 66;cl_updaterate 66;rate 20000;cl_interp 0.021;cl_interp_ratio 1
      Теперь, при заходе в игру, lerp не станет снова 100.
    • Открываем консоль (Тильда —

    )

  • Пишем: bind [Кнопка, на которую хотите забиндить] «cl_interp 0.1;cl_interp_ratio 2» (Lerp = 100)
  • Пишем: bind [Кнопка, на которую хотите забиндить] «cl_interp 0.021;cl_interp_ratio 1» (Lerp = 21)
  • Первый бинд делает лерп равным 100, второй бинд 21. ( Чтобы каждый раз не прописывать, а просто нажимать кнопки при входе на сервер. )
  • Microsoft CSS Vendor Extensions

    As you may know, all browsers have a set of CSS features that are either considered a vendor extension (e.g. — ms-interpolation-mode ), are partial implementations of properties that are fully defined in the CSS specifications, or are implementation of properties that exist in the CSS specifications, but aren’t completely defined. According to the CSS 2.1 Specification, any of the properties that fall under the categories listed previously must have a vendor specific prefix, such as ‘-ms-‘ for Microsoft, ‘-moz-‘ for Mozilla, ‘-o-‘ for Opera, and so on.

    As part of our plan to reach full CSS 2.1 compliance with Internet Explorer 8, we have decided to place all properties that fulfill one of the following conditions behind the ‘-ms-‘ prefix:

    • If the property is a Microsoft extension (not defined in a CSS specification/module)
    • If the property is part of a CSS specification or module that hasn’t received Candidate Recommendation status from the W3C
    • If the property is a partial implementation of a property that is defined in a CSS specification or module

    This change applies to the following properties, and therefore they should all be prefixed with ‘-ms-‘ when writing pages for Internet Explorer 8 (please note that if Internet Explorer 8 users are viewing your site in Compatibility View, they will see your page exactly as it would have been rendered in Internet Explorer 7, and in that case the prefix is neither needed nor acknowledged by the parser):

    Property Type W3C Status
    -ms-accelerator Extension
    -ms-background-position-x CSS3 Working Draft
    -ms-background-position-y CSS3 Working Draft
    -ms-behavior Extension
    -ms-block-progression CSS3 Editor’s Draft
    -ms-filter Extension
    -ms-ime-mode Extension
    -ms-layout-grid CSS3 Editor’s Draft
    -ms-layout-grid-char CSS3 Editor’s Draft
    -ms-layout-grid-line CSS3 Editor’s Draft
    -ms-layout-grid-mode CSS3 Editor’s Draft
    -ms-layout-grid-type CSS3 Editor’s Draft
    -ms-line-break CSS3 Working Draft
    -ms-line-grid-mode CSS3 Editor’s Draft
    -ms-interpolation-mode Extension
    -ms-overflow-x CSS3 Working Draft
    -ms-overflow-y CSS3 Working Draft
    -ms-scrollbar-3dlight-color Extension
    -ms-scrollbar-arrow-color Extension
    -ms-scrollbar-base-color Extension
    -ms-scrollbar-darkshadow-color Extension
    -ms-scrollbar-face-color Extension
    -ms-scrollbar-highlight-color Extension
    -ms-scrollbar-shadow-color Extension
    -ms-scrollbar-track-color Extension
    -ms-text-align-last CSS3 Working Draft
    -ms-text-autospace CSS3 Working Draft
    -ms-text-justify CSS3 Working Draft
    -ms-text-kashida-space CSS3 Working Draft
    -ms-text-overflow CSS3 Working Draft
    -ms-text-underline-position Extension
    -ms-word-break CSS3 Working Draft
    -ms-word-wrap CSS3 Working Draft
    -ms-writing-mode CSS3 Editor’s Draft
    -ms-zoom Extension

    We understand the work involved in going back to pages you have already written and adding properties with the ‘-ms-‘ prefix, but we highly encourage you to do so in order for your page to be written in as compliant a manner as possible. However, in order to ease the transition, the non-prefixed versions of properties that existed in Internet Explorer 7, though considered deprecated, will continue to function in Internet Explorer 8.

    Changes in the filter property syntax

    Unfortunately, the original filter syntax was not CSS 2.1 compliant. For example, the equals sign, the colon, and the commas (highlighted in red ) are illegal in the following context:

    filter: prog >: DXImageTransform.Microsoft.Alpha(Opacity = 80 , FinishOpacity = 70 , Style = 2);

    Since our CSS parser has been re-designed to comply with standards, the old filter syntax will be ignored as it should according to the CSS Specification. Therefore, it is now required that the defined filter is fully quoted. The proper way of writing out the filter defined above (with changes needed highlighted in green ) would be:

    -ms- filter: » prog >« ;

    In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:

    #transparentDiv <
    -ms-filter: «prog > filter: prog > opacity: .5;
    >

    Thanks for your time and we are glad to hear your feedback!

    -ms-transform

    Свойство -ms-transform применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

    Элемент можно передвигать, масштабировать, поворачивать и наклонять.

    Допустимые значения

    • — элемент трансформируется согласно одной из следующих функций:
      • matrix( , , , , , ) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
      • translate( ) — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
      • translateX( ) — определяет сдвиг элемента по оси x
      • translateY( ) — определяет сдвиг элемента по оси y
      • scale( ) — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
      • scaleX( ) — определяет масштаб элемента по оси x
      • scaleY( ) — определяет масштаб элемента по оси y
      • rotate( ) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством -ms-transform-origin
      • skew( ) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
      • skewX( ) — определяет угол наклона элемента по оси x.
      • skewY( ) — определяет угол наклона элемента по оси y.
    Значение по умолчанию нет
    Применимо к блочным и строчным элементам
    Наследование нет
    Поддерживается браузерами
    • Internet Explorer 9.0 и выше

    Пример

    Заметки

    В спецификации CSS3 есть аналогичное свойство transform.

    CSS-стили неработающие в MS Edge

    Доброго времени суток,

    никто из гуру не подскажет, какие из этого списка css нужно с префиксом использовать для MS edge:

    background-image подгружается с помощью js.

    Дело в том, что картинка для background-image сжимается по вертикали в MSEdge. В Chrome и Opere нормально.

    20.09.2020, 10:05

    Стили в CSS
    Добрый вечер. Я новичек в CSS и мне от Вас нужна очень небольшая помощь. body < font-family.

    css стили
    На странице выводятся две конструкции 1)

    Css стили
    Что нужно прописать ,чтобы картинка встала в отмеченной области? Html не предлагать ,так как нужна.

    Не подключаются стили CSS
    Вот начал верстать макет, но не могу понять почему таблица стилей не подключилась, вот участок кода.

    CSS: хаки для IE10 (обновлено)

    В нынешнем году компания Microsoft заявила, что IE10 более не поддерживает условные комментарии. С их стороны это очень рискованный шаг. На протяжении многих лет веб-разработчики использовали условные комментарии, хаки и комбинацию данных способов для отделения браузеров IE от всех остальных.

    Без условных комментариев в IE10 невозможно решить многие проблемы CSS, но способы все-таки есть.

    Хак @cc_on

    После применения данного хака в IE10 к тегу будет добавлен класс ie10 . Теперь достаточно написать в CSS :

    Данный хак работает и в IE11

    Хак @media -ms-high-contrast

    Данный хак работает и в IE11

    Хак @media Zero Hack

    Данный хак работает и в IE9

    Хак window.matchMedia

    Так как IE10 поддерживает window.matchMedia , то можно попробовать сделать так:

    Хак с VBArray

    Данный хак работает и в IE11, IE12

    Хак 1-‘\0’

    Подсмотрен в комментариях блога Евгения Степанищева:

    Ms в CSS

    CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

    Зачем используется CSS

    Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

    • обеспечивает относительно простую и быструю разработку, потому что однажды созданное оформление можно применять ко многим страницам;
    • повышает гибкость и удобство редактирования – достаточно внести правку в CSS, чтобы оформление изменилось везде;
    • делает код более простым, снижая повторяемость элементов. Его проще читать программистам и поисковым ботам;
    • ускоряет время загрузки, потому что CSS может кэшироваться при первом открытии, а в последующих считываются только структура и данные;
    • увеличивает количество визуальных решений для представления содержимого;
    • обеспечивает возможность легко применять к одному документу разные стили (например, создавать адаптированную версию для мобильных устройств или специальные стили для слабовидящих).

    То есть каскадные таблицы служат не только для воплощения дизайна, но и кардинально меняют подход к сайтостроению, упрощая труд разработчиков и обеспечивая гибкость реализации. Вот для чего нужен CSS.

    Развитие CSS

    Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

    Структура языка

    CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

    Правило состоит из селектора и блока объявлений.

    Селекторы

    Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс <свойство: значение;>». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор <свойство: значение;>». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

    Блок объявлений

    Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

    Подключение CSS

    CSS можно связать с HTML несколькими способами:

    • внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
    • добавить тег с атрибутом type=»text/css»;
    • подключить внешнюю таблицу стилей:
    • .

    Третий способ является наиболее популярным и рекомендуемым, потому что позволяет в полной мере пользоваться преимуществами разделения формы и содержания, обеспечиваемого с помощью CSS.

    Приводим CSS стили к единому и красивому формату

    Установка CSScomb, дополнения для Sublime Text 3, которое позволяет привести CSS код к единому стилю.

    Устанавливаем CSSComb для Sublime через Package Control: Insall Package.

    По умолчанию CSSComb группирует свойства CCS по типу:

    Но например, линтеру SublimeLinter-csslint не нравится всё кроме алфавитного порядка CSS. Да я и сам пришел к выводу, что это намного удобнее.

    Так что вот мои настройки CSSComb, которые упорядочивают CSS в алфавитном порядке:

    <
    // If plugin has trouble finding Node.js, replace this string with path
    // to your `node` bin
    «node-path» : «:/usr/local/bin»,

    // Full list of supported options and acceptable values can be found here:
    // https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
    «config»: <

    // Whether to add a semicolon after the last value/mixin.
    «always-semicolon»: false,

    // Set indent for code inside blocks, including media queries and nested rules.
    «block-indent»: » «,

    // Unify case of hexadecimal colors.
    «color-case»: «lower»,

    // Whether to expand hexadecimal colors or use shorthands.
    «color-shorthand»: false,

    // Unify case of element selectors.
    «element-case»: «lower»,

    // Add/remove line break at EOF.
    «eof-newline»: false,

    // Add/remove leading zero in dimensions.
    «leading-zero»: false,

    // Unify quotes style.
    «quotes»: «single»,

    // Remove all rulesets that contain nothing but spaces.
    «remove-empty-rulesets»: false,

    // Set space after `:` in declarations.
    «space-after-colon»: » «,

    // Set space after combinator (for example, in selectors like `p > a`).
    «space-after-combinator»: » «,

    // Set space after ` <`.
    «space-after-opening-brace»: «\n»,

    // Set space after selector delimiter.
    // Новая строчка перед каждым элементом, можно сделать в строку
    «space-after-selector-delimiter»: «\n»,

    // Set space before `>`.
    «space-before-closing-brace»: «\n»,

    // Set space before `:` in declarations.
    «space-before-colon»: «»,

    // Set space before combinator (for example, in selectors like `p > a`).
    «space-before-combinator»: » «,

    // Set space before ` <`.
    // Устанавливает пробел между элементом и скобкой
    «space-before-opening-brace»: » «,

    // Set space before selector delimiter.
    «space-before-selector-delimiter»: «»,

    // Set space between declarations (i.e. `color: tomato`).
    «space-between-declarations»: «\n»,

    // Whether to trim trailing spaces.
    «strip-spaces»: false,

    // Whether to remove units in zero-valued dimensions.
    «unitless-zero»: false,

    // Whether to align prefixes in properties and values.
    «vendor-prefix-align»: false,

    // Sort properties in particular order.
    «sort-order»: [
    «-moz-animation»,
    «-moz-animation-delay»,
    «-moz-animation-direction»,
    «-moz-animation-duration»,
    «-moz-animation-iteration-count»,
    «-moz-animation-name»,
    «-moz-animation-play-state»,
    «-moz-animation-timing-function»,
    «-moz-background-clip»,
    «-moz-background-size»,
    «-moz-border-image»,
    «-moz-border-image-outset»,
    «-moz-border-image-repeat»,
    «-moz-border-image-slice»,
    «-moz-border-image-source»,
    «-moz-border-image-width»,
    «-moz-border-radius»,
    «-moz-border-radius-bottomleft»,
    «-moz-border-radius-bottomright»,
    «-moz-border-radius-topleft»,
    «-moz-border-radius-topright»,
    «-moz-box-shadow»,
    «-moz-box-sizing»,
    «-moz-hyphens»,
    «-moz-tab-size»,
    «-moz-text-align-last»,
    «-moz-transform»,
    «-moz-transform-origin»,
    «-moz-transition»,
    «-moz-transition-delay»,
    «-moz-transition-duration»,
    «-moz-transition-property»,
    «-moz-transition-timing-function»,
    «-moz-user-select»,
    «-ms-animation»,
    «-ms-animation-delay»,
    «-ms-animation-direction»,
    «-ms-animation-duration»,
    «-ms-animation-iteration-count»,
    «-ms-animation-name»,
    «-ms-animation-play-state»,
    «-ms-animation-timing-function»,
    «-ms-background-position-x»,
    «-ms-background-position-y»,
    «-ms-filter:\’progid:DXImageTransform.Microsoft.Alpha»,
    «-ms-filter:\’progid:DXImageTransform.Microsoft.gradient»,
    «-ms-interpolation-mode»,
    «-ms-overflow-x»,
    «-ms-overflow-y»,
    «-ms-text-align-last»,
    «-ms-text-justify»,
    «-ms-text-overflow»,
    «-ms-transform»,
    «-ms-transform-origin»,
    «-ms-transition»,
    «-ms-transition-delay»,
    «-ms-transition-duration»,
    «-ms-transition-property»,
    «-ms-transition-timing-function»,
    «-ms-user-select»,
    «-ms-word-break»,
    «-ms-word-wrap»,
    «-ms-writing-mode»,
    «-o-animation»,
    «-o-animation-delay»,
    «-o-animation-direction»,
    «-o-animation-duration»,
    «-o-animation-iteration-count»,
    «-o-animation-name»,
    «-o-animation-play-state»,
    «-o-animation-timing-function»,
    «-o-background-size»,
    «-o-border-image»,
    «-o-border-image-outset»,
    «-o-border-image-repeat»,
    «-o-border-image-slice»,
    «-o-border-image-source»,
    «-o-border-image-width»,
    «-o-tab-size»,
    «-o-transform»,
    «-o-transform-origin»,
    «-o-transition»,
    «-o-transition-delay»,
    «-o-transition-duration»,
    «-o-transition-property»,
    «-o-transition-timing-function»,
    «-webkit-animation»,
    «-webkit-animation-delay»,
    «-webkit-animation-direction»,
    «-webkit-animation-duration»,
    «-webkit-animation-iteration-count»,
    «-webkit-animation-name»,
    «-webkit-animation-play-state»,
    «-webkit-animation-timing-function»,
    «-webkit-background-clip»,
    «-webkit-background-size»,
    «-webkit-border-bottom-left-radius»,
    «-webkit-border-bottom-right-radius»,
    «-webkit-border-image»,
    «-webkit-border-image-outset»,
    «-webkit-border-image-repeat»,
    «-webkit-border-image-slice»,
    «-webkit-border-image-source»,
    «-webkit-border-image-width»,
    «-webkit-border-radius»,
    «-webkit-border-top-left-radius»,
    «-webkit-border-top-right-radius»,
    «-webkit-box-shadow»,
    «-webkit-box-sizing»,
    «-webkit-hyphens»,
    «-webkit-text-align-last»,
    «-webkit-transform»,
    «-webkit-transform-origin»,
    «-webkit-transition»,
    «-webkit-transition-delay»,
    «-webkit-transition-duration»,
    «-webkit-transition-property»,
    «-webkit-transition-timing-function»,
    «-webkit-user-select»,
    «animation»,
    «animation-delay»,
    «animation-direction»,
    «animation-duration»,
    «animation-iteration-count»,
    «animation-name»,
    «animation-play-state»,
    «animation-timing-function»,
    «background»,
    «background-attachment»,
    «background-clip»,
    «background-color»,
    «background-image»,
    «background-origin»,
    «background-position»,
    «background-position-x»,
    «background-position-y»,
    «background-repeat»,
    «background-size»,
    «border»,
    «border-bottom»,
    «border-bottom-color»,
    «border-bottom-left-radius»,
    «border-bottom-right-radius»,
    «border-bottom-style»,
    «border-bottom-width»,
    «border-collapse»,
    «border-color»,
    «border-image»,
    «border-image-outset»,
    «border-image-repeat»,
    «border-image-slice»,
    «border-image-source»,
    «border-image-width»,
    «border-left»,
    «border-left-color»,
    «border-left-style»,
    «border-left-width»,
    «border-radius»,
    «border-right»,
    «border-right-color»,
    «border-right-style»,
    «border-right-width»,
    «border-spacing»,
    «border-style»,
    «border-top»,
    «border-top-color»,
    «border-top-left-radius»,
    «border-top-right-radius»,
    «border-top-style»,
    «border-top-width»,
    «border-width»,
    «bottom»,
    «box-decoration-break»,
    «box-shadow»,
    «box-sizing»,
    «caption-side»,
    «clear»,
    «clip»,
    «color»,
    «content»,
    «counter-increment»,
    «counter-reset»,
    «cursor»,
    «display»,
    «empty-cells»,
    «filter:progid:DXImageTransform.Microsoft.Alpha(Opacity»,
    «filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»,
    «filter:progid:DXImageTransform.Microsoft.gradient»,
    «flex-align»,
    «flex-direction»,
    «flex-order»,
    «flex-pack»,
    «float»,
    «font»,
    «font-effect»,
    «font-emphasize»,
    «font-emphasize-position»,
    «font-emphasize-style»,
    «font-family»,
    «font-size»,
    «font-size-adjust»,
    «font-smooth»,
    «font-stretch»,
    «font-style»,
    «font-variant»,
    «font-weight»,
    «height»,
    «hyphens»,
    «left»,
    «letter-spacing»,
    «line-height»,
    «list-style»,
    «list-style-image»,
    «list-style-position»,
    «list-style-type»,
    «margin»,
    «margin-bottom»,
    «margin-left»,
    «margin-right»,
    «margin-top»,
    «max-height»,
    «max-width»,
    «min-height»,
    «min-width»,
    «nav-down»,
    «nav-index»,
    «nav-left»,
    «nav-right»,
    «nav-up»,
    «opacity»,
    «outline»,
    «outline-color»,
    «outline-offset»,
    «outline-style»,
    «outline-width»,
    «overflow»,
    «overflow-x»,
    «overflow-y»,
    «padding»,
    «padding-bottom»,
    «padding-left»,
    «padding-right»,
    «padding-top»,
    «pointer-events»,
    «position»,
    «quotes»,
    «resize»,
    «right»,
    «tab-size»,
    «table-layout»,
    «text-align»,
    «text-align-last»,
    «text-decoration»,
    «text-emphasis»,
    «text-emphasis-color»,
    «text-emphasis-position»,
    «text-emphasis-style»,
    «text-indent»,
    «text-justify»,
    «text-outline»,
    «text-overflow»,
    «text-overflow-ellipsis»,
    «text-overflow-mode»,
    «text-shadow»,
    «text-transform»,
    «text-wrap»,
    «top»,
    «transform»,
    «transform-origin»,
    «transition»,
    «transition-delay»,
    «transition-duration»,
    «transition-property»,
    «transition-timing-function»,
    «user-select»,
    «vertical-align»,
    «visibility»,
    «white-space»,
    «width»,
    «word-break»,
    «word-spacing»,
    «word-wrap»,
    «z-index»,
    «zoom»
    ]
    >
    >

    Результат алфавитного упорядочивания CSS стилей с помощью CSS Combo:

    Префиксы в CSS — vendor prefixes

    Оформление современных сайтов состоят из множества стилей, которые могут работать или не работать в тех или иных браузерах. Чтобы всё работало везде, для некоторых свойств необходимо использовать префиксы разных браузеров. По английски они называются vendor prefixes .

    Ниже список самых необходимых и популярных свойств, использующих префиксы (или где их ставят по ошибке):

    Без префиксов

    border-radius : Если не нужна поддержка Firefox 3.6 или iOS 3.2

    box-shadow : Если не нужна поддержка Firefox 3.6 или iOS 4.3 или Safari 5.0

    Используют только один префикс

    CSS Transitions : -webkit- для Safari 6.0

    CSS 3D Transforms : -webkit- для Safari и Chrome

    CSS Animation : -webkit- для Safari и Chrome

    CSS Gradients : -webkit- для Safari

    Box Sizing : -moz-.

    CSS Calc : -webkit- для Safari 6.0

    Несколько префиксов

    CSS Transforms : -webkit- для Safari и Chrome и -ms- для IE9

    Flex Box : -webkit- и -ms-.

    Columns : -webkit- и -moz-.

    Почему я не упомянул про префикс -o-, который использовался в опере до 12 версии включительно? Потому, что о ней стоит упоминать только в контексте сайтов, которые будут сделаны для просторов СНГ. Если это ваш случай, то помните — Opera

    Илон Маск рекомендует:  Cgi pm библиотека cgi для perl 5
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL