- PVSM.RU - https://www.pvsm.ru -
Возникла у нас в команде необходимость в одном выпадающем списке добавить значки к элементам списка в зависимости от типа элемента. Сам список сторонний компонент, который трогать не хотелось. Значки реализованы в виде шрифта, т. е. являются символами юникода.
В качестве решения на сервере в зависимости от типа элемента добавили в качестве обычной буквы символ значка uXXXX и на клиенте получили красивые квадратики, поскольку шрифт, используемый для списка не содержит в себе коды наших иконок. Тут нам на помощь пришел CSS псевдокласс ::first-letter
Эта инструкция хорошо описана в «Псевдокласс: first-letter» [1] и в «12 малоизвестных фактов о CSS (продолжение)» [2].
Все работает как часы: задаем класс, задаем псевдокласс с нашим шрифтом (font-family), запускаем — работает в Хроме. Контрольная проверка в IE11 и в Edge – работает. А вот в Firefox – не работает. После всех плясок с бубном (очистки истории и кеша) окончательно убеждаемся, что в Firefox точно не работает.
Поиск в интернете показал (https://css-tricks.com/forums/topic/first-letter-firefox-problem [3] ), что Firefox пытается определить является ли символ буквой, чтобы применить псевдокласс, и если он думает иначе, то псевдокласс просто игнорируется. Это в целом соответствует информации из «12 малоизвестных фактов о CSS (продолжение)» [2], но очевидно, что Firefox понимает под «небуквами» что-то свое, не соответствующее пониманиям других современных браузеров.
Нам решить эту проблему в лоб не удалось, пришлось в клиенте добавлять span в элементы списка с нашими специальными символами.
Вывод, к сожалению, такой, что в настоящий момент псевдокласс first-letter для решения проблемы отображения кастомного символа в строке применять нельзя.
UPD Спасибо dartraiden [4] — эта проблема известна в мозилле — официальный баг [5]
Автор: Дмитрий Шуваев
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/283170
Ссылки в тексте:
[1] «Псевдокласс: first-letter»: https://habr.com/post/17788/
[2] «12 малоизвестных фактов о CSS (продолжение)»: https://habr.com/post/262783/
[3] https://css-tricks.com/forums/topic/first-letter-firefox-problem: https://css-tricks.com/forums/topic/first-letter-firefox-problem/
[4] dartraiden: https://habr.com/users/dartraiden/
[5] официальный баг: https://bugzilla.mozilla.org/show_bug.cgi?id=597510
[6] Источник: https://habr.com/post/414321/?utm_source=habrahabr&utm_medium=rss&utm_campaign=414321
Нажмите здесь для печати.