CSS content и псевдоэлементы
кнопки open google reader выглядят по-разному в обычной и мобильной версиях. В обычной на них есть текст, в мобильной только юникодные символы-иконки. Долгое время за выбор одного или другого отвечал яваскрипт, но тут я решил, что пора бы это перевести на CSS. В нём как раз есть удобное свойство content
для того, чтобы подставлять нужный текст. И перевёл, и возрадовался.
потом, однако, я решил посмотреть, как оно выглядит в хроме и фаерфоксе: опера-то скоро сменит движок. И увидел я в этих браузерах пустые кнопки без содержимого. Какой интересный кроссбраузерный баг!… Когда же я стал разбираться, оказалось, что по спецификации этот самый content
работает только на псевдоэлементах :before
и :after
. В общем, использовать его для текста кнопок не получится без дополнительного вложенного элемента. Пришлось его добавлять.
жаль, конечно, что это не сработало. Та же проблема, что и с элементом img
: посредством CSS его пока что не изменишь.
в общем, это был ещё один пример того, как самым безглючным браузером кажется именно тот, в котором ведёшь разработку.