Валидный CSS content

Валидный CSS content

От автора: есть свойство CSS content, которое используется в тандеме с элементами ::before и ::after. Оно вводит контент в элемент.

Вот пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Свойство обычно принимает все, что вы туда вносите. Однако есть некоторые недопустимые значения, которые оно не примет. Я слышал это недавно от кого-то, кого это смутило, поэтому я немного поэкспериментировал и узнал кое-что. Это работает прекрасно:

…а это нет:

Я не совсем понимаю, почему, но я предполагаю, что это потому, что 1 — это число без единиц измерения (т. е. 1, а не 1px), а не строка. Вы тоже не сможете это обойти! Я уже пробовал:

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

Но, конечно, вы никогда не будете использовать сгенерированный контент для важной информации, такой как цена, правильно ?! (Пожалуйста, не делайте этого. Это не очень доступно, и текст не может быть выделен.)

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вы не можете использовать числа, период:

Осторожно! Не пытайтесь объединить строки, как вы могли бы сделать в PHP или JavaScript:

В спецификации есть вещь, которая позволяет преобразовывать атрибуты в фактический тип, а не обрабатывать их как строки…

… но я уверен, что пока ничего не работает. Кроме того, это все равно не помогает нам с псевдо-элементами, поскольку строки уже работают, а числа — нет.

Человек, который обратился ко мне по электронной почте, был определенно смущен, почему они не смогли использовать calc() для content. Я не уверен, что смогу помочь вам выполнить вычисления в этой ситуации, но стоит помнить, что псевдо-элементы могут быть счетчиками, и эти счетчики могут выполнять ограниченные вычисления. Например, вот счетчик, который начинается с 12 и увеличивается на -2 для каждого элемента на этом уровне в DOM.

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

… но это странно ограничено. Вы даже не можете изменять размер изображения. Гораздо более распространенным является использование для значения пустой строки (content: «»;), с помощью которой можно очищать смещение, а также для нее можно указать позицию, размер и собственный фон.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. seoonly.ru

    валидно) спасибо

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree