0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

Как работают браузерные префиксы

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

– moz-border-radius: 10px; border-radius: 10px;

Webkit (движок, используемый в браузерах Chrome, Safari, и в Safari для мобильных

Статья в тему:  Файл apk чем открыть. Как открыть APK файл на компьютере

устройств) и Gecko (движок браузера Firefox) поддерживают свойство border-radius посредством собственных префиксных свойств; Opera поддерживает это свойство без префикса. IE9 также будет поддерживать border-radius без браузерного префикса.

На момент подготовки издания (август 2012 года) все упомянутые браузеры поддерживают свойство border-radius без префикса, в том числе и IE9.Прим. ред.

CSS3: жизнь без префиксов

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

Проблема очевидна. Нужен способ облегчить работу с префиксами.

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

1. Препроцессоры

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

Самые известные препроцессоры CSS это LESS и SASS.

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

Статья в тему:  Что значит в контакте ограничил доступ к своей странице


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

Миксин
.border-radius( @radius: 3px ) <
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
>

Использование
#shape1 <
.border-radius(10px);
>

Для того, чтобы работать с префиксами, нужно использовать миксины (тот самый код, который знает что и где заменять). Существуют готовые наборы миксинов и библиотеки для CSS3
lesselements.com
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes
roel.vanhintum.eu/more-less

Не обязательно компилировать файлы .less на сервере или в браузере, можно локально получить готовый файл CSS и уже его использовать на сайте
SimpLESS — приложение, которое автоматически компилирует .less в стандартный CSS. Бесплатно для всех платформ.
Less App — аналогичное приложение, но только для Мака.

Есть даже расширение для Дримвивера, компилирующее файлы .less в CSS.


Компьютер-клиент получает файлы .less и .js, после обработки в браузере имеем файл .css со всеми возможными префиксами


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

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

Статья в тему:  Спутниковый сигнал - Всё о сигнале со спутника

Есть и библиотеки миксинов CSS3 для SASS:
github.com/thoughtbot/bourbon


На сервер происходит обработка файлов SASS, компьютер-клиент получает уже готовый файл .css

Достоинства препроцессоров:
+ Кроме префиксов, можно делать куда больше вещей
+ Возможность автоматически обрабатывать файл CSS (например, сжимать, удаляя лишнее)
+ Нормальное кэширование (правда, LESS кэшируется с помощью localStorage)

Недостатки препроцессоров:
– Для варианта с javascript — зависимость от включенных скриптов в браузере
– Генерируется код со всеми возможными префиксами, не только теми, которые нужны конкретному браузеру

Еще конкуренты

  • CSS Agent на ASP.NET
  • Stylus (имеет CSS3 расширение Nib)
  • Turbine
  • CSS Crush
  • eCSStender

2. -Prefix-free


-Prefix-free — это скрипт, который нужно подключать к своим страницам. В отличие от препроцессоров, обрабатывает обычный файл CSS, то есть в коде нет переменных или миксинов, а самый обычный CSS-код, только без вендорных префиксов.

Обработка страниц стилей происходит с помощью Javascript.

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


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

Достоинства:
+ Автор файла стилей использует только один вариант свойств, без префиксов
+ Браузер пользователя не получает стили с «чужими» префиксами или префиксами, которые уже устарели
+ Валидный код
+ Можно удалить безболезненно, когда исчезнет в нем необходимость

Недостатки:
– Не обрабатываются стили, подключенные через import
– После загрузки сайта и перед полной обработкой CSS3-стилей возникает едва заметная пауза
– При отключенном Javascript пользователь не увидит некоторые CSS3-стили
– Дополнительный файл для загрузки (правда, всего 2KB в сжатом виде)
– Обработанный файл стилей не кэшируется

Статья в тему:  Как узнать контроллер и память на флешке

3. Генераторы

Этот способ уже используется многими. Просто открываем один из онлайн-генераторов и копируем оттуда готовый код с префиксами.

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

  • prefixr.com Можно выбрать браузеры, для которых используются префиксы, можно сжимать код, использовать переменные, имеет плагины для редакторов кода
  • prefixmycss.com
  • cssprefixer.appspot.com Тут генератор работает как демонстрация возможностей серверного скрипта, доступного для бесплатного использования
  • imsky.github.com/cssFx Этот генератор демонстрирует возможности скрипта на javascript, доступного для бесплатного использования


Загружаем на сервер файл с подготовленным вручную файловм .css со всеми префиксами

Достоинства:
+ Ничего не нужно устанавливать и настраивать
+ Часто генератор дает возможность удобной настройки значений для свойств CSS3

Недостатки:
– Нет автоматизации при создании и последующем изменении значений свойств CSS3

4. Редакторы кода

Ну и наверняка существует возможность автоматизации подстановки префиксов для редакторов кода и сред программирования. Иметь под рукой Zen Coding для префиксов было бы очень удобно.

На данный момент удалось найти плагины, использующие Prefixr:

На этой странице перечислены плагины для Notepad++, TextMate, Espresso, Coda и некоторых других.
Prefixr для NetBeans

UPD For those of you who don’t speak Russian this article in English.

1 ответ 1

Процитирую фрагмент из книги Леа Веру «Секреты CSS. Идеальные решения ежедневных задач».

Статья в тему:  Лучшее литье. Какие диски лучше стальные или легкосплавные

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

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

За прошедшие годы было предложено множество вариантов выхода из этой непростой ситуации, но все они далеки от идеала. Повсеместно презираемые браузерные префиксы — один из них. Идея заключалась в том, что для каждого браузера могут быть реализованы экспериментальные (или даже патентованные) возможности, к названиям которых необходимо добавлять специальный префикс. Наиболее распространенные префиксы — это -moz- для Firefox, -ms- для IE, -o- для Opera и -webkit- для Safari и Chrome. Разработчикам предлагалось свободно экспериментировать с этими специальными возможностями и делиться своими впечатлениями с рабочей группой. Рабочая группа, в свою очередь, должна была учитывать обратную связь от разработчиков при подготовке спецификаций, постепенно доводя соответствующую функциональность до совершенства. Так как у финальной, стандартизированной версии должно было быть другое название (без префикса), ее добавление не должно было порождать коллизии в продуктах, использующих уже существующие, обремененные префиксом эквиваленты.

Статья в тему:  Программы для приема тв. Все тв каналы россии

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

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

Среди этих объявлений два избыточны: -ms-border-radius и -o-border-radius никогда ни в каком браузере не существовали, так как в IE и Opera с самого начала было реализовано свойство border-radius безо всякого префикса. Очевидно, что повторять каждое объявление до пяти раз невероятно утомительно, а результирующий код не приспособлен для нормальной поддержки. Появление инструментов, которые автоматизировали бы это, было исключительно вопросом времени:

Статья в тему:  Как настроить защиту системы в windows 7

на таких веб-сайтах, как CSS3, Please! (http://css3please.com) и pleeease (http:// pleeease.io/playground.html), вы можете вставить CSS-код без префиксов и получить обратно CSS со всеми необходимыми префиксами. Подобные приложения стали одними из первых реализаций автоматического добавления браузерных префиксов, но быстро растеряли свою популярность, так как по сравнению с другими решениями довольно неудобны в использовании;

Autoprefixer (http://github.com/ai/autoprefixer) использует базу данных из Can I Use… (http://caniuse.com) для определения, какие префиксы необходимо добавить к коду без браузерных префиксов, и компилирует его локально, как препроцессор;

моя собственная утилита -prefix-free (http://leaverou.github.io/prefixfree) выполняет тестирование возможностей в браузере, определяя, какие префиксы требуются. Ее преимущество в том, что она крайне редко требует обновления, так как получает всю необходимую информацию, включая список свойств, из окружения браузера;

такие препроцессоры, как LESS (http://lesscss.org) и Sass (http://sass-lang.com), не предлагают стандартной функциональности добавления префиксов, но многие разработчики создают собственные подборки для возможностей, с которыми они чаще всего используют браузерные префиксы, и в обращении можно найти несколько подобных библиотек.

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

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

Статья в тему:  Как поставить ударение в Word? Как поставить ударение в ворде

Личное мнение:

Не добавляйте бреузерные префиксы без веской на то причины. Просто погуглите новое для вас свойство на предмет поддержки браузеров. Слишком часто вижу добавление префиксов, которые нужны были в очень старых браузерах, которые вряд ли кто-то поддерживает (к примеру, которые нужны были в самых первых версиях Firefox или Chrome) на том же StackOverflow.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector