Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.
<html class="js no-touch cssanimations csstransforms csstransforms3d
csstransitions svg inlinesvg" lang="en">
В данном случае тестированию подверглись только несколько возможностей: анимация, преобразования, применение SVG, линейной SVG и поддержка сенсорных экранов. При наличии этих классов код может подвергнуться ветвлению:
.widget {
height: 1rem;
}
.touch .widget {
height: 2rem;
}
В предыдущем примере элемент widget в обычных условиях получает высоту 1rem, но если в HTML присутствует класс touch (благодаря работе Modernizr), то widget получит высоту 2rem.
Можно также поменять логику на противоположную:
.widget {
height: 2rem;
}
.no-touch .widget {
height: 1rem;
}
Таким образом, исходной для элементов будет высота 2rem, и она будет уменьшена, если присутствует класс no-touch.
Какая бы структура вам ни понадобилась, Modernizr предоставляет широкую поддержку ветвления при наличии возможностей. Особая польза от применения этого средства проявится при потребности в использовании таких возможностей, как transform3d, с сохранением предоставления работоспособной подмены для тех браузеров, которые не в состоянии справиться с такими возможностями.
совет
Modernizr может предоставить точные тесты практически для всего, что вы можете пожелать использовать в качестве основы для ветвления кода, но есть и исключения. Например, общеизвестны трудности точного тестирования возможности overflow-scrolling. В тех ситуациях, когда класс устройств не может быть успешно определен, вероятно, будет разумнее выполнить ветвление кода на результате тестирования другой возможности. Например, старые версии Android испытывают трудности с горизонтальной прокруткой, а ветвление можно организовать по результатам появления класса no-svg (поскольку Android 2-2.3 не поддерживает и SVG). И наконец, можно объединить тесты для создания собственного пользовательского теста. Эта тема слегка выходит за рамки вопросов, рассматриваемых в книге, но если она вас заинтересует, обратитесь к материалам по адресу http://benfrain.com/combining-modernizr-tests-create-custom-convenience-forks/.
Новые селекторы в CSS3 и порядок их использования
В CSS3 имеются очень эффективные средства выбора элементов внутри страницы. Может, это прозвучит для вас слишком оптимистично, но уж поверьте, они смогут облегчить вашу жизнь и заставят полюбить CSS3! И я готов ответить за столь смелое утверждение.
Селекторы атрибутов в CSS3
Возможно, вы уже пользовались селекторами атрибутов CSS для создания правил. Рассмотрим, к примеру, следующее правило:
img[alt] {
border: 3px dashed #e15f5f;
}
Оно будет нацелено на каждый использованный в разметке тег изображения, у которого имеется атрибут alt. Или же предположим, что нам нужно выбрать все элементы с атрибутом data-sausage:
[data-sausage] {
/* Стили */
}
Для указания атрибута понадобятся всего лишь квадратные скобки.
совет
Атрибут типа data-* был введен в HTML5 для предоставления места пользовательским данным, которые не могут быть должным образом сохранены с помощью других механизмов. Описание спецификации можно найти по адресу http://www.w3.org/TR/2010/WD-html5-201 01019/elements.html.
Можно сузить область выбора, указав значение атрибута. Рассмотрим, к примеру, следующее правило:
img[alt="sausages"] {
/* Стили */
}
Оно будет нацелено только на те изображения, которые имеют атрибут alt со значением sausages, например:
<img class="oscarMain" src="img/sausages.png" alt="sausages" />
До сих пор мы довольствовались тем, что предоставлялось спецификацией CSS2. Интересно, а что же нового появилось с выходом спецификации CSS3?
Селекторы CSS3, соответствующие подстрокам значений атрибутов
CSS3 позволяет выбирать элементы на основе подстрок значений их атрибутов. Хотя данная формулировка воспринимается с трудом, но ничего сложного здесь нет! Вариантов соответствия подстроке значения атрибута всего три:
• подстрока находится в начале значения;
• значение содержит экземпляр подстроки;
• значение заканчивается подстрокой.
Посмотрим, как они выглядят.
Селектор значения атрибута по подстроке, находящейся в его начале
Рассмотрим следующую разметку:
<img src="img/ace-film.jpg" alt="film-ace">
<img src="img/rubbish-film.jpg" alt="film-rubbish">
Оба указанных в ней изображения можно выбрать по подстроке, находящейся в начале значения их атрибута:
img[alt^="film"] {
/* Стили */
}
Ключевым здесь выступает символ ^ (который называется «карет», также его часто называют колпаком), означающий «начинается с». Поскольку оба атрибута alt начинаются с film, селектор выбирает оба тега img.
Селектор значения атрибута по имеющемуся в нем экземпляру подстроки
Селектор значения атрибута по имеющемуся в нем экземпляру подстроки имеет следующий синтаксис:
[атрибут*="значение"] {
/* Стили */
}
Если нужно, этот селектор, как и все селекторы атрибутов, может использоваться в сочетании с селектором типа (который ссылается на фактически используемый элемент HTML), хотя лично я поступлю таким образом только в случае крайней необходимости (в том случае, если понадобится сменить тип используемого элемента).
Обратимся к примеру и рассмотрим следующую разметку:
<p data-ingredients="scones cream jam">Will I get selected?
Этот элемент можно выбрать следующим образом:
[data-ingredients*="cream"] {
color: red;
}
Ключевым здесь выступает символ *, который в данном контексте означает «содержит».
Селектор «начинается с» с этой разметкой работать не будет, поскольку строка, являющаяся значением атрибута, не начинается с "cream". Но в ней содержится "cream", следовательно, селектор значения атрибута, работающий по принципу «содержит экземпляр», данный элемент обязательно найдет.
Селектор значения атрибута по подстроке, находящейся в его конце
Селектор значения атрибута по подстроке, находящейся в его конце, имеет следующий синтаксис:
[атрибут$="значение"] {
/* Стили */
}
Разобраться в нем поможет следующий пример. Рассмотрим его разметку:
<p data-ingredients="scones cream jam">Will I get selected?
<p data-ingredients="toast jam butter">Will I get selected?
<p data-ingredients="jam toast butter">Will I get selected?
Предположим, нам нужно выбрать тот элемент, в значении атрибута data-ingredients которого имеются слова scones, cream и jam (то есть первый элемент). Мы не можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «содержит экземпляр» (он выберет все три варианта) или «начинается с» (он выберет только последний элемент). Но мы можем воспользоваться селектором подстроки значения атрибута, работающим по принципу «заканчивается подстрокой»:
[data-ingredients$="jam"] {
color: red;
}
Ключевым символом здесь является знак доллара ($), означающий «заканчивается подстрокой».
Особенность выбора по атрибутам
Важно уяснить, что у выбора по атрибутам есть одна особенность: значения атрибутов рассматриваются как цельные строковые значения. Рассмотрим следующее правило CSS:
[data-film^="film"] {
color: red;
}
Как ни странно, этот селектор в отношении следующего значения атрибута не сработает, даже притом что одно из слов внутри атрибута начинается с сочетания film:
<span data-film="awful moulin-rouge film">Moulin Rouge is dreadful</span>
Причина в том, что в данном случае атрибут data-film начинается не с film, а с awful (и если вы видели фильм «Мулен Руж», то знаете, что у него также жуткое начало, так и не переходящее затем в более позитивное русло).
Кроме применения недавно рассмотренных селекторов на совпадение с подстрокой есть еще несколько способов обхода этой проблемы. Можно воспользоваться селектором списка значений, разделенных пробелами (обратите внимание на символ тильды), пользующимся поддержкой даже старых браузеров вплоть до Internet Explorer 7:
[data-film~="film"] {
color: red;
}
Можно выбрать весь атрибут:
[data-film="awful moulin-rouge film"] {
color: red;
}
Или же, если нужно сделать выбор только при наличии в значении атрибута двух строк, можно объединить эту пару (или столько строк, сколько нужно) в селекторах подстрок атрибутов, работающих по принципу «содержит экземпляр»:
[data-film*="awful"][data-film*="moulin-rouge"] {
color: red;
}
Правильного варианта действий на все случаи жизни не существует, все зависит от сложности структуры той строки, на основании которой вы пытаетесь осуществить свой выбор.
Селекторы атрибутов позволяют выбрать элементы, чьи идентификаторы и классы начинаются с цифр
До появления HTML5 разметка, в которой идентификаторы и имена классов начинаются с цифр, считалась недопустимой. В HTML5 эти ограничения устранены. Что касается идентификаторов (ID), нужно по-прежнему учитывать некоторые обстоятельства. В идентификаторе не должно быть пробелов, и для страницы он должен быть уникальным. Дополнительные сведения можно найти по адресу http://www.w3.org/html/wg/drafts/html/master/dom.html.
