Кроссбраузерность - это правильное отображение сайта в разных браузерах, разных версий.
- Как определить под какие браузеры подгонять сайт?
- Самый простой способ - это рассмотреть тенденцию посещаемости сайта (Google Analytics, Яндекс Метрика или любой встроенный код предоставленный той или иной системой отслеживания посещений пользователей), и определить количество переходов с каждого типа браузера.
Но это очень строгий метод, так как эти показатели отображают пользователей которые уже посетили сайты, а так как мы рассчитываем на рост количества посещений, то этот метод может оказаться в той или иной мере ошибочным.
- Второй метод - оптимальная подгонка под каждый браузер, каждой версии.
Этот метод может показаться вам страшным и может быть нереальным, но это не так, что будет хорошо отображаться в IE-6 (IE - Internet Explorer) то будет также неплохо отображаться и в IE-7, но ключевое слово - неплохо, так как оптимизировать картинки с расширением .png под IE-6 довольно таки не просто, хоте и это реально.
Существуют также проблемы при работе со сторонними шрифтами, к примеру слова "Приобрести точечные светильники в магазине Brille" написаные сторонним шрифтом Maryd Pro, будет корректно (настолько корректно насколько отрендерит браузер) отображаться во всех браузера кроме IE, в таком случае лучше для сайта использовать по умолчанию встроенные системные шрифты такие как: tahoma, arial, times new roman, trebushet ms.
Сейчас существуют много хаков для всех браузеров, для IE это к примеру такой код:
<!--[if lte IE 6(или любая другая версия)]>
<link href="/css/some.css" rel="stylesheet" type="text/css" />
<![endif]-->
Его вставляют между тегами <header></header> он определяет еще один файл таблицы стилей, и так как он заключен в теги комментариев то не работает во всех остальных браузерах, кроме как IE, так как он браузер "особенный", определяет некоторые комментарии как разметку страницы. Отказываться от IE ни в коем случае нельзя, так как это первый браузер любого пользователя Windows.
Для Opera наилучшим вариантом есть javascript код между теми же <header></header>:
<script type="text/javascript">
if (navigator.userAgent.indexOf('Opera') != -1) {
document.write('<link href="/css/some.css" rel="stylesheet" type="text/css" />');}
</script>
И если "погуглить" то можно найти для остальных браузеров. Но как правило если толково версталось для FireFox то доделывать в остальных браузерах придется немного (ну конечно кроме IE).
И еще одна подсказка - при написании любого нового CSS файла для другого браузера порой придется перебивать стили пример:
Для FireFox:
.some-style {boeder:1px solid;}
по идее это сплошная черная рамка толщиной в 1px, по умолчанию черного цвета, но для IE это будет рамка толщиной 1px серого цвета.
И чтобы перебить стиль для IE пишем:
.some-style {boeder:1px solid #000000 !important;}
