HTML специальные символы в содержании CSS, используя Attr()

Question

Соответствующие codepen: http://codepen.io/anon/pen/ocptF/

EDIT: codepen использует Джейд, и, таким образом, портит несколько вещей вверх. Я не знал об этом, когда начинал этот вопрос. По сути, я думал, что CSS attr() будет копировать по атрибуту HTML буквально, но это не так.

Я хотел бы использовать функцию CSS attr, чтобы заполнить content для некоторых псевдоэлементов. Однако он печатает 004, если для атрибута HTML установлено значение \f004 и 08fa, когда \f08fa.

Соответствующие линии:

HTML:

<div class="zoomfade" data-fill='\f004' data-unfill='\f08a'></div> 

CSS:

.zoomfade:before { 
    content: attr(data-unfill); 
    position: absolute; 
} 

.zoomfade:before { 
    content: attr(data-fill); 
    position: absolute; 
} 

Спасибо!

Answer 1

Эпизоды последовательности в CSS обрабатываются специально в синтаксисе CSS. Когда вы укажете его в значении атрибута HTML, используйте это значение в CSS attr(), это взято буквально. Из CSS2.1 spec:

ATTR (X)
Эта функция возвращает в виде строки значением атрибута X для субъекта селектора. Строка не обрабатывается процессором CSS. [...]

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

EDIT: [...] По сути, я думал, что CSS attr() будет копировать по атрибуту HTML буквально, но это не так.

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

Например, если источник представлен в необработанной разметке HTML, то, как я упоминал выше, вам нужно будет использовать escape-символы HTML-символов, поскольку HTML анализируется парсером HTML. Если элементы сгенерированы с использованием JS-шаблона, такого как Jade, тогда escape-символы символов принимают вид \u, за которым следуют шестнадцатеричные кодовые. В обоих случаях соответствующие синтаксические анализаторы будут транслировать escape-последовательности в свои репрезентативные символы, а сами символы - это то, что хранится в DOM как часть значения атрибута.

Конечно, снова есть альтернатива просто использовать символы Unicode. Если ваши исходные файлы закодированы как UTF-8, у вас не должно возникнуть проблемы с использованием символов напрямую.