CSS content и псевдоэлементы

кнопки open google reader выглядят по-разному в обычной и мобильной версиях. В обычной на них есть текст, в мобильной только юникодные символы-иконки. Долгое время за выбор одного или другого отвечал яваскрипт, но тут я решил, что пора бы это перевести на CSS. В нём как раз есть удобное свойство content для того, чтобы подставлять нужный текст. И перевёл, и возрадовался.

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

жаль, конечно, что это не сработало. Та же проблема, что и с элементом img: посредством CSS его пока что не изменишь.

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

Артемий Трегубенко,
,

comments powered by Disqus