Новая версия сайта находится по адресу
wa.artel.by
Использован материал c сайта http://www.richinstyle.com. Перевод by FireFalcon.
Идея такая: пишите таблицы стилей для каждого браузера, в полной мере используя особенности, фишки и пр. каждого из них, а потом с помощью JavaScript в зависимости от браузера подключаете нужный css-файл. Кроме того надо иметь в виду, что не у всех пользователей JavaScript включен, а потому надо бы иметь css-файлик, который подключается по умолчанию с выключенным JavaScript, и этот файлик должен содержать CSS, который понимается всеми браузерами.
Оставим в сторонке браузеры версии 3 (если кому-то ну очень интересно, особенность подключения css-файлов для этих браузеров смотреть здесь. А для остальных подойдет вот такой скрипт:
/* (c) 2000 RichInStyle.com (www.richinstyle.com)*/
ua=navigator.userAgent;
l='<LINK rel="stylesheet" type="text/css" href="';
c='.css">';
if (ua.indexOf('IE 4')!=-1)document.write(l+'ie4'+c);
if (ua.indexOf('IE 5')!=-1)document.write(l+'ie5'+c);
if (ua.indexOf("Opera 5")!=-1)document.write(l+'op5'+c);
else if (ua.indexOf("compatible")==-1) {
if (ua.indexOf("/4")!=-1)document.write(l+'nn4'+c);
if (ua.indexOf("/5")!=-1)document.write(l+'nn5'+c);
}
А темплейт HTML-странички будет выглядет примерно вот таким образом:
<HTML>
<HEAD>
<!-Опционально -->
<STYLE type="text/css">
</STYLE>
<LINK rel="stylesheet" href="all.css" type="text/css">
<SCRIPT src="style.js" type="text/javascript"></SCRIPT>
<BODY bgcolor="#xxxxxx" text="#xxxxxx" alink="#xxxxxx" link="#xxxxxxx" vlink="#xxxxxx">
Есть вообще два различных способа для этих реализации стилей при таком разделении:
- Запихать работающие стили в all.css и потом лишь модифицировать их в файлах op5.css, ie5.css и т.д.
- Сделать каждую таблицу стилей полной
На первый взгляд, первый способ лучше. Однако при детальном рассмотрении это оказывается не так. Например, если вы захотите поместить объявления color и font в all.css, а margin и padding в css-файлы для каждого браузера, то это сделать проще. Однако нельзя включить все свойства (color, margin, padding font) в all.css, потому что баги вам житья не дадут. Таким образом приходим ко второму варианту.
Короче, если вам совершенно необходимо использовать особенности каждого браузера в полной мере, без разделения таблиц стилей не обойтись. Самый простой и наиболее часто употребляемый вариант - это когда надо разделить стили Opera 5, MSIE 5 и Netscape 4. Делается это так:
<HEAD>
<STYLE type="text/css">
@import url(style.css);
</STYLE>
Не понимает Netscape 4 этой конструкции. Так что пользуйтесь на здоровье!
