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

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

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

Если в каком-то браузере какой-нибудь элемент отображается неправильно, то можно скорректировать его вид, сделав код этого элемента корректным именно для этого браузера. Например, в 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 этот класс. Получается что-то такое:

</pre>
<p>Теперь осталось только определить, как будет выглядеть любой элемент, оформленный с этим классом. Это оформление прописывается в файле style.css. Например, ссылка в браузере Opera будет иметь такое оформление:</p>
<pre>.opera a {
	color: red;
	text-decoration: underline;
}

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