IE8: наиболее полное описание нововведений для программиста

Браузер имеет длинную историю, начавшуюся в 1995 году, когда в августе этого года компания Микрософт выпустила его, лицензировав у Spyglass, Inc. С тех пор прошло уже более 10 лет и успел покорить мир, завоевав абсолютное большинство пользователей, а версия его вот-вот сменится на номер 8.

Несмотря на широкое распространение, Internet Explorer пользуется дурной славой у разработчиков web-проектов. Виной тому множество факторов, основными из которых, на мой взгляд, являются вялое внедрение стандартов консорциума W3C и очень медленный переход на новые версии среди пользователей. Из-за того, что огромное количество пользователей все еще использует устаревшие браузеры, web-разработчикам приходится поддерживать и их, внедряя в свои коды всяческие трюки и так называемые хаки, чтобы один и тот же сайт выглядел одинаково как в браузерах Firefox, Safari и Opera, так и во всех распространенных версиях Internet Explorer.

Однако, с выпуском восьмой версии браузера, Микрософт, похоже, предпринимает попытки сгладить отношение разработчиков к своему детищу, предлагая им долгожданную поддержку стандартов, не оставляя в тоже время поддержку предыдущего кода, написанного под старые версии.
Эта статья призвана показать, что же нового появится в Internet Explorer 8 для разработчиков, что изменится и как использовать некоторые новые и полезные вещи которые предлагает нам этот браузер.

История браузера Internet Explorer для программиста

Выйдя в 1995 году первая версия IE не получила широкого распространения, как впрочем и версия вторая, которая включала в себя поддержку кроме SSL, cookies, такие вещи как VRML и RSA. Третьей версии, которая вышла в 1996 году, удалось добиться большего. Она получила поддержку CSS, ActiveX, фреймов и Java-аплетов. В четвертой версии появились DHTML и PNG. Пятая версия принесла поддержку XML/XSLT, улучшенную поддержку CSS версии 1 и 2, favicon, HTML Application. Особенно полезным окажется введение XMLHttpRequest, который гораздо позднее даст старт повсеместно используемой технологии AJAX. Шестая версия оказалась менее щедрой на нововведения: улучшена поддержка DHTML, частичная поддержка CSS level 1, DOM level 1 и SMIL 2.0. Вместе с тем, шестая версия, похоже, стала самой уязвимой в плане безопасности версией браузера. В седьмой версии Internet Explorer добавилась поддержка IDN, незначительно была улучшена поддержка CSS, DOM и HTML, улучшилась поддержка компрессии страниц через Gzip и deflate. Однако одним из главных исправлений стала долгожданная поддержка прозрачности для PNG-файлов.

Восьмая версия

Первая публичная бета-версия Internet Explorer 8 появилась в марте 2008 года. Сообщалось, что новая версия получит переписанный с нуля движок рендеринга, что команда разработчиков нацелена на поддержку стандартов, таких как CSS 2.1, CSS 3 и HTML 5, что будут исправлены множество ошибок предыдущих версий. И ожидания сбылись, новая версия содержала в себе многочисленные изменения в HTML и CSS, такие как введение тега abbr, поддержка автоматически генерируемого контента CSS, правила CSS display: table, paged media, DOM Storage, XDM, API селектров и многое другое. Кроме того, появилась поддержка Data: URI и XDomainRequest для кросс-доменного обмена, добавились новые функции в DOM, заявлена поддержка спецификации ARIA.
После знакомства с новой версией и ее нововведениями, складывается мнение, что компания Микрософт, наконец-то обратила свое внимание на web-разработчиков и взялась основательно переделать свой браузер к лучшему.

Механика восьмой версии. Прикидываемся седьмой версией

Новая версия рендеринга Internet Explorer может работать в трех режимах:

  • Quirks и Strict – работают как и в IE7, в зависимости от DOCTYPE включается quirks-режим;
  • Standards – основной режим IE 8, в котором максимально широко реализованы стандарты.

Команда разработчиков предусмотрела принудительную поддержку того или иного режима для ваших старых или новых страниц, которые нацелены на отображение в предыдущих версиях браузера и должны нормально отображаться в 8 версии.
Для того чтобы задать необходимый вам режим нужно добавить на страницу meta-тэг следующего содержимого:

<font color="#000000"></font><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="X-UA-Compatible"</font> <font color="#ff0000">content</font><font color="#0000ff">="IE=8"</font> <font color="#0000ff">/></font>

Здесь, content – обозначает режим, в котором будет отображаться страница. Основные значения content следущие:

  • «IE=7» — включает режим Strict в котором рендерятся все страницы;
  • «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
  • «IE=EmulateIE8» — страница форсируется в режим « Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
  • «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».

Кроме того, значения content не ограничиваются перечисленными режимами. Так можно указать значения для любых других браузеров:

<font color="#000000"></font><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="X-UA-Compatible"</font> <font color="#ff0000">content</font><font color="#0000ff">="FF=3"</font> <font color="#0000ff">/></font>

Вдобавок к этому, у параметра content существует значение «edge», которое позволяет указывать на поддержку максимально старшей версии браузера:

<font color="#000000"></font><font color="#0000ff"><</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="X-UA-Compatible"</font> <font color="#ff0000">content</font><font color="#0000ff">="IE=edge"</font> <font color="#0000ff">/></font>

Кроме указания тега «meta» есть еще один способ управлять режимом браузера – это передача http-заголовка:

X-UA-Compatible: IE=EmulateIE7

Механизмы обеспечения безопасности

Защита памяти средствами DEP/NX

Функция «Включить защиту памяти для снижения риска атаки из интернета» доступна и в седьмой версии браузера, но она не включена по умолчанию. Правда, на 64-битных платформах этой функции нет, но только потому, что все процессы в 64-битных версиях Windows защищены через DEP. Теперь же, данная функция будет включена по умолчанию. Напомню, что DEP/NX позволяет предотвратить выполнение кода, который помечен как данные. Таким образом, отсекается целый пласт атак, таких как переполнение буфера.

Улучшения в ActiveX

В восьмой версии Internet Explorer элементы ActiveX могут быть установлены только для определенного пользователя (Per-User ActiveX), что снижает риск заражения, при учете того, что пользователь не работает под правами администратора. В этом случае под ударом находится только профиль одного пользователя и ничего больше.
Per-Site ActiveX — новая техника, которая позволяет задать элементу ActiveX возможность исполнения только на одном единственном (вашем собственном) сайте и нигде больше. Пользователь также может разрешить использование, скажем Silverlight, только на том сервере, где он первый раз понадобился. Как и все остальное, управление механизмом установки ActiveX будет доступно для администраторов через групповые политики.

XSS-фильтр

Самое интересное, на мой взгляд, нововведение — это встроенный XSS-фильтр, который позволяет защитить пользователя от «Cross-Site Scripting»-атак. Чтобы хотя бы приблизительно оценить величину угрозы от XSS-атак можно перейти по адресу XSSed.com, и посмотреть какие, не самые мелкие публичные ресурсы, подвержены этим атакам. Любой пользователь потенциально может оказаться жертвой, просто перейдя на эти ресурсы, и сейчас число таких обнаруженных «дырявых» сайтов перевалило уже за 20 тысяч.

XSS-фильтр Internet Explorer 8 направлен против xss-атак т.н. типа Type1. Согласно информации с Wikipedia атаки такого типа самые распространенные.

Для тех сайтов, которые по какой-то причине не хотят позволить пользователю включить защиту против XSS на их ресурсах доступна опция в заголовках HTTP:

X-XSS-Protection: 0

Она может понадобиться тем, кто в своих проектах использовал техники схожие с XSS-атаками.

Другие изменения безопасности

  • добавлена новая функция toStaticHTML, которая позволит избежать внедрения опасного кода на страницы путем форматирования html-тегов, эта функция делает тоже, что и функции библиотеки Microsoft Anti-Cross Site Scripting Library;
  • Internet Explorer 8 реализует функции ECMAScript 3.1 для работы с JSON. Для обеспечения безопасности, объект для работы с JSON содержит функцию parse, которая, так же как и toStaticHTML, надежно форматирует потенциально-опасный текст;
  • в новой версии Internet Explorer браузер содержит улучшения в т.н. механизме MIME-sniffing. Этот функционал позволяет определять браузеру содержимое страницы не по «content-type», а по содержанию. Нередко такое определение позволяло внедрить опасный код. Теперь, например, при «content-type: image/*» не будет рендерится вложенный html- или скрипт-код. Для управления фильтром разработчик может воспользоваться новым параметром authoritative и указать «Content-Type: text/plain; authoritative=true;» и в таком случае IE8 не будет пытаться определить тип содержимого, выведя его согласно указанию в «Content-Type»;
  • новые параметры для HTTP-заголовков X-Download-Options: noopen и Content-Disposition: attachment; filename=untrustedfile.html позволяют заставить браузер сохранить содержимое вместо его отображения. Это может понадобиться в тех случаях, когда web-приложению требуется передать пользователю страницу с небезопасным содержимым. В случае сохранения его на клиенте и последующем открытии такие страницы не будут работать в контексте сервера, что оставит его в безопасности;
  • в контроле File Upload теперь в целях безопасности изменили статус поля ввода на read-only. В дополнение к этому, с той же целью, IE8 теперь не будет отправлять полный путь файла, вместо этого отправляться будет только его имя.

Изменения касающиеся CSS

CCS-выражения

Одним из принципиальных решений команды разработчиков Internet Explorer в плане поддержки CSS является отказ от так называемых CCS-выражений (CSS expressions). Эти выражения позволяли интегрировать в CSS-код JavaScript-выражения для манипулирования содержимым css параметров. CSS-выражения в восьмой версии Internet Explorer будет отключены по умолчанию. В числе причин названы безопасность и высокая затратность в плане производительности. Однако поддержка CSS-выражений сохранится в режимах совместимости Strict и Quirks, для поддержки уже написанного кода.

Изменение в именовании свойств

Микрософт изменила порядок именования некоторых свойств CSS. Теперь все «нестандартные свойства» получают префикс «-ms-». Для того, чтобы полностью соответствовать CSS 2.1 в IE 8 такой префикс получили свойства подходящие под следующие условия:

  • если свойство — это расширение Микрософт (не определено в спецификации или модуле CSS);
  • если свойство — часть CSS-спецификации или модуля, которая не получила статус Candidate Recommendation от W3C;
  • если свойство только частично реализовывает свойство, определенное в спецификации CSS.

Вот список свойств, которые получили приставку «-ms-» (с указанием причины):

Property Type W3C Status
-ms-accelerator Extension  
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension  
-ms-block-progression CSS3 Editor's Draft
-ms-filter Extension  
-ms-ime-mode Extension  
-ms-layout-grid CSS3 Editor's Draft
-ms-layout-grid-char CSS3 Editor's Draft
-ms-layout-grid-line CSS3 Editor's Draft
-ms-layout-grid-mode CSS3 Editor's Draft
-ms-layout-grid-type CSS3 Editor's Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor's Draft
-ms-interpolation-mode Extension  
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension  
-ms-scrollbar-arrow-color Extension  
-ms-scrollbar-base-color Extension  
-ms-scrollbar-darkshadow-color Extension  
-ms-scrollbar-face-color Extension  
-ms-scrollbar-highlight-color Extension  
-ms-scrollbar-shadow-color Extension  
-ms-scrollbar-track-color Extension  
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension  
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor's Draft
-ms-zoom Extension  

Разработчики понимают, что для многих сайтов придется переводить старые значения на новые, поэтому старые значения, хотя и будут считаться устаревшими, будут поддерживаться в восьмой версии ради совместимости. При разработке же нового кода для IE 8 следует использовать только новые именования.

Свойство filter

Изменения коснулись такого свойства, как filter. Ранее, к сожалению, синтаксис filter не соответствовал CSS 2.1. Например, в указанном коде запятые считались недопустимыми.

<font color="#000000">filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);</font>

В новой версии браузера синтаксис filter приведен к соответствию требованиям спецификации CSS:

<font color="#000000">-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)»;</font>

нетрудно заметить, что в новом синтаксисе значение свойства взято в кавычки.

Поддержка CSS 2.1

Для более полной реализации CSS 2.1 добавлена поддержка следующих псевдо-классов:

  • :active (вместо частичной поддержки, будет полная)
  • :focus
  • :lang©
  • @page :first
  • @page :left
  • @page :right

Последние три не доступны в beta2, но будут добавлены в финальную версию. Кроме того добавлена поддержка следующих псевдо-элементов:

  • :before
  • :after

Следующие элементы будут поддерживаться в полном объеме вместо частичной поддержки либо добавятся:

  • list-style-type
  • background-position
  • font-weight
  • white-space
  • word-spacing
  • content
  • counter-increment
  • counter-reset
  • quotes
  • border-collapse
  • border-spacing
  • border-style
  • caption-side
  • empty-cells
  • bottom
  • display
  • left
  • right
  • top
  • z-index
  • orphans
  • page-break-inside
  • widows
  • outline
  • outline-color
  • outline-style
  • outline-width
  • box-sizing (элемент CSS 3)

Функции CSS

Помимо существующей поддержки функции url (), в восьмой версии будет добавлена поддержка еще двух функций counter () и attr ().

JavaScript и AJAX в IE8

В помощь программистам команда разработчиков Internet Explorer внесла значительные изменения и нововведения в механизм JavaScript.

XDomainRequest (XDR)

XDR – это новый объект похожий на XMLHttpRequest, но который предназначен для обмена информацией через домены. Синтаксис XDR соответствует черновику W3C «Access Control for Cross-Site Requests».

Cross-document Messaging (XDM)

XDM – это еще одна технология, которая позволяет обмениваться текстовыми сообщениями фреймам с разных доменов, которые размещены на одной странице. Такой обмен происходит через HTML5-метод postMessage:

<font color="#000000"></font><font color="#0000ff">var</font> testframe = <font color="#0000ff">document</font>.getElementsByTagName(<font color="#a31515">'iframe'</font>)[0];
testframe.contentWindow.postMessage(<font color="#a31515">'Привет!'</font>);

Для того, чтобы получить такое сообщение документ во фрейме должен зарегистрировать обработчик сообщения «onmessage»:

<font color="#000000"></font><font color="#0000ff">document</font>.attachEvent(<font color="#a31515">'onmessage'</font>,<font color="#0000ff">function</font>(e) {

});

DOM Storage

DOM Storage – это механизм, который позволяет хранить на стороне клиента данные не прибегая при этом к механизму cookie. В отличие от cookie, DOM storage лишены целого ряда ограничений: размер сохраняемых данных значительно увеличен, данные DOM storage не отсылаются на сервер при каждом запросе, кроме того можно управлять тем, как сохраненная в DOM storage информация будет видна в других окнах.
В Internet Explorer реализовано три объекта по работе с DOM storage:

  • window.sessionStorage – предназначен для хранения данных на время существования вкладки браузера, данные доступны с разных страниц пока действует контекст вкладки. Данные не восстанавливаются если произошла исключительная ситуация или браузер был закрыт;
  • window.localStorage – предназначен для долговременного хранения данных (около 10 Мб) для каждого домена и субдомена, причем домены и субдомены могут получать данные друг друга, но при этом субдомены не могут получать данные другого субдомена;
  • объект Storage – реализует логику для работы как sessionStorage, так и localStorage, содержит необходимые методы, свойства и события.

Ниже приведен небольшой пример того как можно работать с DOM storage:

<font color="#000000">localStorage.setItem(</font><font color="#a31515">"name"</font>,<font color="#a31515">"Владимир"</font>);

<font color="#0000ff">var</font> name = localStorage.getItem(<font color="#a31515">"name"</font>);

XMLHttpRequest

XMLHttpRequest получил новое свойство timeout, позволяеющее задавать количество миллисекунд, которое хост будет ждать ответа, после истечения которых произойдет событие ontimeout:

<font color="#000000"></font><font color="#0000ff">var</font> xhr = <font color="#0000ff">new</font> XMLHttpRequest();
xhr.timeout = 10000;
xhr.ontimeout = onTimeout;

<font color="#0000ff">function</font> onTimeout ()
{
  alert(<font color="#a31515">"timeout!"</font>);
}

Новые функции

В JavaScript Internet Explorer 8 также были добавлены несколько функций:

  • ToStaticHTML – форматирует исходную строку так, что заменяет строки с тегами на безопасные строки для предотвращения XSS-атак;
  • toJSON, JSON.parse, JSON.stringify – служат для работы со строкой содержащей json-данные, приводят объект. Синтаксис функции базируется на ECMAScript 3.1.

Инструмент Developer Tools. Profiler JavaScript.

В восьмой версии Internet Explorer к радости программистов добавлен инструмент, который способен побороться с широко распространенным дополнением Firebug для браузера Firefox. Этот инструмент называется просто Developer Tools и представляет собой следующую панель:

Панель содержит следующие инструменты и функции:

  • инспекция html-кода страниц;
  • просмотр и редактирование применяемых стилей;
  • выделение элемента по наведению курсора мыши;
  • встроенный мощный отладчик JavaScript-кода;
  • блокировка скриптов, css, всплывающих окон;
  • вывод на отображаемую страницу информации о Id и классе элементов, ссылках;
  • подсветку элементов по типу, по позиционированию и по другим параметрам;
  • управление изображениями на странице, просмотр информации;
  • встроенную динамическую линейку;
  • встроенный color picker;
  • ссылки на валидацию.

Кроме того, эта панель содержит замечательный функционал – профайлер JavaScript кода:

Этот инструмент позволяет легко отследить узкие места в вашем JavaScript-коде и тем самым повысить производительность сайта и скорость загрузки страниц.

Заключение

В этой статье я попытался рассмотреть новые возможности Internet Explorer, которые он предоставляет программисту. Как оказалось, новая версия браузера несет в себе массу изменений, улучшений, исправлений и добавлений для разработчиков web-проектов. На момент написания статьи последней версией Internet Explorer 8 оставалась beta2, но уже по ней заметно, что компания Микрософт уделила своему браузеру самое пристальное внимание и значительно усовершенствовала его. Для разработчиков важно быть в курсе тенденций в web. Разработка новой версии популярного браузера – это одна из таких тенденций. Надеюсь, что приведенный материал помог разработчикам пополнить свои знания и быть в курсе некоторых новых возможностей, которые предложит финальная версия Internet Explorer 8.

  • Иван Евсеев

    Просто прекрасно — очень интересные мысли. Разжевано специально как бы для меня :)

Запись навигация

Top