Взгляд в будущее: селекторы, уровень 4
Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».
Мы много поработали для того, чтобы распространить положительное впечатление о CSS3, и теперь все так просто кончится? На самом деле, тут нет ничего удивительного, так как это естественный ход эволюции – процесс, который только лишь положительно повлияет на CSS в целом, так как версия 3 или версия 4 – это всего лишь дополнение к названию какой-либо определенной технологии, различных ее спецификаций.
Почему 4? Что насчет CSS3?
Level 4 (Уровень 4, или 4-я версия спецификации) – это всего лишь версия W3C-документа. Слышали ли вы о новой спецификации «Filter Effects, Level 1» (Эффекты фильтров, Уровень 1)? Не важно, так как CSS - это просто CSS. Селекторы первыми достигнут 4-го уровня спецификации, и уже сейчас над этим ведется работа, пишутся черновые работы. Каждый документ – индивидуален, когда дело доходит до номера спецификации; документы разрабатываются отдельно друг от друга.
Это большое преимущество, так как завершенные части документа могут быть ограничены определенным набором рекомендаций, вроде Selectors Level 3. Быстрое завершение документов и перемещение проблемных областей на следующий уровень стимулирует развитие Web, так как на решение конкретных проблем выделяется определенный промежуток времени.
Модное слово CSS3 постигнет та же участь, что и HTML5: мы говорим не о номере спецификации, а о целом языке. HTML5 – это просто последующая версия языка разметки, которая добавляет поддержку новых элементов. Но когда вы говорите о нем, вы можете включить сюда что угодно от API для работы с аудио до веб-сокетов и геолокации (которые не относятся к спецификации HTML5).
То же самое можно сказать и о CSS3: это некая магия, которую мы творим посредством CSS. Вы можете не знать, к какой части спецификации относятся border-radius или box-shadow, так как вы и так знаете, как правильно использовать эти параметры. То же касается и селекторов – это просто следующая версия селекторов.
Что такое селекторы?
Спецификация описывает селекторы как паттерны, которые соответствуют элементам в древе. Большинство селекторов из спецификации 4 уровня представляют собой псевдо-классы. Селекторы доступны нам с самого появления CSS, но сейчас они дошли уже до 4 уровня, и в наше распоряжение попало множество клевых дополнений. Давайте перейдем к делу, и рассмотрим кое-что интересное. Мы не будем описывать вам весь документ, и обратим внимание только на нововведения в 4 уровне.
Логические комбинаторы: :matches, :not
Давайте начнем с логических псевдо-классов. Первый, :matches, вы уже наверное знаете из :-moz-any() в Mozilla, который уже довольно давно применялся в Firefox 4. Благодаря этому селектору мы можем группировать и подбирать элементы в нашем css-документе. Каким образом он нам полезен? В целом, самое основное применение, которое приходит на ум, это сбор нескольких определений анкорных положений в одно. Таким образом, вместо этого…
…мы можем сделать просто это:
Все просто, не правда ли? Хотя данный пример может показаться глупым, он отображает нам мощь псевдо-класса :matches, и его можно использовать в более сложных ситуациях:
Второй логический комбинатор, который мы рассмотрим, был представлен в спецификации CSS3, но стал еще сильнее в 4-м уровне. Мы говорим сейчас о :not – простом отрицательном псевдо-классе, который умеет применить список селекторов в качестве параметров:
Вышеприведенный код применит красный цвет ко всем элементам параграф, к которым в разметке не применен класс active или visible.
Локационные псевдо-классы: :any-link, :local-link
Благодаря локационным псевдо-классам, у нас есть больше контроля над оформлением ссылок. Во-первых, :any-link (временное имя, которое может быть изменено) собирает определения a:link и a:visited в один класс, поэтому вам не придется писать отдельный код для обоих классов:
Теперь не имеет значения, была ли посещена ссылка. Она будет оформлена таким образом, как и не посещенная:
Наш второй псевдо-класс, :local-link, будет немного интереснее. Вы можете, к примеру, задать отдельный стиль ссылкам, которые ведут на главную страницу, а все остальные оставить как есть:
Благодаря этой строчке css-кода, ссылки, указывающие на текущую страницу, не будут обозначены стилем text-decoration, поэтому они будут отличаться от тех, что расположены в меню.
Давайте рассмотрим еще один пример:
Этот стиль позволит нам задать красный цвет всем внешним ссылкам. (Вы можете добавить, к примеру, иконку или фоновое изображение, если захотите).
Как видно по последнему примеру, :local-link может быть использован вместе с параметром. Число скобок будет отражать уровень вложенности URL-пути, который будет проверять и подбираться для каждой ссылки. Звучит немного запутанно, но пример все прояснит:
Если предположить, что адрес текущей страницы http://end3r.com/2012/10/20/some-title/, а в меню у вас будут следующие ссылки:
Home
http://end3r.com/
2012
http://end3r.com/2012/
October 2012
http://end3r.com/2012/10/
20 October 2012
http://end3r.com/2012/10/20/
Article
http://end3r.com/2012/10/20/some-title/
Первая ссылка будет красной, вторая зеленой, третья синей, а затем желтая, а затем серая.
Время измерительные псевдо-классы: :past, :current, :future
Эти псевдо-классы очень удобны для пользователей с экранными читалками. При помощи всего одной строки CSS слову, которое произносится, можно задать отдельный стиль (вспомните караоке):
Этот код позволит выделить слово желтым цветом.
Эти псевдо-классы можно применять в оформлении субтитров видео-формата WebVTT, изменяя цвет и другие параметры. Псевдо-классы :past и :future относятся, в основном, к элементам, которые были выделены и тем, которые должны будут быть выделенными.
Псевдо-классы состояния пользовательского интерфейса: :indeterminate
Хотя UI-элементы онлайн-форм могут быть заданы многими интересными псевдо-классами (вроде:enabled, :disabled или :checked), существует также новый – :indeterminate. Как вы уже знаете, чекбоксы и радио-кнопки имеют два положения – либо включены, либо выключены. Любое положение можно включить при помощи псевдо-класса :checked (и :not(:checked) для того, чтобы отключить элемент). Но что, если вам нужно оформить элементы ввода, которые не используются? Их положение не относится ни к отмеченному (включенному), ни к неотмеченному (выключенному), и тогда его можно отнести к :indeterminate. Все довольно просто, не правда ли? Мы можем задать привлекательные стили элементам ввода, у которых не выставлено исходное положение, либо тем, которые еще не использовались:
То же касается и строки прогресса: ей можно задать положение :indeterminate, когда в процентах степень завершения определить невозможно:
В данной ситуации, мы можем указать исходное положение и оформить его так, чтобы оповестить пользователя о том, сколько времени осталось до загрузки ресурса.
Древовидные псевдо-классы: nth-match, :nth-last-match
Древовидные псевдо-классы также представляют собой новые и интересные селекторы спецификации 4-го уровня. При помощи :nth-match вы можете достигать гораздо большего. Интересно, как это работает? Ну что же, если вы воспользуетесь псевдо-классом :nth-child, который выделяет элемент, и скомбинируете его с мощью :matches, вы получите ответ.
Предположим, что у нас есть список ссылок, некоторые из которых имеют класс active, и вам нужно выделить только четные элементы среди активных ссылок. Мы можем использовать :nth-child(even) чтобы выбрать только четные дочерние элементы в списке, но это не совсем то, что нам нужно, так как здесь мы тогда не учитываем класс active. Также недостаточно будет использовать :matches(.active), так как в таком случае мы будем выделять все элементы с классом active. Именно здесь нам на помощь приходит :nth-match:
Благодаря этой одной строке мы, наконец, сможем выделить только четные пункты среди всех, которым задан класс active.
Это простой пример. При помощи синтаксиса An+B мы можем достичь еще большего:
Эта комбинация селекторов, которые мы хотим здесь сопоставить, гораздо более сложная. :nth-last-match работает таким же образом, как и :nth-match, но начинает работу с конца DOM-структуры.
Сеточные структурные псевдо-классы :column, :nth-column, :nth-last-column
Давайте применим эти псевдо-классы к табличным данным. Все мы знаем, что таблицы не очень подходят для шаблонов, но отлично подходят для данных, которые их наполняют. HTML-таблица ориентирована на строки (tr), так что колонки здесь отпадают. Есть возможность создать и колоночную таблицу, но тогда возникнут проблемы со строками, так как у вас не может быть и того и того одновременно, и строчные таблицы более популярны. Очень удобно иметь возможность использовать CSS для оформления колонок в таблице, ориентированной на строки, и созданную в DOM, особенно когда вам нужно, к примеру, выделить фоновые цвета. Конечно же, мы можем воспользоваться дополнительные классами или разметкой, но при помощи селекторов 4-го уровня мы можем сделать это, используя сеточные структурные псевдо-классы.
Этот код установит красный цвет фона для всех ячеек в колонке .total, и синий для каждой четной колонки в таблице.
Теперь мы можем выбрать колонки так же, как и строки, и просто ошалеть от возможностей, которые нам дает :nth-column(3n+2). Просто помните, что колонки стилизуются на основе их порядка в DOM-структуре, а не по тому, как они отображены на странице. Конечно же, таблицы – это не единственная область, где можно применять сеточные структурные псевдо-классы. Мы также можем применять их в разметках, основанных на колонках.
Родительский селектор !
Этот селектор все жаждали так же, как швейцарский нож в детстве, это просто священная Грааль CSS. В большинстве обсуждаемых аспектов 4-й спецификации селекторов, и этот селектор дает вам силу! Благодаря родительскому селектору вы можете без труда стилизовать элементы отдельно от остальных в списке селекторов. Это почти как спасательный круг когда вам нужно оформить меню, и вы не хотите добавлять классы только ради оформления.
Давайте рассмотрим на практике самый простой пример. Предположим, что у нас есть меню, простой список ссылок. Нам нужно будет оформить его, но PHP, отвечающий за отображение меню, находится на сервере, и у нас нет к нему доступа. Проблема возникает тогда, когда нам нужно оформить элемент li, основанный на классе active, примененном к анкорной ссылке. Мы можем стилизовать элемент a, используя a.active {}, но мы не можем подобраться к элементу li. Самое простое, что здесь можно сделать, это добавить класс active к элементам списка, а не к самой ссылке, следующим образом: ul li.active a. Таким образом, мы можем оформить и список и анкорную ссылку. Проблема в том, что меню генерируется скриптом, к которому у нас нет доступа, поэтому мы и остановимся на ul li a.active.
В нормальной структуре css-документа мы всегда ссылаемся на последний пункт в списке селекторов. В ul li a.active, который является ссылкой с классом active; в article p span, он может быть span-элементом и так далее. Благодаря родительскому селектору, мы можем изменить субъект использованного селектора. Это дает нам невероятную силу и гибкость при оформлении:
Теперь мы можем оформить li-элемент в соответствии с тем, был ли класс active применен к ссылке. Когда мы добавляем родительский селектор, мы говорим, что нам нужно оформить этот li-элемент, а не a.active.
Мы также можем управлять цветом фона всей страницы, просто используя ссылку в документе:
Этот код применяет красный фон к телу документа в тот момент, когда пользователь наводит курсор мыши на анкорную ссылку с классом styleSwitcher. Чтобы реализовать это без родительского селектора, нам пришлось бы добавить пользовательские классы в javascript. Это не невозможно, но родная строка кода в CSS будет однозначно приятнее.
Примечание: первый черновик документа спецификации (датированный 29 сентябрем 2011 года) позволяет определять родительский селектор при помощи знака $ перед самим селектором ($li). Последний черновик (22 июня 2012 года) использует новый синтаксис, в котором субъект селектора указывается знаком восклицания после заданного селектора (li!). Конечно же, его можно менять (это необходимо просто для примера), поэтому рекомендуем вам не забывать об этом. Имеет значение то, что родительский селектор будет рано или поздно внедрен полностью, и тогда появится точный синтаксис определения. Нам даже не столь важно, как он будет выглядеть, нам главное, чтобы он правильно работал во всех браузерах.
Чтобы увидеть родительский селектор в действии, ознакомьтесь с jQuery-плагином cssParentSelector.
Подытожим
Как вы видите, дополнения к спецификации селекторов выглядят довольно интересно. Мы не можем дождаться момента, когда начнем использовать их в собственных проектах. Единственная проблема заключается в том, что нам придется ждать, пока разработчики браузеров организуют соответствующую поддержку, хотя вы можете уже сейчас протестировать некоторые селекторы, используя javascript-библиотеку.
Положение документа
4-й уровень документа селекторов пока еще не включен в официальную рекомендацию, это просто развивающийся черновик (можно взять в пример родительский селектор, который уже несколько раз подвергался изменениям и все равно требует доработки). Вы не можете полагаться на такой документ, так как он обязательно изменится в будущем. Но здесь есть и преимущество: вы уже сейчас можете поразмышлять над тем, какие идеи можно реализовать при помощи этих нововведений, а также порекомендовать разработчикам какие-то идеи. Любой, кто заинтересован в том, чтобы спецификация разрабатывалась с правильным уклоном, может вносить свои предложения в официальную спецификацию.
Реализация и браузерная поддержка
Некоторые думают, что довольно сложно будет использовать то, что до сих пор находится в стадии разработки. Отчасти это правда, так как разработчики браузеров начинают задумываться о поддержке только после того, как документация пройдет все стадии разработки и упрочнится на практике. Но хотя сегодня мы пока еще не можем воспользоваться преимуществами селекторами 4-го уровня, мы можем использовать нечто вроде Sel – одного из нескольких движков, которые уже используют некоторые из нововведений. Благодаря им мы можем начать экспериментировать со свойствами, которые будут доступны в наших любимых браузерах по прошествии следующих нескольких месяцев или лет.
Другие спецификации 4-го уровня
Уже сейчас существуют другие документы 4-го уровня:
Уже сейчас существуют другие документы 4-го уровня:
* CSS4 Media Queries
* CSS4 Background
* CSS4 Images
* CSS4 Text
Все они пока еще находятся на стадии разработки, поэтому вам придется подождать следующего официального черновика от W3C. Конечно же, вы уже сейчас можете повлиять на развитие событий, внеся свои предложения.
Ресурсы
Первый и самый интересный ресурс, который стоит посетить, это официальная документация Selectors Level 4 от W3C. Просто важно помнить о том, что она все еще в разработке. Вы также можете просмотреть несколько интересных статей в интернете, как например статья от David Storey, участника команды разработчиков W3C.
Мы много поработали для того, чтобы распространить положительное впечатление о CSS3, и теперь все так просто кончится? На самом деле, тут нет ничего удивительного, так как это естественный ход эволюции – процесс, который только лишь положительно повлияет на CSS в целом, так как версия 3 или версия 4 – это всего лишь дополнение к названию какой-либо определенной технологии, различных ее спецификаций.
Почему 4? Что насчет CSS3?
Level 4 (Уровень 4, или 4-я версия спецификации) – это всего лишь версия W3C-документа. Слышали ли вы о новой спецификации «Filter Effects, Level 1» (Эффекты фильтров, Уровень 1)? Не важно, так как CSS - это просто CSS. Селекторы первыми достигнут 4-го уровня спецификации, и уже сейчас над этим ведется работа, пишутся черновые работы. Каждый документ – индивидуален, когда дело доходит до номера спецификации; документы разрабатываются отдельно друг от друга.
Это большое преимущество, так как завершенные части документа могут быть ограничены определенным набором рекомендаций, вроде Selectors Level 3. Быстрое завершение документов и перемещение проблемных областей на следующий уровень стимулирует развитие Web, так как на решение конкретных проблем выделяется определенный промежуток времени.
Модное слово CSS3 постигнет та же участь, что и HTML5: мы говорим не о номере спецификации, а о целом языке. HTML5 – это просто последующая версия языка разметки, которая добавляет поддержку новых элементов. Но когда вы говорите о нем, вы можете включить сюда что угодно от API для работы с аудио до веб-сокетов и геолокации (которые не относятся к спецификации HTML5).
То же самое можно сказать и о CSS3: это некая магия, которую мы творим посредством CSS. Вы можете не знать, к какой части спецификации относятся border-radius или box-shadow, так как вы и так знаете, как правильно использовать эти параметры. То же касается и селекторов – это просто следующая версия селекторов.
Что такое селекторы?
Спецификация описывает селекторы как паттерны, которые соответствуют элементам в древе. Большинство селекторов из спецификации 4 уровня представляют собой псевдо-классы. Селекторы доступны нам с самого появления CSS, но сейчас они дошли уже до 4 уровня, и в наше распоряжение попало множество клевых дополнений. Давайте перейдем к делу, и рассмотрим кое-что интересное. Мы не будем описывать вам весь документ, и обратим внимание только на нововведения в 4 уровне.
Логические комбинаторы: :matches, :not
Давайте начнем с логических псевдо-классов. Первый, :matches, вы уже наверное знаете из :-moz-any() в Mozilla, который уже довольно давно применялся в Firefox 4. Благодаря этому селектору мы можем группировать и подбирать элементы в нашем css-документе. Каким образом он нам полезен? В целом, самое основное применение, которое приходит на ум, это сбор нескольких определений анкорных положений в одно. Таким образом, вместо этого…
Код
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
color: red;
}
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
color: red;
}
…мы можем сделать просто это:
Код
ul.menu li a:matches(:link, :hover, :visited, :focus) {
color: red;
}
color: red;
}
Все просто, не правда ли? Хотя данный пример может показаться глупым, он отображает нам мощь псевдо-класса :matches, и его можно использовать в более сложных ситуациях:
Код
article:matches(.active, .visible, #important) {
background: red;
}
background: red;
}
Второй логический комбинатор, который мы рассмотрим, был представлен в спецификации CSS3, но стал еще сильнее в 4-м уровне. Мы говорим сейчас о :not – простом отрицательном псевдо-классе, который умеет применить список селекторов в качестве параметров:
Код
p:not(.active, .visible) {
color: red;
}
color: red;
}
Вышеприведенный код применит красный цвет ко всем элементам параграф, к которым в разметке не применен класс active или visible.
Локационные псевдо-классы: :any-link, :local-link
Благодаря локационным псевдо-классам, у нас есть больше контроля над оформлением ссылок. Во-первых, :any-link (временное имя, которое может быть изменено) собирает определения a:link и a:visited в один класс, поэтому вам не придется писать отдельный код для обоих классов:
Код
a:link,
a:visited {
color: red;
}
a:visited {
color: red;
}
Теперь не имеет значения, была ли посещена ссылка. Она будет оформлена таким образом, как и не посещенная:
Код
a:any-link {
color: red;
}
color: red;
}
Наш второй псевдо-класс, :local-link, будет немного интереснее. Вы можете, к примеру, задать отдельный стиль ссылкам, которые ведут на главную страницу, а все остальные оставить как есть:
Код
nav :local-link {
text-decoration: none;
}
text-decoration: none;
}
Благодаря этой строчке css-кода, ссылки, указывающие на текущую страницу, не будут обозначены стилем text-decoration, поэтому они будут отличаться от тех, что расположены в меню.
Давайте рассмотрим еще один пример:
Код
:not(:local-link(0)) {
color: red;
}
color: red;
}
Этот стиль позволит нам задать красный цвет всем внешним ссылкам. (Вы можете добавить, к примеру, иконку или фоновое изображение, если захотите).
Как видно по последнему примеру, :local-link может быть использован вместе с параметром. Число скобок будет отражать уровень вложенности URL-пути, который будет проверять и подбираться для каждой ссылки. Звучит немного запутанно, но пример все прояснит:
Код
nav :local-link(0) {
color: red;
}
nav :local-link(1) {
color: green;
}
nav :local-link(2) {
color: blue;
}
nav :local-link(3) {
color: yellow;
}
nav :local-link(4) {
color: gray;
}
color: red;
}
nav :local-link(1) {
color: green;
}
nav :local-link(2) {
color: blue;
}
nav :local-link(3) {
color: yellow;
}
nav :local-link(4) {
color: gray;
}
Если предположить, что адрес текущей страницы http://end3r.com/2012/10/20/some-title/, а в меню у вас будут следующие ссылки:
Home
http://end3r.com/
2012
http://end3r.com/2012/
October 2012
http://end3r.com/2012/10/
20 October 2012
http://end3r.com/2012/10/20/
Article
http://end3r.com/2012/10/20/some-title/
Первая ссылка будет красной, вторая зеленой, третья синей, а затем желтая, а затем серая.
Время измерительные псевдо-классы: :past, :current, :future
Эти псевдо-классы очень удобны для пользователей с экранными читалками. При помощи всего одной строки CSS слову, которое произносится, можно задать отдельный стиль (вспомните караоке):
Код
p:current {
background: yellow;
}
background: yellow;
}
Этот код позволит выделить слово желтым цветом.
Эти псевдо-классы можно применять в оформлении субтитров видео-формата WebVTT, изменяя цвет и другие параметры. Псевдо-классы :past и :future относятся, в основном, к элементам, которые были выделены и тем, которые должны будут быть выделенными.
Псевдо-классы состояния пользовательского интерфейса: :indeterminate
Хотя UI-элементы онлайн-форм могут быть заданы многими интересными псевдо-классами (вроде:enabled, :disabled или :checked), существует также новый – :indeterminate. Как вы уже знаете, чекбоксы и радио-кнопки имеют два положения – либо включены, либо выключены. Любое положение можно включить при помощи псевдо-класса :checked (и :not(:checked) для того, чтобы отключить элемент). Но что, если вам нужно оформить элементы ввода, которые не используются? Их положение не относится ни к отмеченному (включенному), ни к неотмеченному (выключенному), и тогда его можно отнести к :indeterminate. Все довольно просто, не правда ли? Мы можем задать привлекательные стили элементам ввода, у которых не выставлено исходное положение, либо тем, которые еще не использовались:
Код
input.checkbox:indeterminate {
background: #ccc;
}
background: #ccc;
}
То же касается и строки прогресса: ей можно задать положение :indeterminate, когда в процентах степень завершения определить невозможно:
Код
progress:indeterminate {
background: #ccc;
}
background: #ccc;
}
В данной ситуации, мы можем указать исходное положение и оформить его так, чтобы оповестить пользователя о том, сколько времени осталось до загрузки ресурса.
Древовидные псевдо-классы: nth-match, :nth-last-match
Древовидные псевдо-классы также представляют собой новые и интересные селекторы спецификации 4-го уровня. При помощи :nth-match вы можете достигать гораздо большего. Интересно, как это работает? Ну что же, если вы воспользуетесь псевдо-классом :nth-child, который выделяет элемент, и скомбинируете его с мощью :matches, вы получите ответ.
Предположим, что у нас есть список ссылок, некоторые из которых имеют класс active, и вам нужно выделить только четные элементы среди активных ссылок. Мы можем использовать :nth-child(even) чтобы выбрать только четные дочерние элементы в списке, но это не совсем то, что нам нужно, так как здесь мы тогда не учитываем класс active. Также недостаточно будет использовать :matches(.active), так как в таком случае мы будем выделять все элементы с классом active. Именно здесь нам на помощь приходит :nth-match:
Код
li a:nth-match(even of .active) {
color: red;
}
color: red;
}
Благодаря этой одной строке мы, наконец, сможем выделить только четные пункты среди всех, которым задан класс active.
Это простой пример. При помощи синтаксиса An+B мы можем достичь еще большего:
Код
p:nth-match(2n+1 of .active, .visible, #important) {
color: red;
}
color: red;
}
Эта комбинация селекторов, которые мы хотим здесь сопоставить, гораздо более сложная. :nth-last-match работает таким же образом, как и :nth-match, но начинает работу с конца DOM-структуры.
Сеточные структурные псевдо-классы :column, :nth-column, :nth-last-column
Давайте применим эти псевдо-классы к табличным данным. Все мы знаем, что таблицы не очень подходят для шаблонов, но отлично подходят для данных, которые их наполняют. HTML-таблица ориентирована на строки (tr), так что колонки здесь отпадают. Есть возможность создать и колоночную таблицу, но тогда возникнут проблемы со строками, так как у вас не может быть и того и того одновременно, и строчные таблицы более популярны. Очень удобно иметь возможность использовать CSS для оформления колонок в таблице, ориентированной на строки, и созданную в DOM, особенно когда вам нужно, к примеру, выделить фоновые цвета. Конечно же, мы можем воспользоваться дополнительные классами или разметкой, но при помощи селекторов 4-го уровня мы можем сделать это, используя сеточные структурные псевдо-классы.
Код
:column(.total) {
background: red;
}
:nth-column(even) {
background: blue;
}
background: red;
}
:nth-column(even) {
background: blue;
}
Этот код установит красный цвет фона для всех ячеек в колонке .total, и синий для каждой четной колонки в таблице.
Теперь мы можем выбрать колонки так же, как и строки, и просто ошалеть от возможностей, которые нам дает :nth-column(3n+2). Просто помните, что колонки стилизуются на основе их порядка в DOM-структуре, а не по тому, как они отображены на странице. Конечно же, таблицы – это не единственная область, где можно применять сеточные структурные псевдо-классы. Мы также можем применять их в разметках, основанных на колонках.
Родительский селектор !
Этот селектор все жаждали так же, как швейцарский нож в детстве, это просто священная Грааль CSS. В большинстве обсуждаемых аспектов 4-й спецификации селекторов, и этот селектор дает вам силу! Благодаря родительскому селектору вы можете без труда стилизовать элементы отдельно от остальных в списке селекторов. Это почти как спасательный круг когда вам нужно оформить меню, и вы не хотите добавлять классы только ради оформления.
Давайте рассмотрим на практике самый простой пример. Предположим, что у нас есть меню, простой список ссылок. Нам нужно будет оформить его, но PHP, отвечающий за отображение меню, находится на сервере, и у нас нет к нему доступа. Проблема возникает тогда, когда нам нужно оформить элемент li, основанный на классе active, примененном к анкорной ссылке. Мы можем стилизовать элемент a, используя a.active {}, но мы не можем подобраться к элементу li. Самое простое, что здесь можно сделать, это добавить класс active к элементам списка, а не к самой ссылке, следующим образом: ul li.active a. Таким образом, мы можем оформить и список и анкорную ссылку. Проблема в том, что меню генерируется скриптом, к которому у нас нет доступа, поэтому мы и остановимся на ul li a.active.
В нормальной структуре css-документа мы всегда ссылаемся на последний пункт в списке селекторов. В ul li a.active, который является ссылкой с классом active; в article p span, он может быть span-элементом и так далее. Благодаря родительскому селектору, мы можем изменить субъект использованного селектора. Это дает нам невероятную силу и гибкость при оформлении:
Код
ul li! a.active {
color: red;
}
color: red;
}
Теперь мы можем оформить li-элемент в соответствии с тем, был ли класс active применен к ссылке. Когда мы добавляем родительский селектор, мы говорим, что нам нужно оформить этот li-элемент, а не a.active.
Мы также можем управлять цветом фона всей страницы, просто используя ссылку в документе:
Код
body! header a.styleSwitcher:hover {
background: red;
}
background: red;
}
Этот код применяет красный фон к телу документа в тот момент, когда пользователь наводит курсор мыши на анкорную ссылку с классом styleSwitcher. Чтобы реализовать это без родительского селектора, нам пришлось бы добавить пользовательские классы в javascript. Это не невозможно, но родная строка кода в CSS будет однозначно приятнее.
Примечание: первый черновик документа спецификации (датированный 29 сентябрем 2011 года) позволяет определять родительский селектор при помощи знака $ перед самим селектором ($li). Последний черновик (22 июня 2012 года) использует новый синтаксис, в котором субъект селектора указывается знаком восклицания после заданного селектора (li!). Конечно же, его можно менять (это необходимо просто для примера), поэтому рекомендуем вам не забывать об этом. Имеет значение то, что родительский селектор будет рано или поздно внедрен полностью, и тогда появится точный синтаксис определения. Нам даже не столь важно, как он будет выглядеть, нам главное, чтобы он правильно работал во всех браузерах.
Чтобы увидеть родительский селектор в действии, ознакомьтесь с jQuery-плагином cssParentSelector.
Подытожим
Как вы видите, дополнения к спецификации селекторов выглядят довольно интересно. Мы не можем дождаться момента, когда начнем использовать их в собственных проектах. Единственная проблема заключается в том, что нам придется ждать, пока разработчики браузеров организуют соответствующую поддержку, хотя вы можете уже сейчас протестировать некоторые селекторы, используя javascript-библиотеку.
Положение документа
4-й уровень документа селекторов пока еще не включен в официальную рекомендацию, это просто развивающийся черновик (можно взять в пример родительский селектор, который уже несколько раз подвергался изменениям и все равно требует доработки). Вы не можете полагаться на такой документ, так как он обязательно изменится в будущем. Но здесь есть и преимущество: вы уже сейчас можете поразмышлять над тем, какие идеи можно реализовать при помощи этих нововведений, а также порекомендовать разработчикам какие-то идеи. Любой, кто заинтересован в том, чтобы спецификация разрабатывалась с правильным уклоном, может вносить свои предложения в официальную спецификацию.
Реализация и браузерная поддержка
Некоторые думают, что довольно сложно будет использовать то, что до сих пор находится в стадии разработки. Отчасти это правда, так как разработчики браузеров начинают задумываться о поддержке только после того, как документация пройдет все стадии разработки и упрочнится на практике. Но хотя сегодня мы пока еще не можем воспользоваться преимуществами селекторами 4-го уровня, мы можем использовать нечто вроде Sel – одного из нескольких движков, которые уже используют некоторые из нововведений. Благодаря им мы можем начать экспериментировать со свойствами, которые будут доступны в наших любимых браузерах по прошествии следующих нескольких месяцев или лет.
Другие спецификации 4-го уровня
Уже сейчас существуют другие документы 4-го уровня:
Уже сейчас существуют другие документы 4-го уровня:
* CSS4 Media Queries
* CSS4 Background
* CSS4 Images
* CSS4 Text
Все они пока еще находятся на стадии разработки, поэтому вам придется подождать следующего официального черновика от W3C. Конечно же, вы уже сейчас можете повлиять на развитие событий, внеся свои предложения.
Ресурсы
Первый и самый интересный ресурс, который стоит посетить, это официальная документация Selectors Level 4 от W3C. Просто важно помнить о том, что она все еще в разработке. Вы также можете просмотреть несколько интересных статей в интернете, как например статья от David Storey, участника команды разработчиков W3C.
-
O-striker -
1887 -
1 -
0
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...