суббота, 7 ноября 2009 г.

Кроссбраузерность HTML верстки страниц

Кроссбраузерность html верстки страниц


Кроссбраузерность (кроссбраузерная верстка сайта на CSS) – это совокупность CSS компонентов, которые обеспечивают единый образ страницы сайта во всех браузерах, или же в таких как IE 6, 7, 8, Firefox, Opera, Safari.



Часто у многих верстальщиков возникают проблемы с кроссбраузерностью, и иногда можно их решить с помощью приемов CSS, а иногда хочется сделать, так что бы разные CSS стили работали в разных браузерах . Данное действие можно реализовать с помощью Conditional Comments для IE, и с помощью Java Script.

Как сделать верстку кроссбраузерной во всех браузерах:


Кроссбраузерность для IE (Internet Explorer):


<!--[if IE 6]>
/* CSS для получения кроссбраузерности в IE */
<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>

Кроссбраузерность для 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>

Кроссбраузерность с помощью PHP


Существует еще один способ достижения кроссбраузерной верстки с помощью PHP и CSS. Реализуется данный способ с помощью функции в PHP "User Agent".
echo $_SERVER['HTTP_USER_AGENT']; // Возвращает строку с пользовательскими данными (OC, браузер)


Дальше для получения кроссбраузерной верстки надо просто разобрать полученную строку и внедрить полученные данные в Java Script или прямо в PHP формировать CSS свойства.

Хочу отметить, что этих "исключений" лучше избегать при верстке страниц и стараться написать кроссбраузерный код "своими руками".

Комментариев нет: