Недавно я опубликовал статью на SitePoint, в которой демонстрируются различные примеры использования CSS3 2D и 3D-преобразования . CSS3 нас так сильно волнует, что вы можете простить, что это самая продвинутая версия CSS.
Не так.
Даже сейчас, так же, как вы все еще учитесь использовать CSS3 и HTML5, эти талантливые ребята из W3C выпустили рабочий проект стандартов уровня 4 для селекторов CSS, создавая слух, что CSS4 близок.
CSS3 уже устарел?
Точно нет! Нам еще многое предстоит сделать, прежде чем CSS3 станет широко использоваться и полностью поддерживается. Сеть, однако, находится в состоянии постоянного преобразования. Селекторный уровень 4 — это проект редактора, выпущенный 16 января. Он предназначен только для обсуждения и должен рассматриваться как работа в процессе разработки.
Также обратите внимание, что обсуждаемый уровень селекторов 4-го уровня не соответствует версии 4 выпускаемого CSS.
Что он показывает, так это различные новые способы использования селекторов в таблицах стилей. То, что эти разработки достигли уровня 4, показывает, что, вероятно, будет включено в CSS4. Итак, мы смотрим на путь к CSS4, и нам предстоит еще очень долгий путь.
В этой статье я попытаюсь осветить некоторые наиболее интересные и потенциально важные способы использования селекторов уровня 4.
Какие селекторы?
Селекторы — это условия сопоставления с образцом в древовидной структуре HTML. Мы используем селекторы с уровня 1 CSS. Селектор может варьироваться от простых имен элементов до сложных представлений. Документ уровня 4 о селекторах в основном состоит из псевдоклассов для добавления к ним эффектов. Это документирует некоторые интересные и интересные особенности, которые я объясню.
Основные примеры селекторов:
h1{ font-family: arial; } /* Element matching selector for matching heading1 statements */ a{ text-decoration: underline; } /* Element matching selector for hyperlinks in the documents */
h1, h2, h3{ font-color: blue; } /* combination of selectors */
Логические комбинации:: спички и: нет
Как и в псевдоклассе Mozilla :-moz-any() , CSS, наконец, имеет собственный псевдокласс соответствия :matches . Используя :matches вы можете группировать и выбирать элементы. Это функциональный псевдокласс, который принимает список селектора в качестве аргумента. В селекторах уровня 4 вы можете включать только составные селекторы в качестве аргумента в :matches . Комбинаторы, такие как пробелы, больше символов и т. Д., Не являются допустимыми аргументами.
Вы не можете даже вкладывать :matches внутри себя или внутри :not псевдокласс, например :matches(:matches(…)) или :not(:matches()) . Это недопустимое использование :matches в новых спецификациях.
Вместо того:
a:link, a:hover, a:visited, a:focus{ color:red; }
Ты можешь использовать:
a:matches(:link, :hover, :visited, :focus){ color:red; }
Хотя это выглядит просто, вы можете использовать его различными сложными способами, когда у вас есть больше элементов для группировки, как:
div:matches(.active, .visible, #main){ background: blue; }
Посмотрим, как использовать второй логический комбинатор :not . Это псевдокласс отрицания, который принимает список других селекторов в качестве аргументов. Иногда у нас есть больше элементов для применения определенного стиля и исключения нескольких элементов из списка. Вы можете использовать :not в таких случаях и передать список селекторов, которые вы не хотите применять определенный стиль.
h1:not(#title, .active){ color: #F2F2F2; }
Код выше даст всем элементам h1 , которые не являются #title и .active цветовой код #F2F2F2 . Интересно не?
Псевдоклассы на основе определения местоположения: ЛЮБОЙ ССЫЛКА и: ЛОКАЛЬНАЯ ССЫЛКА
Псевдоклассы, основанные на местоположении, дают вам больше возможностей для разработки элементов ссылок. В документе уровня 4 говорится, что это временное имя, и оно может измениться в будущем. Он представляет любой элемент, являющийся исходным якорем гиперссылки. Он объединяет a:visited себе a:visited и a:lin k, поэтому вам не нужно писать это дважды.
Например:
a:link, a:visited{ color: blue; }
Может быть переписан как:
a:any-link{ color:blue; }
Приведенный выше код закрасит все элементы ссылки синим цветом, независимо от того, были они посещены или нет.
Еще одна очень интересная функция, добавленная в этот документ :local-link . С его помощью вы можете применять стили тех ссылок, которые указывают на текущий документ. Это поможет веб-дизайнерам по-другому взглянуть на ссылки, которые являются локальными и не открывают другие веб-страницы.
a:local-link{ color: green; }сa:local-link{ color: green; }
Вы также можете сопоставить уровень URL локальной ссылки, используя параметры в :local-link . Например:
a:local-link(0){ color: #888888; } a:local-link(1){ color: green; } a:local-link(2){ color: blue; }сa:local-link(0){ color: #888888; } a:local-link(1){ color: green; } a:local-link(2){ color: blue; }сa:local-link(0){ color: #888888; } a:local-link(1){ color: green; } a:local-link(2){ color: blue; }сa:local-link(0){ color: #888888; } a:local-link(1){ color: green; } a:local-link(2){ color: blue; }
Позвольте мне объяснить вам более четко с помощью примера ссылки: http://www.sitepoint.com/tag/css/
- Ссылка http://www.sitepoint.com будет цветной # 888888 в соответствии с вышеуказанным стилем.
- Ссылка http://www.sitepoint.com/tag/ будет окрашена в зеленый цвет и
- Ссылка http://www.sitepoint.com/tag/css/ будет окрашена в синий цвет.
Трехмерные псевдоклассы:: CURRENT,: PAST и: FUTURE
Эти псевдоклассы дают трехмерные эффекты тексту на веб-страницах. Вы можете использовать его, чтобы выделить часть веб-страниц, которые в данный момент читаются в речи. Например:
:current(p, li, dt, dd) { background: yellow; }
Псевдокласс :past представляет текстовую часть до :current части, а псевдокласс :future представляет следующую часть. Выделение и размывание текста с помощью этих псевдоклассов обеспечит читателям удобный просмотр документа.
Сетка-структурные псевдоклассы:: COLUMN,: NTH-COLUMN и: NTH-LAST-COLUMN
Проектирование на основе столбцов уже было введено в CSS3, но проектирование каждого столбца веб-страницы было сложным. С введением псевдоклассов со структурой сетки разработчикам, несомненно, будет легче задавать разные стили для разных столбцов документа.
Например:
:column(.full){ background: #F2F2F2; } .nth-column(odd){ color: #999999; }
В приведенном выше коде фон всех столбцов .full будет изменен на #F2F2F2 а нечетные столбцы будут иметь цветовой код #999999 .
Родительский Селектор
Я считаю, что это самое важное дополнение к списку всех новых селекторов.
Дизайнеры жаловались на потерю фокуса родительского элемента, когда дочерний элемент активен. Было невозможно применить динамические стили к родительскому элементу, когда у ребенка был фокус.
Например, в случае разработки выпадающего меню, когда фокус был на элементе li самого низкого уровня, основной родительский элемент li всегда терял фокус. В ul li a.active акцент был сделан на элементе ссылки, а не на li . С помощью родительского селектора вы теперь можете сказать браузеру, что хотите применить стиль к li вместо a . Давайте посмотрим на рабочий пример.
ul li! a.active { color: red; }
Элемент li был выделен красным цветом вместо a:activ e в приведенном выше коде.
body! header a:hover { background: red; }
Тело получило стиль вместо элемента ссылки в приведенном выше фрагменте.
Вывод
Теперь, когда мы увидели новый уровень Селекторов в CSS, я лично очень хочу использовать их в своих проектах. Однако нам всем придется подождать некоторое время, прежде чем они будут реализованы в наших браузерах.
Селекторы были самыми важными членами семейства CSS. Теперь, представив документ 4 уровня, они еще раз доказали свою важность.
Для получения подробной информации обо всех изменениях, вы можете перейти к полной документации на веб-сайте W3C для получения дополнительной информации.