Pull to refresh

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

Reading time12 min
Views5.7K
Ниже представлен оригинал моей статьи принятой для публикации в отличный компьютерный журнал C`t, который, к сожалению, не выжил на рынке и пока пребывает в весьма подвешенном статусе. Статья не была опубликована из-за того, что выпуски больше не выходят. Поэтому я решил опубликовать ее на Хабре, благо она отлично попадает в формат.

Хотел бы сразу отметить, что статья достаточно объемная и часть информации уже была опубликована мной на Хабре. Цель данной статьи объединить максимальное количество информации про новую версию Internet Explorer и представить ее в приемлемом объеме.

В комментах принимаю замечания и исправления.

Введение


Браузер Internet Explorer имеет длинную историю, начавшуюся в 1995 году, когда в августе этого года компания Микрософт выпустила его, лицензировав у Spyglass, Inc. С тех пор прошло уже более 10 лет и Internet Explorer успел покорить мир, завоевав абсолютное большинство пользователей, а версия его вот-вот сменится на номер 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-тэг следующего содержимого:
<meta http-equiv="X-UA-Compatible" content="IE=8" />

Здесь, content – обозначает режим, в котором будет отображаться страница. Основные значения content следущие:
  • «IE=7» — включает режим Strict в котором рендерятся все страницы;
  • «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
  • «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
  • «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».
Кроме того, значения content не ограничиваются перечисленными режимами. Так можно указать значения для любых других браузеров:
<meta http-equiv="X-UA-Compatible" content="FF=3" />

Вдобавок к этому, у параметра content существует значение «edge», которое позволяет указывать на поддержку максимально старшей версии браузера:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Кроме указания тега «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. Например, в указанном коде запятые считались недопустимыми.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);

В новой версии браузера синтаксис filter приведен к соответствию требованиям спецификации CSS:
-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)»;

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

Поддержка 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:
var testframe = document.getElementsByTagName('iframe')[0];
testframe.contentWindow.postMessage('Привет!');

Для того, чтобы получить такое сообщение документ во фрейме должен зарегистрировать обработчик сообщения «onmessage»:
document.attachEvent('onmessage',function(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:
localStorage.setItem("name","Владимир");

var name = localStorage.getItem("name");

XMLHttpRequest


XMLHttpRequest получил новое свойство timeout, позволяеющее задавать количество миллисекунд, которое хост будет ждать ответа, после истечения которых произойдет событие ontimeout:
var xhr = new XMLHttpRequest();
xhr.timeout = 10000;
xhr.ontimeout = onTimeout;

function onTimeout ()
{
  alert("timeout!");
}

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


В 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.
Tags:
Hubs:
Total votes 119: ↑111 and ↓8+103
Comments132

Articles