Да, я помню, что в прошлой статье я обещал разобраться со счетчиками скачиваний файлов. Но меня просто жутко задолбало, что опера 12 криво показывает нумерованный список. Если он выравнен в css с помощью text-align:justify; (ну или text-align: justify; – пробелы не воспринимаются в css), то в случае, если текст занимает больше, чем одну строку, то первая строка сильно смещается вправо, и текст в ней с правого края уходит за пределы блока так, что его становится не видно. И если, скажем, в случае простого текста этого легко можно избежать, просто не создавая тегов нумерованного списка, а просто введя номера пунктов вручную, то в случае, когда в конце статьи выводится список похожих или рекомендуемых постов с помощью плагина Yet Another Related Posts Plugin (YARPP), создающего как раз нумерованный список, то выглядит все это мягко говоря – ужасно, о чем же эти связанные посты – ну абсолютно не понятно. Глюк это известный, идет еще с opera 11, и в 12 так и остался непофиксеным. Остальные браузеры – выводят все отлично, никаких проблем, так что это баг именно оперы. Поэтому небольшое лирическое отступление, как я это вылечил.

Выглядит это примерно так:

Решение есть – не самое лучшее, но тем не менее. Для одиннадцатой оперы было описано здесь, но данный код в 12-ой – к сожалению, не работал. Соответственно была задача прикрутить тоже самое к 12-ой. Для этого можно воспользоваться специальным css свойством, которое задает, что все, что попадает внутрь этого свойства, должна понимать только 12-я опера, а все остальные браузеры – игнорировать. Нашел вот здесь. Типа кросс-браузерная верстка – заставить использовать css только для оперы и запретить для chrome, safari, firefox 🙂 Вкратце звучит оно так:

тег или .класс необходимо заменить на тот тег или класс, к которому требуется применить стиль в опере, ну а свойство: значение; – тем стилем, который необходимо использовать.

В случае с нумерованым списком используются теги ol и li. В моем случае li выводится со сдвигом на 20 пикселей, в css это выглядит так:

Нам необходимо, чтобы текст выравнивался только в записях, а не в сайдбаре (чтобы ничего не поехало) => у меня это класс entry, только в списках (тег ol) и  соответственно, внутри тегов li. Получится .entry ol li. Дальше, поскольку опера считает, что наш номер перед текстом тоже необходимо выравнять, необходимо его сделать с маркером list-style-position: inside; (маркер, обтекаемым текстом), после чего сместить первую строчку на 20 пикселей влево свойством text-indent:-20px; ну и можно на всякий случай еще раз добавить text-align: justify.

Итого код:

А выглядеть все стало так:

Для остальных браузеров все осталось неизменно – они это правило просто не видят.

Небольшое примечание: если вставить вот этот код для 11 оперы, начинающийся с:

то наш код для 12-ой работать перестанет.

Ну, уж сказал А, то скажу и Б. А именно – про  css только для chrome. Чтобы аналогично описанному с оперой – но понимал только хром.  Мне это потребовалось, когда обнаружилось, что в подписке на обновления сайта хром не выводит placeholder, потому что в коде subscribe2 он жутко криво прописан – не плейсхолдером

, а через value=”Enter email address…” – вот таким вот жутким кодом:

В результате шрифт выводился не италиком, через -webkit-input-placeholder, как изначально было задумано. А в опере – все отрабатывалось отлично. Можно было, конечно, переделать код плагина – но при обновлении он бы снова переписался. А найдя хак для css google chrome, а именно:

и добавив в style.css строчку

удалось все вывести более-менее красиво. Правда, потом обнаружилось, что в файрфоксе это тоже не работает 🙂

Вот так вот. Ну уж теперь – точно – в следующей статье – о счетчиках скачиваний для вордпресса.