Кроссбраузерная верстка CSS

Если вас интересует будущее браузеров, верстки, то читаем статью: кроссбраузерная верстка.

Кроссбраузерная верстка CSS– это одинаково отображаемая верстка страницы в различных браузерах, которая реализуется средствами CSS.

Кроссбраузерность css верстки можно реализовать двумя способами:

- Сделать единственный кроссбраузерный css стиль для сайта.

- Сделать css файлы стилей для каждого из браузеров и средствами javascript, определять браузер и подгружать файлы.

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

Естественно лучше если будет стиль в единственном файле (при редактировании не открывать массу файлов), но по поводу css нюансов (особенностей) браузеров, то лучше их отделить в разные файлы.

Итак, компромисс кроссбраузерной верстки на css:

Создать файл общего стиля (style.css).

Все уникальные особенности и несоответствия для каждого браузера разделить по файлам (opera.css, safari.css, explorer.css, firefox.css…). И подгружать их средствами JS, PHP или другими известными вам способами.

Способы определения браузеров

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

IE 6, 7, 8 (Internet Explorer):

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style/ie.css" />
<![endif]--><!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/ie7.css" />
<![endif]-->

Opera:

<script type="text/javascript">
if(window.opera) {
         document.write('
             <link rel="stylesheet" type="text/css" href="style/opera.css" />
         ');
}
</script>

Mozilla Firefox:

@-moz-document url-prefix() { a { color: #999999; } }

Safari:

<script type="text/javascript">
var detect = navigator.userAgent.toLowerCase();
if((detect.indexOf('safari')) != -1) {
           document.write('
             <link href="style/safari.css" rel="stylesheet" type="text/css" />
           ');
}
</script>

Вот мои предложения по поводу реализации кроссбраузерной верстки на css. Если у кого-то есть варианты получше, прошу поделиться.

Дальше: Превью картинки на PHP