Что такое align в html. Свойства CSS для оформления текста HTML (vertical-align, text-align, text-indent и другие). Выравнивание текста с помощью CSS
6 февраля 2012 в 14:14CSS3: жизнь без префиксов
- Разработка веб-сайтов
Префиксы вещь хорошая. Они помогают производителям браузеров в реализации новых возможностей. Но жизнь разработчиков от них становится только сложнее. Префиксов много, иногда наблюдаются различия в синтаксисе.
Проблема очевидна. Нужен способ облегчить работу с префиксами.
Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
1. Препроцессоры
Суть препроцессоров в том, что автор файла стилей может использовать дополнительные возможности, которых нет в CSS, вроде переменных, подобия функций и много чего еще, изучив предварительно синтаксис препроцессора, а препроцессор уже создаст нормальный файл стилей, заменив переменные и прочий код на статичные значения. Возможность замены кода можно использовать и для того, чтобы автоматически генерировать кроссбраузерный код с префиксами.Самые известные препроцессоры CSS это LESS и SASS .
Они являются прямыми конкурентами, хотя разница между ними есть. Оба могут использовать на стороне сервера, но LESS еще и доступен в виде javascript-файла, поэтому можно на эту особенность обратить отдельное внимание.
LESS
Этот препроцессор обладает синтаксисом, который проще, чем у конкурента. Существует возможность обрабатывать файлы стилей на стороне сервера, но нас интересует сейчас вариант работы на стороне клиента через файл 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 - аналогичное приложение, но только для Мака.
На сервер происходит обработка файлов SASS, компьютер-клиент получает уже готовый файл.css
Достоинства препроцессоров:
+ Кроме префиксов, можно делать куда больше вещей
+ Возможность автоматически обрабатывать файл CSS (например, сжимать, удаляя лишнее)
+ Нормальное кэширование (правда, LESS кэшируется с помощью localStorage)
Недостатки препроцессоров:
– Для варианта с javascript - зависимость от включенных скриптов в браузере
– Генерируется код со всеми возможными префиксами, не только теми, которые нужны конкретному браузеру
3. Генераторы
Этот способ уже используется многими. Просто открываем и копируем оттуда готовый код с префиксами.Недавно я попробовал поискать генератор, который бы автоматически добавлял свойства с префиксами к написанному мной стандартному свойству. Оказалось, что есть несколько вариантов.
Браузерные префиксы CSS
Когда разработчики браузера внедряют новое свойство, значение или селектор, еще
не перешедшее в статус Candidate Recommendation (Кандидат в рекомендации), они
добавляют в начале свойства префикс с кодом механизма рендеринга. Например,
Moz-border-radius — это версия свойства border-radius, которая в настоящее
время используется в браузерах на базе Mozilla, таких как Firefox. В табл. 1.4 при-
веден список всех доступных префиксов.
Таблица 1.4. Браузерные префиксы свойств CSS
* В механизме рендеринга Presto свойства, связанные с речью, предваряются пре-
фиксом -xv-, а не -o-.
В этой книге мы будем использовать префиксы -moz-, -o- и -webkit-. Прочие не
так широко используются и не потребуются для рассматриваемых методов.
Зачем они нужны
Уникальные для производителей префиксы позволяют разработчикам испытывать
новые свойства, значения и селекторы до того, как соответствующие спецификации
будут завершены, — это отличный способ протестировать их «в полевых условиях»,
понять, требуют ли они корректировки и доработки. Если бы разработчики сразу
начали использовать стандартные свойства, не дополненные префиксами, им при-
шлось бы ограничиваться исключительно поведением, предусмотренным для этих
свойств первоначально.
В таком случае, продолжая применять стандартные свойства, разработчики ожидали
бы, что их поведение останется единообразным и предсказуемым. Если через какое-
то время создатели браузеров поменяют то или иное свойство — например, из-за
ошибок в первоначальной реализации или изменений самой спецификации — это
поставит под угрозу целостность всех существующих сайтов, на которых данное
свойство уже используется. Получается, что не только разработчики оказываются
в плену у первой несовершенной реализации — пример с них приходится брать
и создателям всех браузеров, и даже самому консорциуму W3C. Эрик Мейер (Eric
Meyer) в своей превосходной статье «Prefix or Posthack» приводит два примера такого
неудачного развития событий, взятых из реальной жизни (http://www.alistapart.
com/articles/prefix-or-posthack).
Но даже если создатели одного браузера не меняют реализацию свойств, чтобы не сло-
мать существующие сайты, это может сделать W3C. Что произойдет, если создатели
остальных браузеров станут применять новое поведение, описанное в обновленной
спецификации? В разных браузерах одно и то же стандартное свойство будет ото-
бражаться по-разному. Именно так обстояли дела во времена Netscape 4, Mac IE 5 и
Windows IE 6. Число сложных и нестабильных исправлений посторонних ошибок,
совершенно не связанных со свойствами, первоначально требовавшими коррек-
тировки, быстро увеличивалось, потому что нестандартное поведение браузера не
изолировалось от окружающего мира в уникальных для этого браузера свойствах.
Разработчики понимают, что свойства с префиксами — экспериментальные и могут
быть изменены. Это дает создателям браузеров дополнительную свободу, позволяя
при необходимости вносить изменения и, следовательно, быстрее выпускать и ис-
правлять новые свойства. Разработчики сайтов и приложений, в свою очередь,
скорее получают возможность применить новые свойства и поучаствовать в про-
цессе доработки путем тестирования в реальных условиях.
Когда спецификация достигает более стабильного состояния, а разработчикам
браузеров удается добиться правильной реализации свойства, от префикса можно
избавляться. Если разработчики сайтов добавили в свои таблицы стилей версию
свойства без префикса — а делать это весьма полезно, чтобы не создавать проблем
с совместимостью в будущем, — веб-страницы автоматически начинают отобра-
жаться в соответствии с последними изменениями в спецификации свойства. Если
же они не предусмотрели версию свойства без префикса, то ничего страшного не
произойдет — она продолжает работать так же, как раньше. Ни один из сайтов, где
используется версия с префиксом, не сломается.
Префиксы конкретных браузеров
Ранее упоминалось, что спецификация CSS3 – это набор модулей, которые постепенно интегрируются производителями браузеров. Иногда интеграция включает в себя экспериментальную поддержку. Это означает, что пока спецификацию пишут, обсуждают и критикуют в W3C, изготовитель браузера может решить добавить поддержку для какихто свойств, чтобы опробовать их на практике. В последнее время такая практика стала естественной частью процесса, и обратная связь, получаемая во время экспериментального использования, часто применяется, чтобы внести поправки в спецификацию.
С другой стороны, изготовитель браузера может захотеть ввести экспериментальное свойство, которое не входит ни в какой предложенный стандарт, но может получить такой статус когда-либо.
Для такой экспериментальной поддержки свойств CSS часто вводятся браузерные префиксы – например, так:
– webkit – border-radius
Отбитое дефисом ключевое слово, стоящее перед названием свойства, помечает его как незавершенное, относящееся исключительно к реализации в конкретном браузере и к интерпретации развивающейся спецификации. Если экспериментальное свойство войдет в законченный модуль CSS3, браузер должен поддерживать беспрефиксное название свойства.
У каждого изготовителя браузеров есть свой префикс, которым он в первую очередь помечает собственные экспериментальные свойства. Все остальные браузеры игнорируют правила, содержащие неизвестные им префиксы.
В табл. 1.03 перечислены самые широко используемые браузеры и связанные с ними префиксы. Мы будем использовать префиксы WebKit, Mozilla и Opera в части, касающейся CSS3 в примерах из следующих глав.
Д. Сидерхолм. «CSS3 для веб-дизайнеров»
Таблица 1.03. Наиболее широко используемые браузеры и связанные с ними префиксы
Как работают браузерные префиксы
Вот как CSS работает на практике с браузерными префиксами. Возьмем свойство border-radius в качестве примера. Положим, мы хотим скруглить углы элемента с радиусом 10 пикселей; вот как это делается:
– webkit-border-radius: 10px;
– moz-border-radius: 10px; border-radius: 10px;
Webkit (движок, используемый в браузерах Chrome, Safari, и в Safari для мобильных
устройств) и Gecko (движок браузера Firefox) поддерживают свойство border-radius посредством собственных префиксных свойств; Opera поддерживает это свойство без префикса. IE9 также будет поддерживать border-radius без браузерного префикса.
На момент подготовки издания (август 2012 года) все упомянутые браузеры поддерживают свойство border-radius без префикса, в том числе и IE9.Прим. ред.
Оптимальный порядок
Используя браузерные префиксы, важно не забывать о порядке, в котором перечисляются свойства. Можно заметить, что в предыдущем примере сначала написаны префиксные свойства, за которыми следует беспрефиксное свойство.
Д. Сидерхолм. «CSS3 для веб-дизайнеров»
Зачем ставить подлинное CSS3-свойство последним? Вероятно, в будущем ваши стилевые файлы будут работать в большем количестве браузеров, постепенно улучшая дизайн. Когда браузер, наконец, будет поддерживать то свойство, которое определено в спецификации, применяться будет подлинное свойство, а не экспериментальная версия, так как оно будет стоять последним в списке. Даже если реализация префиксной версии будет отличаться от настоящего свойства из спецификации, вы заботитесь о том, что окончательный стандарт остается первостепенным.
Не пугайтесь браузерных префиксов!
Первоначальная реакция читателя может быть примерно такой: «Ах, это запутанные и проприетарные штуки!» Но я уверяю вас, это не только шаг вперед, а еще и намного менее запутанное решение в сравнении с раздутыми кусками кода и отсутствием гибкости, которыми сопровождаются решения не на CSS3. Кроме того, это важная часть развития спецификации.
Используя эти свойства сейчас с помощью браузерных префиксов, мы можем прозондировать почву и даже дать ценные комментарии изготовителям браузеров, прежде чем спе-цификация завершена. Также стоит помнить, что префиксы, как правило, добавляются к предложенным стандартам
(а не к утвержденным). В этом заключается большое отличие от разнообразного хакерского CSS, который все мы иногда использовали, чтобы разрешить проблемы с кроссбраузерностью.
Кто-то может сравнить браузерные префиксы с эксплойтами синтаксиса, которые многим из нас приходилось использовать, чтобы дать команду конкретным версиям браузеров (например, синтаксисw\idth: 200px или_width: 200px , который позволяет обращаться к конкретной версии IE). Но, напротив, браузерные префиксы – это важная часть процесса стандартизации, позволяющая развивать свойство, внедряя его для практического применения.
Эрик Мейер, эксперт по CSS, объясняет разницу в статье «Префикс или постхак» на
A List Apart (http://bkaprt.com/css3/2/)3 :
Префиксы дают нам контроль над нашей хакерской судьбой. В прошлом нам пришлось выдумать кучку ошибок парсера лишь для того, чтобы заставить несовместимые реализации работать одинаково – когда мы обнаружили, что они несовместимы. То был полностью реакционный подход. Префиксы – это подход с прицелом на будущее.
Он продолжает, предполагая, что префиксы – это не только хорошая практика, но они также должны занимать более значимую роль в процессе стандартизации:
…заставить производителей браузеров и рабочую группу трудиться вместе, чтобы разрабатывать тесты, необходимые для проверки интероперабельности. Затем эти тесты могут помочь тем (разработчикам браузеров. Прим. перев.), которые следуют за остальными, намного быстрее достичь интероперабельности. Они могут буквально выкатить реализацию с префиксом в одной публичной бета-версии и опустить префикс в следующей версии.
3 http://www.alistapart.com/articles/prefix-or-posthack/
Д. Сидерхолм. «CSS3 для веб-дизайнеров»
Так что не беспокойтесь о браузерных префиксах. Пользуйтесь ими, зная, что вы становитесь частью процесса, который позволяет достичь результата сейчас и прокладывает дорогу к будущему, когда от префиксов можно будет отказаться.
А как насчет повторений?
Можно думать, что довольно глупо повторять трижды или четырежды то, что выглядит как одно и то же свойство, и я могу согласиться.
Но реальность такова, что для решений, построенных на CSS3, скорее всего, потребуется писать негибкий и более сложный код, пусть, может быть, и неповторяющийся.
Нам не понадобится повторяться вечно. Сейчас это необходимый, но временный шаг, нужный, чтобы разделять реализации, отличающиеся между браузерами, от реализации окончательной спецификации.
Прежде чем мы начнем делать привлекательные вещи, пользуясь несколькими применимыми свойствами CSS3 и соответствующими браузерными префиксами, давайте познакомимся с переходами в CSS. Понимание переходов и того, как они работают, поможет нам сочетать их с остальными свойствами и создавать замечательные взаимодействия.
