- → Верстка, Дизайн
- → Дизайн
- → Статьи
Кроссбраузерная верстка 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


Помогаем советом из опыта продвижения, монетизации. Это бесплатно.
P.S. Тсс.. Только никому не говорите!


