Главная » Статьи » Валидный CSS content

Валидный CSS content

Валидный CSS content

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

Вот пример:

<div data-done="&#x2705;" class="email"> chriscoyier@gmail.com
</div>

.email::before { content: attr(data-done) " Email: "; /* Это вставляется перед адресом email */
}

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

/* Валидный */
::after { content: "1";
}

…а это нет:

/* Невалидный, не строка */
::after { content: 1;
}

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

/* Невалидный, трюк не проходит */
::after { content: "" 1;
}

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

<div data-price="4">Coffee</div>

/* Это "работает" */
div::after { content: " $" attr(data-price);
}

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

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

<div data-price="4" data-sale-modifier="0.9">Coffee</div>

/* Ничего не случится */
div::after { content: " $" calc(attr(data-price) * attr(data-sale-modifier));
}

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

/* Нет */
::after { content: calc(2 + 2);
}

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

/* Это не работает */
::after { content: "1" . "2" . "3"; content: "1" + "2" + "3"; /* Используйте пробелы */ content: "1" "2" "3"; /* Или ничего */ content: "1 2 3"; /* Используйте кавычки (одиночные или двойные, не имеет значения), но контент, который не возвращается из атрибутов, не нужно заключать в кавычки. */
}

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

<wood length="12" />

wood { width: attr(length em); /* or other values like "number", "px", or "url" */
}

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

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

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

p:before { content: url(image.jpg);
}

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

Автор: Chris Coyier

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

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