CSS Conditional Rules
CSS Conditional Rules, как следует из названия, являются условными конструкциями, которые можно применять в самом CSS. Они реализуют проверку поддержки свойств текущим браузером с возможностью группировать условные выражения с помощью логических операторов and , or и not . В этом посте хотелось бы рассказать, кроме прочего, о синтаксисе этого модуля CSS3 и текущей поддержке его браузерами.
Что нового?
- это проверка поддержки указанных свойств браузером, а не проверка имени и версии браузера.
- это реализация условных конструкций прямо в CSS, таким образом, мы можем управлять «потоком применения» свойств CSS, а не выбираем в HTML-коде какие заранее подготовленные для разных браузеров файлы стилей подключить; проще говоря, если нам нужно реализовать свойство, неподдерживаемое всеми необходимыми браузерами, у нас появляется гибкий инструмент для degradation.
А на практике?
Синтаксис прост. Например, у нас есть свойство font-size , в котором мы хотим использовать функцию calc() для вычисления размера шрифта, а в качестве аргумента этой функции мы хотим передать выражение, которое вычисляет размер шрифта от размера шрифта корневого элемента body . Но сколько браузеров сегодня это поддерживает? Маловато. А что делать с остальными? С использованием условий CSS3 вопрос получит такой ответ:
body < font-size: 14px; >@supports (font-size: calc(1rem + 12px)) < h1 < font-size: calc(1rem + 12px); >> @supports not (font-size: calc(1rem + 12px)) < h1 < font-size: 26px; >> Пример избыточен, но зато видна логика. Правило @supports предваряет условную конструкцию. Условным выражением считается то, что находится в круглых скобках, при этом круглые скобки всегда обязательны. Мы можем комбинировать условные выражения с помощью операторов and и or , а также отрицать выражения с помощью not .
При этом для избежания ситуаций, когда составленное вами условие можно трактовать не единственным способом, необходимо группировать условия с помощью круглых скобок, это понятнее на примере. Рассмотрим пример из спецификации:
/* Это неправильный код! */ @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg))
Казалось бы, синтаксис верный, чего же боле? Проблема в том, что эту конструкцию можно трактовать по разному. Что мы имели ввиду: нам нужна поддержка [( transition или animation ) и ( transform )] или [( transition ) или ( animation и transform )]? Неизвестно. Именно поэтому мы должны использовать круглые скобки так же, как я сделал это только что, описывая возможные варианты. Нижеследующие варианты того же кода будут правильными.
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) < >@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg)))
Ну и когда?
А теперь о статусе поддержки на данный момент. Сама спецификация находится в статусе рабочего черновика. В стабильных версиях сегодня это не поддерживает никто. 3 августа поддержка @supports появилась в Firefox 17.0a1, то есть сейчас она есть в ветке Firefox Aurora и где-нибудь в октябре будет в Beta. Про поддержку другими браузерами я пока ничего не слышал (быть может, кто-то из хабражителей подскажет). В самом же Firefox 17 эта опция может быть отключенной в настройках, если разработчики решат, что спецификация еще недостаточно стабильна.
UPD: в бета-версии Opera 12.10 появилась поддержка @supports.
Написание логики в CSS
CSS — это узкоспециализированный язык программирования, ориентированный на системы стилей. Из-за этого уникального варианта использования и его декларативного характера иногда это трудно понять. Некоторые люди вообще отрицают, что это язык программирования. Давайте докажем, что они ошибаются, запрограммировав умную и гибкую систему стилей.
Структуры управления
Более традиционные языки общего назначения (например, JavaScript) предоставляют нам такие инструменты, как условия ( if/then ), циклы ( for , while ), логические элементы ( === , && , и т. д.) и переменные. Эти структуры называются в CSS по-разному, их синтаксис сильно отличается, чтобы лучше соответствовать конкретному варианту использования при оформлении документа, а некоторые из них просто не были доступны в CSS еще несколько лет назад.
Переменные
Переменные — самые простые. В CSS они называются пользовательскими свойствами (хотя все равно все называют их переменными, даже в собственном синтаксисе).
Операторы if и циклы for в CSS
От автора: сегодня расскажу, как работают в CSS if и for. Я продолжаю рассматривать CSS, как язык программирования. Вопрос, является ли он таковым или нет, в данный момент очень горячая тема, но мне не очень интересен ответ.
Вместо этого я хотел бы знать, может ли описание определенных структур CSS в терминах программирования помочь вам лучше или быстрее изучать CSS или это мешает. Другими словами, есть ли образовательная ценность в том, чтобы рассматривать CSS как язык программирования? Скажите, пожалуйста, является ли приведенное ниже объяснение полезным или запутанным для вас.
Оператор if
Область, где язык программирования CSS менее развит, чем JavaScript — это управляющие структуры — или так может показаться. Тем не менее, CSS имеет операторы if. Вот несколько примеров:
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Они означают «если область просмотра макета имеет максимальную ширину 900 пикселей» и «если движок CSS принимает» display: flex. Нет сомнений в том, что это фактические операторы if: блоки кода применяются только в том случае, если удовлетворяется условие. (Кроме того, спецификация для @media и @supports называется Условными правилами CSS. Это просто: at-правила должны использоваться как операторы if.)
Но давайте рассмотрим — если можно так выразиться — более сомнительный пример. Является ли следующее также оператором if?
«Если в меню есть ссылка, выделить ее красным цветом». Несколько человек, у которых я брал интервью для книги, были убеждены в том, что селекторы — это тоже операторы.
Вы согласны? Согласен ли я? Я не уверен, хотя и вижу в этом определенный смысл: можно рассматривать селекторы и так. Согласны ли вы с этим, вероятно, зависит от вашего определения оператора if.
Цикл for
Давайте для рассмотрения циклов немного усложним ситуацию. На первый взгляд может показаться, что в CSS их нет. Тем не менее, как насчет того же кода, который мы видели выше?
В некотором смысле, селектор, подобный приведенному выше, можно считать примитивным циклом for. Браузеру велено перебрать все элементы внутри элемента и применить к ним красный цвет.
Является ли селектор циклом for? Может ли он быть оператором if и циклом for одновременно? Опять же, это зависит от ваших определений циклов for и операторов if. Я хотел бы отметить, что можно добавить в CSS дополнительную логику для циклов.
Эти дополнительные селекторы можно рассматривать как операторы внутри цикла for: перебрать все ссылки в меню, но пропустить эту одну и назначить для нее специальный режим.
Декларативный и императивный подходы
Давайте возьмем самое общее представление и скажем, что CSS-селекторы могут рассматриваться как операторы if и как циклы for. Это будет звучать довольно странно для любого, кто имеет опыт работы с JavaScript, поскольку эти два типа управляющих структур просто не одинаковы. Итак, как вы можете заменить оба на одну структуру?
Здесь, я думаю, мы еще раз видим, что CSS является декларативным языком, а не императивным. В декларативных языках некоторые простые управляющие структуры могут быть выражены гораздо более кратко, чем в императивных. Возьмем последний пример кода. В JavaScript мы должны написать что-то вроде:
Недостатком версии JavaScript является то, что она более многословна, чем версия CSS, и, следовательно, более подвержена ошибкам. Преимущество ее состоит в том, что она предоставляет более тонкий контроль, чем CSS. В CSS мы почти достигли пределов того, что мы можем выразить. В версию JavaScript мы могли бы добавить гораздо больше логики, если пожелаем.
В CSS мы сообщаем браузеру, как должны выглядеть ссылки. В JavaScript мы описываем алгоритм для определения того, как должна выглядеть отдельная ссылка. Ни то, ни другое не является единственно правильным, но в этом примере способ CSS является более эффективным.
Лично мне комфортно рассматривать CSS-селекторы как операторы и циклы одновременно. Тем не менее, я чувствую, что как только вы начинаете понимать CSS, тот факт, что селекторы представляют собой if / for, становится все менее и менее актуальным. Вместо этого селекторы — просто селекторы: отлично подходят для относительно простых объявлений; меньше для очень сложных.
Полезно это или сбивает с толку?
Если вы джаваскриптер, который желает лучше узнать CSS, я хотел бы услышать, помогают или сбивают вас с толку несколько приведенных выше примеров. Чем больше отзывов я получаю, тем лучше я могу написать книгу, которая поможет вам изучить CSS, а не просто запутает вас. Благодарю за внимание.
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Редакция: Команда webformyself.