Content css спецсимволы: Символы — Справочник CSS — schoolsw3.com

Leave a Comment / Css / By /

Нюансы использования спецсимволов html с псевдоэлементами :before и :after

Вы здесь

Главная → Блог → CSS → Нюансы вывода спецсимволов html через псевдоэлементы CSS

Раздел: 

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

Основы применения

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

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

Какие могут возникнуть проблемы?

При использовании описанной методики нужно учитывать два важных аспекта. Первый касается особенности работы браузера Internet Explower. Данный браузер не может преобразовывать код в символы. Решением такой проблемы может стать процесс эмуляции кода через expression. Также эмуляция для отладки работы старичка Internet Explower может осуществляться через insertAdjacentHTML.

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

К примеру, выставим дефис для обозначения маркеров списка. Записывая следующий код

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
 
li:before{
	content: "–";
}

Вместо тире получим чистый код.

Почему это происходит?

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

Возвращаясь к нашему примеру, переводим десятеричный код тире (8211) в шестнадцатеричный (2013). По итогу получаем следующий код, который будет корректно реализовывать автоматическое генерирование кода при использовании expression.

li{
	//z-index: expression(runtimeStyle.zIndex = 1,
 this.innerHTML = "–" + this.innerHTML) /* хак для ие6 и 7 */
}
 
li:before{
	content: "\2013";
}

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

Ключевые слова: 

CSS приемы

CSS база. Или что должен знать каждый верстальщик

Уровень сложности:

Средний

Еще интересное

Спецсимволы HTML | Разработка сайтов под ключ