Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки Страница 27

transform-origin: top 10 % left 25 %;

Так база преобразований установится на точке, которая находится на пересечении 10 % от верха элемента и 25 % слева от него.

Селекторы

Разработчики считают селекторы CSS часто чуть ли не самой прикольной игровой площадкой, на которой можно развернуться. Вы можете подумать, что нам на самом деле не нужны дополнительные селекторы для обращения к элементу в разметке. Или, может быть, вы из последних сил воюете с ненавистными искусственными приемами jQuery, чтобы перезаписать значения CSS по умолчанию в определенных ситуациях. И в том, и в другом случаях с селекторами CSS3 вы получите удовольствие. Давайте посмотрим, какие возможности у нас есть сейчас, когда селекторы CSS3 набирают поддержку в браузерах.

Подсвечивание текущего элемента

Давайте вспомним пример с вертикальным ритмом из раздела о типографике. Вы, возможно, в курсе, что можете ссылаться на определенные разделы страницы, используя идентификатор с решеткой после указателя URL. Так мы можем использовать что-то вроде этого http://example.com/index.html#def для ссылки на раздел с определениями типографики. Когда на странице несколько больших разделов, пользователю сразу же видно, в какой раздел он попал.

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

В прошлом для выполнения этой операции нам бы понадобился язык JavaScript. CSS3 дает нам новый псевдокласс для указания текущего элемента, т. е. элемент, чей ID-атрибут совпадает с текущим хешем в URL. Этот псевдокласс называется: target.

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

h1:target, h2:target,

h3:target, h4:target,

h5:target, h6:target {

background: hsla(65,100 %,50 %,5);

}

Указание цвета в профиле HSLA не нужно в данном случае, потому что в общем любой браузер, который поддерживает псевдокласс: target также поддерживает цвета HSLA. Старые браузеры, которые не поддерживают: target на самом деле не проблема, так как селектор улучшает юзабилити и его функциональность не ключевая. Википедия использует: target, когда вы щелкаете на сноску, подсвечивая ее в (обычно длинном) списке ссылок[51]. Это реально помогает вам быстро опознать правильную ссылку, так ведь?

Указание на элементы, основанные на их позиции в DOM (объектной модели документа)

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

В CSS 2.1 у нас был только один структурный псевдокласс: first-child. CSS3 расширяет это и дает нам изобилие новых псевдоклассов, что решает не только перечисленные задачи, но и другие вопросы:

• nth-child

• last-child

• nth-last-child

• only-child

• first-of-type

• nth-of-type

• last-of-type

• nth-last-of-type

• only-of-type

Количество псевдоклассов в этом списке может испугать, но как только вы поймете возможности: nth-child и как это работает, вы легко уловите все остальные и узнаете, как это применять. Потому что это всего лишь варианты или ярлыки. Те, что начинаются с nth, представляют концепцию, которой не было в CSS 2.1: псевдоклассы с параметрами. Подобно функциям, они задают параметр, который дифференцирует их поведение, в круглых скобках. Синтаксис этого параметра может быть следующим:

• Число в: nth-child(1) равно псевдоклассу: first-child в CSS 2.1.

• Чтобы выразить: nth-child(5) в CSS 2.1, вам нужно было бы написать: first – child + * + * + * + *, что недопустимо многословно, особенно для больших цифр.

• Выражение типа 5n или 3n+2, где n равно любому числу от 0 до бесконечности. Например, nth-child(3n+1) равно: nth-child(1), nth-child(4), nth-child(7), nth-child(10) и т. д., с бесконечным списком.

• Одно из ключевых слов нечетное или четное, 2n+1 и 2n, соответственно.

Например, чтобы затемнить фон каждой нечетной строки таблицы, мы могли бы написать что-то наподобие:

tr: nth-child(odd) {

background: rgba(0,0,0,15);

}

Это, по существу, эффект полосок зебры, для которого мы обычно используем JavaScript.

Пожалуйста, обратите внимание на то, что разница между: nth-* и: nth-last-* – это чисто направление нумерации :nth-child начинается от первого «родителя», тогда как: nth-last-child стартует от последнего. Отсюда :last-child по существу равен: nth-last-child(1), а :only-child равен :first-child: last-child, потому что он подходит к элементам без «братьев и сестер». Интересно то, что мы можем обобщить псевдокласс: only-child так, что когда нам нужно обратиться к элементу ровно с пятью дочерними элементам, мы можем использовать: first-child: nth-last-child(6), чтобы обратиться к первому, а затем применить: first-child: nthlast– child(6) ~ * для остальных.

Разница между псевдоклассами *-child и *-of-type в том, что последний поддерживает отдельный счет на тег. Например, body: first-child никогда не совпадет, потому что body всегда имеет заголовочный дочерний элемент, а body: first-of-type всегда совпадает, так как у нас всего один элемент body.

Это может быть не особо важно (не очень значимо) для позиционирования body, но чрезвычайно полезно, если мы хотим обратиться, предположим, к каждому третьему изображению в разметке, у которой переменное количество параграфов между изображениям. В этом случае псевдокласс: nth-child рендерился бы непоследовательно, потому что он действует со всеми дочерними элементами, независимо от их типа.

Что насчет старых браузеров?

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

Наиболее популярный на данный момент – это Selectivizr[52].

Сочетаем элементы без проблем

Итак, давайте снова вернемся к примеру в разделе о работе с изображениями[53]. Предположим, нам сейчас надо заменить статической текст на веб-форму с текстом, который находится в элементе textarea, что позволяет людям редактировать его. Мы даем нашему элементу textarea внутренние поля в 1 em, 1-пиксельную рамку и ширину 100 %, потому что мы хотели чтобы он занял всю ширину контейнера. Вы, вероятно, видите, к чему это ведет – к Старой Ужасной Проблеме с Процентами в CSS™[54].

Поля и рамки добавляются к тем 100 %, которые делают весь прямоугольник (блок) намного больше, чем 100 %, и выглядят не так «навороченно». В былые времена нам было бы нужно устанавливать отступы и рамки тоже в процентах, и определять ширину в 100 % минус поле, минус ширина рамки. К счастью, в CSS3 мы властны изменять способ, которым рассчитывается ширина, и делать это так, как естественно для нас – включать в ширину поле и рамку. Свойство box-sizing отвечает за это изумительное изменение. Оно принимает три значения:

• content-box

значение по умолчанию, которое мы уже знаем и не любим;

• padding-box

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

• border-box

и отступ, и рамки включаются в ширину.

Рисунок 4.17. Наша отправная точка: стиль из предыдущего раздела

Рисунок 4.18. Старая Ужасная Проблема с Процентами в CSS™

Рисунок 4.19. Смешивание процентов с пикселями и ems с использованием box-sizing

С применением box-sizing: border-box наша проблема теперь решена[55]. И это свойство поддерживается не только каждым современным браузером, но также и IE 8!

Перемещения

До недавнего времени, сайты, которые разрабатывались по веб-стандартам были явно статическими. Если вы хотели добавить какую-нибудь анимацию между элементами на странице, вам нужно было делать это или с помощью Flash, или с комплексным JavaScript. Теперь, когда вы полностью вольны разрабатывать сайты для современных браузеров, вы можете достичь подобных эффектов, применяя CSS. Они дают дополнительные преимущества на мобильных устройствах, благодаря тому что режим анимации оптимизируется в браузере.

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

Использование перемещений