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

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

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

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

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

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

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

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

 

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

.opera a {
	color: red;
	text-decoration: underline;
}

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

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Grawl

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

    Ответить
  2. Nikola

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

    Ответить
  3. Grawl

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

    class=" webkit chrome win js"
    Ответить
  4. Nikola

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

    Ответить
    1. Grawl

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

      .opera элемент { margin-top: 10px }

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

      Ответить