Кроссбраузерность

Оглавление
03 июля 2009 г.

Главным образом проблема кроссбраузерности возникла в тех масштабах, в которых мы её имеем на сегодняшний день, благодаря обозревателям Internet Explorer компании Microsoft. Сразу отмечу, что ни один обозреватель никогда полностью спецификацию не поддерживал, однако самое большое количество расхождений с ней именно у обозревателей Мicrosoft.

Кроссбраузерность как проблема уменьшается год от года. Если смотреть глобально, то путь к соблюдению стандарта можно сравнить с подъёмом на вершину пирамиды с разных её углов четырёх человек. В конце концов все четверо окажутся на вершине в одной точке. Аналогичная картина происходит сейчас с обозревателями - спорных моментов всё меньше. Соответственно, кроссбраузерности добиться проще, нежели несколько лет назад.

Кроссбраузерность, карикатура

Объяснить и продемонстрировать реализацию кроссбраузерности проще всего на линиях (тег <hr>). Для начала заглянем в спецификацию:

Официальная спецификация

Перевод Пирамидина А.

Тег линии HR (W3C)

Тег линии HR (перевод)

Получается, что разрешённых атрибутов для управления этим тегом нет, есть только не рекомендованные. Поэтому всё управление цветом, размером и прочим осуществляется через css-стили. Для начала давайте посмотрим, как отображается линия без настроек в различных обозревателях. Для этого создадим html-файл с тремя линиями подряд:

<hr>
<hr>
<hr>

Сразу скажу, что я поступаю неправильно, т.к. не указываю Doctype документа. При этом несоответствий становится больше. Это я делаю намеренно для того, чтобы иметь возможность показать вам больше примеров, а также дать более полную информацию по «режиму совместимости» во второй части статьи. Но пока давайте не акцентировать внимания на отсутствующем Doctyp'е, а сосредоточимся на основном...

Откроем этот файл в различных обозревателях. Получится следующая картина:

Кроссбраузерность (линии)

Как видите, даже в новых обозревателях не всё гладко. В Opera линии жирные и тёмные, в Explorer'е - отступы линий больше. Появление таких вот незапланированных отступов может привести к тому, что контент сайта что называется поедет. Теперь попробуем выровнить отступы, сделать линии цветными и пошире.

<head>
<style>
hr {
padding: 0; margin: 3px 0; 
height: 4px; color: red;
}
</style>
</head>
 
<hr>
<hr>
<hr>

получаем в результате следующее:

Кроссбраузерность (линии)

Свойство color каждый трактует как хочет. Вдобавок Internet Explorer плюёт на установки отступов, а Chrome прикидывается дальтоником - они себе на уме. Сражаемся дальше. Раз половина обозревателей отображает только контуры красных линий, а Chrome про красный вообще не слышал, зальём линии фоновым цветом.

<head>
<style>
hr {
padding: 0; margin: 3px 0; 
height: 4px; color: red;
background-color: red;
}
</style>
</head>
 
<hr>
<hr>
<hr>

и получим такой результат:

Кроссбраузерность (линии)

Попиксельного соответствия при нынешнем положении вещей вряд ли можно добиться, но кроссбраузерным этот вариант назвать вполне можно, но с одной оговоркой - Internet Explorer. Что же делать с отступами? Ситуация непростая, т.к. на изменения отступов отреагируют все обозреватели, т.е. разница всё-равно не исчезнет.

В таких ситуациях многие верстальщики применяют css-хаки (несуществующие команды, которые тем не менее работают). Таких хаков для Internet Explorer'а существует превиликое множество. Однако, все они делают код невалидным. Лично мне по принципиальным соображениям это совсем не нравится. Поэтому я использую так называемые условные комментарии. В html и css-файлах можно комментировать код с помощью специальных контейнеров:

<!-- html-комментарий -->
/* css-комментарий */

Содержимое этих контейнеров не обрабатывается обозревателями. Внутри них можно оставить пометки, чтобы не забыть что-нибудь или передать какую-то информацию для другого разработчика.

Так вот условные комментарии отличаются от обычных тем, что Internet Explorer их не понимает и обрабатывает заключённую в них информацию. Другие обозреватели их понимают и информацию игнорируют. Таким образом можно разместить информацию специально для обозревателей компании Microsoft. Выглядит это так:

<!--  обычный комментарий html -->
<!--[if IE]> условный комментарий для IE <![endif]-->
<!--[if IE 7]> условный комментарий для IE седьмой версии <![endif]-->

Теперь, используя условный комментарий, можно установить другие отступы для IE. Кстати, учитывая, что при нуле они всё-равно присутствуют, надо будет ставить отрицательные значения, а также указать линию как блочный элемент (Explorer считает её строковым элементом и принудительно оставляет отступ в несколько пикселей).

<head>
<style>
hr {
padding: 0; margin: 3px 0; 
height: 4px; color: red;
background-color: red;
}
</style>
<!--[if IE]>
<style>
hr { display:block; margin: -10px 0; }
</style>
<![endif]-->
</head>
 
<hr>
<hr>
<hr>

И наконец-то в итоге за свои труды получаем:

Кроссбраузерность (линии)

Режим совместимости

Есть ещё одно НО, которое надо учитывать. Как я уже отметил выше, Doctype документа должен быть обязательно указан и указан правильно. Ко всему прочему очень желательно указать его как Strict, т.к. в режиме совместимости или при Transitional обозреватели получат послабления в трактовке кода и несоответствий будет больше (вам нужна лишняя головная боль?). О Doctype я уже рассказывал подробно в разделе сайта HTML и CSS. Тут кратко расскажу, где можно посмотреть режим отображения вашей страницы.

Т.к. в примере Doctype не указан, страница будет находиться в режиме совместимости, а не в режиме соответствия стандартам.

В Firefox нужно смотреть информацию о странице (через одноимённый пункт контекстного меню).

Информация о странице (Firefox)

В Opera информация предоставляется через боковую панель (кнопка «сведения»). Однако, по-умолчанию этой кнопки на панели нет, её надо добавлять (клик правой кнопкой мыши на панели - Настроить...).

Информация о странице (Opera)

В Internet Explorer информация о странице предоставляется по нажатию клавиши F12.

Информация о странице (IE)

Обратите внимание, что у IE есть также режим обозревателя. Новые версии могут вести себя как старые на тех сайтах, где это указано верстальщиком. Делается это для того, чтобы верстальщики не переделывали сайты под новые версии, если с выходом новой версии всплывают баги, а имели возможность обеспечить совместимость. Подробности можно посмотреть в базе знаний Microsoft.

В Chrome по-умолчанию инструменты разработчика также вызываются клавишей F12, однако информацию о режиме совместимости я там так и не нашёл.

Теперь давайте всё-таки укажем Doctype, а также в качестве эксперимента уберём условный комментарий и посмотрим, как это повлияет на внешний вид линий:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
hr {
padding: 0; margin: 3px 0; 
height: 4px; color: red;
background-color: red;
}
</style>
</head>
 
<hr>
<hr>
<hr>

Результат будет такой:

Кроссбраузерность, Doctype (линии)

Как видите, правильно указанный Doctype может избавить вас от многих проблем. Этого конечно не скажешь о старых версиях IE (6 и 7 версии). С ними всё-таки приходилось использовать способы, описанные выше. Но, к счастью, их времена проходят и во время тестирования Windows 8 я с радостью отметил, что имеющаяся там версия обозревателя (IE10) вполне на уровне отображает стандарты (в том числе и ещё не принятые HTML5 и CSS3), а также проходит тесты совместимости и поддержки web-технологий.

Похожие статьи
Doctype HTML 4

Во главе документа html стоит Doctype. Немного о том, для чего он нужен: DOCTYPE объявляет интернет-обозревателю тип документа, который предстоит обработать и определяет правила этой обработки. Не объявляя DOCTYPE, вы подвергаете свой html-документ (сайт) полной анархии со стороны обозревателей. Каждая программа будет трактовать написанное как ей вздумается, а это чревато большими проблемами. В HTML 4.01 присутствует три вида DOCTYPE.

Сегодня очень широко применяется стандарт HTML5, который ещё не вышел официально и вряд ли в ближайшие 2-3 года выйдет, так как ждали его выхода ещё в середине 2014-го года. Но уже сейчас большинство его возможностей обозреватели поддерживают и есть смысл изучать его в первую очередь.

04 июля 2009 г.
оптимизация кода

В процессе написания кода невозможно обнаружить все ошибки и исправить их. Написание кода, особенно в больших объёмах, дело монотонное, в чём-то нудное и часто повторяющееся, поэтому глаз замыливается. Поиск и исправление ошибок является лично для меня отдельной финишной процедурой. Кроме явных ошибок часто всплывают нелогичные участки кода, которые тоже приходится переписывать, упрощать и упразднять.

Кроме исправления ошибок и прочих недочётов необходимо озаботиться оптимизацией контента для поисковых машин. Поисковики предъявляют к сайтам определенные требования, которые с каждым годом только множатся и если вы не решили целенаправленно закрыть сайт от индексации, этих требований стоит придерживаться.

20 февраля 2010 г.

Яндекс.Метрика