Разбираем CSS свойство Content

Для чего нужно свойство Content в CSS. Как добавить свой элемент возле другого элемента в верстке с помощью Content.

Благодаря CSS вы можете обогатить страницу элементами, которыми она изначально не располагала. Данное действие реализуется с применением псевдо элементов :after и :before. Однако именно свойство content является важнейшим в этом деле.

Именно content обозначает, что вмещают в себя те или иные псевдоэлементы. Кроме того, важно учитывать, что без заданного свойства content ни один из псевдоэлементов просто-напросто не отобразится. А для того, чтобы они отобразились достаточно следующего фрагмента:


content: "";

В нижеприведенном примере, два снеговика отображаются за счет фрагмента content, а сами по себе элементы состоят из Unikode символов.


DIV:before {
    content: "\2603";
    }

See the Pen Content1 by pyampa (@pyampa) on CodePen.


Допустимые значения content:

none, normal – псевдоэлементы скрыты. Актуально в случаях, когда требуется спрятать изначально заданный псевдоэлемент.

<string> - текстовое наполнение. Позволяет добавлять обычный текст, а также юникод символы. (см. вышеприведенный пример). В целях практичного применения станут полезны разнообразные вариации стрелок. Те или иные символы юникода можно отыскать на специализированных сайтах.


DIV:before  {
    content: "Hello";
    }

See the Pen Content2 by pyampa (@pyampa) on CodePen.


See the Pen Content3 by pyampa (@pyampa) on CodePen.


<url> — адреса картинок.


DIV:before  {
    content: url(http://img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png);
    }

See the Pen Content4 by pyampa (@pyampa) on CodePen.


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

See the Pen Content5 by pyampa (@pyampa) on CodePen.


Правда, тут появляется проблема лишних запросов к серверу.

Проблему растущего количества запросов к серверу можно решать одним из нижеперечисленных способов:

  1. С помощью спрайта, вставляя иконки в качестве фона в псевдоэлемент или ссылку. В первом случае налицо преимущество: иконки можно расположить не только вертикально, но и в ряд, поскольку визуальную область спрайта будет ограничивать сам псевдоэлемент. В данном случае объем запросов может сократиться до одного, при условии кеширования картинки на устройстве посетителя сайта.
  2. Отдельные изображения можно вставлять с помощью content: url();, предварительно закодировав их через base-64.
  3. С помощью base-64 можно, также, использовать весь предварительно закодированный спрайт в качестве фона псевдоэлемента.

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

Некоторые онлайн-сервисы позволяют без лишних сложностей закодировать изображения в base-64. Полученный на выходе код необходимо вставить в url(). В коде уже имеется информация о том, какой формат имеет содержимое. К примеру: data:image/png;base64.

Рассмотрим на примере инстаграмм иконки, как будет выглядеть код:


[href*="instagram.com"]:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC)
  }

Как можно заметить, код довольно длинный. Также, из его содержимого нельзя понять, какого рода изображение размещено, что в свою очередь, лишает возможности редактирования картинки. Если потребуется изменить изображение, необходимо будет вновь преобразовать её с помощью base-64 и вставить по новой.

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

Аналогично вставляется SVG.


DIV:before{
    content: url('data:image/svg+xml;utf8,');
    }

Подобный способ довольно удобен, однако воспринимается не всеми браузерами. К примеру, Mozilla, в отличие от Chrome эту кодировку не распознает.

<counter> - функция подсчета. Благодаря данному значению, можно задать нумерацию не только спискам, но и прочим страничным элементам. К примеру, это может быть раздел публикации:


BODY {
  counter-reset: h2-counter;
  counter-reset: p-counter;
  }
DIV {
  counter-increment: h2-counter;
  }
  H2:before {
    content: counter(h2-counter) ". ";
    }
  P:before {
    content: counter(p-counter) ". ";
    counter-increment: p-counter;
    }

Задать счетчику название можно при помощи counter-reset.
Увеличить значение счетчика поможет counter-increment.

Вывести показания счетчика в роли содержания псевдоэлемента можно, используя content: counter(имя счетчика)

See the Pen Content6 by pyampa (@pyampa) on CodePen.



attr(<identifier>) – это значение позволяет вывести содержание имеющегося атрибута. Довольно удобно при выводе печатных версий href атрибутов, а также других популярных эффектов.


A:before  {
    content: attr(title);
    }

See the Pen Content7 by pyampa (@pyampa) on CodePen.


open-quote, close-quote эти значения предназначены для того, чтобы открыть и закрыть кавычки. Выбор используемых символлов регулируется свойством quotes. При его отсутствии, применяются значения по умолчанию, отображение которых зависит от браузера пользователя.


blockquote {
    quotes: '"' '"' "'" "'";
    }
  blockquote:before {
    content: open-quote;
    }
  blockquote:after  {
    content: close-quote;
    }

See the Pen Content8 by pyampa (@pyampa) on CodePen.


no-open-quote, no-close-quote – эти значения визуально убирают кавычки. Тем не менее, уровень вложенности кавычек по-прежнему будет учтён.

Довольно много интересных особенностей применения псевдоэлементов, в том числе и множественных изложены в спецификации (http://www.w3.org/TR/css3-content/). Однако на сегодняшний день реализация описываемого встречается не часто.


Comments