—»     —»   Используем псевдо-классы CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Используем псевдо-классы CSS3

CSS3 – замечательная вещь, но можно крайне легко заиграться с анимациями и трансформациями (многие из которых имеют атрибут vendor-specific) и забыть о механизмах и селекторах, которые также были внесены в спецификацию. Ряд мощных новых псевдо-селекторов (16 из них представлены в самой свежей спецификации от W3C) позволяют нам выбирать элементы на базе новых критериев.

Перед тем, как мы окунёмся в мир псевдо-классов CSS3, давайте бегло пройдёмся по прошлому ВЕБа, и немного вспомним некоторые непонятные селекторы.

Беглый обзор истории псевдо-классов

Когда в 1996 году была выпущена спецификация CSS1, туда было включено всего лишь несколько псевдо-селекторов, которые вы, наверное, использовали или используете каждый день. Например:

:link

:visited

:hover

:active


Каждое из этих положений может быть задано элементу (зачастую это элемент «a»), после чего идёт имя псевдо-класса. Сложно подумать, что эти псевдо-классы были внесены в HTML4 лишь годом позже, командой разработчиков из W3C (в декабре 1997 года).

Приход CSS2

Далее нашему вниманию представляется технология CSS2, чья спецификация выходит двумя годами позже, в 1998 году. Наряду с прикольными трюками вроде позиционирования, мы встречаем новые псевдо-классы: first-child и :lang().

:lang

Существует несколько методов указания языка документа. Если вы используете HTML5, то сейчас это будет выглядеть так: «html lang="en"» сразу после указания типа документа (указание вашего локального языка, конечно же). Сейчас вы можете использовать :lang(en) для стилизации элементов на страницу, что крайне полезно, если вам нужен динамический язык на странице для отдельных элементов.

:first-child

Возможно, вы уже когда-то использовали :first-child в своих проектах. Зачастую этот псевдо-класс используется для добавления или удаления верхней границы первого элемента в списке. Странно, но этот псевдо-класс не был дополнен, например, псевдо-классом :last-child. Пришлось немного подождать, пока он появится уже в CSS3.

Для чего мы используем псевдо-классы?

Псевдо-классы кажутся настолько полезными потому, что они позволяют нам стилизовать содержимое динамически. В примере с ссылкой «a», представленном выше, мы имеем возможность стилизовать ссылки, и как они должны вести себя при взаимодействии с пользователями. Как видно, новые псевдо-классы позволяют нам динамически стилизовать контент, основываясь на его расположении в документе и на его состоянии.

16 новых псевдо-классов были представлено в качестве части CSS Proposed Recommendation от W3C, и они разделены на 4 группы: структурные псевдо-классы, псевдо-классы для указания положений элементов интерфейса, целевые псевдо-классы и псевдо-классы отрицания.

Используем псевдо-классы CSS3

W3C – убежище CSS.

Теперь давайте ознакомимся с 16 новыми псевдо-селекторами, и посмотрим, как же мы можем их применить. Мы будем использовать те же условные знаки наименований классов, как это делали W3C. Т.е. Е – это элемент, N – число, а S – селектор.

Отрывок кода

Вы сможете видеть эффекты CSS посредством приложенных отрывков кода к некоторым из новых селекторов. Мы возьмём постоянную форму и сделаем её подходящей для iPhone используя новый псевдо-класс CSS3.

Заметьте, что мы также можем использовать ID и селекторы класса для этой формы, но у нас есть отличная возможность использовать наш новый псевдо-класс для вращения и продемонстрировать, каким образом вам следует их использовать. Вот HTML-код (который вы можете наблюдать в действии):

<form>
<hgroup>
<h1>Awesome Widgets</h1>
<h2>All the cool kids have got one :)</h2>
</hgroup>
<fieldset id="email">
<legend>Where do we send your receipt?</legend>
<label for="email">Email Address</label>
<input type="email" name="email" placeholder="Email Address" />
</fieldset>

<fieldset id="details">
<legend>Personal Details</legend>
<select name="title" id="field_title">
  <option value="" selected="selected">Title</option>
  <option value="Mr">Mr</option>
  <option value="Mrs">Mrs</option>
  <option value="Miss">Miss</option>
</select>

<label for="firstname">First Name</label>
<input name="firstname" placeholder="First Name" />

<label for="initial">Initial</label>
<input name="initial" placeholder="Initial" size="3" />

<label for="surname">Surname</label>
<input name="surname" placeholder="Surname" />
</fieldset>

<fieldset id="payment">
<legend>Payment Details</legend>

<label for="cardname">Name on card</label>
<input name="cardname" placeholder="Name on card" />

<label for"cardnumber">Card number</label>
<input name="cardnumber" placeholder="Card number" />

<select name="cardType" id="field_cardType">
  <option value="" selected="selected">Select Card Type</option>
  <option value="1">Visa</option>
  <option value="2">American Express</option>
  <option value="3">MasterCard</option>
</select>

<label for="cardExpiryMonth">Expiry Date</label>
<select id="field_cardExpiryMonth" name="cardExpiryMonth">
  <option selected="selected" value="mm">MM</option>
   <option value="01">01</option>
   <option value="02">02</option>
   <option value="03">03</option>
   <option value="04">04</option>
   <option value="05">05</option>
   <option value="06">06</option>
   <option value="07">07</option>
   <option value="08">08</option>
   <option value="09">09</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
</select> /
<select id="field_cardExpiryYear" name="cardExpiryYear">
   <option value="yyyy">YYYY</option>
    <option value="2011">11</option>
    <option value="2012">12</option>
    <option value="2013">13</option>
    <option value="2014">14</option>
    <option value="2015">15</option>
    <option value="2016">16</option>
    <option value="2017">17</option>
    <option value="2018">18</option>
    <option value="2019">19</option>
</select>

<label for"securitycode">Security code</label>
<input name="securitycode" type="number" placeholder="Security code" size="3" />

<p>Would you like Insurance?</p>
<input type="radio" name="Insurance" id="insuranceYes" />
  <label for="insuranceYes">Yes Please!</label>
<input type="radio" name="Insurance" id="insuranceNo" />
  <label for="insuranceNo">No thanks</label>

</fieldset>

<fieldset id="submit">
<button type="submit" name="Submit" disabled>Here I come!</button>
</fieldset>
</form>

Используем псевдо-классы CSS3

Наша форма, до и после.

1. Структурные псевдо-классы

Судя по материалам W3C, структурные псевдо-классы делают следующее:

«…позволяют делать выбор, основываясь на дополнительной информации, которая содержится в древе документа, но не могут быть представлены посредством простых селекторов или комбинаторов».

Это означает, что мы имеем селекторы, которым был задан параметр динамического выбора содержимого, основываясь на его расположении в документе. Итак, давайте начнём с самого начала документа, с :root.

Используем псевдо-классы CSS3

Селекторы 3-го уровня на сайте W3C.

E:root

Псевдо-класс :root выбирает корневой элемент на странице. 99 раз из 100 это будет элемент «html». Например:

:root { background-color: #fcfcfc; }

Важно помнить, что вы можете стилизовать элемент «html», что будет более доступно к пониманию:

html { background-color: #fcfcfc; }

Пример формы iPhone

Давайте перейдём к нашему примеру кода и зададим документу немного основного текста и стилизацию фона:

:root {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
background: url(…/images/background.png) no-repeat #282826; }

E:nth-child(n)

Селектор :nth-child() может потребовать немного экспериментов для того, чтобы окончательно усвоить его. Самое простое внедрение заключается в использовании ключевиков: чётные или нечётные, которые окажутся очень полезными при отображении данных, содержащих колонки и ячейки. Например, мы можем воспользоваться следующим:

ul li:nth-child(odd) {
background-color: #666;
color: #fff; }

Это выделит каждую вторую ячейку в неупорядоченном списке. Вероятно, этот метод покажется вам крайне удобным при использовании таблиц. Например:

table tr:nth-child(even) { … }

Селектор :nth-child() может быть более гибким и определенным. Вы можете выбрать лишь третий элемент в списке, например, так:

li:nth-child(3) { … }

Учтите, что n не начинается с нуля, как это должно быть. Первый элемент – это :nth-child(1), второй – :nth-child(2), и так далее.

Мы также можем применять простую арифметику для создания более впечатляющих примеров. Рассмотрите следующий пример:

li:nth-child(2n) { … }

Когда бы мы ни использовали N таким образом, он отвечает за все положительные целые числа (пока в документе не закончатся элементы, из которых производится выбор!). В этом случае, выбор падёт на следующие пункты списка:

Ничего (2 × 0)
2-й элемент (2 × 1)
4-й элемент (2 × 2)
6-й элемент (2 × 3)
8-й элемент (2 × 4)
И так далее.

Это даёт нам то же, что и nth-child(even). Итак, давайте всё смешаем:

li:nth-child(5n) { … }

Это даёт нам:

Ничего (5 × 0)
5-й элемент (5 × 1)
10-й элемент (5 × 2)
15-й элемент (5 × 3)
20-й элемент (5 × 4)
И так далее.

Возможно, это будет полезным при работе с длинными таблицами, а возможно и нет. Мы также можем добавить другие числа в это уравнение:

li:nth-child(4n + 1) { … }

Это даёт нам:

1-й элемент ((4 × 0) + 1)
5-й элемент ((4 × 1) + 1)
9-й элемент ((4 × 2) + 1)
13-й элемент ((4 × 3) + 1)
17-й элемент ((4 × 4) + 1)
И так далее.

Здесь нам представляется отличный пример на сайте SitePoint. Если вы установите N в качестве отрицательного, у вас будет возможность выбрать первое число Х среди пунктов и так далее:

li:nth-child(-n + x) { … }

Представим, что вы хотите выбрать первые 5 элементов в списке. Тогда нам нужен следующий код CSS:

li:nth-child(-n + 5) { … }

Это даёт нам:

5-й элемент (-0 + 5)
4-й элемент (-1 + 5)
3-й элемент (-2 + 5)
2-й элемент (-3 + 5)
1-й элемент (-4 + 5)
Ничего (-5 + 5)

Если вы располагаете данные в порядке популярности, а затем хотите выделить, скажем, лучшие 10 пунктов, то это может быть полезным.

На сайте WebDesign & Such есть отличный пример выделения ячеек в зебровидной форме. Здесь также используется nth-child на практике.

Используем псевдо-классы CSS3

Зебровидная подсветка ячеек с помощью CSS3.

Если вам не требуется оформление каких-либо таблиц, то вы можете воспользоваться примером с Webvisionary Awards, который был выполнен с помощью :nth-child для стилизации отдельных разделов веб-сайта. Вот код CSS:

section > section:nth-child(even) {
background:rgba(255,255,255,.1)
url("../images/hr-damaged2.png") 0 bottom no-repeat;
}

Эффект на странице незначителен, но он добавляет один слой деталей, которые могут быть утеряны в старых версиях браузеров.

Используем псевдо-классы CSS3

Селекторы :nth-child в действии на сайте Webvisionary Awards.

Пример формы iPhone

Мы можем использовать :nth-child в некоторых местах нашего примера с формой iPhone, но давайте сосредоточимся на одном из них. Нам нужно спрятать надписи в первых трёх ячейках, и использовать вместо него текст-наполнитель. Вот код CSS:

form:nth-child(-n+3) label { display: none; }

Здесь мы ищём первые три дочерних элемента от «form» (которые в нашем коде являются ячейками), а затем выделяем надпись. Затем мы прячем надписи посредством display:none;.

E:nth-last-child(n)

Кроме путаницы с псевдо-классом :nth-child(), ребята из W3C также озаботились созданием :nth-last-child(n). Он работает по похожей схеме с :nth-child(), только в обратном направлении, начиная от последнего пункта в выделении.

li:nth-last-child(1) { … }

Код, предложенный выше, поможет вам выделать последний пункт списка, а следующий код поможет нам выделить предпоследний элемент:

li:nth-last-child(2) { … }

Конечно же, вам нужно будет создавать другие правила, как, например, это:

li:nth-last-child(2n+1) { … }

Но возможно вам захочется использовать следующий код для того, чтобы выделить 5 последних элементов в списке (основываясь на логических размышлениях, обсужденных выше):

li:nth-last-child(-n+5) { … }

Если что-то идёт не так, то вы можете воспользоваться полезным тестером структурных псевдо-классов CSS3, разработанным Леа Вероу (Lea Verou).

Используем псевдо-классы CSS3

Тестер структурных псевдо-классов CSS3.

Пример с формой iPhone

Мы можем использовать :nth-last-child в нашем примере для того, чтобы добавить закруглённые углы нашему полю для ввода номера кредитной карточки. Вот наш код CSS, который крайне специфичен, но может дать нам пищу для размышления о том, как можно связать псевдо-селекторы вместе:

fieldset:nth-last-child(2) input:nth-last-of-type(3) {
border-radius: 10px; }

Для начала мы берём предпоследнюю ячейку и выбираем поле ввода, которые третье с конца (в этом случае, это будет поле ввода номера кредитки). Затем мы добавляет параметр border-radius.

:nth-of-type(n)

Теперь мы сделаем ещё более специфически, и применим стили только к отдельным типам элементов. Например, давайте сделаем так, чтобы в статье лишь первый абзац выделялся большим шрифтом. Вот код CSS:

article p:nth-of-type(1) { font-size: 1.5em; }

Возможно, вам захочется выровнять одно изображение в статье по правой стороне, а другое – по левой. Мы можем использовать следующие ключевики для реализации:

article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }

С помощью :nth-child() и :nth-last-child() можно использовать математические уравнения:

article p:nth-of-type(2n+2) { … }
article p:nth-of-type(-n+1) { … }

Важно помнить, что, если вам нужно применить данную специфику относительно таргетирования элементов, то нужно использовать описательные имена классов, что может значительно упростить процесс разработки.

Саймон Фостер (Simon Foster) разработал красивую инфографику о коллекции записей 45 RPM, и он использовал :nth-of-type для стилизации некоторых данных. Вот отрывок из кода CSS, который задаёт различные фоны каждому типу жанра:

ul#genre li:nth-of-type(1) {
  width:32.9%;
    background:url(images/orangenoise.jpg);
}
ul#genre li:nth-of-type(2) {
  width:15.2%;
    background:url(images/bluenoise.jpg);
}
ul#genre li:nth-of-type(3) {
  width:13.1%;
    background:url(images/greennoise.jpg);
}

И вот так это всё выглядит на сайте:

Используем псевдо-классы CSS3

Селекторы :nth-of-type на «For the Record».

Пример с формой iPhone

Предположим, что нам надо, чтобы у каждого второго поля ввода были закруглены углы с нижней стороны. Это можно реализовать посредством CSS:

input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

В нашем примере нам надо применить это лишь к одной ячейке с информацией для оплаты, так как ячейка с личными данными имеет три поля ввода. Также нужно быть внимательными, чтобы не выделить ничего из радио-кнопок. Вот итоговый код CSS:

#payment input:nth-of-type(even):not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #999;
margin-bottom: 10px; }

Мы объясним :not далее в статье.

:nth-last-of-type(n)

Будем надеяться, что сейчас вы увидите, что к чему: :nth-last-of-type() начинается в конце выделенного элемента и работает в обратном направлении.

Для того чтобы выбрать последний абзац в статье, вы можете использовать этот код:

article p:nth-last-of-type(1) { … }

Возможно, вам захочется поменять этот селектор на :last-child, если ваши статьи не всегда заканчиваются абзацем.

:first-of-type и :last-of-type

Если :first-of-type и :last-of-type будут через чур специфичными для ваших задач, то вы можете использовать несколько более упрощённых селекторов. Например, вместо этого:

article p:nth-of-type(1) {
font-size: 1.5em; }

вы можете использовать это:

article p:first-of-type {
font-size: 1.5em; }

Как вы, возможно, ожидали, :last-of-type работает исключительно по такому же принципу, но с обратной стороны.

Пример с формой iPhone

Мы можем использовать :first-of-type, так и :last-of-type в нашем примере с формой iPhone, особенно при стилизации закругленных углов. Вот код CSS:

fieldset input:first-of-type:not([type=radio]) {
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

fieldset input:last-of-type:not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

Первая строка CSS-кода добавляет закруглённые углы всем полям с классом :first-of-type в ячейке, которые не являются радио-кнопками. Вторая строка кода добавляет закругленные углы нижней части поля ввода в ячейке.

:only-of-type

Есть ещё один селектор, на который нужно взглянуть – :only-of-type(). Он полезен для выделения элементов, которые являются единственным представителем определенного типа в своём родительском элементе.

Например, рассмотрим разницу между этим CSS-селектором:

p {
font-size: 18px; }

И этим:

p:only-of-type {
font-size: 18px; }

Первый селектор будет стилизовать каждый элемент абзаца на странице. Второй селектор будет охватывать абзац, который единственный является абзацем в своём родительском элементе.

Это может пригодиться, когда вы стилизуете содержимое, которое было динамически извлечено из базы данных, а запрос предоставил лишь результат.

На сайте Devsnippet есть демо, в котором отдельные изображения стилизованы по-разному.

Используем псевдо-классы CSS3

Демо от Devsnippet.

Пример с формой iPhone

В случае с нашим примером формы iPhone, мы можем быть уверенными в том, что все поля (которые являются дочерними элементами) ячейки будут иметь закруглённые углы, как сверху, так и снизу. CSS-код будет таким:

fieldset input:only-of-type {
border-radius: 10px; }

:last-child

Немного странно, что :first-child являлся частью спецификации CSS2, но его вспомогательный селектор, :last-child, не появлялся вплоть до CSS3. Здесь нам не нужны уравнения или ключевики, селектор просто выделят послений элемент. Например:

li {
border-bottom: 1px solid #ccc; }

li:last-child {
border-bottom: none; }

Очень удобный способ удаления нижних границ со списков. Вы часто можете наблюдать данный метод в виджетах WordPress.

Рэйчел Эндрю (Rachel Andrew) рассматривает применение селектора :last-child и других CSS псевдо-селекторов с 24 сторон в её статье «Cleaner Code With CSS3 Selectors». Рэйчел показывает нам, каким образом можно использовать этот селектор для создания отлично отформатированной галереи изображений без лишних классов.

Используем псевдо-классы CSS3

:last-child в действии от Рэйчел Эндрю (Rachel Andrew).

:only-child

Если элемент является единственным дочерним в своём родительском элементе, то его можно выделять с помощью :only-child. В отличие от :only-of-type, здесь не важно, какого типа данный элемент. Например:

li:only-child { … }

Мы можем использовать его для выделения элементов списка, которые являются единственными в своих родительских «ol» или «ul».

:empty

Наконец, среди структурных псевдо-классов также имеется :empty. Не удивительно то, что данный класс выделяет только те элементы, у которых нет дочерних элементов или нет содержимого. Опять, это может быть полезным при работе с динамическим содержимым, извлекаемым из базы данных.

#results:empty {
background-color: #fcc; }

Вы можете использовать данный класс для привлечения внимания посетителей к секции с пустыми результатами поиска.

2. Таргетированные псевдо-классы

:target

Один из популярных псевдо-классов, так как он позволяет нам стилизовать элементы на странице, основываясь на URL. Если у URL есть идентификатор (который следует за #), то псевдо-класс :target стилизует элемент, который делит ID с идентификатором. Возьмём URL, который выглядит примерно так:

«http://www.example.com/css3-pseudo-selectors#summary»

Раздел с общими данными об ID может быть стилизован так:

:target {
background-color: #fcc; }

Это отличный способ стилизации элементов на страницах, переход на которые был осуществлён со стороннего контента. Вы также можете использовать этот класс с внутренними анкорами для выделения содержимого, которое пользователи могли пропустить.

Вероятно, наиболее впечатляющий способ использования :target можно посмотреть на сайте Scrolling Site of Green от Кори Мвамба (Corey Mwamba). Кори использует некоторые креативные функции CSS3 и псевдо-класс :target для создания анимированной навигации с вкладками. Демо состоит из некоторых крайне креативных отрывков CSS3, что демонстрирует нам то, как псевдо-классы следует использовать в комбинации с другими CSS-селекторами.

Используем псевдо-классы CSS3

Scrolling Site of Green от Кори Мвамба (Corey Mwamba).

Есть также интересный пример на сайте Web Designer Notebook. Здесь :target и анимации WebKit использованы для выделения блоков текста и целевых div’ах. Крис Койер (Chris Coyier) также создал систему вкладок «:target-based» на сайте CSS-Tricks.

Пример с формой iPhone

Как видно, на демо-странице была добавлена панель навигации в верхней части, которая сбрасывает вас на различные отделы формы. Мы можем выделить любой отдел, на который переходит пользователь, посредством следующего кода CSS:

:target {
background-color: rgba(255,255,255,0.3);

-webkit-border-radius:
10px;}

3. Псевдо-классы положений элементов интерфейса

:enabled и :disabled

Вместе с :checked, :enabled и :disabled представляют собой 3 псевдо-класса для указания положения элементов интерфейса. Т.е., они позволяют вам стилизовать элементы (зачастую элементы форм), основываясь на их положении. Положение может быть выставлено пользователем (например, :checked) или разработчиком (например, :enabled и :disabled). Например, мы можем использовать следующий код:

input:enabled {
background-color: #dfd; }

input:disabled {
background-color: #fdd; }

Это отличный способ взаимодействия с пользователями, указания того, что пользователи могут заполнить, а что не могут. Зачастую данную динамическую функцию можно встретить в дополнении с javascript.

Пример с формой iPhone

Для того чтобы продемонстрировать :disabled на практике, мы отключили кнопку подтверждения/отправки, приуроченную к форме, в коде HTML, и добавили эту строку кода CSS:

:disabled {
color: #600; }

Текст кнопки красный!

:checked

Третий псевдо-класс – это :checked. Он взаимодействует с положением элементов типа чекбокса или радио-кнопки. Опять же, это очень полезный метод взаимодействия с пользователями. Например:

input[type=radio]:checked {
font-weight: bold; }

Пример с формой iPhone

Мы можем использовать CSS для выделения текста возле каждой радио-кнопки, как только кнопка будет нажата:

input:checked + label {
text-shadow: 0 0 6px #fff; }

Для начала, мы выделяем любой вводный элемент, который был отмечен, а затем мы ищем каждый последующий элемент «span», который содержит наш текст. Выделяем текст посредством простого параметра text-shadow, что создаёт взаимодействие с посетителями.

4. Псевдо-классы отрицания

:not

Ещё один излюбленный псевдо-класс, так как он выделяет весь контент, за исключением того элемента, который вы определите. Например:

:not(footer) { … }

Это выделяет весь контент на странице, который не принадлежит подвалу (footer). Когда этот псевдо-класс используется с полями ввода, они позволяют нам немного схитрить:

input:not([type=submit]) { … }
input:not(disabled) { … }

Первая строка выделяет каждое поле ввода, которое не относится к кнопке «Submit», что очень удобно для стилизации форм. Вторая строка выделяет все элементы ввода, которые не активированы, что также удобно для взаимодействия при заполнении форм.

Пример с формой iPhone

Вы уже видели селектор :not в действии. Он особенно силен при связке с другими CSS3-псевдо-классами. Давайте поближе взглянем на пример:

fieldset input:not([type=radio]) {
margin: 0;
width: 290px;
font-size: 18px;
border-radius: 0;
border-bottom: 0;
border-color: #999;
padding: 8px 10px;}

Здесь мы выделяем все поля ввода внутри ячейки, которые не являются радио-кнопками. Это очень удобно, если нам надо стилизовать формы, так как вам часто нужно будет стилизовать поля ввода отлично от коробов выбора, радио-кнопок и кнопок подтверждения (Submit).

Посмотрите на финальный итог.

Хорошо забытое старое

Давайте вернёмся в начало нашей статьи, к скромному псевдо-классу a:link. Недавно в наш мир пришла технология HTML5, и принесла с собой радикальные изменения элемента «a», с помощью которого можно применить дополнительные эффекты к псевдо-селектору CSS3.

Теперь элемент «a» может быть обёрнут вокруг блочных элементов, превращая целые отделы вашей страницы в ссылки (а также те отделы, которые не содержат других интерактивных элементов). Несмотря на то, что javascript считается самым популярным методом создания кликабельных элементов «div», теперь у вас есть возможность оборачивать отделы в тэг «a», примерно так:

<a href="http://www.smashing-magazine.com">
<div id="advert">
<hgroup>
<h1>Jackson’s Widgets</h1>
<h2>The finest widgets in Kentucky</h2>
</hgroup>
<p>Buy Jackson’s Widgets today,
and be sure of a trouble-free life for you,
your widget and your machinery.
Trusted and sold since 1896.</p>
</div>
</a>

Внедрение CSS псевдо-селекторов – это то, посредством чего вы можете стилизовать div’ы по принципу стилизации ссылки параметром a:hover или a:active. Например:

a:hover #advert {
background-color: #f7f7f7; }

Что-либо, что будет мешать работе javascript и повышать важность и эффективность семантики кода, не может быть плохим!

Кросс-браузерная совместимость

Конечно же, вы начнёте возмущаться по поводу того, что IE8 не поддерживает какие-либо из предложенных селекторов, хотя последние версии браузеров Chrome, Opera, Safari и Firefox уже имеют такую поддержку. Прежде чем возмущаться, ознакомьтесь с продолжением статьи.

Internet Explorer 9

Конечно, если вы не жили в пещере до прошлой недели, как минимум, то вам должно быть известно, что Microsoft уже представили обществу свой новый браузер - Internet Explorer версии 9. Хорошие новости заключаются в том, что браузер действительно хорош. Хотя мы и не ожидаем, что прочитав эту статью, все сразу ринутся менять браузеры, просто следует помнить о том, что большинство пользователей мира используют стандартный браузер, идущий вместе с Windows. И, благодаря постоянным обновлениям от Microsoft, можно быть уверенным в том, что почти все пользователи ОС Windwos, уже используют 9-ю версию браузера. Это отличная новость для веб-дизайнеров, а также это хорошо для псевдо-селекторов. Но что же насчёт IE8 и предыдущих версий?

Используем псевдо-классы CSS3

Internet Explorer 9 уже здесь!

javascript

Здесь наш старый друг javascript приходит на помощь. Нам очень нравится Selectivizr от Кейта Кларка (Keith Clark). Кейт совместил любимый скрипт и библиотеку javascript, которая добавляет функционал селектора CSS3-псевдо-классов в ранние версии IE. Будьте уверены в том, что некоторые библиотеки значительно лучше других. Если вы используете MooTools с Selectivizr, то вам будут доступны все псевдо-классы, но если вы полагаетесь на jQuery, то некоторые селекторы не будут работать вообще.

Используем псевдо-классы CSS3

Selectivizr

Недавно Кейт выпустил jQuery-плагин, который расширяет возможности jQuery, и внедряет поддержку следующих псевдо-классов CSS3:

:first-of-type

:last-of-type

:only-of-type

:nth-of-type

:nth-last-of-type


Также стоит взглянуть на вездесущий скрипт ie7.js от Дина Эдвардса (Dean Edwards). Скрипт решает число проблем, возникающих при работе с IE, включая также проблемы с поддержкой CSS3 псевдо-селекторов.

Итак, стоит ли применять CSS3 псевдо-селекторы сегодня?

Нам кажется, что ответ на этот вопрос зависит от того, каким образом вы воспринимаете javascript. Конечно, нельзя отрицать, что все псевдо-селекторы могут быть заменены классами и id, но и также нельзя спорить с тем, что псевдо-селекторы намного удобнее, когда речь идёт о стилизации комплексных шаблонов. Если вы считаете, что псевдо-селекторы улучшают работу функционала и позволяют легче воспринимать CSS, то мы рекомендуем вам обязательно использовать селекторы.

Вы можете использовать два селектора, и опираться на имя класса, но это лишь заставит вас делать двойную работу. Это также означает, что вам не понадобятся псевдо-классы. Но если вы решили идти этим путём, то ваш код будет выглядеть примерно так:

li:nth-of-type(3),
li.third { … }

Данный метод не настолько гибкий, как использование псевдо-классов, так как вам нужно постоянно обновлять HTML и CSS-код, когда содержимое страницы изменяется.

Если многие ваши пользователи не имеют поддержки javascript, то это будет очень неприятно. Многие веб-дизайнеры утверждают, что этот функционал (имеется в виду javascript) отличается от разметки (т.е. CSS), и поэтому вам не стоит полагаться на javascript для того, чтобы задействовать селекторы в IE версии 8 и ниже.

Хотя мы и согласны с этой теорией, на практике же мы верим, что предоставление 99% удобства пользования вашим веб-сайтом – это гораздо лучше и правильнее, чем учитывать требования оставшегося 1% (или насколько большой бы ни была база ваших посетителей с отключенной поддержкой JS).

Руководствуйтесь результатами анализа вашего веб-сайта, и будьте готовы принимать решения по совершенствованию навыков в роли веб-дизайнера и, что более важно, предоставляйте лучшие возможности большей части своих пользователей.

Итог

Сложно не расстраиваться ввиду полного отсутствия поддержки псевдо-классов в IE8. Возможно, данный метод принудительного внедрения поддержки повлияет на скорость загрузки и работы страниц, но, в то же время, нас немного удивляет, что пользователи IE ранних версией не могут вдоволь насладиться технологиями, если разработчики не будут прибегать к использованию специальных дополнений и хитростей. Хотя большинство современных браузеров легко поддерживают эту технологию.

Профессор Фарнсворс (Farnsworth) говорит, что есть и хорошие новости. Microsoft заявляют, что в новой, девятой, версии браузера Internet Explorer все описанные здесь псевдо-селекторы поддерживаются без проблем.

CSS3 псевдо-селекторы не будут занимать много места в ваших таблицах стилей. Они очень динамичны и очень специфичны, и без труда позволяют вам вносить финальные штрихи во внешний вид страницы и в её стиль. Возможно, вам захочется убрать нижнюю границу последнего элемента списка или дать возможность пользователям взаимодействовать с формами. Всё это возможно с помощью CSS3, и радует то, что эта технология всё быстрее и быстрее набирает обороты. Вскоре CSS3 станет неотъемлемой частью разработки каждого веб-сайта.

Если вы встречали какие-либо интересные и креативные способы применения селекторов, то, пожалуйста, опишите их в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 16574   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2020    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930