Internet Explorer 8 и потрясение основ

Internet Explorer 8 и потрясение основ

Эти заметки написаны с точки зрения веб-разработчика и будут интересны прежде всего верстальщикам HTML и CSS, программистам JavaScript и прочим технологам клиентской стороны.

В начале марта 2008, как гром среди ясного неба, появилась первая бета-версия Internet Explorer 8. Разработчики ещё в декабре сообщили в блоге, что новый браузер будет выдерживать тест Acid2, но все приняли это за рождественскую шутку.

Даже теперь, видя знаменитую рожицу Acid2 в окне браузера, я не могу до конца в это поверить. Где-то должен быть подвох.

Internet Explorer всегда отличался пренебрежением к веб-стандартам. Это было его фундаментальной особенностью и гражданской позицией. Более десяти лет Консорциум W3C в поте лица ковал спецификации HTML, CSS и DOM. Альтернативные браузеры, рискуя здоровьем и долей на рынке, внедряли эти стандарты до мельчайших деталей. А IE громко чихал на тех и других, оставаясь при этом самым популярным браузером.

И вот что-то у них там подвинулось. IE 8 претендует на полную поддержку CSS 2.1. Речь не про какие-то отдельные свойства и значения, а про весь стандарт целиком. Это потрясение основ и культурный шок мирового масштаба. Что именно такого страшного в CSS 2.1? Прежде всего, табличные значения свойства display — table, table-cell, inline-table и другие. Это настоящая альтернатива традиционной табличной вёрстке. В последние годы её было модно ругать, однако в качестве замены предлагались решения с обтекаемыми элементами (floats), которые были ещё хуже. В самом деле, все эти float’ы предназначены именно для обтекания, и применять их для имитации табличной вёрстки — глупо и неэффективно.

А вот табличные значения display по своей природе предназначены ровно для того, для чего поныне применяются «оформительские» таблицы HTML. Когда браузеры, не поддерживающие все эти table-cell, уйдут в историю, тогда и настанет пора окончательно отказываться от табличной вёрстки в пользу CSS.

Чтобы окончательно закрыть тему display, IE 8 поддерживает ещё значения run-in и inline-block. Первое из них раньше не поддерживалось никак, а второе работало так коряво, что лучше бы не работало.

Второй удар по CSS после табличных layout’ов — генерируемое содержание. Это псевдоэлементы :before и :after, а также связанное с ними свойство content. Они позволяют вставить содержание на веб-страницу прямо из таблицы стилей. Разумнее всего использовать их для автоматической нумерации и подобных эффектов. Кстати, для нумерации IE 8 ещё поддерживает свойства counter-reset и counter-increment.

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

Из CSS 2.1 поддерживается псевдокласс :focus, полезный для полей ввода и прочих элементов управления. Реализовано свойство outline, которое создаёт рамку, но, в отличие от border, не вмешивается в модель областей. Для таблиц добавились свойства caption-side (размещение заголовка над таблицей или под ней) и border-spacing. Это свойство позволяет увеличить зазор между ячейками таблицы, для чего раньше применяли атрибут cellspacing. Чтобы убрать этот зазор, грамотные люди давным-давно пишут border-collapse, а вот, наоборот, увеличить его через CSS было невозможно в прежних версиях IE.

В таблицах стилей для печати теперь поддерживаются свойства page-break-inside (в дополнение к ранее внедрённым page-break-before и page-break-after), а также widows и orphans. Последние свойства позволяют указать, сколько строк допустимо оставить на предыдущей странице или перенести на следующую.

В IE 8 исправлены многие свойства CSS, которые в прежних версиях поддерживались через пень-колоду. Ликвидированы известные проблемы с внешними отступами (margin) и обтекаемыми элементами. Поправлены свойства z-index и text-decoration, добавлены значения white-space и list-style. В частности, теперь можно нумеровать пункты списка по-армянски или по-грузински. Признайтесь, вы ведь давно этого ждали?

Предыдущее радикальное изменение поддержки CSS случилось в IE 6, хотя теперь оно выглядит сущей мелочью по сравнению с тем, что творится в восьмой версии. Тогда, чтобы не испортить отображение уже существующих сайтов, в браузере появилось переключение режимов: старые сайты без DOCTYPE отображались в режиме обратной совместимости (как в IE 5), а новые сайты с правильным DOCTYPE отображались в режиме, приближенном к стандартам.

В IE 8 эта идея получила неожиданное продолжение. Теперь в браузере не два, а три режима. Страницы с DOCTYPE отображаются в «супер-стандартном» режиме, где доступны сразу все прелести CSS 2.1. Страницы без DOCTYPE открываются в том же режиме обратной совместимости, что во всех предыдущих версиях. Но есть и третий режим, имитирующий IE 7. Должно быть, это специально для таких сайтов, которые переросли песочницу IE 5, но ещё не достигли нирваны IE 8. Впрочем, создателям сайтов придётся потрудиться, чтобы заставить браузер отображать страницы в этом промежуточном режиме — для этого надо подать с веб-сервера заголовок X-UA-Compatible: IE=7 или вставить в HTML элемент meta с аналогичным назначением.

Бросив все силы на борьбу с CSS, разработчики IE 8 не сильно концентрировались на HTML и JavaScript, поэтому изменения в этих технологиях не впечатляют. В HTML новшества касаются в основном элемента object — складывается впечатление, что его поведение специально подгоняли не столько под стандарты W3C, сколько под тест Acid2. Побочный эффект этого в том, что теперь object можно применять как полноценную замену элементу img. Впрочем, неясно, зачем это может пригодиться.

В DOM слегка поправлены методы getElementById(), getAttribute() и некоторые другие из этой же обоймы. Поддерживаются новые свойства contentDocument, ownerElement и метод hasAttribute(). Подрихтована обработка относительных URL в значениях атрибутов и свойств. В общем, много мелких технических поправок, из-за которых немало скриптов на действующих сайтах перестанут корректно работать в IE 8.

Ещё один реверанс в сторону Acid2 — так называемые data URI, позволяющие вставить изображение в особом формате прямо в код HTML или CSS. Честно говоря, я не вижу в этом никакой радости. Я убеждён, что данные разной природы лучше хранить в разных файлах — отдельно HTML, отдельно CSS, отдельно изображения, и так далее. От смешивания форматов в одном коде — только лишняя головная боль разработчиков, особенно если форматы такие разные, как HTML и, скажем, PNG. Чтобы у нас голова окончательно пошла кругом, IE 8 предлагает комплекс встроенных средств разработки — наследников корявоватого Developer Toolbar. Эти средства позволят просматривать дерево документа, отслеживать положение и поведение областей, исследовать стили, а также редактировать всё это прямо на живой странице. Прилагается отладчик JavaScript, о котором веб-разработчики мечтали долгие годы. Если раньше страницы криво отображались в IE, было невозможно разобраться в причинах неприятностей. Теперь, скорее всего, страницы не станут лучше отображаться, зато мы сможем точно выяснить, почему это происходит.

И это ещё не все сюрпризы, которые преподносит IE 8. В предшествующей версии браузера наконец-то ввели объект XMLHttpRequest, благодаря которому стал возможен настоящий, кошерный AJAX. Теперь тема AJAX развивается и обогащается новыми фиоритурами. Поправлено поведение кнопки «Назад», которая даже в экстремально вебдванольных приложениях работает так, как ожидают простые пользователи. Улучшена обработка зависших или оборвавшихся соединений. Усилены меры безопасности, но вместе с тем введены средства обмена данными между различными доменами.

Наконец, появилась термоядерная штуковина — DOM Storage. Говоря простым языком, это возможность для веб-приложений сохранять данные на жёстком диске компьютера. Раньше любые поползновения в этом направлении жёстко подавлялись из соображений безопасности. В нашем распоряжении были только куцые cookies, методы работы с которыми напоминали вырезание эпических поэм на рисовом зерне.

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

В общем, новшеств в IE 8 — выше крыши. Остаётся удивляться, почему за целых пять лет после выхода IE 6 авторы браузера сумели всего лишь напихать в него несколько мелких заплаток, а всего за год после IE 7 создали продукт, отличающийся от предыдущей версии, как осциллограф от клепсидры.

Вся статья к сожалению не уместилась на форуме, поэтому Вы можете ознакомится с ней тут:

http://optimism.ru/agency/articles/300/

Ростислав Чебыкин (ГК «Элемент»)

Копирование материалов разрешено только с активной ссылкой на optimism.ru

(<a href="http://www.optimism.ru/">оптимизация сайтов </a> optimism.ru).