2021-02-03 18:00:20
Префикс — можно перевести как «приставка».
Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -webkit, -moz, -ms.
Эти слова являются префиксами следующих браузеров:
-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer.
То есть, если вы видите перед свойством один из этих префиксов, это означает, что это свойство будет работать только в указанном браузере. Все остальные браузеры данное свойство будут игнорировать.
Для появления префиксов было несколько причин:
— Для кроссбраузерности
— Для создания CSS-свойств, которые не входят в стандарт
— Для включения в браузер экспериментальных свойств, которые могут быть или уже есть, но ещё никем не внедрены в браузер, в стандарте. После проведение эксперимента браузерные вендоры предлагают свои свойства в стандарт.
Префиксы могут быть как у свойств, так и у значений:
display: -ms-grid;
display: grid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Упоминание префикса говорит о том, в каком браузерном движке оно будет применено: webkit, gecko(-moz), trident(-ms).
Для правильного применения свойств с префиксами сначала нужно указать свойство с префиксом, а после без префикса:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Всё дело в том, что браузер применяет свойства сверху вниз. Если браузер понимает свойство с префиксом и без, то применится, то последнее в списке.
Не занимайтесь добавлением префиксов вручную. Для этого есть онлайн-сервис или есть пакеты для автоматизации: для gulp и webpack.
Укажите в настройках браузеры, которые поддерживаются в вашем проекте с помощью Browserlist. В этом случае будут подставляться только нужные префиксы, а не все возможные.
#неглупые_вопросы
2.9K viewsedited 15:00
H
