Главная → Программирование → by

Как извлечь пользу из CSS генерации контента и счетчиков.

Одной из первых функциональных возможностей CSS2 стала возможность генерации контента. В течение последних нескольких лет, эта функция была использована относительно небольшим числом веб-авторов, в основном из-за несовместимости поддержки браузерами. С выходом Internet Explorer 8 в 2009 году, возможность генерации контента вновь стала популярной и тут же появилось множество интересных реализаций. В этой статье мы обсудим некоторые возможные применения генератора контента.

Что такое генерация контента?

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

Получить доступ и управление сгенерированным контентом можно с помощью команд JavaScript, считая текстовые значения content функций:

var test = document.querySelector('#test');
var result   = getComputedStyle(test, ':before').content;
var output = document.querySelector('#output');
output.innerHTML = result;

Как Вставить сгенерированный контент.

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

<p> <before>Start</before> Actual content <after>End</after> </p>

Код для CSS форматирования будет иметь вид:

 p:before {   content: "Start"; } p:after { content: "End"; }

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

Как вы можете увидеть, content – это команда, которая вставляет две строки. Эта команда принимает следующие значения:

  • none normal псевдо-контент не будет сгенерирован.
  • <string> это будет текстовая строка, взятая в кавычки.
  • url()эта функция позволяет вставить внешний ресурс (обычно изображение), а с background-image можно управлять свойствами.
  • counter() counters()функция вставки счетчиков (см. ниже).
  • attr(attribute)эта функция позволяет вставить значение attribute (атрибутов) конкретно взятого элемента.
  • open-quote close-quote no-open-quote no-close-quote эти функции позволяют автоматизировать генерацию цитат.

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

Как вставлять строки.

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

p:before {
   content: "0A7";
   padding-right: 0.2em;}

Символьная последовательность в двойных кавычках – это шестнадцатеричное представление юникода символа. Мы также можем объединять простые текстовые данные с юникод символами: 

p:before {
   content: "( " "0A7" " )";
   padding-right: 0.2em;}

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

Заметим, что все текстовое содержимое, относящееся к функции content рассматривается в буквальном смысле. Это означает, что пробелы и табуляция, вставляемые с помощью клавиатуры, также будут вставлены и на целевую страницу.

Вставка иконок и использование веб-шрифтов.

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

@import url(http://weloveiconfonts.com/api/?family=brandico);

p:before {
   content: "\f303";
   padding-right: 0.3em;
   font-family: 'brandico', sans-serif;
   font-size: 22px;}

В этом примере мы вставили значок Твиттер. Наш код можно представить следующим образом:

.icon-twitter:before {
   content: "\f303";
   padding-right: 0.3em;
   font-family: 'brandico', sans-serif;
   font-size: 22px;}

Вставка изображений.

Мы также можем вставить изображение используя функцию url().

a:before {
   content: url(link.png);
   padding-right: 0.2em;}

Как вы могли заметить, эта функция имеет тот же синтаксис, что и background-image свойства.

Вставка значений атрибутов.

Можно также вставлять различные значения атрибутов элемента. Для этого используют функцию attr(). 

a[href]:after {
   content: "( " attr(href) " )";
   padding-left: 0.2em;
   color: #000;
   font: small "Courier New", Courier, monospace;}

Мы только что вставили значение атрибута href, который представляет собой простую текстовую строку.

Вставка счетчиков.

Автоматическая нумерация CSS контролируется двумя командами counter-reset и counter-increment. Имя счетчика назначается в круглых скобках после функций counter() или counters(), входящих в общие content свойства.

counter-reset команда может содержать одно или несколько имен счетчиков (так называемых “идентификаторов”), за которыми должно следовать целочисленное значение. Целочисленное значение определяет величину, к которой будет прибавляться значение команды counter-increment  при любом вхождении данного элемента. Значение по умолчанию равно 0. Отрицательные значения также допустимы.

Принцип работы команды counter-increment аналогичен. Основным отличием является другой шаг счетчика. Значение приращения по умолчанию равно 1.Отрицательные значения также допустимы.

Теперь мы готовы к рассмотрению примера. Возьмем следующую разметку:

<dl>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</dd>
   <dt>term</dt>
   <dd>description</dd>
</dl>

Мы хотим добавить прогрессивную нумерацию (1, 2, 3 и так далее) к каждому представлению термина (dt) в списке. CSS команда будет выглядеть следующим образом:

dl {
   counter-reset: term;
}
dt:before {
   counter-increment: term;
   content: counter(term);}

Первая функция устанавливает счетчик для определения списка. Формируется так называемая “область”. Имя (или идентификатор) счетчика обозначено как term. Какое бы имя вы не выбрали для счетчика оно полностью должно совпадать с тем, которое прописано в свойствах counter-increment (естественно, что имя должно быть осмысленным).

Во второй функции мы присваиваем псевдо-элемент :before  элементу dt. Данное действие позволит вставить счетчик в область перед фактическим содержимым. Давайте внимательнее рассмотрим вторую часть программы. Функция counter()принимает идентификатор (term) в качестве аргумента. Таким образом функции content присваивается значение счетчика.

Между числом и содержимым элемента нет пробела. Если мы хотим добавить пробел, скажем в область после числа, нам нужно прописать следующую командную строку в content свойствах:

 dt:before { content: counter(term) ". "; }

Обратите внимание, что строка в кавычках отображается точно так же, как мы набираем ее на клавиатуре, то есть никаких дополнительных пробелов вставлено не будет. На самом деле, content функцию можно рассматривать как аналог CSS в JavaScript document.write() методе, с тем отличием, что она не добавляет реальный контент в содержимое документа. Проще говоря, content функция создает простую абстракцию в дереве документа, но не изменяет его.

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

dt:before {
   content: counter(term);
   padding: 1px 2px;
   margin-right: 0.2em;
   background: #ffc;
   color: #000;
   bo ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



 		
		
				
		
				

			  Главная   →  Программирование  →   by

Comments are closed.