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