O moz webkit: Разница между -webkit ,-khtml ,-moz, — o свойством в css?

Разница между -webkit ,-khtml ,-moz, — o свойством в css?

в чем разница между -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow в CSS?

Мой CSS это такой:

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;

html

css

Поделиться

Источник

anand    

24 апреля 2014 в 05:31

5 ответов

2

Непосредственных различий нет, это префикс поставщика, чтобы указать различным браузерам, как интерпретировать, в данном случае, свойство box-shadow .
Это делается потому, что разные браузеры могут реализовать его по-разному.

Префиксы поставщиков также позволяют использовать экспериментальные функции или не доработанные функции.

Поделиться

Henrik Andersson    

24 апреля 2014 в 05:35

1

Нет никакой разницы. Это префиксы поставщиков, используемые для поддержки .

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

Caniuse (отличный ресурс) имеет таблицы совместимости по CSS функциям. Для box-shadow, old Safari и Chrome используют -webkit- , в то время как old FF использует -moz- . Префиксы -o- и -khtml- , по-видимому, не нужны.

BTW, даже если нет поддержки браузера (есть в вашем случае), вы должны добавить правило, соответствующее стандартам:

button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;
}

Поделиться

bjb568    

24 апреля 2014 в 05:34

1

Нет никакой разницы. Это CSS префиксов поставщика или CSS префиксов браузера

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

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Ссылка

Поделиться

Ishan Jain    

24 апреля 2014 в 05:44

• Разница между -moz-linear-gradient и-webkit-градиентом

  В чем основная разница между -moz-linear-gradient и-webkit-градиентом? Я знаю, что изменения происходят в параметрах и-moz предназначен для mozilla. Но почему у нас есть другое свойство CSS для Mozilla. Что здесь представляет webkit ?

• CSS FlexBox модель: разница между flex и box-flex?

  При использовании модели flex box css существует множество различных свойств. В чем разница между следующими свойствами? -webkit-flex: 1; -moz-flex: 1; -ms-box-flex: 1; box-flex: 1; и -webkit-flex: 1; -moz-box-flex: 1; flex: 1; Как совместить старый и новый синтаксис?

0

Это префикс для более старых версий браузеров. o для opera, moz для mozilla и т. Д. Вы можете прочитать больше здесь .

Поделиться

Petroff    

24 апреля 2014 в 05:35

0

-webkit -khtml -moz -o — это префикс поставщика для :

• webkit(safari,браузер)
• моз(firefox)
• o(opera)
• khtml(konqueror)

В основном используется для функций CSS3, иногда они позволяют использовать или изменять поведение браузера с помощью свойств «modern».

How To Deal With Vendor Prefixes

Поделиться

Yooz    

24 апреля 2014 в 05:39

Похожие вопросы:

Как добавить префиксы-moz & — o в код, содержащий только теги -webkit

Скажем, у меня есть такая страница: http:/ / www.webkit.org / blog-files/3d-transforms/morphing-cubes.html Я сохраняю страницу &, запускаю файл html в свой localhost. Он отлично работает в…

Как я могу знать, когда использовать-webkit -,- moz,- ms -,- o-и т. д.?

Как я могу узнать , когда использовать префикс -webkit- , -moz- , -ms- , -o- в свойствах css? Я вижу много inconsistency в некоторых атрибутах, в некоторых свойствах программист ставит только -moz-…

css анимация и -moz — не работает в абсолютном блоке

Эта анимация поворота не работает в mozila firefox, но в google chrome она работает правильно. На самом деле эта проблема возникает только в абсолютных и относительных блоках. В общем случае эта…

В чем разница между-moz-transform и -moz-transform-origin?

В чем разница между -moz-transform и -moz-transform-origin ?

W3 Css ошибки валидатора на -moz и -webkit

Я пытаюсь проверить свой CSS на уровне 3 на jigsaw.w3.org. Но я получаю много сообщений об ошибках для свойств, которые начинались с-moz или -webkit или-o и … Что же мне делать ?

Разница между -moz-linear-gradient и-webkit-градиентом

В чем основная разница между -moz-linear-gradient и-webkit-градиентом? Я знаю, что изменения происходят в параметрах и-moz предназначен для mozilla. Но почему у нас есть другое свойство CSS для…

CSS FlexBox модель: разница между flex и box-flex?

При использовании модели flex box css существует множество различных свойств. В чем разница между следующими свойствами? -webkit-flex: 1; -moz-flex: 1; -ms-box-flex: 1; box-flex: 1; и -webkit-flex:…

В чем разница между webkit и moz

Я не понимаю разницы между -webkit-animation и -moz-animation . В чем разница между этими двумя или этими, или это одно и то же? Я погуглил этот вопрос, но не смог найти различий. Вот пример кода:…

Ошибка с CSS-moz-перспективой

У меня ошибка с перспективным свойством.. Если вы видите этот код JSFiddle в Google Chrome (v33) и Mozilla Firefox (v28), то у меня есть разница между ними.. Я могу воспроизвести эту ошибку в…

Как эффективно установить свойства CSS для всех браузеров (-webkit, -moz, -o, — ms) с помощью angular?

Мне нужно установить свойство CSS с помощью функции angular. Вот мой код: <div ng-style={ ‘transform’: getRotation(i) }></div> Однако я хотел бы добавить совместимость с браузером,…

css — Что такое -moz- и -webkit-?

Что такое -moz- и -webkit -?

Свойства CSS, начинающиеся с -webkit-, -moz-, -ms- или -o-, называются префиксами поставщиков.

Почему разные браузеры добавляют разные префиксы для одного и того же эффекта?

Хорошее объяснение префиксов поставщиков дано Питером-Полем Кохом из QuirksMode :

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

Допустим, рабочая группа W3C обсуждает объявление сетки (что, кстати, не было бы такой плохой идеей). Кроме того, давайте скажем, что некоторые люди создают черновик спецификации, но другие не соглашаются с некоторыми деталями. Как мы знаем, этот процесс может занять много лет.

Кроме того, скажем, что Microsoft в качестве эксперимента решает реализовать предложенную сетку. На данный момент Microsoft не может быть уверена, что спецификация не изменится. Следовательно, вместо добавления сетки в свой CSS, он добавляет -ms-grid.

Префикс поставщика вроде «говорит, что это интерпретация Microsoft действующего предложения». Таким образом, если окончательное определение сетки будет другим, Microsoft может добавить новую сетку свойств CSS, не разбивая страницы, которые зависят от -ms-grid.

ОБНОВЛЕНИЕ НА 2016 ГОД

Поскольку этому посту 3 года, важно упомянуть, что теперь большинство поставщиков понимают, что эти префиксы просто создают ненужный дублирующий код и что ситуация где вам нужно указать 3 разных CSS-правила, чтобы один эффект работал во всех браузерах — нежелательный.

Как уже упоминалось в этом глоссарии о взгляде Mozilla на Vendor Prefix на May 3, 2016,

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

Например, всего несколько лет назад, чтобы установить закругленный угол на поле, вы должны были написать:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

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

border-radius: 10px 5px;

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

Поскольку до сих пор не существует стандарта для общих правил CSS, которые работают во всех браузерах, вы можете использовать такие инструменты, как caniuse.com , чтобы проверить поддержку правила во всех основных браузерах.

Вы также можете использовать pleeease.io/play . Pleeease — это приложение Node.js, которое легко обрабатывает ваш CSS. Это упрощает использование препроцессоров и объединяет их с лучшими постпроцессорами. Это помогает создавать чистые таблицы стилей, поддерживать старые браузеры и обеспечивает лучшую поддержку.

Входной сигнал:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Выход:

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}

css — Как я могу узнать, когда использовать -webkit-, -moz, -ms-, -o- и т. Д.?

Как я могу узнать, когда использовать префикс -webkit-, -moz-, -ms-, -o- в свойствах css? Я вижу много «несогласованности» в некоторых атрибутах, в некоторых свойствах программист только помещает -moz-, в других он помещает все 4. Есть ли причина для этого?

10

user7479925

13 Апр 2017 в 19:09

4 ответа

Лучший ответ

Чтобы узнать, какие префиксы использовать, зависит от того, какие браузеры вы хотите поддерживать. Хорошее место, чтобы узнать, какие версии браузера требуют префикса, это caniuse.com.

Это связано с тем, какие браузеры решили поддержать другие разработчики. Если вы видите больше префиксов, то разработчики (владелец сайта) сайта приняли решение о более высоком / более глубоком уровне поддержки старых браузеров. Меньше префиксов будет поддерживать меньше браузеров. А почему? Может быть много причин, некоторые из которых являются целевой аудиторией и требованиями к функциям (веб-API).

Вы можете пойти ручным путем, но многие разработчики будут использовать такие инструменты, как Autoprefixer или препроцессор CSS, например SASS или LESS . Эти инструменты дают вам различные способы определения того, какие префиксы использовать.

Что-то вроде AutoPrefixer позволяет указать список браузеров, которые вы хотите поддерживать, и выяснить, какие префиксы и т. Д. Необходимы для поддержки этих браузеров на основе версии без префикса.

С помощью препроцессора CSS, такого как SASS или LESS , вы можете создать mixin (в основном, функцию), который будет добавлять определенные вами префиксы.

12

hungerstar
13 Апр 2017 в 16:59

Если вы хотите, чтобы все браузеры работали, вам нужно добавить все из них, некоторые веб-сайты не поддерживают старые браузеры, поэтому нет необходимости заботиться о браузерах, которые вы решили не поддерживать 🙂

0

loki
13 Апр 2017 в 16:18

Эти различные свойства называются «префиксами поставщиков»: -moz- = используется для Mozilla Firefox -ms- = используется для Microsoft Internet Explorer -o- = используется для Opera -webkit- = используется для браузеров Google Chrome и Apple Safari.

Это всегда хороший подход — использовать все префиксы вендоров для применяемой CSS, чтобы обеспечить совместимость браузера с разрабатываемой веб-страницей.

Тем не менее, препроцессоры CSS, такие как LESS, могут справиться с этим, если вам случится их использовать. Лично я использую LESS для обработки всех этих префиксов поставщиков, и это действительно просто. Если бы я не использовал препроцессоры, я бы все-таки подумал о написании префикса вендора css вместе с именем свойства по умолчанию.

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

Попробуйте использовать инструменты префикса поставщика, такие как: https://github.com/less/less-plugin-autoprefix

2

r0u9hn3ck
13 Апр 2017 в 16:34

Я применяю простое правило: никогда не ставьте префикс вендора (пусть пользователь обновляет свой браузер вместо этого и избегает неофициальных / еще не завершенных правил CSS).

Посмотрите http://shouldiprefix.com/, если вы все еще хотите знать, какие префиксы «обязательны» (или «стоит беспокоиться»). около»).

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

7

Xenos
13 Апр 2017 в 16:15

Что такое-moz-и-webkit -?

что такое-moz — и-webkit-?

свойства CSS, начинающиеся с -webkit-, -moz-, -ms- или -o- называются префиксами поставщиков.

почему разные браузеры добавляют разные префиксы для одного и того же эффекта?

хорошее объяснение префиксов поставщика происходит от Петра-Павла Коха QuirksMode:

первоначально точка префиксов поставщика должна была разрешить разработчики браузеров
чтобы начать поддерживать экспериментальные объявления CSS.

предположим, что рабочая группа W3C обсуждает объявление сетки (которое,
кстати, не такая уж плохая идея). Более того, скажем, что
некоторые люди создают черновик спецификации, но другие не согласны с
некоторые детали. Как мы знаем, этот процесс может занять возрастов.

более того, скажем, что Microsoft в качестве эксперимента решает
реализовать предложенную сетку. При этом момент времени Майкрософт не может
убедитесь, что спецификация не изменится. Поэтому, вместо того, чтобы
добавляя сетку в свой CSS, он добавляет -ms-grid.

префикс поставщика говорит :» это интерпретация Microsoft
текущего предложения.»Таким образом, если окончательное определение сетки
по-другому, Microsoft может добавить новую сетку свойств CSS, не нарушая
страницы, зависящие от-ms-grid.

обновление В 2016 ГОДУ

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

как говорится в этой глоссарий о представлении Mozilla на Vendor Prefix on May 3, 2016,

производители браузеров теперь пытаются избавиться от префикса поставщика для экспериментальных
особенности. Они заметили, что веб-разработчики используют их на
производство веб-сайтов, загрязняющих глобальное пространство и делающих его более
трудно для аутсайдеров хорошо работать.

например, несколько лет назад, чтобы установить закругленный угол на коробке надо было написать:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

но теперь, когда браузеры пришли к полной поддержке этой функции, вам действительно нужно только стандартная версия:

border-radius: 10px 5px;

поиск правильных правил для всех браузеров

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

вы также можете использовать пожалуйста.io / play. Pleeease-это узел.приложение js, которое легко обрабатывает ваш CSS. Это упрощает использование препроцессоры и объединяет их с лучшими постпроцессорами. Это помогает создавать чистые таблицы стилей, поддерживать старые браузеры и предлагает лучшую ремонтопригодность.

вход:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

выход:

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}

Онлайн сервис генерации префиксов для CSS свойств

Сегодня речь пойдет об онлайн сервисе для генерации CSS кода с префиксами. Пара слов о том, что такое префиксы в CSS свойствах, откуда они взялись и зачем их нужно ставить. Дело в том что современные возможности спецификации CSS2-3  внедрялись браузерами постепенно. Этот путь имеет поступательный характер и дабы дать своим пользователям новые возможности, браузеры внедряли эти свойства добавляя к ним свои особенные префиксы -webkit, -ms, -o, -moz.

Для не терпеливых ссылка на сервис: 

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

Следовательно мы приходим к пониманию того факта, что одна версия браузера может использовать свойство CSS без префиксов, в то время как более старая версия этого же браузера требует использование CSS префиксов для корректной работы свойства стилей. Проверить необходимость использования CSS префиксов для того или иного свойства стилей, можно на следующем полезном ресурсе: //caniuse.com, этот сайт я описывал в своем другом посте “Про поддержку HTML5” – в общем советую посмотреть этот ресурс.

Прежде чем многие скажут зачем нам онлайн сервис для генерации префиксов для CSS свойств, ведь это все можно автоматически настроить внутри рабочей среды или в gulp сборке с помощью модулей и я скажу, что вы абсолютно правы! Да, у меня все это тоже автоматизировано. Но в текущем проекте, мне попался чистый CSS код, автоматизировать его нереально, а поддерживать сложно… очень сложно. Для того чтобы не тратить много времени на добавления и поддержку свойств с префиксами, я решил писать код без них, а перед загрузкой на продакшен обработать его в онлайн сервисе по генерации префиксов для CSS свойств.

Не долго я искал нужный мне сервис и найденное меня вполне устраивает 🙂

И так представляю вашему вниманию сервис по генерации префиксов для CSS свойств: ссылка (откроется в новом окне).

Что примечательно, так это интуитивно понятный интерфейс данного ресурса:

1. Вставляем свой CSS код (без префиксов) в левую часть
2. Справа получаем сгенерированный CSS код с автоматически добавленными свойствами с префиксами, которые проставлены на основании ваших требований по количеству поддерживаемых версий браузеров – этот параметр вы ставите в поле под цифрой три
3. В этом поле ставим значения поддерживаемых версий браузеров. В моем примере число 3, означает что я хочу чтобы префиксы были проставлены на основании требований к трем последним версиям каждого браузера
4. Это кнопка для удобства выделения полученного результата 🙂

На этом в общем и все. Понимаю, что в современном подходе к front-end данный сервис не очень востребованный, но мне он стал в надобность и надеюсь кому-то тоже пригодится.

webkit-transition-duration — свойство css :: руководство cssdot.ru

Свойство -webkit-transition-duration определяет длительность анимированного перехода для заданного css-свойства из одного значения в другое. Значение -webkit-transition-duration, по умолчанию, равняется 0 (анимация отсутствует, заданное css-свойство изменяется мнгновенно) и не наследуется от родительского элемента. Длительность перехода может задаваться любым доступным способом в соответствии со стандартом CSS 3 для велечин типа <длительность>. Отрицательные значения интерпретируются как нулевые. Данное свойство может принимать несколько значений, разделенных запятыми, и тогда они будут соответствовать анимации для различных css-свойств, в том порядке, в котором они установлены в -webkit-transition-property.

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

• длительность — любое не отрицательное значение, в одной из следующих единиц измерений:
  • ms — микросекунды
  • s  — секунды

Примеры использования

В данном примере будет установлена различная длительность анимации. Будут меняться свойства padding-left от 0 до 100% и opacity — от 1.0 до 0

.line1 {
-webkit-transition-duration: 500ms;
}

.line2 {
-webkit-transition-duration: 1000ms;
}

.line3 {
-webkit-transition-duration: 2500ms;
}

Свойство -webkit-transition-duration относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.

Смотри также:

• transition — свойства анимационного перехода
• transition-property — имя css-свойства, к которому будет применен анимационный переход.
• transition-duration — длительность анимационного перехода
• transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
• transition-delay — задержка перед выполнением анимационного перехода
• -moz-transition — свойства анимационного перехода
• -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
• -moz-transition-duration — длительность анимационного перехода
• -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
• -moz-transition-delay — задержка перед выполнением анимационного перехода
• -webkit-transition — свойства анимационного перехода
• -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
• -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
• -webkit-transition-delay — задержка перед выполнением анимационного перехода
• -o-transition — свойства анимационного перехода
• -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
• -o-transition-duration — длительность анимационного перехода
• -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
• -o-transition-delay — задержка перед выполнением анимационного перехода

Краткое описание

длительность анимационного перехода

Синтаксис:

&lt;длительность&gt; [, &lt;длительность&gt;]*

По умолчанию:

0

Применяется к:

все элементы, и псевдоэлементы :before и :after

Наследование:

не наследуется

Тип носителя:

визуальный

Объектная модель документа (DOM):

[элемент].style[‘-webkit-transition-duration’]

Кроссбраузерная совместимость

Internet Explorer

не поддерживается

Firefox

не поддерживается

Chrome

Safari

Opera

не поддерживается

css — Что такое -moz- и -webkit-?

Что такое -moz- и -webkit-?

Свойства CSS

, начинающиеся с -webkit- , -moz- , -ms- или -o- , называются префиксами поставщиков.

Почему разные браузеры добавляют разные префиксы для одного и того же эффекта?

Хорошее объяснение префиксов поставщиков исходит от Питера-Пола Коха из QuirksMode:

Первоначально цель префиксов поставщиков заключалась в том, чтобы разрешить производителям браузеров
чтобы начать поддерживать экспериментальные объявления CSS.

Допустим, рабочая группа W3C обсуждает объявление сетки (которое,
кстати, было бы неплохо). Кроме того, скажем, что
некоторые люди создают черновик спецификации, но другие не согласны с
некоторые детали. Как мы знаем, этот процесс может занять много времени.

Допустим также, что Microsoft в качестве эксперимента решает
реализовать предложенную сетку. На данный момент Microsoft не может
будьте уверены, что спецификация не изменится.Поэтому вместо
добавляя сетку в свой CSS, он добавляет -ms-grid .

Префикс поставщика как бы говорит: «Это интерпретация Microsoft.
текущего предложения «. Таким образом, если окончательное определение сетки
другое, Microsoft может добавить новую сетку свойств CSS, не нарушая
страницы, зависящие от -ms-grid.

ОБНОВЛЕНИЕ ЗА ГОД 2016

Поскольку этому посту 3 года, важно отметить, что теперь большинство поставщиков понимают, что эти префиксы просто создают ненужный дублированный код и что ситуация, когда вам нужно указать 3 разных правила CSS, чтобы получить один эффект, работающий в весь браузер — нежелательный.

Как упоминалось в этом глоссарии о взгляде Mozilla на Vendor Prefix от 3 мая 2016 г. ,

Поставщики браузеров сейчас пытаются избавиться от префикса поставщика для экспериментальных
Особенности. Они заметили, что веб-разработчики использовали их на
производственные веб-сайты, загрязняя глобальное пространство и делая его более
аутсайдерам сложно работать хорошо.

Например, всего несколько лет назад, чтобы установить закругленный угол на коробке, нужно было написать:

  -moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10 пикселей;
-webkit-border-top-right-radius: 5 пикселей;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5 пикселей;
радиус границы: 10 пикселей 5 пикселей;
  

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

  радиус границы: 10px 5px;
  

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

Поскольку до сих пор нет стандарта для общих правил CSS, которые работают во всех браузерах, вы можете использовать такие инструменты, как caniuse.com, чтобы проверить поддержку правила во всех основных браузерах.

Вы также можете использовать pleeease.io/play. Pleeease — это приложение Node.js, которое легко обрабатывает ваш CSS. Он упрощает использование препроцессоров и объединяет их с лучшими постпроцессорами. Он помогает создавать чистые таблицы стилей, поддерживает старые браузеры и обеспечивает лучшую ремонтопригодность.

Ввод:

  a {
  количество столбцов: 3;
  столбец-пробел: 10 пикселей;
  заполнение столбца: авто;
}
  

Выход:

  a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          количество столбцов: 3;
  -webkit-столбец-пробел: 10 пикселей;
     -moz-column-gap: 10 пикселей;
          столбец-пробел: 10 пикселей;
  -webkit-column-fill: авто;
     -moz-column-fill: авто;
          заполнение столбца: авто;
}
  

Вопрос читателя: Что такое -webkit- и -moz-?

Недавно мы получили вопрос от Джека, читателя Head First HTML5 Programming, о CSS, используемом в примере в главе 3.В этом примере мы создаем веб-приложение, которое создает список воспроизведения из песен, которые пользователь вводит в поле формы на веб-странице, и, конечно же, мы используем JavaScript для динамического обновления страницы. Джеку интересно, как работает CSS для примера:

Хотя кажется, что CSS обрабатывается нормально, моей IDE, похоже, он не нравится. Я использую Intellij IDEA (Java IDE), которая поддерживает HTML и JavaScript. Я также использую текущие версии Firefox и Safari (Mac OS / X, Lion 10.7.2). Конечно, я сейчас только в главе 3, поэтому понятия не имею, что такое -webkit или -moz. Нужно ли мне включать что-то еще в свой проект?

Дело в том, что IDE Джека, Intellij, не распознает новое свойство CSS3 border-radius или версии этого свойства для конкретных браузеров. Вот пример CSS, который мы используем в этом примере:

 ul # playlist {
    граница: 1px solid # a9a9a9;
    -webkit-border-radius: 5 пикселей;
    -moz-border-radius: 5 пикселей;
    радиус границы: 5 пикселей;
    маржа сверху: 10 пикселей;
    отступ: 0 пикселей;
    тип-стиль-список: нет;
}
 

На самом деле мы никогда не объясняем -webkit- и -moz- (и другие специфичные для браузера свойства CSS) в Head First HTML5 Programming, поскольку мы почти полностью сосредоточены на API JavaScript и вернемся к обновлению нашего Head First Книга HTML и CSS для обновления в CSS.

Некоторые из новых свойств CSS3 еще не завершены (CSS3 все еще находится в стадии разработки), и многие браузеры реализовали ранние версии этих новых идей и используют префикс -name- (например, -webkit-, -moz -, -o- и -ms-) как способ сказать: «Это идея Mozilla или Webkit о том, каким должно быть свойство, но это еще не высечено на камне». Итак, чтобы ваш CSS работал в нескольких браузерах, вы должны предоставить , все версии для конкретных браузеров, плюс версию, которая, по нашему мнению, в конечном итоге будет завершена в стандарте!

Уф.

Итак, новое свойство, такое как border-radius , имеет версию Webkit, -webkit-border-radius и версию Mozilla, -moz-border-radius и т. Д. Webkit — это движок браузера, используемый Chrome и Safari; Mozilla — это движок, используемый Firefox. -ms — для IE, а -o — для Opera. Хитрость заключается в том, чтобы указать указанные выше версии для конкретных браузеров (как мы думаем, будут) фактическое имя свойства (в порядке в правиле CSS), чтобы браузер использовал последнее распознаваемое им имя и, таким образом, переопределил более старый браузер. -специфическая реализация с новой окончательной реализацией, когда она будет завершена.

Еще не все свойства реализованы во всех браузерах, а некоторые «окончательные» (или близкие к окончательным) версии были реализованы в некоторых браузерах (например, для border-radius вместо этого можно использовать border-radius из -webkit-border-radius , и он будет работать в самой последней версии Safari и в Chrome).

В любом случае, как видите, сейчас здесь немного беспорядок, но со временем он должен проясниться. IDE Джека просто не знает об этих специфичных для браузера свойствах (или, возможно, о новом свойстве CSS вообще) и поэтому выделяет эти свойства как потенциальные проблемы.Ключевым моментом является тестирование в браузерах, а также проверка таких сайтов, как caniuse.com. Например, если вы выполните поиск по запросу «border-radius» на caniuse.com, вы увидите, что текущие версии Safari, Firefox, Chrome и Opera теперь поддерживают свойство border-radius , но несколько более старые версии IE а Safari либо его не поддерживает, либо требует имени свойства, зависящего от браузера.

В общем, с CSS, если вы хотите использовать «новое» свойство CSS3, которое может поддерживаться не всеми браузерами (особенно если вы думаете, что ваши пользователи все еще используют старые версии браузеров), вам нужно убедиться, что вы либо проверьте, поддерживает ли его браузер этого пользователя (с помощью Modernizr), и предоставьте альтернативную таблицу стилей, если нет, либо проверьте, чтобы страница выглядела нормально без этой конкретной стилистической функции.Например, если вы используете CSS для создания сложного макета, вам нужно убедиться, что браузер поддерживает свойства макета, которые вы используете, и предложить альтернативную таблицу стилей со старым макетом, если это не так. Для чего-то вроде border-radius , как правило, страница будет выглядеть нормально, если у ваших элементов нет закругленных углов, поэтому это не имеет большого значения.

Спасибо за отличный вопрос, Джек!

Что такое префиксы поставщиков CSS или браузеров и какие следует использовать? — Techstacker

Глядя на код CSS в естественных условиях, задумывались ли вы, почему некоторый код CSS имеет множество повторяющихся свойств с прикрепленными метками, такими как -webkit- , -webkit- , -moz- , -o- и -ms- ?

Они называются префиксами поставщика или, более выразительно, префиксом браузера .

Задача префикса браузера — заставить новейшие функции CSS работать в браузерах, которые еще не полностью поддерживают их.

Типичным примером является свойство перехода , которое раньше требовало для работы 4 префикса браузера:

  -webkit-transition: простота использования всех единиц;
-moz-transition: легкость на все 1с;
-ms-transition: легкость на все единицы;
-о-переход: легкость all 4s;
переход: легкость на все единицы;  

Список префиксов CSS для каждого браузера:

• Chrome, Android, Safari, iOS:

   -webkit- 

• Firefox:

   -моз- 

• Internet Explorer:

   -ms- 

• Опера:

   -o- 

Какие префиксы браузера нужны вашему сайту?

В 2020 году свойство перехода в значительной степени полностью работает в Chrome, Firefox, Edge, Opera, однако не требует префикса:

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

Проблема с префиксом быстро сокращается, но все еще существует.

Чтобы проверить, нужны ли вашему коду префиксы для поддерживаемых браузеров, перейдите на сайт Autoprefixer. Затем перейдите в Browserlist и здесь вы можете указать, сколько версий обратной совместимости вам нужно.

Браузеры постоянно развиваются и меняются. Просто посмотрите на большую разницу между выбором совместимости для последних 4 версий и последних (1) версий.

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

Caniuse.com также является отличным веб-сайтом для поиска совместимости с браузером CSS.

Что такое префиксы поставщиков CSS или браузеров?

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

KTSDESIGN / Библиотека научных фотографий / Getty Images

Происхождение префиксов поставщиков

Когда CCS3 был впервые представлен, ряд интересных свойств начал появляться в разных браузерах в разное время. Например, браузеры на базе Webkit (Safari и Chrome) первыми представили некоторые свойства стиля анимации, такие как преобразование и переход.Используя свойства с префиксом поставщика, веб-дизайнеры смогли использовать эти новые функции в своей работе и сразу увидеть их в браузерах, которые их поддерживают, вместо того, чтобы ждать, пока все остальные производители браузеров наверстают упущенное!

Общие префиксы

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

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

• Android:

   -webkit- 

• Хром:

   -webkit- 

• Firefox:

   -moz- 

• Internet Explorer:

   -ms- 

• iOS:

   -webkit- 

• Opera:

   -o- 

• Safari:

   -webkit- 

Добавление префикса

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

-webkit-transition: легкость всего 4s; 
 -моз-переход: легкость all 4s; 
 -ms-transition: легкость all 4s; 
 -o-переход: легкость all 4s; 
 transition: all 4s легкость; 
 

class = «ql-syntax»>

Помните, что некоторые браузеры имеют другой синтаксис для определенных свойств, чем другие, поэтому не думайте, что версия свойства с префиксом браузера точно такая же, как и стандартное свойство.Например, чтобы создать градиент CSS, вы используете свойство linear-gradient. Firefox, Opera и современные версии Chrome и Safari используют это свойство с соответствующим префиксом, в то время как ранние версии Chrome и Safari используют свойство с префиксом -webkit-gradient.

Кроме того, Firefox использует значения, отличные от стандартных.

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

Префиксы поставщиков не являются взломом

Когда впервые были представлены префиксы поставщиков, многие веб-профессионалы задавались вопросом, было ли это взломом или возвращением к темным временам разветвления кода веб-сайта для поддержки различных браузеров (помните, что сообщение « Этот сайт лучше всего просматривается в IE »).Однако префиксы поставщиков CSS не являются хакерскими приемами, и у вас не должно быть никаких сомнений в их использовании в своей работе.

Взлом CSS использует недостатки в реализации другого элемента или свойства, чтобы заставить другое свойство работать правильно. Например, взлом блочной модели использовал недостатки в синтаксическом анализе семейства голосов или в том, как браузеры анализируют обратную косую черту \. Но эти уловки были использованы для решения проблемы разницы между тем, как Internet Explorer 5.5 обрабатывает блочную модель и как ее интерпретирует Netscape, и не имеют ничего общего со стилем семейства голосовых.К счастью, эти два устаревших браузера — те, о которых нам не нужно беспокоиться в наши дни.

Префикс поставщика — это не взлом, потому что он позволяет спецификации устанавливать правила того, как может быть реализовано свойство, и в то же время позволяет разработчикам браузеров реализовать свойство по-другому, не нарушая всего остального. Кроме того, эти префиксы работают со свойствами CSS, которые в конечном итоге будут частью спецификации . Мы просто добавляем код, чтобы получить доступ к собственности на раннем этапе.Это еще одна причина, по которой вы завершаете правило CSS обычным свойством без префикса. Таким образом, вы можете отказаться от версий с префиксом, как только будет достигнута полная поддержка браузером.

Хотите знать, как браузер поддерживает определенную функцию? Веб-сайт CanIUse.com — прекрасный ресурс для сбора этой информации и предоставления вам информации о том, какие браузеры и какие версии этих браузеров в настоящее время поддерживают ту или иную функцию.

Префиксы поставщиков раздражают, но временны

Да, это может показаться раздражающим и повторяющимся, если придется писать свойства 2–5 раз, чтобы заставить их работать во всех браузерах, но это временная ситуация.Например, всего несколько лет назад, чтобы установить закругленный угол на коробке, вам нужно было написать:

-moz-border-radius: 10px 5px; 
 -webkit-border-top-left-radius: 10 пикселей; 
 -webkit-border-top-right-radius: 5px; 
 -webkit-border-bottom-right-radius: 10px; 
 -webkit-border-bottom-left-radius: 5px; 
 радиус границы: 10 пикселей 5 пикселей; 

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

радиус границы: 10 пикселей 5 пикселей; 

Chrome поддерживает свойство CSS3 с версии 5.0, Firefox добавил его в версии 4.0, Safari добавил его в 5.0, Opera в 10.5, iOS в 4.0 и Android в 2.1. Даже Internet Explorer 9 поддерживает его без префикса (а IE 8 и ниже не поддерживает его с префиксом или без него).

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

Прекратить писать префиксы поставщиков CSS вручную

Основные производители браузеров реализуют функции CSS с их собственной скоростью, и они использовали префиксы поставщиков для добавления экспериментальных или нестандартных свойств CSS. Ниже приводится список основных префиксов:

• -webkit- : браузеры на основе Chrome, Safari, WebKit
• -ms- : Internet Explorer, Microsoft Edge
• -o- : версии Opera до WebKit
• -moz- : Firefox

 .пример {
  -webkit-border-radius: 10 пикселей;
  -moz-border-radius: 10 пикселей;
  -ms-border-radius: 10 пикселей;
  -o-border-radius: 10 пикселей;
  радиус границы: 10 пикселей;
}  

Теоретически эти свойства с префиксом не должны использоваться в производственной среде. Но на самом деле это не работает должным образом, и вот почему:

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

Префикс от поставщика — это один из способов расширить поддержку браузером до такой степени, что эти свойства с префиксом реализованы, но не раньше любого из них.

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

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

Функциональные запросы

Ат-правило CSS @supports позволяет указывать объявления, которые зависят от поддержки браузером одной или нескольких конкретных функций CSS, известных как запросы функций.

Запросы функций связывают блок операторов с условием поддержки. Условие поддержки состоит из одной или нескольких пар имя-значение, объединенных конъюнкциями ( и ), дизъюнкциями ( или ) и / или отрицаниями (, а не ). Приоритет операторов можно указать в круглых скобках.

  @supports (отображение: сетка) {
  
}
@supports not (display: grid) {
  
}
@supports (display: grid) and (not (display: inline-grid)) {
  
}
@supports (-moz-transform-style: preserve) {
  
}  

Это направление, в котором продвигаются основные поставщики браузеров, он отлично работает, предоставляя средства для написания резервных стилей, когда что-то не поддерживается, но помните о следующих ограничениях:

• Ат-правило @support будет работать только в браузерах, поддерживающих @supports .Не забывайте писать резервный код вне функциональных запросов.
• Вам все равно нужно отслеживать, какие функции нужно проверять вручную, caniuse.com может с этим помочь. Очевидно, что это менее обыденно, чем написание префиксов, и меньше беспокоиться о новых браузерах на рынке, если они поддерживают запросы функций.
• Браузеры, не поддерживающие CSS Grid, а также запросы функций.

Автоматический префикс

Считайте, что префикс поставщика — это то, что нельзя полностью удалить даже при использовании запросов функций из-за опасений пропустить неотмеченные функции.С появлением (пре | пост) -процессоров CSS префикс поставщика может выполняться автоматически. Чтобы это решение работало, вам понадобятся следующие инструменты:

• Инструмент для определения целевых браузеров . Список браузеров — лучшее, что вы можете найти, он найдет целевые браузеры автоматически, когда вы укажете требования в .browserslistrc следующим образом:

  # поддерживаемые браузеры
значения по умолчанию
не IE 11
поддерживаемые версии узлов  

• Инструмент для автоматического префикса на основе указанных выше целевых браузеров .Autoprefixer — лучший в своем роде, плагин PostCSS использует целевые браузеры из списка браузеров и добавляет префиксы на основе данных caniuse.com. Вот пример настройки с Gulp:

  gulp.task ('autoprefixer', () => {
  const autoprefixer = require ('autoprefixer')
  const sourcemaps = require ('gulp-sourcemaps')
  const postcss = требуется ('глоток-postcss')

  ответный глоток
    .src ('./ src / *. css')
    .pipe (sourcemaps.init ())
    .pipe (postcss ([autoprefixer ()]))
    .pipe (исходные карты.написать('.'))
    .pipe (gulp.dest ('./ dest'))
})  

Помимо автоматического префикса, PostCSS может помочь с полифиллами, но очень ограничен, когда новые функции CSS требуют реализации JavaScript на стороне клиента.

Совместимость с CSS3 и префиксы поставщиков

Совместимость с CSS3 и префиксы поставщиков | Comm244 Заметки

Вернуться на страницу 6 недели »

Как вы, возможно, уже поняли, CSS (а также HTML и JavaScript) является движущейся целью, и новые функции и спецификации постоянно вводятся и уточняются.Этот процесс обычно включает в себя множество компромиссов с сообществом веб-разработчиков, организациями по стандартизации (такими как W3C) и разработчиками браузеров.

Новые свойства часто существуют в течение некоторого времени, прежде чем их можно будет надежно использовать на производственных объектах. Это происходит по разным причинам:

• Различные браузеры реализуют поддержку в разное время
• Браузеры могут поддерживать одни части спецификации раньше других
• Разработчики браузеров могут по-разному интерпретировать спецификацию
• Некоторые спецификации начинаются с новых функций, реализованных в браузере
• В более старой версии браузера не будет обновлений функций для поддержки новых спецификаций

Чтобы разрешить использование спецификации CSS, которая не полностью реализована в браузере или на ранней стадии реализации, мы используем так называемые префиксы поставщика CSS.

Проверка совместимости

До сих пор большая часть изученного вами CSS полностью поддерживается во всех браузерах. Для более новых свойств из CSS3 и более поздних версий это не всегда так.

Важно проверить совместимость свойства, чтобы знать, следует ли его использовать. Вы должны учитывать следующее:

• Важна ли эта функция для работы моего веб-сайта / приложения или это визуальное улучшение?
• Какие браузеры не поддерживают эту функцию?
• Могу ли я предоставить разумный запасной вариант?
• Определите «точку излома» для элемента.Как далеко должна уходить поддержка?

В Интернете есть много ресурсов, которые собирают информацию о совместимости браузеров. Иногда трудно сказать, насколько свежая информация. Очень важно получать актуальную информацию. Один из лучших ресурсов — Могу ли я использовать ____?

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

Префиксы поставщиков CSS

Процесс введения новых свойств CSS и элементов HTML может быть долгим и запутанным. Иногда изменения предлагаются комитетами по стандартам (например, W3C), а иногда производители браузеров создают свои собственные свойства.

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

Поставщикам браузеров

требовался способ добавить поддержку новых функций, которые еще не были стандартизованы, но без нарушения последующих изменений или создания несовместимых. Для решения этой проблемы было создано префиксов поставщика . Префиксы поставщика — это специальный префикс, добавляемый к свойству CSS.У каждого механизма рендеринга есть собственный префикс, который будет применять свойство только к этому конкретному браузеру.

Префиксы продавцов в 2017 году

Намного менее необходим, но все же используется.

Примечание. И Chrome, и Opera теперь используют разветвленную версию webkit под названием Blink в качестве механизма рендеринга.Они будут продолжать использовать префикс -webkit на данный момент, но в будущем не будут использовать префиксы вообще и потребуют включения «экспериментальных» функций с помощью настройки предпочтений. Firefox будет делать то же самое.

Пример префикса поставщика

Префиксы поставщиков лучше всего понять на примере. В CSS вы можете создавать закругленные углы, используя свойство border-radius. Вот это в простейшей форме:

 . Окр. {
   радиус границы: 10 пикселей;
}  

Все четыре угла скруглены на 10 пикселей.Сегодня border-radius достаточно поддерживается, поэтому префиксы поставщика не нужны. Однако всего несколько лет назад вам нужно было использовать префиксы поставщиков для обеспечения поддержки. Вы бы написали это:

 . Окр. {
   -moz-border-radius: 10 пикселей; / * поддержка Firefox * /
   -webkit-border-radius: 10 пикселей; / * поддержка браузеров на основе webkit (Chrome, Safari, iOS и т. д.) * /
   -o-border-radius: 10 пикселей; / * поддержка Opera * /
   радиус границы: 10 пикселей; / * стандартизованное свойство * /
}

/ * Только пример.Вам не нужно использовать префиксы поставщиков для border-radius * /  

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

Дополнительная информация

Вернуться на страницу 6 недели »

Приставка поставщика мертва? | CSS-уловки

Давайте быстро пройдемся по переулку памяти и вернемся к тому, как появились префиксы CSS-свойств поставщиками.Надеюсь, я ни у кого не провоцирую посттравматическое стрессовое расстройство!

Непонятно, кто начал префикс и когда именно. Что ясно, так это то, что к 2006 году префиксные функции были в Internet Explorer и Firefox. raison d’être префиксов заключался в том, чтобы указать специфические для браузера функции. Это рассматривалось как способ реализовать нестандартные функции и предложить предварительные просмотры новых стандартных функций.

К 2012 году рабочая группа W3C CSS выпустила руководство по использованию префиксов поставщиков:

В CSS мы используем префиксы поставщиков для свойств, значений, @ -правил, а именно: — специфические расширения поставщика (согласно CSS 2.1) или — экспериментальные реализации (согласно CSS Snapshot 2010) (например, в рабочих черновиках)

Это стало отраслевой нормой. Количество префиксов росло, и с этим все становилось запутанным. Это привело к частичной реализации функций CSS, внесению ошибок и, в конечном итоге, к трещине в экосистеме браузера, что вызвало недовольство разработчиков. В ответ разработчики создали инструменты для автоматизации проблемы.

Производители браузеров постепенно начали отходить от префиксов, отдавая предпочтение флажкам функций внутри настроек браузера.Оказалось, что проблемы, создаваемые приставками вендоров, со временем исчезнут. Возникает вопрос: это время еще не наступило?

Я провел некоторый анализ набора данных caniuse и набора данных Mozilla Developer Network Compat, чтобы ответить на этот вопрос.

Тенденции внедрения

На диаграмме выше вы можете увидеть тенденцию реализации префиксных функций в основных браузерах. Я исключил Chrome для Android из-за недостатка данных.

С 2007 по 2011 год количество префиксных функций во всех браузерах неуклонно росло.Рост Internet Explorer наблюдался только в 2011 году. Затем, в 2012 году, Mozilla начала удалять из Firefox префиксные функции, такие как -moz-border-radius * и -moz-box-shadow . После этого они последовательно удаляли свойства с префиксом, как только стандартная версия этого свойства была полностью реализована.

В 2013 году Mozilla начала делать функции доступными за флагами функций (pref flags). В том же году Chrome переключил свой движок рендеринга с WebKit на Blink (часть проекта Chromium).Это был большой поворотный момент в удалении некоторых префиксных функций.

Только в апреле 2016 года WebKit объявил, что больше не будет выпускать экспериментальные функции с префиксами:

Со временем оказалось, что эта стратегия перестала работать. Многие веб-сайты стали зависеть от свойств с префиксом. Они часто использовали каждый вариант функции с префиксом, что делает CSS менее удобным в обслуживании и затрудняет написание программ на JavaScript. Сайты часто использовали только версию функции с префиксом, из-за чего браузерам было трудно отказаться от поддержки варианта с префиксом при добавлении поддержки стандартной версии без префикса.В конечном итоге браузеры столкнулись с необходимостью реализации префиксов друг друга из-за соображений совместимости.

Поскольку браузеры Safari и iOS всегда использовали механизм рендеринга WebKit, в этих браузерах позднее произошло последовательное сокращение количества префиксов.

Microsoft никогда не зацикливалась на префиксе и всегда имела наименьшее количество префиксов. В 2019 году Edge перешел с собственного движка рендеринга на Blink. Забавно, но это изменение фактически увеличило количество свойств с префиксом в Edge!

Тенденции в функциях

В приведенной ниже таблице сравниваются префиксные функции в 2013 году (зенит префиксов) с 2021 годом.

Может быть удивительно видеть необработанные числа. Количество функций, требующих префикса, упало примерно на 33% в период с 2013 по 2021 год . Мне эта цифра кажется довольно скромной.

Конечно, фокусирование только на числах может ввести в заблуждение. Воздействие варьируется. Это может быть семейство свойств, требующих префикса, например animation ; или это может быть функция, имеющая только одно свойство или значение, требующее префикса, например user-select: none .Давайте исследуем реальные особенности, чтобы лучше понять обстоятельства, начав с того, что изменилось за этот промежуточный период.

Двадцать функций были без префикса (полностью реализованы в основных браузерах) и были введены три функции с префиксом ( фоновый фильтр , CSS с ориентацией текста и начальная буква CSS ).

На мой взгляд, наиболее заметными функциями, которые сейчас не имеют префикса и которые были значительными болевыми точками, являются:

1. : любая ссылка
2. :: заполнитель
3. :: выбор
4. : видимый фокус
5. : is ()
6. 000: только чтение

: только чтение

чтение-запись

7. font-feature-settings
8. text-align-last
9. Writing-mode
10. CSS grab и grabbing cursors
11. CSS Logical Properties (будут использоваться намного больше в будущем, теперь эта поддержка лучше)
12. CSS3 увеличение и уменьшение курсоры
13. CSS3 Multiple Column Layout

Если вы решите не поддерживать Internet Explorer 11 в 2021 году, то дополнительные семь функций больше не требуют префикса.Это сокращает количество функций, требующих префикса в 2021 году, до 28, что на 46% меньше, чем в 2013 году.

Префикс в 2021 году

Давайте посмотрим на свойства, требующие префикса. Пестрая группа!

После того, как я составил этот список, у меня сложилось впечатление, что это не те вещи, с которыми я буду сталкиваться очень часто. Некоторые свойства не были - и, вероятно, не будут - реализованы полностью.Я бы сказал, что функция element () и CSS Canvas Drawings попадают в эту категорию. Safari недавно удалил префикс для позиции : липкий , так что он, скорее всего, скоро исчезнет из списка.

Вы можете отсеять список и уклониться от определенных ситуаций, если хотите. Вы можете отклонить это и сказать, что это не важно, так зачем беспокоиться? Реальность такова, что список все еще достаточно длинный, поэтому ручное управление префиксами в коде - не то, чем вы хотите заниматься.Уместный вопрос, на который нужно ответить: хотите ли вы улучшить кроссбраузерность до высокого уровня? Если да, то вам следует рассматривать это как часть ваших усилий по разработке.

Также важно помнить, что речь идет не только об этих свойствах и текущих браузерах. Все еще есть люди, использующие старые устройства со старыми браузерами, которые не поддерживают версии без префиксов некоторых функций. Возьмем, к примеру, свойство animation . Chrome был последним браузером, лишившим его префикса в 2015 году.Тем не менее, сегодня 1,3% пользователей во всем мире все еще используют браузер, который не поддерживает версию без префикса.

Недавно я столкнулся с парой ситуаций, когда требовались свойства с префиксом. Например, я делал индикатор выполнения чтения для блога, и мне нужно было использовать -webkit-appearance: none; и -моз-внешний вид: нет; , чтобы сбросить стиль по умолчанию для элемента progress . Также требовалось закрепленное позиционирование, поэтому мне пришлось поставить префикс position: sticky , чтобы поддерживать липкое позиционирование в Safari.

Другой пример? Я хотел использовать изображение PNG в качестве изображения маски для дизайна на рождественскую тему и обнаружил, что -webkit-mask-image - единственное свойство, которое работает правильно. Маскирование обычно немного неустойчиво, потому что большинство браузеров лишь частично поддерживают спецификацию.

Вот еще один: Флавио Коупс в статье «Как применить отступы к нескольким строкам в CSS» писал о том, что он хотел иметь одинаковые отступы в каждой строке многострочного заголовка. Решением было использовать box-decoration-break: clone .Большинству браузеров требуется версия этого свойства с префиксом -webkit , поэтому вам необходимо ее использовать.

Инструменты

Некоторые инструменты, которые были созданы для решения проблем с префиксом и поддержкой браузеров, ушли на второй план. Я бы рекомендовал сначала проверить, обновлен ли инструмент, прежде чем использовать его.

Конечно, Autoprefixer (плагин PostCSS) поддерживается и использует данные прямо из caniuse, чтобы оставаться в курсе.

Emmet также имеет отличные возможности префикса.В частности, он имеет предпочтение css.autoInsertVendorPrefixes для автоматической вставки префиксов за вас. Я не проверил, актуален он или нет, но его стоит рассмотреть как часть вашей среды разработки.

Поскольку большинство редакторов кода поддерживают Emmet, это значительно упрощает редактирование свойств с префиксом. У Эммета есть команда CSS . Отражение значения , которая обновляет значение всех версий с префиксом одного и того же свойства в правиле. Вы можете прочитать документацию Emmet для получения дополнительной информации о возможностях префикса.

Заключение

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

Однако вы можете столкнуться со сценариями, в которых время от времени все еще требуются префиксы. И если вы хотите поддерживать как можно больше браузеров, вам следует продолжить стратегию автоматического префикса.

.