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

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

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

Если в каком-то браузере какой-нибудь элемент отображается неправильно, то можно скорректировать его вид, сделав код этого элемента корректным именно для этого браузера. Например, в 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 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

5 Комментарии

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

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

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

    class=" webkit chrome win js"
  4. Приветствую…
    А как настроить – этот плагин ?
    (Browser Specific CSS)- где и как прописывать CSS под заданный браузер ?

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

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

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*