Firefox и псевдокласс first-letter +4

Возникла у нас в команде необходимость в одном выпадающем списке добавить значки к элементам списка в зависимости от типа элемента. Сам список сторонний компонент, который трогать не хотелось. Значки реализованы в виде шрифта, т. е. являются символами юникода.
В качестве решения на сервере в зависимости от типа элемента добавили в качестве обычной буквы символ значка \uXXXX и на клиенте получили красивые квадратики, поскольку шрифт, используемый для списка не содержит в себе коды наших иконок. Тут нам на помощь пришел CSS псевдокласс ::first-letter

Эта инструкция хорошо описана в «Псевдокласс: first-letter» и в «12 малоизвестных фактов о CSS (продолжение)».

Все работает как часы: задаем класс, задаем псевдокласс с нашим шрифтом (font-family), запускаем — работает в Хроме. Контрольная проверка в IE11 и в Edge – работает. А вот в Firefox – не работает. После всех плясок с бубном (очистки истории и кеша) окончательно убеждаемся, что в Firefox точно не работает.

Поиск в интернете показал (https://css-tricks.com/forums/topic/first-letter-firefox-problem ), что Firefox пытается определить является ли символ буквой, чтобы применить псевдокласс, и если он думает иначе, то псевдокласс просто игнорируется. Это в целом соответствует информации из «12 малоизвестных фактов о CSS (продолжение)», но очевидно, что Firefox понимает под «небуквами» что-то свое, не соответствующее пониманиям других современных браузеров.

Нам решить эту проблему в лоб не удалось, пришлось в клиенте добавлять span в элементы списка с нашими специальными символами.

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

UPD Спасибо dartraiden — эта проблема известна в мозилле — официальный баг

Вы можете помочь и перевести немного средств на развитие сайта

Теги:



Комментарии (9):

  1. tegArt
    /#18783951

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

    Если есть возможность использовать css — почему не применить :before или :after к элементам списка?

    • dshuvaev
      /#18783967

      Что-то у нас не сложилось с форматированием с ними. Может быть, если бы копали глубже и получилось бы.

      • dshuvaev
        /#18784119

        Вспомнил в чем проблема была: когда передаем в сторонний компонент список элементов он преобразуется в коллекцию идентификаторов и названий, без дополнительных свойств, а нам надо было часть элементов показывать с одной иконкой, а часть с другой. Тут применение разных стилей становится затруднительным.

        • ImidgX
          /#18785145

          Как вариант, прописать разные css-классы к элементам списка, и соответственно их по разному форматировать.
          Всё таки first-letter, на мой взгляд, довольно специфическая вещь.

          • dshuvaev
            /#18785311

            Да, вы правы. В конце концов мы что-то подобное и сделали.
            Я, видимо, не вполне правильно оформил свою работу, поскольку моя цель была поделиться столь странным поведением Firefox в случае обработки first-letter по сравнению с другими браузерами. Ту проблему, которая перед нами стояла, мы решили.

  2. dartraiden
    /#18783963

    Баг, оказывается, давно известен
    bugzilla.mozilla.org/show_bug.cgi?id=597510

    • dshuvaev
      /#18783971

      Спасибо за ссылку. Обновлю текст.

    • galaxy
      /#18784013

      А с чего это вдруг баг, когда они стараются следовать спецификации?

      • dshuvaev
        /#18784045

        Да, вы правы, может и не баг, но, увы, в качестве решения проблемы, с которой я столкнулся, first-letter все равно применить нельзя. Жаль тогда, что остальные браузеры работают иначе.
        Формально по ссылке открытый баг.