Сегодняшние разработчики не просто должны понимать, как писать CSS, нам нужно знать, как писать это эффективно. Что означает «эффективно», может зависеть от вашего проекта и среды.
Возможно, у вас есть команда с несколькими участниками, работающими с CSS, и вам нужен эффективный способ совместной работы. Или, может быть, у вас огромный корпоративный сайт, и вам нужен CSS, оптимизированный для скорости. Вы могли бы даже работать с устаревшей системой, которая ограничивает доступ к HTML, что означает, что вам нужны эффективные селекторы для эффективного стиля элементов без идентификаторов или классов. Вы можете даже столкнуться со всеми этими ситуациями и даже больше.
Какими бы ни были ваши цели в CSS, лучший способ их достичь — это знать ваши варианты, а это значит понимать все селекторы, доступные вам. В этой серии из двух частей я рассмотрю новые селекторы в CSS3, начиная со структурных псевдоклассов .
Что за псевдокласс?
CSS псевдоклассы целевые элементы, которые не могут быть нацелены с помощью комбинаторов или простых селекторов, таких как id или class . Псевдоклассы используются для выбора элементов на основе их атрибутов, состояний и относительного положения. Например, вы, вероятно, уже знакомы с псевдоклассами для состояний ссылок :
:link :visited :hover :active :focus
CSS3 представляет ряд новых псевдоклассов, включая структурные псевдоклассы, которые нацеливают элементы в соответствии с их положением в дереве документа и отношением к другим элементам. Вот список структурных псевдоклассов, примеры которых вы увидите в этой статье.
:root :only-child :empty :nth-child(n) :nth-last-child(n) :first-of-type :last-of-type :only-of-type :nth-of-type(n) :nth-last-of-type(n) :first-child :last-childво-:root :only-child :empty :nth-child(n) :nth-last-child(n) :first-of-type :last-of-type :only-of-type :nth-of-type(n) :nth-last-of-type(n) :first-child :last-child
Прежде чем мы рассмотрим детали, давайте кратко коснемся синтаксиса, который вы используете с псевдоклассами.
Синтаксис псевдокласса
Синтаксис для псевдоклассов использует двоеточие (:), за которым следует имя псевдокласса:
:pseudo-class {}
Если вы хотите нацелиться на определенный элемент ( e ), вы добавляете этот элемент в начало синтаксиса псевдокласса:
e:pseudo-class {}
Вы можете даже использовать псевдоклассы вместе с id и селекторами class , как вы видите здесь:
#id:pseudo-class {} .class:pseudo-class {}
Числовые значения
Некоторые из псевдоклассов CSS3 предназначаются для элементов на основе определенного местоположения элементов в дереве документа. Вы указываете позицию с числовым значением в скобках ( n ), добавленных к имени псевдокласса:
:pseudo-class(n) {}
Значение ( n ) может быть целым числом для обозначения позиции элемента в дереве документа. Следующий пример нацелен на третий элемент, который соответствует правилу псевдокласса:
:pseudo-class(3) {}
Вы также можете указать числовые формулы, такие как «каждый пятый элемент», который указан как значение ( 5n ):
:pseudo-class(5n) {}
Кроме того, вы можете указать формулу смещения (допустимые отрицательные значения; по умолчанию — ноль), добавив ( + ) или вычтя ( - ) значение смещения:
:pseudo-class(5n+1) {}
Эти новые селекторы также позволяют нацеливать элементы в порядке их дерева документов с ключевыми словами нечетное и четное. Например, если вы хотите настроить таргетинг на нечетные элементы, используйте следующее:
:pseudo-class(odd) {}
Положить псевдоклассы на работу
Теперь, когда вы ознакомились с общим синтаксисом, давайте рассмотрим некоторые из новых селекторов более подробно и посмотрим примеры стилевых эффектов, которых вы можете достичь, используя их.
: корень
Псевдокласс :root предназначен для корневого элемента — элемента html. Рассмотрим следующую базовую разметку для страницы:
<!DOCTYPE html> <head> <title>Getting to Know CSS3 Selectors</title> </head> <body> </body> </html>
Если вы хотите применить основной цвет фона к этой странице с другим цветом фона для отображения «контейнера», вы можете сделать это только с CSS и без новой разметки, как показано здесь:
:root{ background-color: rgb(56,41,48); } body { background-color: rgba(255, 255, 255, .9); margin: 0 auto; min-height: 350px; width: 700px; }
В этом примере я применил цвет фона к элементу html через :root и применил стили для контейнера через селектор типа для body . Это приводит к простой визуальной компоновке, показанной ниже.
:единственный ребенок
Псевдокласс :only-child предназначен для элемента, который является единственным потомком своего родителя. Это означает, что родительский элемент содержит только один другой элемент. Псевдокласс :only-child отличается от псевдокласса :root , в котором используется элемент html . Вы можете использовать :only-child для нацеливания на любой элемент, добавив синтаксис псевдокласса к элементу ( e ), например так:
e:only-child {}
Например, возможно, у вас есть блок текста, в котором вы продвигаете новый элемент:
<h2><b>Available Now!</b> Paperback edition of The Zombie Survival Guide: Complete Protection from the Living Dead</h2>
Если вы хотите стилизовать текст «Доступен сейчас» как выноску, вы можете использовать :only-child для нацеливания на элемент b , который является единственным дочерним элементом h2 . На рисунке 2 показан код, который вы бы использовали.
h2 { background: rgb(255, 255, 255) url(zombies.png) no-repeat 97% 4%; border: 1px solid rgba(125, 104, 99, .3); border-radius: 10px; color: rgb(125,104,99); font: normal 20px Georgia, "Times New Roman", Times, serif; padding: 20px 20px 20px 60px; position: relative; width: 450px; } b:only-child { background-color: rgb(156,41,48); color: rgb(255,255,255); display: block; font: bold 12px Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 1px; padding: 10px; text-align: center; text-transform: uppercase; -moz-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); -moz-transform-origin: 50px 0; -webkit-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform-origin: 50px 0; -o-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); -o-transform-origin: 50px 0; -ms-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); -ms-transform-origin: 50px 0; transform: translate(-30px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); transform-origin: 50px 0 0; width: 150px; }
Этот CSS приводит к визуальному выноске, показанному ниже, который не нуждается в добавлении атрибутов id или class в HTML.
: пустой
Псевдокласс :empty предназначен для элементов, у которых нет дочерних элементов или текста, — таких пустых элементов, как:
<p></p>
Лично я не могу вспомнить ситуацию, когда я позволил бы визуализировать пустой элемент на сайте, но это не значит, что нет крайнего случая. С точки зрения синтаксиса, вы можете нацеливаться на каждый пустой элемент с помощью псевдокласса самостоятельно:
:empty { background-color: red; }
Или, как в примере с псевдоклассом :only-child , вы можете указать целевой элемент, например, td :
td:empty { background-color: red; }
: П-й ребенок (п)
Это первый псевдокласс, который я освещаю, который использует числовые значения, описанные ранее. Псевдокласс :nth-child предназначается для дочернего элемента относительно его положения в родительском элементе. Например, список комментариев в блоге может выглядеть красиво с чередующимися фоновыми цветами.
HTML-код для этого примера — просто упорядоченный список, как показано ниже.
<ol> <li> <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img src="tdog.jpg" alt="T-Dog" /></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p> </li> <li> <p>March 13, 2012</p> <a href="http://itsallblackandwhite.com"><img src="rickgrimes.jpg" alt="Rick Grimes" /></a> <p><a href="http://itsallblackandwhite.com">Rick Grimes</a></p> <p>You want to kill me, you're going to have to do better than that wrench.</p> </li> <li> <p>March 13, 2012</p> <a href="http://becameawalker.com"><img src="shanewalsh.jpg" alt="Shane Walsh" /></a> <p><a href="http://becameawalker.com">Shane Walsh</a></p> <p>You can't just be the good guy and expect to live. Not anymore.</p> </li> </ol>
Чтобы стилизовать эту разметку, я сначала нацеливаю элементы списка с помощью простого селектора типа, как показано ниже:
li { background-color: rgba(194, 181, 158, .5); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(194, 181, 158, .7)), to(rgba(194, 181, 158, 0))); background-image: -moz-linear-gradient(top, rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); background-image: -o-linear-gradient( rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); border: 1px solid rgb(194, 181, 158); border-radius: 10px; margin: 15px 0; padding: 25px; }
Затем, используя псевдокласс :nth-child() , я выбираю элементы списка с четным номером:
li:nth-child(even){ background-color: rgba(242, 224, 131, .5); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(242, 224, 131, .7)), to(rgba(242, 224, 131, 0))); background-image: -moz-linear-gradient(top, rgba(242, 224, 131, .7), rgba(242, 224, 131, 0)); background-image: -o-linear-gradient( rgba(242, 224, 131, .7), rgba(242,224, 131, 0)); border: 1px solid rgb(242, 224, 131); }
: П-го последнего ребенка (п)
Псевдокласс :nth-last-child(n) работает так же, как :nth-child(n) , за исключением того, что порядок определяется относительно последнего дочернего элемента, а не первого. Используя тот же пример комментариев блога, рассмотрим содержимое каждого элемента списка:
<li> <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img src="tdog.jpg" alt="T-Dog" /></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p> </li>
Каждый из элементов абзаца, составляющих комментарий, должен иметь уникальный стиль, как и изображение.
Для имени и ссылки комментатора я использую псевдокласс :nth-last-child(n) с числовым значением для нацеливания на второй-последний абзац в элементе списка:
p:nth-last-child(2) { clear: left; float: left; font-size: 12px; margin-top: 5px; text-align: center; width: 80px; }
: Во-первых, из-типа
Псевдокласс :first-of-type предназначен для первого элемента определенного типа в родительском элементе. В примере с комментариями к блогу я могу указать целевой контент в качестве первого абзаца в элементе списка:
<li> <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img src="tdog.jpg" alt="T-Dog" /></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p> </li>
Используя :first-of-type , я оформляю первый абзац (содержащий дату), чтобы он выровнялся по правому краю с нижней границей:
p:first-of-type { border-bottom: 1px solid rgba(56,41,48, .5); float: right; font-weight: bold; padding-bottom: 3px; text-align: right; width: 560px; }
: Последний из типа
Псевдокласс :last-of-type предназначается только для того, что говорит имя: последний тип элемента в родительском элементе. В примере с блогом я могу оформить текст комментария в последнем абзаце следующим образом:
<li> <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img src="tdog.jpg" alt="T-Dog" /></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p> </li>
Вы можете увидеть, как я использовал :last-of-type для стилизации последнего абзаца. Вот CSS, который я использовал:
p:last-of-type { font-style: italic; margin: 50px 10px 10px 100px; }
: Только-оф-типа
Псевдокласс :only-of-type предназначается для дочернего элемента, который является единственным типом в родительском элементе. Продолжая пример комментария к блогу, вы можете использовать этот селектор для таргетинга на аватар:
<li> <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img src="tdog.jpg" alt="T-Dog" /></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p> </li>
CSS:
img:only-of-type{ background-color: rgb(255, 255,255); border: 1px solid rgba(56,41,48, .5); float: left; padding: 3px; }
: П-го из-типа (п)
Псевдокласс :nth-of-type(n) работает так же, как и другие числовые псевдоклассы, которые я рассмотрел. Этот псевдокласс предназначен для конкретного типа элемента в соответствии с его положением относительно родительского элемента. Вы можете увидеть пример эффекта, которого вы можете достичь в простом представлении корзины покупок, показанном здесь.
HTML-код этой корзины находится в таблице. Помните, что таблицы подходят для данных, но, пожалуйста, избегайте их для разметки.
<table cellspacing="0"> <tr> <th>Quantity</th> <th>Item</th> <th>Price</th> </tr> <tr> <td>1</td> <td>The Zombie Survival Guide: Complete Protection from the Living Dead</td> <td>$13.95</td> </tr> <tr> <td>1</td> <td>Gerber Apocalypse Kit</td> <td>$349.00</td> </tr> <tr> <td>1</td> <td>Kookaburra BIG Kahuna 2010 Cricket Bat</td> <td>$189.95</td> </tr> <tr> <td>1</td> <td>40" Samurai Sword</td> <td>$159.00</td> </tr> <tr> <td colspan="2">Subtotal</td> <td>$711.19</td> </tr> <tr> <td colspan="2">Tax (7%)</td> <td>$49.78</td> </tr> <tr> <td colspan="2">Shipping & Handling</td> <td>$25.00</td> </tr> <tr> <td colspan="2">Total</td> <td>$785.97</td> </tr> </table>
Чтобы стилизовать некоторые из этих элементов таблицы, я использую селектор :nth-of-type(n) для стилизации выравнивания текста заголовка таблицы и ячеек данных. Например, ячейка заголовка таблицы элементов должна быть выровнена по левому краю (по умолчанию это центр).
<tr> <th>Quanity</th> <th>Item</th> <th>Price</th> </tr>
С помощью селектора :nth-of-type(n) вы можете указать целевой дочерний элемент:
th:nth-of-type(2) { text-align: left; }
Я могу использовать тот же псевдокласс для стилизации оставшегося необходимого выравнивания текста, без единого class или id :
th:nth-of-type(3), td:nth-of-type(3) { text-align: right; } th:nth-of-type(1), td:nth-of-type(1) { text-align: center; }
: П-й последний из-типа (п)
Псевдокласс :nth-last-of-type(n) работает так же, как :nth-of-type(n) , но относительная позиция смещена относительно последнего потомка, а не первого. В примере корзины покупок строки Подытог, Налог, Доставка и Итого требуют уникальных стилей.
Давайте посмотрим на строку промежуточных итогов, которая является четвертой строкой ( tr ) снизу таблицы:
<tr> <td colspan="2">Subtotal</td> <td>$711.19</td> </tr>
Я использовал :nth-last-of-type(n) чтобы придать этой строке ячеек стиль, показанный на рисунке. Это CSS, который я использовал:
tr:nth-last-of-type(4) td { border-top: 1px solid rgb(56,41,48); font-style: italic; font-weight: bold; text-align: right; }
И я продолжил этот псевдокласс для оставшихся строк таблицы:
tr:nth-last-of-type(1) td { background-color: rgb(56,41,48); color: rgb(255, 255, 255); font-size: 14px; font-style: italic; font-weight: bold; padding: 5px 10px; text-align:right; } tr:nth-last-of-type(2) td, tr:nth-last-of-type(3) td { font-style: italic; text-align: right; }
:Первый ребенок
Псевдокласс :first-child предназначен для первого дочернего элемента, независимо от его типа, в родительском элементе. Для этого примера давайте рассмотрим боковую панель, в которой есть ряд элементов содержимого.
Разметка, которую я использовал для этого примера, содержит div с вложенными элементами в aside .
<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>в<div role="complementary"> <aside> <ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul> </aside> <aside> <h3>Newsletter Sign-Up</h3> <p>The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.</p> <p><a href="/newsletter/">Sign up now</a></p> </aside> <aside> <h3>From the Blog</h3> <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p> <p><a href="/blog/">Read more</a></p> </aside> </div>
Как вы можете видеть, боковая панель содержит разделы контента с определенной рамкой и фоном:
aside { background-color: rgb(255, 255, 255); border: 1px solid rgba(125, 104, 99, .5); border-radius: 10px; -moz-box-shadow: inset 0 0 20px rgba(125, 104, 99, .5); -webkit-box-shadow: inset 0 0 20px rgba(125, 104, 99, .5); box-shadow: inset 0 0 20px rgba(125, 104, 99, .5); margin-bottom: 20px; padding: 25px; }
Тем не менее, первая часть содержит значки социальных сетей и не имеет рамки и фона (см. Верхнюю часть рисунка 11). Я использовал псевдокласс :first-child для нацеливания на этот первый раздел контента:
aside:first-child { background-color: transparent; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; }
:последний ребенок
Псевдокласс :last-child является противоположностью :first-child , нацеленным на последний дочерний элемент в родительском элементе. Возвращаясь к примеру с боковой панелью, показанной на рисунке 11, первый раздел содержит список ( ul ) ссылок в социальных сетях:
<ul> <li><a href="http://youtube.com/whenzombiesattack">Subscribe to our YouTube channel</a></li> <li><a href="http://twitter.com/whenzombiesattack">Follow us on Twitter</a></li> <li><a href="http://facebook.com/whenzombiesattack">Like us on Facebook</a></li> </ul>
Каждая из этих ссылок отображается на экране в виде другого значка, полученного с помощью простой техники замены изображений и спрайтов:
li a { background: url(Sprites.png) no-repeat 2px 7px; display:block; height: 64px; text-indent: -5000px; width: 64px; }
Чтобы стилизовать последнюю ссылку в списке, я использую псевдокласс :last-child :
li:last-child a { background-position: -100px 7px; }
Оставшаяся средняя ссылка оформляется псевдоклассом :nth-child() :
li:nth-child(2) a { background-position: -200px 7px; }
Поддержка браузера
Хорошей новостью является то, что все последние версии браузеров, включая Internet Explorer 10 и 9, поддерживают эти псевдоклассы CSS3 . Некоторые старые версии браузеров могут предоставлять ограниченную поддержку для некоторых из селекторов CSS3 в этой статье.
Когда речь идет о поддержке в более ранней версии Internet Explorer, это действительно должно быть о вашем проекте. Как вы используете любые неподдерживаемые селекторы? Если это чисто для дизайнерских и эстетических целей, спросите себя, можете ли вы позволить этим пользователям Internet Explorer иметь немного ухудшенный опыт, в то же время позволяя Internet Explorer 9 и другим пользователям браузера иметь расширенные возможности. Если ответ «да», подумайте о том, чтобы сосредоточиться на адаптивном подходе к вашему CSS.
Если вам нужны более ранние версии Internet Explorer для поддержки ваших псевдоклассов CSS3, обратитесь к Selectivzr , утилите JS, которая эмулирует поддержку псевдоклассов CSS3 в Internet Explorer. Работает с jQuery, Dojo, MooTools и Prototype.
обработка
(Сортировка) плохих новостей о браузерах и псевдоклассах CSS3 заключается в том, что с точки зрения того, насколько эффективно браузеры обрабатывают селекторы, псевдоклассы попадают в конец списка . Если производительность и скорость имеют первостепенное значение для вашего проекта, вы должны разумно использовать псевдоклассы. Я рекомендую воспользоваться некоторыми инструментами тестирования, чтобы помочь вам лучше оптимизировать ваши CSS-селекторы. Вот некоторые из них:
Зная, когда и что использовать
Итак, как вы решаете, какие селекторы использовать? Ответ зависит от вашего проекта. Знание как вашего проекта, так и доступных CSS-селекторов поможет вам принять решение. Псевдоклассы CSS3, которые я рассмотрел в этой статье, могут не быть селекторами «хлеба с маслом» для ваших таблиц стилей, но они могут быть неоценимыми инструментами, особенно в тех случаях, когда вы не можете полагаться на селекторы id и class . Помните, что написание хорошего CSS — это поиск наиболее эффективного способа достижения целей проекта.
Во второй части этой статьи я расскажу о псевдоклассах состояния элементов пользовательского интерфейса, а также о псевдоклассах :target и negation .