Модное слово «CSS4» появилось из неоткуда, точно также, как до этого мы привыкали к CSS3 и придерживались его на протяжении какого-то времени. Разработчики браузеров прилагают все усилия для реализации новых функций, а разработчики интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. Но сейчас, услышав о CSS4, вы можете спросить, « А как же CSS3? С этим уже покончено?»
Мы упорно трудились, распространяя ценные качества CSS3, и сейчас он устарел? В действительности, ничего не произошло, просто естественное развитие — процесс, который поможет CSS в целом — потому что «Уровень 3» и «Уровень 4» просто соблюдают присваивание имен свойствам различных документов
Почему Уровень 4? Как насчет CSS3?
«Уровень 4» это всего лишь цифра W3C документа. Разве вы не слышали о «Фильтр Эффекте, первого уровня» новой документации? К чему он должен относиться? К CSS3? CSS4? А может быть к CSS1, потому что Уровень 1? Это неважно, так как CSS это просто CSS. Селекторы представляют собой первый документ спецификаций четвертого уровня, пока это только набросок, он находится в разработке. Когда дело касается количества свойств, каждый документ независим от другого, они разрабатываются отдельно.
Это большое преимущество, потому как законченные части документа могут быть закрытыми и применяться в рекомендациях как селекторы третьего уровня. Быстро заканчивать документ и продвигать проблемные части к следующему уровню — помогает двигать веб систему вперед, потому как она внедряет по одной спецификации за раз.
Модное слово «CSS3» постигнет та же участь, что и «HTML5»: мы не говорим о количестве свойств, но о языке в целом. HTML5 это практически следующая версия языка верстки, который добавляет поддержку новых элементов. Но когда вы говорите об этом, вы можете основываться на чем угодно, начиная от аудио API до веб-сокетов и геолокации (которые даже не являются частью HTML5 спецификации).
То же самое касается CSS3: это всего лишь крошечная часть той магии, которую мы делаем с CSS при создании последних демо-версий. Вам не обязательно знать какая часть свойства border-radius или box-shadow относится к нему, пока вы знаете, как использовать это должным образом. То же самое касается и селекторов; они просто еще одна версия характеристик «Селекторов».
Что такое селекторы
Документация описывает селекторы как шаблоны, соответствующие элементам иерархической схемы. Большинство селекторов 4-го уровня спецификации являются псевдо-классами. Селекторы были с нами с самого начала CSS, но сейчас они находятся на четвертом уровне и обрели много новых интересных дополнений. Давайте перейдем к действию и посмотрим на интересные вещи. Я не буду описывать весь документ, только новые дополнения в четвертом уровне.
Логические Комбинаторы: :matches, :not
Давайте начнем с логических псевдо-классов. Первый :matches, некоторые из вас, возможно, уже знают из Mozilla, :-moz-any() , уже давно был в 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:matches(:link, :hover, :visited, :focus) {
color: red;
}
Просто, правда? Хотя, этот пример может казаться глупым, он показывает эффективность :matches псевдо-классов, и это может использоваться в более сложных ситуациях:
article:matches(.active, .visible, #important) {
background: red;
}
Второй логический комбинатор, который мы рассмотрим, был представлен в CSS3 свойствах, но он стал еще более эффективным на четвертом уровне. Я говорю о :not, простом отрицании псевдо-класса, который теперь может использовать список селекторов в качестве параметров:
p:not(.active, .visible) {
color: red;
}
Код, написанный выше, станет красным для всех абзацев, для которых active или visible класс не задан в верстке.
Расположение псевдо-классов: :any-link, :local-link
Благодаря расположению псевдо-классов, мы будем иметь больше контроля над стилем ссылок. Первый, :any-link (временное имя, которое может измениться) собирает определения a:link и a:visited в одно, так что вам не придется писать оба:
a:link,
a:visited {
color: red;
}
Теперь это не будет иметь значения, переходил ли пользователь по этой ссылке или нет. Она в любом случае будет иметь такой же стиль:
a:any-link {
color: red;
}
Наш второй псевдо-класс :local-link, более интересен. Можно, например, изменить стиль ссылки, заданной для вашей домашней страницы, оставив все остальные нетронутыми:
nav :local-link {
text-decoration: none;
}
Благодаря этой CSS строке, ссылки, указывающие на текущую страницу не будут иметь text-decoration стиль, поэтому они будут отличаться в меню или хлебных крошках от других.
Давайте рассмотрим другой пример:
:not(:local-link(0)) {
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;
}
Предположим, что текущий адрес http://end3r.com/2012/10/20/some-title/, и у вас есть эти ссылки в хлебных крошках:
- Домашняя страница
http://end3r.com/ - 2012
http://end3r.com/2012/ - Октябрь 2012
http://end3r.com/2012/10/ - 20 октября 2012
http://end3r.com/2012/10/20/ - Статьи
http://end3r.com/2012/10/20/some-title/
Первая ссылка будет красной, вторая – зеленой, третья – синей, затем желтой, затем серой.
Время-измеряющие псевдо-классы: :past, :current, :future
Эти псевдо-классы очень удобные для пользователей, читающих с экрана. Всего лишь одно слово, заданное в CSS строке может изменить стиль (караоке-стиль):
p:current {
background: yellow;
}
Это позволит выделить заданное слово желтым цветом (yellow).
Во втором случае использования это стилизирование подзаголовков для WebVTT видео формата, изменение их цвета и других свойств. Псевдо-классы.:past и :future соответственно относятся, к элементам, которые были и будут выбраны.
Статус псевдо-классов пользовательского интерфейса: :indeterminate
Элементам онлайн формы пользовательского интерфейса могут быть заданы различные интересные псевдо-классы, такие как :enabled :disabled или :checked, один из них довольно новый: :indeterminate. Как вы возможно знаете, чекбоксы и переключатели имеют два состояния, они либо выбраны, либо не выбраны. Любой из двух состояний может быть включен при помощи :checked псевдо-класса (и :not(:checked) для невыбранных). Но что если вы хотите стилизовать входящие значения которые еще не использовались? Они не являются выбранными, но и невыбранными тоже, поэтому их статус — indeterminate (неопределенный). Просто, верно? Мы можем стилизовать входящие значения которые еще не использовались, для которых еще не был задан статус по умолчанию:
input.checkbox:indeterminate {
background: #ccc;
}
Аналогичным образом можно задать indeterminate статус индикатору выполнения, когда процент выполнения неизвестен:
progress:indeterminate {
background: #ccc;
}
В этой ситуации мы можем указать статус по умолчанию и стилизовать его для уведомлений пользователя о неопределенном оставшемся времени загрузки ресурса.
Иерархическая структура Псевдо-Классов: :nth-match, :nth-last-match
Иерархическая структура псевдо-классов также является интересным нововведением в свойствах селекторов четвертого уровня. При помощи :nth-match, вы сейчас можете добиться большего, чем когда либо. Любопытно как это работает? Итак, если вы возьмете :nth-child псевдо-класс, который выбирает элемент, и объедините его с :matches, псевдо-классом, то вы и получите ответ.
Предположим у вас есть список ссылок, некоторые из которых имеют класс active, а вы хотите выбрать только четно пронумерованные элементы из активных ссылок. Мы могли бы использовать :nth-child(even), чтобы выбрать все четно пронумерованные дочерние элементы в списке, но мы хотим не этого, потому что в таком случае мы бы не учитывали класс active. Также :matches(.active) не был бы эффективным в данном случае, так как это было бы целевым выбором всех all элемено …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров