Java, UX, HTML, CSS, WEB-design

Как извлечь выгоду из сгенерированного CSS контента и счетчиков

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

Название: Как извлечь выгоду из сгенерированного CSS контента и счетчиков . Краткое описание: [ad_1] ⭐ Габриэл . Дата публикации: 14.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Габриэле Романато

  • 0 Комментарии

Как извлечь выгоду из сгенерированного CSS контента и счетчиков

  • 10 минут чтения

  • Кодирование, CSS, JavaScript, Техники

Краткое резюме ↬

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

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

Дальнейшее чтение на SmashingMag:

  • Полное руководство по псевдоклассам и псевдоэлементам CSS
  • Учимся использовать псевдоэлементы :before и :after в CSS
  • !important CSS-объявления: как и когда их использовать
  • Специфика CSS и наследование

Что такое сгенерированный контент?

С технической точки зрения сгенерированный контент — это простая абстракция, созданная с помощью 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;
}
  • См. пример

Экранированная последовательность между двойными кавычками — это шестнадцатеричное значение Unicode символа абзаца. Мы также можем комбинировать простые строки с символами Unicode:


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

  • См. пример

Если вам это нужно, полный список всех символов Unicode доступен на веб-сайте Алана Вуда.

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

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

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


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

p:before {
   content: "f303";
   padding-right: 0.3em;
   font-family: 'brandico', sans-serif;
   font-size: 22px;
}
  • См. пример

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


.icon-: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;
   border: 1px solid #999;
   font-weight: bold;
}
  • См. пример

Мы только что установили цвет фона, добавили отступы и правое поле, сделали шрифт полужирным и обвели счетчики тонкой сплошной рамкой. Теперь наши прилавки стали немного привлекательнее.

Кроме того, счетчики могут быть отрицательными. Имея дело с отрицательными счетчиками, мы должны придерживаться немного математики, а именно части о сложении и вычитании отрицательных и положительных чисел. Например, если нам нужна прогрессивная нумерация, начинающаяся с 0, мы могли бы написать следующее:


dl {
   counter-reset: term -1;
}
dt:before {
   counter-increment: term;
   content: counter(term) ". ";
}
  • См. пример

Установив counter-reset свойство на -1 и увеличивая его на 1, результирующее значение равно 0, и нумерация начнется с этого значения. Отрицательные счетчики можно комбинировать с положительными для получения интересного эффекта. Рассмотрим этот пример:


dl {
   counter-reset: term -1;
}
dt:before {
   counter-increment: term 3;
   content: counter(term) ". ";
}
  • См. пример

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

Еще одна интересная особенность счетчиков CSS заключается в их способности вкладываться друг в друга. На самом деле нумерация также может быть упорядочена по прогрессивным подуровням, таким как 1.1, 1.1.1, 2.1 и т. д. Чтобы добавить подуровень к элементам в нашем списке, мы должны написать следующее:


dl {
   counter-reset: term definition;
}
dt:before {
   counter-increment: term;
   content: counter(term) ". ";
}
dd:before {
   counter-increment: definition;
   content: counter(term) "." counter(definition) " ";
}
  • См. пример

Этот пример похож на первый, но в данном случае у нас есть два счетчика, term и definition. Область действия обоих счетчиков задается первым правилом и «живет» в dl элемент. Второе правило вставляет первый счетчик перед каждым термином определения в списке. Это правило не представляет особого интереса, поскольку его действие уже известно. Вместо этого последнее правило является сердцевиной нашего кода, потому что оно делает следующее:

  1. увеличивает второй счетчик (definition) на dd элементы;
  2. вставляет первый счетчик (term), за которым следует точка;
  3. вставляет второй счетчик (definition), за которым следует пробел.

Обратите внимание, что шаги 2 и 3 выполняются content имущество, используемое на :before псевдоэлемент, присоединенный к термину определения.

Еще один интересный момент заключается в том, что счетчики являются «самовложенными», т.е. в том смысле, что сброс счетчика элемента-потомка (или псевдоэлемента) автоматически создает новый экземпляр счетчика. Это полезно в случае списков (X)HTML, где элементы могут быть вложены с произвольной глубиной. Однако указание отдельного счетчика для каждого списка не всегда возможно, так как это может привести к избыточному коду. По этой причине counters() функция полезная. Эта функция создает строку, содержащую все счетчики с тем же именем, что и у данного счетчика в области. Затем счетчики разделяются строкой. Возьмите следующую разметку:


<ol>
   <li>item</li>
   <li>item
      <ol>
         <li>item</li>
         <li>item</li>
         <li>item
            <ol>
               <li>item</li>
               <li>item</li>
            </ol>
         </li>
      </ol>
   </li>
</ol>

Следующий CSS будет нумеровать вложенные элементы списка как 1, 1.1, 1.1.1 и т. д.


ol {
   counter-reset: item;
   list-style: none;
}
li {
   display: block;
}
li:before {
   counter-increment: item;
   content: counters(item, ".") " ";
}
  • См. пример

В этом примере у нас есть только item счетчик для каждого вложенного уровня. Вместо записи трех разных счетчиков (таких как item1, item2, item3) и, таким образом, создать три разных области видимости для каждого вложенного ol элемент, мы можем положиться на counters() функцию для достижения этой цели. Второе правило важно и заслуживает дальнейшего пояснения. Поскольку упорядоченные списки имеют маркеры по умолчанию (т. е. числа), мы бы избавились от этих маркеров, превратив элементы списка в элементы блочного уровня. Помните, что только элементы с display: list-items есть маркеры.

Теперь мы можем внимательно рассмотреть третье правило, который выполняет фактическую работу. Первое объявление увеличивает счетчик, ранее установленный в самом внешнем списке. Затем во втором объявлении counters() Функция создает все экземпляры счетчика для самых внутренних списков. Структура этой функции следующая:

  1. Его первым аргументом является имя данного счетчика, за которым сразу следует запятая.
  2. Его второй аргумент — точка между двойными кавычками.

Обратите внимание, что мы вставили пробел после counters() Функция, позволяющая отделить числа от фактического содержимого элементов списка.

Счетчики по умолчанию отформатированы с десятичными числами. Однако стили этого list-style-type собственности также доступны для счетчиков. Обозначение по умолчанию counter(name) (т.е. без стиля) или counter(name, ‘list-style-type’) изменить форматирование по умолчанию. На практике рекомендуемые стили таковы:

  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • lower-alpha
  • upper-alpha

Не забывайте, что мы работаем с числовыми системами. Также помните, что спецификация не определяет, как отображать алфавитную систему за пределами конца алфавита. Например, рендеринг lower-latin после 26 элементов списка не определено. Таким образом, числительные рекомендуются для длинных списков:


dl {
   counter-reset: term definition;
}
dt:before {
   counter-increment: term;
   content: counter(term, upper-latin) ". ";
}
dd:before {
   counter-increment: definition;
   content: counter(definition, lower-latin) ". ";
}
  • См. пример

Мы также можем добавить стили к counters() функция:


li:before {
   counter-increment: item;
   content: counters(item, ".", lower-roman) " ";
}
  • См. пример

Обратите внимание, что counters() функция также принимает третий аргумент (lower-roman) как последний элемент в списке его аргументов, отделенный от предшествующей точки второй запятой. Тем не менее counters() Функция не позволяет нам указывать разные стили для каждого уровня вложенности.

Вывод

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

Дальнейшее чтение

  • «Учимся использовать псевдоэлементы :before и :after в CSS», Луи Лазарис, Smashing Magazine
  • «Стили элементов с помощью глифов, спрайтов и псевдоэлементов», Тьерри Кобленц, Smashing Magazine

Источник изображения на первой полосе: Riebart.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как извлечь выгоду из сгенерированного CSS контента и счетчиков

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»