Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Вендорные префиксы — добро или зло? Категория: Веб-мастерство
Название: Вендорные префиксы — добро или зло?
Дата добавления: 17-06-2012
Раз просмотрено: 610
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Вендорные префиксы — добро или зло?

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

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

Проблемы вендорных префиксов

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

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#999));
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: -moz-linear-gradient(top, #444, #999);
background-image: -ms-linear-gradient(top, #444, #999);
background-image: -o-linear-gradient(top, #444, #999);
background-image: linear-gradient(to bottom, #444, #999);

Это пять свойств с вендорными префиксами, и одно фактически «реальное» CSS3 свойство для браузеров, которые вышли из «экспериментальной фазы». Стоит отметить, что во фрагменте кода выше, только для движка WebKit используется два свойства с вендорными префиксами! Это произошло из-за изменений в экспериментальном функционале, который разрабатывают Chrome и Safari, и, таким образом, так как все версии, которые могут отобразить градиент еще в поддержке, нужно использовать и старые, и новые версии свойств. Такая совместимость может привести к большим осложнениям.

Мало того, что код визуально выглядит грязным, но если цвета в градиенте нужно будет изменить, то нужно поменять двенадцать значений! Важно помнить, что если бы вендорные префиксы не были использованы и браузеры реализовали экспериментальную поддержку, было бы еще хуже (представьте, что Chrome бы взял параметры в обратном порядке в отличии от Firefox). И на самом деле ли необходимо включать в код все эти строки только для градиента?

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

Ситуация с вендорными префиксами представляет собой огромный беспорядок. А если разработчики сайтов еще и ленивы (не включают другие префиксы или не обеспечивают резервные решения для продвинутых свойств), но определено существует проблема.

Решения

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

Lea Verou написала интересный JavaScript сниппет, который называется называется -prefix-free (его можно скачать здесь). Он добавляет вендорные префиксы к тем свойствам, где они нужны, но отсутствуют. Стоит отметить, что Lea Verou также предложила ряд интересных решений проблемы вендорных префиксов в целом.

-prefix-free

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

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

Это интересно: «Вендорные префиксы — добро или зло?».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.