Структура CSS3
CSS (Cascading Style Sheets) – формальный язык описания внешнего вида документа, суть которого состоит в объявлении правил: при различных условиях мы хотим, чтобы определенные вещи происходили. Если этот класс добавлен к этому элементу, примените эти стили. Если элемент X является дочерним элементом элемента Y, примените эти стили. Затем браузер берет эти правила, выясняет, какие из них применяются и где, и использует их для отображения страницы.
CSS3 – это спецификация в потоке. Некоторые части спецификации считаются стабильными и хорошо реализованы в современных браузерах; другие части следует считать экспериментальными и частично реализованными в различной степени; другие же все еще являются теоретическими предложениями и не были реализованы вообще. Некоторые браузеры создали свои собственные свойства CSS, которые не описаны ни в одной спецификации CSS3 и, возможно, никогда не будут.
Все это означает, что знание того, как работает процесс стандартизации и какие уровни реализации применяются для каждого нового свойства, жизненно важно для понимания того, как вы можете использовать CSS3 в своем коде как сейчас, так и в будущем.
CSS3 стал модульным
Создание языка стилей по умолчанию для каждого документа на основе разметки в мире – огромная задача, и W3C (Консорциум Всемирной паутины, отвечающий за установку стандартов CSS) осознает, что для ее реализации потребуются многие годы. Члены W3C, понимая, что они не хотят поддерживать некоторые из наиболее очевидных, востребованных функций, пока они рассматривали и обсуждали некоторые из более эзотерических, решили разделить CSS3 на различные модули.
Вот почему вместо одного монолитного документа спецификации CSS3 у вас есть модуль базового интерфейса пользователя CSS3, Selectors Level 3, медиазапросы и т. д. Некоторые из этих модулей являются ревизиями CSS2.1, а некоторые только что созданы, но все они попадают под баннер CSS3.
Модульная система
Поскольку CSS стал модульным, каждому модулю назначается номер уровня, чтобы отмечать, сколько ревизий он прошел. Некоторые из более старых модулей, такие как селекторы, уже находятся на уровне 4; многие из модулей, описанных в этой статье, находятся на уровне 3; тогда как некоторые очень новые модули, такие как Flexbox, находятся только на уровне 1 или, возможно, переходят на уровень 2.
Это означает, что CSS является рабочим проектом стандарта: каждый модуль будет двигаться в своем собственном темпе и новые модули будут добавляться по мере необходимости. CSS3 – это просто удобное сокращение, означающее "функции CSS, разработанные начиная с CSS2.1". CSS4 никогда не будет существовать. Со временем нумерация исчезнет, и у нас будет только CSS с модулями на разных уровнях.
Статус модуля и процесс рекомендации
Статус любого модуля устанавливается W3C, и он указывает на прогресс модуля в процессе рекомендации; обратите внимание, однако, что этот статус не обязательно указывает на степень реализации модуля в любом браузере.
Когда предложенный документ впервые принимается как часть CSS3, его статус обозначается как Working Draft. Этот статус означает, что документ был опубликован и теперь готов к рассмотрению сообществом, в данном случае сообществом являются создатели браузеров, рабочие группы и другие заинтересованные стороны. Документ может оставаться рабочим проектом в течение длительного периода, подвергаясь многочисленным изменениям. Не все документы проходят этот уровень статуса, и документ может возвращаться к этому статусу во многих случаях.
Прежде чем документ может перейти из рабочего проекта, его статус изменяется на Last Call, что означает, что период рецензирования близится к завершению, и обычно указывает, что документ готов перейти на следующий уровень.
Следующим уровнем является Candidate Recommendation, что означает, что W3C удовлетворен, документ имеет смысл, последние обзоры не обнаружили существенных проблем и все технические требования были выполнены. На этом этапе производители браузеров могут начать реализовывать свойства в документе для сбора реальных отзывов.
Если два или более браузеров реализовали свойства одинаковым образом и если не было выявлено серьезных технических проблем, документ может перейти в Proposed Recommendation. Этот статус означает, что предложение в настоящее время является полным, реализованным и готовым для одобрения Консультативным комитетом W3C. Когда это одобрение получено, предложение становится Рекомендацией (Recommendation).
Процесс рекомендации и процесс реализации не всегда работают одинаково. Модуль может быть хорошо реализован во всех браузерах, но при этом все еще находится в состоянии Working Draft. И наоборот, модуль может иметь статус Candidate Recommendation, но имеет лишь ограниченную реализацию (CSS Shapes в настоящее время соответствует этому описанию).
Синтаксис
Теперь давайте перейдем к сути CSS3. В этой статье мы используем определенные синтаксические соглашения для демонстрации каждого из новых правил и свойств. Это выглядит примерно так:
В этом примере кода селектор представлен с помощью E. Конечно, в HTML этот селектор не существует; мы просто использую его, чтобы указать, что селектор не имеет значения; здесь может быть использован любой селектор.
Далее у вас есть собственное свойство; в этом случае мы использовали вымышленное свойство, называемое property. После этого стоимость имущества. Для этого мы используем выделенный курсивом псевдоним для ссылки на значение, которое в этом случае мы назвали value.
Если свойство принимает несколько значений, мы перечислим каждое из них с уникальным псевдонимом. Таким образом, новое свойство, которое требует трех значений, может быть определено так:
С учетом всего вышесказанного, давайте представим, что у нас есть новое свойство под названием monkeys, которое принимает только одно значение. Представить его можно так:
И когда дело дошло до практического примера, мы могли бы показать его с допустимым значением (например, с числовым значением):
Vendor prefixes
Когда модуль все еще находится в активной проверке, как и большая часть CSS3, многое может измениться; синтаксис свойства может быть пересмотрен или свойство может быть полностью удалено. Иногда даже сама формулировка проекта немного туманна и открыта для толкования.
В то же время браузеры должны реализовать эти функции, чтобы мы могли видеть, как они работают на практике. Но подумайте о трудностях, которые могут возникнуть, если два отдельных браузера реализуют одно и то же свойство, но интерпретируют его непоследовательно: результат вашего кода будет выглядеть по-разному в каждом из браузеров. Чтобы этого не случилось, каждый из создателей браузеров начал добавлять префикс короткого кода к началу экспериментальных свойств. Давайте представим, что наше столь желанное свойство monkeys было вновь определено в спецификации, и что все основные поставщики браузеров решили реализовать его, чтобы увидеть, как оно работает. В этом случае вы должны использовать следующий код:
Количество повторений может показаться несколько ненужным, но все это сделано для нашего же блага. Последнее, что вам нужно, – это чтобы все браузеры по-разному реализовывали свойство monkeys, что привело бы к полному хаосу.
Несмотря на благие намерения, использование vendor prefixes привело ко многим проблемам: разработчики использовали их на своих рабочих веб-сайтах, но не удалили их позднее, когда изменилась реализация браузера. Это в свою очередь означало, что создатели браузеров должны постоянно поддерживать экспериментальные функции, чтобы избежать поломок на веб-сайтах, которые их используют. Из-за этого Chrome и Firefox теперь отказываются от использования свойств с префиксами, предпочитая вместо этого реализовывать новые функции, которые по умолчанию отключены и должны выбираться разработчиками, пока они не станут достаточно стабильными для широкого использования.
Селекторы
Селекторы – это сердце CSS, и хотя в оригинальной спецификации CSS1 их было только 5 или 6, CSS2 расширил диапазон еще на 12. CSS3 идет еще дальше, примерно вдвое увеличивая количество доступных селекторов.
Селекторы можно разделить на две категории. К первым относятся те, которые действуют непосредственно на элементы, определенные в дереве документа (например, p-элементы и атрибуты href); эта категория содержит селекторы классов, типов и атрибутов. Ради целесообразности мы сгруппировали их под флагом селекторов DOM. Вторая категория содержит псевдоселекторы, которые воздействуют на элементы или информацию, которая находится за пределами дерева документа (например, первая буква абзаца или последний дочерний элемент родительского элемента).
Новые селекторы CSS3 обеспечивают гибкость, позволяя сопоставлять подстроки в значении атрибута. Эта особенность делает их особенно полезными для применения правил к документам XML, которые часто могут иметь более различные значения атрибутов, чем HTML, хотя они все еще весьма полезны и для разработчиков HTML.
Выбор значения атрибута начала подстроки
Один из основных новых селекторов находит элементы, выбранный атрибут которых начинается со строки, предоставленной ему в качестве аргумента. Он использует символ ^ для изменения знака равенства в селекторе. Вот полный синтаксис:
Этот код ищет указанное значение в начале указанного атрибута. Чтобы проиллюстрировать это, рассмотрим следующий пример разметки, показывающий список из трех элементов, каждый из которых содержит гиперссылку с разными (хотя и схожими) значениями для атрибута title:
Теперь применим этот селектор к разметке примера:
В этом случае правило будет применено к элементу "a" в первом элементе списка, поскольку строка атрибута title начинается со слова image. Однако правило не будет применяться к элементу "a" во втором элементе, поскольку, хотя его атрибут title содержит эту строку, он не начинается с нее. Он также не будет применен к третьей строке, так как эта строка не отвечает соответствиям.