—»     —»   Автоматическая нумерация изображений при помощи CSS Counters
  Раздел: Руководства   Нет комментариев  

Автоматическая нумерация изображений при помощи CSS Counters



При написании статей, записей в блоге, руководств или чего-либо другого, вы зачастую используете по несколько изображений, графиков, фотографий или даже видео, а также отрывки кода, которые иллюстрируют предложенный контент.

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

И именно это мы собираемся реализовать в сегодняшней статье: комбинировать элемент «figure» с CSS counters, чтобы ваши вставленные элементы (особенно изображения) стали особенно привлекательными!

Автоматическая нумерация изображений при помощи CSS Counters

Элемент figure

Элемент «figure» направлен на использование вместе с элементом «figcaption» для публикации изображений, иллюстраций, фотографий, диаграмм и фрагментов кода. Вот что об этом элементе написано в спецификации:

«Элемент «figure» представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который, как правило, относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу».
Спецификация W3C

Давайте рассмотрим базовую разметку элемента figure:

<figure>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

Давайте выявим некоторые аспекты касательно элемента figure:

* Элемент «figcaption» опционален;
* У вас может быть только один элемент «figcaption» в элементе «figure»;
* Вы можете встраивать сколько угодно других элементов в элемент «figure»;
* Имея дело с изображением, вы можете оставить атрибут alt пустым, если вы используете «figcaption», чтобы экранные читалки повторно не читали одно и то же.

Если вам нужно больше информации об элементе «figure», мы рекомендуем вам ознакомиться с этой великолепной статьей от HTML5Doctor. Также есть интересная запись в Mozilla Developer Network, и конечно же, официальной спецификации.

Примеры

К примеру, если вы хотите отобразить фрагмент кода, вы можете сделать это следующим образом посредством элемента «figure»:

<figure>
<code>body { background: white; }</code>
<figcaption>Some illustrated code with figure<figcaption>
</figure>

В целом, вместо того, чтобы добавлять изображения таким образом:

<!-- This is not good enough -->
<img src="cute-kitty.jpg" alt="This is a cute kitty!" />

Вы можете просто написать:

<!-- This is good and semantic -->
<figure>
<img src="cute-kitty.jpg" alt="" />
<figcaption>This is a cute kitty!<figcaption>
<figure>

Браузерная поддержка

«figure» является частью «новых» HTML5-элементов, которые на данный момент не поддерживаются многими устаревшими браузерами, включая даже Internet Explorer 8. Так как вы вряд ли хотите, чтобы после этой статьи у вас поехала вся верстка, мы рекомендуем вам использовать polyfill для поддержки этих элемментов.

Самый известный polyfill для HTML - html5shiv, который вы можете напрямую встраивать с Google CDN, используя следующую строку кода в ваших файлах:

<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Обратите внимание на то, как мы используем условные комментарии для IE, чтобы избежать того, что другие браузеры и браузеры IE выше 8 версии загружали этот скрипт.

Если вам хочется узнать больше о html5shiv polyfill, то рекомендуем вам ознакомиться с этой замечательной статьей от Paul Irish.

CSS Counters

CSS Counters представляет собой, наверное, самое неизвестное CSS-свойство среди всех представленных. Оно позволяет нам исключительно посредством CSS реализовать функционал нумерации элементов, без помощи HTML и javascript.

Этот модуль основан на двух свойствах и одном значении:

* counter-reset, которое используется для инициализации и сброса одного или нескольких счетчиков
* counter-increment, которое используется для повышения одного или нескольких счетчиков
* counter() – это валидное значение для псевдо-элементов ::before и ::after, которое позволяет нам использовать название счетчика в качестве параметра для отображения его значения.

Все довольно просто, не так ли? В целом, вы инициализируете счетчик при помощи названия, которое вы хотите использовать в качестве значения (например, 0), а затем вы сообщаете заданному селектору о необходимости повысить данный счетчик при каждом случае. Этот счетчик может быть отображен при помощи контента и стилей, сгенерированных посредством CSS, а его расположение может быть установлено при помощи псевдо-элементов :before и :after.

Самый базовый вариант реализации CSS counter выглядит следующим образом:

/* 1. We initialize the counter */
body {
counter-reset: myAwesomeCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.myAwesomeElement {
counter-increment: myAwesomeCounter;
}

/* 3. We display the value of the counter before the element */
.myAwesomeElement:before {
content: counter(myAwesomeCounter);
}

Примечание: мы немного обманывали, когда говорили о «2 свойствах и 1 значении», так как здесь также есть значение counters(), которое практически никогда не используется. Пожалуйста, ознакомьтесь с этой статьей на MDN, если вам нужно больше информации по этому поводу.

Пример

Итак, вернемся к нашему делу. Нам нужно, чтобы у наших изображений появилось описание в виде «Fig. 1 – …», «Fig. 2 – …» и так далее. Поэтому давайте сделаем все просто.

.article {
counter-reset: figures;
}

.figure {
counter-increment: figures;
}

.figure figcaption:before {
content: 'Fig. ' counter(figures) ' - ';
}

Эти 3 строки css-кода помогут нам автоматически выставлять нумерацию. Ну не круто ли?

Облачаем все в стили

Основа

Теперь, когда мы уже знаем, как использовать «figure» и CSS Counters, пришло время сделать то, что мы и задумывали – приукрасим записи в нашем блоге.

Но перед тем как окунаться в код, было бы неплохо создать возможность выравнивать или центрировать изображения, просто добавляя класс. Давайте сделаем это.

Сначала проведем некоторую стилизацию изображений и цифр. Ничего вычурного – нужно что-то простенькое и довольно утонченное.

.figure {
padding: 0.9em;
border: 3px solid #f5bca8;
background: #fff;
margin: 0 auto 1em;
}

Чтобы центрировать изображения по горизонтали и предотвратить их выход за пределы контейнера (элемента «figure»), нам нужно добавить кое-какие правила (то же самое следует проделывать и с тегами вроде «video»).

.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, поясняем, что это валидное значение для width, min-width, max-width, height, min-height и max-height среди других свойств, включая flexbox.

В нашем случае нам нужно, чтобы элемент figure был насколько это возможно небольшим. То есть, он должен обрамлять изображение. Так как «figure» является блочным элементом, он растягивается на всю ширину родительского элемента (100%). Мы можем выставить свойство float: left или display: inline-block, чтобы он раскрывался на всю доступную ширину контента, но если подпись окажется шире изображения, у нас возникнет проблема.

Мы можем жестко привязать его к ширине элемента figure в зависимости от ширины изображения, но это не очень гибкий вариант, и уже тем более – не адаптивный. Поэтому мы воспользуемся значением min-content. Проще говоря, оно сообщает элементу «figure» о необходимости сократить ширину так, чтобы изображение идеально уместилось внутри, даже если на него попадет длинная подпись.

Это значение поддерживается в Firefox 3+ с приставкой -moz- и в Chrome 18+ с приставкой -webkit-. На данный момент вариант без приставок не будет работать ни в одном браузере.

Браузеры без поддержки ведут себя так, как и можно было предположить: так как не выставлена ширина, плавающий элемент «figure» обволакивает самый широкий элемент, будь то изображение или подпись.

Примечание: есть и другие значения, похожие на min-content – например, max-content и fit-content. Пожалуйста, ознакомьтесь со статьей на MDN или с черновым вариантом CSS Intrinsic & Extrinsic Sizing Module Level 3, чтобы получить больше информации.

Последнее, но не менее важное заключается в том, что нам нужно изменить/убрать значение max-width у изображений, которые облачены в элемент «figure». Либо вы делаете, чтобы у изображений был собственный размер, и тогда вам нужно выставить свойство max-width на none, либо вы хотите использовать максимальную ширину (что мы вам рекомендуем), и тогда вам нужно указать нужную вам ширину:

.figure-right img,
.figure-left img {
max-width: 300px; /* Adjust to suit your needs */
}

Маленькие экраны

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

@media (max-width: 767px) {
.figure-left,
.figure-right {
float: none;
margin: 0 0 1em 0;
width: 100%;
}

.figure img {
max-width: 100%;
}
}

Применение

Применение – это самое простое, что может быть. Либо вам нужны изображения с подписями, центрированные по горизонтали, и тогда вы просто используете класс .figure. Либо (в большей вероятности), вам нужно выровнять элементы по левой или правой стороне, и тогда вы используете как класс .figure, так и класс вариации (например, .figure-left).

<!-- Horizontally centered figure -->
<figure class='figure'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

<!-- Left floated figure -->
<figure class='figure figure-left'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

<!-- Right floated figure -->
<figure class='figure figure-right'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

В завершение

Все довольно просто, ребята! Единственное, что осталось сделать, это реализовать этот эффект на сайте. Не забудьте ознакомиться с представленным демо, чтобы увидеть эффект в действии.

Спасибо за чтение!

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7488   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Liebherr ltm 1090
Купите холодильник Liebherr по выгодной цене. Удобный подбор. Доставка
eurocran.su
Купить хостинг
Хостинг по индивидуальному плану. Информация о хостинге
lite.host
Оборудование для егаис
Полная интеграция с ЕГАИС: все акты, отчеты, журнал, декларация
teh-egais.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930