Webkit css что это

CSS — Префиксы браузеров

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

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

-webkit- : браузеры Chrome, Safari, Opera;
-moz- : браузер Mozilla Firefox;
-ms- : браузер Internet Explorer.

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

Причины появления префиксов

Причин для появления префиксов было достаточно много:

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

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

Как использовать префиксы

Рассмотрим в качестве примере следующий код:

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

Применение свойств CSS к элементам веб-страницы в браузере Google Chrome

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

Как проверить поддержку определенного свойства в браузере

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

Например: проверим, как реализовано свойство transform в браузерах.

Проверка реализации свойства transform в разных браузерах

На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

Использование нестандартных и экспериментальных свойств CSS

Admin 16.09.2017 CSS, HTML

Современные модные шаблоны для сайтов напичканы различными футуристическими штуками. Их авторы добавляют в файл CSS всякие -webkit и -moz через строчку другую. Зачем это нужно в этой статье.

Современный браузер включает в себя помимо пользовательского интерфейса многочисленные компонетны обработки веб-страниц и вывод их содержимого (html, css, php, JavaScript и т.д). За каждый из них отвечают отдельные модули.

Например, от качества движка JavaScript или движка для отображения веб-страниц (webkit, Gecko, Trident) — зависит скорость отображения веб-содержимого. И каждый браузер (Safari, Chrome, Firefox, Opera, Internet Explorer, Яндекс браузер и т.д.) использует в своей программе разный набор движков.

Все эти webkit, moz, ms, o — относятся к движкам отображения содержимого HTML и CSS. Например, параметр webkit отвечает за то, что данное свойство CSS будет работать именно в браузерах, которые использует этот движок.

Движок webkit используют одновременно два популярных браузера Chrome и Safari. Поэтому указав в свойствах -webkit оно будет понятно сразу обоим этим браузерам.

Надо сделать небольшую ремарку, что Google со своим Chrome, с определенной версии перешел с движка Webkit на Blink, который является ответвлением от Webkit.

-moz — Mozilla Firefox (движок Gecko)

Параметр -o – относится к Opera (раньше работал на движке Presto, сейчас на Blink)

-ms — это Microsoft Internet Explorer (использует движок Trident).

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

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

Указывают ещё и:

Однако на самом деле все эти мозы и вебкиты – это всё не нужные элементы на сайте. Надо верстать сайт так, чтобы не приходилось их использовать. К тому же многие параметры уже перестали быть экспериментальными и давно работают в обычном режиме. А верстальщики всё равно, так на всякий случай, их добавляют к стилям CSS.

Почему плохо использовать -moz, -ms, -webkit и прочее

Я очень часто вижу на сайтах свойства для какого-то конкретного браузера. Например, свойство «-moz-border-left-colors«, указывающее цвет левой рамки у элемента для Firefox. Давайте с Вами разберём, почему этого делать не стоит, а также укажу лишь единственный случай, когда -moz, -ms, -webkit и аналоги использовать можно.

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

Лучше разобрать причины того, зачем используют эти свойства. А причины тут две:

Отсутствие кроссбраузерности. Я могу смело сказать, что проблема кроссбраузерности уже в прошлом. Осталась только проблема некачественной вёрстки. Все современные браузеры адекватно всё обрабатывают. Минимальные недоразумения (например, border-radius у input в Opera) легко решаются альтернативным подходом к задаче, когда все браузеры хорошо отобразят страницу без всяких «хаков«. И данная проблема не является поводом использования «левых» свойств.
Поддержка более старых браузеров. Причём именно «более«, а не просто старых. В старых браузерах этих свойств и в помине не было. Чтобы понять бессмысленность этого, стоит посмотреть статистику браузеров. Где-то 95% аудитории идёт по современным браузерам. Оставшиеся 5% пользуются непонятно чем. Портя код, Вы получите хороший вид ещё от силы на 1% браузеров. Поэтому сейчас лучше либо выводить сообщение о том, что стоит сменить браузер (у jQuery есть плагин jReject, который это делает), либо просто игнорировать. Более того, я сильно сомневаюсь, что среди этих 5% много людей, скорее всего, большинство там — это боты, которые отдают произвольные заголовки о клиенте. И старые боты могут отдавать тот же IE6. Так же сюда входят те, кто по-прежнему тестирует свои сайты в старых браузерах.

Поэтому используйте CSS3, там все возможности уже есть, и его смогут увидеть как раз 95% аудитории.

Однако, я пообещал сказать, когда свойства -moz, -ms, -webkit и прочие, можно использовать. Это нужно, если Вы хотите сделать, немного разный дизайн для разных браузеров. Причём именно «немного«, а если нужно полностью менять всё, то проще через JavaScript определить браузер и подключить отдельный файл стилей. Скажу честно, я с такой задачей не сталкивался, но это единственное, что мне пришло в голову, дабы хоть как-то оправдать «лишние» свойства CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 1 ):

Не использовать вендорные префиксы? Очень глубокомысленный совет профессионала. А как же быть тогда со свойствами, которые без упомянутых префиксов ни в каких версиях определенных бразеров не работают? Например, свойство transform без префикса -webkit не будут работать в Chrome, Safari, Android, iOS и Яндекс браузере. Не спорю, что вендорные префиксы не есть хорошо, и по поводу путей решения данной проблемы ведется множество дискуссий. Но я нигде еще не встречал предложения отказаться от них, пока они поддерживаются браузерами.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.