n-wp.ru — блог о WordPress

Как создать индивидуальное оформление для отображения в разных браузерах

В блоге часто поднимается тема совместимости используемой темы с различными браузерами. К сожалению, сейчас среди разработчиков браузеров нет единства во взглядах, каких стандартов придерживаться. Поэтому часто получается, что один и тот же блог в разных браузерах выглядит тоже совершенно по-разному. В таких случаях есть два выхода: либо переделывать тему так, чтобы в использовался только совместимый между разными браузерами код, либо подстраивать тему своего блога под каждый браузер.

Я стараюсь придерживаться первого — доводить внешний вид своих блогов до одинакового вида во всех браузерах, используя максимально совместимый между браузерами код. Однако это удается не всегда. В таком случае может выручить второй способ — создание индивидуального варианта оформления под конкретный браузер. Сделать это можно, используя функцию, которая определяет, каким браузером пользуется посетитель.

Если в каком-то браузере какой-нибудь элемент отображается неправильно, то можно скорректировать его вид, сделав код этого элемента корректным именно для этого браузера. Например, в Opera неправльно отображается какое-нибудь меню или ссылка не на том месте появляется — можно сделать оформление этих элементов, специально заточенное под Оперу. Главное в этом деле — точно определить, что посетитель пользуется этим браузером, и подсунуть ему не тот код, который неверно отображается, а скорректированный под браузер посетителя код.

Сделать это можно, создав индивидуальный для каждого браузера класс. Оформление этого класса, с учетом совместимости с тем или иным браузером, прописывается в style.css.

Откройте файл functions.php и вставьте в него такой код:

Эта функция распознает браузер посетителя и создает специальный класс оформления для раздела body — то есть для всего основного содержимого. Этот класс имеет такое же название, как и браузер (движок браузера): ie, chrome, opera, gecko…
Функция автоматически добавляет в тег body этот класс. Получается что-то такое:

Теперь осталось только определить, как будет выглядеть любой элемент, оформленный с этим классом. Это оформление прописывается в файле style.css. Например, ссылка в браузере Opera будет иметь такое оформление:

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

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

5 комментариев

  • ВЕЛИКОЛЕПНО!
    ВОСХИТИТЕЛЬНО!
    ИДЕАЛЬНО!
    Ахренеть, это лучшее решение кроссбраузерности, которое Я видел вообще!

  • Спасибо Вам Огромное…..
    Для меня это, очень полезная и необходимая новость в вашем — чудесном блоге….

  • А вот и плагин, который делает это же: Browser Specific CSS Plugin. Только он ещё определяетвот что:
    работает ли JS
    на какой ОС запущен браузер
    какой движок
    Вот, например, что вижу Я на своём сайте в тэге html:

  • Приветствую…
    А как настроить — этот плагин ?
    (Browser Specific CSS)- где и как прописывать CSS под заданный браузер ?

    • Не знаете, как пользоваться CSS? Ну так изучайте :)
      Вот, к примеру, так: нужно добавить только в Opera верхний отступ у элемента, тогда пишем так:

      Плагин в настройке не нуждается.