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 создали продукт, отличающийся от предыдущей версии, как осциллограф от клепсидры.
Впрочем, они реализовали далеко не всё, что хотели бы видеть разработчики сайтов. Например, альтернативные браузеры давно поддерживают истинный XHTML (тип содержания application/xhtml+xml), а в IE 8 про него ни слуху ни духу. Нет также серьёзных подвижек в области DOM. Прежде всего это относится к событийной модели, где так и не воплотились методы вроде addEventListener() и механизм передачи событий в функцию-обработчик. Не реализованы SVG и MathML, которые часто упоминаются в ламентациях любителей современных технологий.
Зато IE отличился кое-чем, чего вообще никто не ожидал. В нём поддерживается ARIA. Вы даже не знаете, что это такое, а оно поддерживается. Сейчас попробую объяснить.
Как известно, HTML не справился с задачей полноценной семантической разметки документа. Создатели сайтов используют элементы не по прямому назначению, а как им удобнее — таблицы применяют для вёрстки, из div’ов делают выпадающие списки, конструируют самодельные элементы управления. Поэтому по названию тэга уже никак нельзя судить, какую функцию на самом деле выполняет элемент.
Для борьбы с этим придуман атрибут role, позволяющий обозначить эту функцию. Например, если из элемента span с помощью JavaScript сделан ползунок, ему можно присвоить атрибут role="slider", и тогда даже при недоступном JavaScript браузер поймёт, в чём смысл этого span’а.
Вместе с набором «ролей» внедрены некоторые свойства DOM, обозначающие качества и состояние элементов — скажем, ariaReadonly, ariaRequired и ariaSelected. Пока это всё выглядит, как ещё одна технология разметки, параллельная HTML. Не очень понятно, какая от этого может быть практическая польза — думаю, только добавится неразберихи. Впрочем, время покажет.
Ну и, наконец, моя любимая особенность IE 8 — улучшенное масштабирование страницы. В IE 6 из подобных средств была только функция изменения размера шрифта, которая вызывалась из меню или с помощью Ctrl и колёсика мыши. При этом не увеличивались шрифты, размеры которых заданы в пикселах и других фиксированных единицах. В IE 7 регулировка шрифта осталась в меню, а Ctrl + колёсико стало приводить к жуткому разляпыванию всей страницы и идиотской горизонтальной прокрутке. Это называлось Page Zoom.
К восьмой версии разработчики поняли, что такой механизм — полный маразм, и сделали по-настоящему эффективное масштабирование. Теперь по Ctrl + колёсико страница аккуратно zoom’ится и комфортно перестраивается, не вылезая за боковые границы окна. И, наконец-то, при этом увеличиваются все шрифты, даже те, размеры которых заданы в пикселах. За это — моё отдельное спасибо команде разработки IE 8.
Будем с нетерпением ждать второй бета-версии. Про неё я тоже что-нибудь напишу.
Ростислав Чебыкин (ГК «Элемент»)
Следующая статья "История одного успеха"
