В этом уроке мы затронем тему CSS счётчиков, поговорим о том, как можно организовать автоматический подсчёт графических элементов веб страницы.
При написании статьи, поста для блога, урока или чего-то подобного мы, как правило, используем изображения, графики, фотографии и другие элементы, для того чтобы разбавить строгий текстовой контент.
В частности, однажды у вас может возникнуть необходимость в нумерации каких-то элементов для того, чтобы пользователю было легче следить за ходом вашей мысли.
Сегодня мы посмотрим на то, как это возможно реализовать: воспользуемся CSS счётчиками для подписи элементов <figure>.
Элемент figure
Элемент <figure> используется в связке с элементом <figcaption> для маркировки иллюстраций, изображений и фотографий.
Пример использования элемента <figure>:
<figure>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
Вот несколько заметок, касающихся данного элемента:
Элемент <figcaption> не обязателен;
Вы можете использовать только один <figcaption> в элементе <figure>;
Вы можете вписывать сколько угодно элементов в <figure>;
При использовании изображения с <figcaption> атрибут alt можете оставить пустым, чтобы не дублировать описание изображения.
Примеры
Если вы хотите показать кусок кода, то это можно сделать так:
<figure>
<code>body { background: white; }</code>
<figcaption>Some illustrated code with figure<figcaption>
</figure>
Вместо подобной вставки изображения:
<img src="cute-kitty.jpg" alt="This is a cute kitty!" />
… можете воспользоваться следующим видом записи:
<figure>
<img src="cute-kitty.jpg" alt="" />
<figcaption>This is a cute kitty!<figcaption>
<figure>
Браузерная поддержка
Элемент <figure> относится к категории новых элементов HTML5, а это значит, что старыми браузерами (включая IE8) он не поддерживается.
CSS счётчики
CSS счётчики - это, наверное, одна из самых не освещённых тем CSS. Благодаря ним, мы можем автоматически подсчитывать количество элементов без использования HTML или JavaScript.
Работа счётчиков базируется на:
counter-reset - используется для инициализации и сброса одного или нескольких счётчиков;
counter-increment - для увеличения значения одного или нескольких счётчиков;
counter() - принимает название счётчика для отображения его значения. Используется при работе с псевдо-элементами :before и :after.
Наиболее простой способ использования CSS счётчика:
/* 1. Мы инициализируем счётчик */
body {
counter-reset: myAwesomeCounter;
}
/* 2. При использовании данного элемента, увеличиваем счётчик */
.myAwesomeElement {
counter-increment: myAwesomeCounter;
}
/* 3. Отображаем значение счётчика перед элементом */
.myAwesomeElement:before {
content: counter(myAwesomeCounter);
}
Примеры
В нашем примере мы хотим перед каждым изображением вставлять что-то типа: “Fig. 1 - ...”, “Fig. 2 - ...”, … Реализуется это очень просто:
.article {
counter-reset: figures;
}
.figure {
counter-increment: figures;
}
.figure figcaption:before {
content: 'Fig. ' counter(figures) ' - ';
}
Этого достаточно, чтобы подсчёт производился автоматически. Не круто ли?
Собираем всё в кучу
Основа
Теперь вы знаете, как работать с элементом <figure> и CSS счётчиками, так что можем приступить к делу.
Но перед тем, как приступить к главной задаче, давайте поработаем над стилями самих изображений. Ничего сверхъестественного, просто сделаем их изображение более стилизованным.
.figure {
padding: 0.9em;
border: 3px solid #f5bca8;
background: #fff;
margin: 0 auto 1em;
}
Для расположения изображений по центру мы должны устранить ситуацию, когда картинка “вылезет” за пределы “коробки”:
.figure img {
margin: 0 auto;
display: block;
max-width: 100%;
}
Теперь подпись! Поработаем над текстом и отцентрируем по горизонтали.
.figure figcaption {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8em;
padding: .5em;
text-align: center;
color: #fff;
background: #f5bca8;
}
Нумерация
Теперь можем настроить нумерацию элементов. Сделать это очень просто.
.article {
counter-reset: figures;
}
.figure figcaption {
counter-increment: figures;
}
.figure figcaption:before {
content: 'Fig. ' counter(figures) ' - ';
}
Если вам нужно применить данный эффект не ко всем изображениям, а только к тем, что относятся к статье, можете задать им дополнительный класс (.numbered-figures) и воспользоваться следующим кодом:
.numbered-figures { counter-reset: figures; }
.numbered-figures .figure figcaption { counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }
Вариации
Мы сделали почти всё, что нужно. Осталось определить несколько стилей, благодаря которым изображения будут обтекаемы слева или справа:
.figure-left {
float: left;
margin: 0 1em .5em 0;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.figure-right {
float: right;
margin: 0 0 .5em 1em;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
Для тех, кто не в курсе, значение min-content подходит для свойств min-width, max-width, height, min-height и max-height.
В конце добавим максимальный размер изображению:
.figure-right img,
.figure-left img {
max-width: 300px; /* Adjust to suit your needs */
}
Для небольших экранов
Мы должны убедиться, что в случае просмотра страницы на небольшом экране, изображения отображаются нормально, не нарушая читабельность самой статьи. Для этого воспользуемся медиа запросом и перепишем стиль:
@media (max-width: 767px) {
.figure-left,
.figure-right {
float: none;
margin: 0 0 1em 0;
width: 100%;
}
.figure img {
max-width: 100%;
}
}
Использование
Заюзать данный пример очень просто. Просто добавьте несколько элементов <figure> на страницу:
<figure class='figure'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
<figure class='figure figure-left'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
<figure class='figure figure-right'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
Вот и всё на сегодня. Надеюсь, данный приём вам пригодится!