Инновации Internet Explorer

Задолго до того как Internet Explorer стал браузером, который модно ненавидеть, он был движущей силой инноваций в интернете. Трудно даже вспомнить всё то хорошее, что сделал Internet Explorer до того, как Internet Explorer 6 стал проклятьем всех веб-разработчиков. Хотите — верьте, хотите — нет, Internet Explorer 4–6 во многом определил веб-разработку такой, как мы её знаем сегодня. Множество проприетарных возможностей стали стандартом де факто, и, наконец, стали официальными стандартами в спецификации HTML5. Кому-то может быть трудно поверить, что Internet Explorer действительно стоит поблагодарить за множество данных нам сегодня функций, но небольшой обзор истории показывает, что это так.

DOM

Если Internet Explorer стал браузером, который модно ненавидеть, то Объектная модель документа (DOM) — програмный интерфейс, который модно ненавидеть. Вы можете назвать DOM слишком многословным, неподходящим для JavaScript и чем-то бессмысленным, и вы будете правы по большому счёту. Тем не менее DOM даёт разработчикам доступ к любой части страницы посредством JavaScript. Когда-то посредством JavaScript, можно было получить доступ только к определённым элементам на странице. Internet Explorer 3 и Netscape 3 предоставляли програмный доступ только к элементам форм, картинкам и ссылкам. В Netscape 4 ситуация улучшилась благодаря появившемуся програмному доступу к проприетарному элементу <layer> через document.layers. Internet Explorer 4 пошёл дальше, дав програмный доступ к каждому элементу на странице через document.all.

Во многих отношениях document.all был самой ранней версией document.getElementById(). Идентификатор элемента всё ещё был нужен для доступа через document.all, вроде document.all.myDiv или document.all["myDiv"]. Главным отличием было то, что Internet Explorer использовал коллекцию вместо функции, которая соответствовала другим способам доступа, таким как document.images и document.forms.

Internet Explorer 4 был также первым браузером, внедрившем возможность получить список элементов по именам тэгов через document.all.tags(). Это была первая версия document.getElementsByTagName() для всевозможных целей, и она работала тем же образом. Если вы хотели получить все элементы <div>, следовало использовать document.all.tags("div"). Этот метод всё ещё присутствует даже в Internet Explorer 9, просто как другое имя document.getElementsByTagName().

Ещё Internet Explorer 4 ввёл, пожалуй, самое популярное проприетарное расширение к DOM всех времён: innerHTML. Видимо, ребята из Майкрософта поняли, как больно програмное построение DOM, и подарили нам этот способ срезать вместе с outerHTML. Оба метода показали себя настолько полезными, что были стандартизованы в HTML5^[1]. Сопроваждающие интерфейсы, работающие с текстом, innerText и outerText, были столь же влиятельны, что в DOM третьего уровня был введён textContent^[2], работающий в той же манере, что и innerText.

Вместе с тем, Internet Explorer 4 внедрил insertAdjacentHTML(), ещё один способ вставки HTML-кода в документ. Немного позже он был также добавлен в HTML5^[3] и имеет сегодня широкую поддержку в браузерах.

События

В самом начале в JavaScript не было какой-либо системы событий. И Нетскейп, и Майкрософт предприняли свою попытку, каждый со своей моделью. Нетскейп сделал захват событий (event capturing), идея которого была в том, что событие сначала доставляется window, затем документу, и так далее, пока оно не достигнет цели. Браузеры Netscape до 6 версии поддерживали только захват событий.

Майкрософт пошли в противоположном направлении и представили всплывание событий (event bubbling). Они считали, что событие должно начинаться в том месте, где оно произошло, и только затем уже выстреливать в родительских элементах и выше, следуя по документу. Internet Explorer до версии 9 поддерживал только всплывание событий. Хотя официальная спецификация События DOM постановила включить как захват событий, так и всплывание событий, большинство веб-разработчиков использует исключительно всплывание, тогда как захват событий остался для некоторых обходных путей и приёмов, спрятанных глубоко внутри javascript-библиотек.

Вдобавок ко всплыванию событий, Майкрософт также сделали кучу дополнительных событий, которые со временем были стандартизированы:

• contextmenu — выстреливает, когда вы используете дополнительную кнопку мыши на элементе. Появилось в Internet Explorer 5 и было включено HTML5^[4]. Сейчас поддерживается всеми основными настольными браузерами.
• beforeunload — выстреливает перед событием unload и позволяет предотвратить уход со страницы. Впервые внедрено в Internet Explorer 4 и является частью HTML5^[4]. Также поддерживается всеми основными настольными браузерами (кроме намеренно не поддерживающей Оперы — примечание переводчика).
• mousewheel — выстреливает, когда используется колесо прокрутки мыши (или аналогичное устройство). Первым поддерживающим браузером был Internet Explorer 6. Как и остальные является частью HTML5^[4]. Единственный неподдерживающий из основных настольных браузеров — Firefox (который поддерживает его аналог, событие DOMMouseScroll).
• mouseenter — невсплывающая версия mouseover, представленная Майкрософтом в Internet Explorer 5 для преодоления проблем с использованием mouseover. Событие было оформлено в Событиях DOM, уровень 3^[5]. Поддерживается также в Файрфоксе и Опере, но не в Сафари или Хроме (пока?).
• mouseleave — невсплывающая версия mouseout, соответствующая mouseenter. Представлено в Internet Explorer 5 и так же стандартизовано в Событиях DOM, уровень 3^[6]. Уровень поддержки тот же, что и у mouseenter.
• focusin — всплывающая версия focus, помогающая работать с фокусом на странице. Впервые представлено в Internet Explorer 6, ныне часть Событий DOM, уровень 3^[7]. Не очень хорошо поддерживается на данный момент, хоть Файрфокс имеет открытую задачу на внедрение.
• focusout — всплывающая версия blur, помогающая работать с фокусом на странице. Впервые представлено в Internet Explorer 6, ныне часть Событий DOM, уровень 3^[8]. Как и focusin не очень-то поддерживается, но Файрфокс недалёк от этого.

XML и Ajax

Хоть XML используется примерно настолько, насколько мог бы по мнению большинства, Internet Explorer так же поспособствовал поддержке XML. Он был первым браузером, поддерживающим парсинг XML на клиентской стороне и трансформации XSLT в JavaScript. К несчастью, он это делал с помощью объектов ActiveX, представляющих XML-документы и XSLT-процессоры. Ребята из Мозиллы явно увидели, что в этом что-то есть, поскольку они изобрели схожую функциональность в виде DOMParser, XMLSerializer, и XSLTProcessor. Первые два теперь часть HTML5^[9]. Хоть и, основанная на стандартах, поддержка XML в JavaScript заметно отличается от таковой в Internet Explorer, она без сомнения была навеяна IE.

Частью реализации поддержки XML на клиентской стороне в Internet Explorer был XMLHttpRequest, впервые появившемся как объект ActiveX в Internet Explorer 5. Идея заключалась в возможности получения веб-страницей XML-документов от сервера и способности JavaScript управлять этим XML через DOM. Способ Internet Explorer требует от вас использования new ActiveXObject("MSXML2.XMLHttp"), что делает его также зависимым от строк разных версий, заставляя разработчиков перебирать их и использовать самую последнюю версию. Опять, Файрфокс пошёл в том же направлении и привёл месиво в порядок, создав проприетарный тогда объект XMLHttpRequest, который в точности повторял интерфейс версии Internet Explorer. Другие браузеры затем скопировали реализацию Firefox, что привело в конечном счёте к тому, что Internet Explorer 7 сделал свободную от ActiveX версию. Конечно, XMLHttpRequest был движущей силой, стоящей за революцией Ajax, которая привела всех в восторг от JavaScript.

CSS

Размышляя о CSS, возможно, вы не ставите высоко Internet Explorer. В конце концов, он сильнее всего отстаёт в поддержке CSS (по крайней мере до Internet Explorer 10). Однако, Internet Explorer 3 был первым браузером, внедрившем CSS. В то время Нетскейп занимался другим предложением, JavaScript Style Sheets (JSSS)^[10]. Как можно заключить из имени, это предложение использовало JavaScript для задания стилистической информации о странице. Netscape 4 представил JSSS и CSS, отставая на версию от Internet Explorer. Реализация CSS была не слишком хорошей, зачастую стили транслировались в JSSS для правильного применения^[11]. Также вследствие этого, если JavaScript был выключен, CSS не работал в Netscape 4.

Хотя реализация CSS в Internet Explorer была ограничена семейством и размером шрифтов, цветами и фоном, она была добротно сделана, и ей можно было пользоваться. Тогда как реализация Netscape 4 была полна ошибок и трудна в использовании. Да, в некотором смысле Internet Explorer чуточку поспособствовал успеху CSS.

Internet Explorer также дал нам другие инновации CSS, которые были стандартизованы:

• text-overflow — показывает многоточие, если текст не умещается в содержащем его элементе. Появилось впервые в Internet Explorer 6 и стандартизовано в CSS3^[12]. Ныне поддерживается во всех основных браузерах.
• overflow-x и overflow-y — позволяет управлять переполнением в двух разных направлениях содержащего элемента. Это свойство впервые появилось в Internet Explorer 5 и позже было формализовано в CSS3^[13]. Сейчас поддерживается во всех основных браузерах.
• word-break — задаёт правила разбития на слова. Появилось в Internet Explorer 5.5 и стандартизовано в CSS3^[14]. Поддерживается во всех основных браузерах кроме Оперы.
• word-wrap — указывает, должен ли браузер разбивать текст на строки в середине слов или нет. Впервые создано в Internet Explorer 5.5 и стандартизовано в CSS3 как overflow-wrap^[15], хоть и все основные браузеры поддерживают его как word-wrap.

Вдобавок, многие из новых визуальных эффектов CSS3 должны сказать спасибо Internet Explorer за положенную основу. Internet Explorer 4 представил проприетарное свойство filter, которое сделало его первым браузуром способным на:

• Рисование градиентов CSS-инструкциями (CSS3: градиенты)
• Создание полупрозрачных элементов с помощью альфа-фильтра (CSS3: opacity и RGBA)
• Вращение элементов на произвольный угол (CSS3: transform с rotate())
• Добавление тени элементу (CSS3: box-shadow)
• Применение матричных преобразование к элементу (CSS3: transform с matrix())

К тому же, Internet Explorer 4 имел функциональность, называемую переходами, которая позволяла сделать некоторую простую анимацию на странице с использованием фильтров. Главным образом, переходы были основаны на переходах между слайдами, доступных в PowerPoint в то время, такие как появление или угасание, шахматная доска, и другие^[16].

Все эти возможности появились в CSS3 тем или иным путём. Просто изумительно, что Internet Explorer 4, выпущенный в 1997, имел все эти возможности, и только сейчас мы получаем те же возможности в других браузерах.

Другой вклад в HTML5

Многое в HTML5 пришло прямо из Internet Explorer и его API. Кое-что, не упомянутое ранее в этой заметке:

• Drag and Drop — одна из самых классных частей HTML5 — это определение родного drag-and-drop^[17]. Этот API берёт начало из Internet Explorer 5 и был описан с небольшими изменениями в HTML5. Главное отличие заключается в добавленном атрибуте draggable, помечающим произвольные элементы как перетаскиваемые (Internet Explorer использовал для этого вызов JavaScript element.dragDrop()). В остальном, API очень близко отражает оригинал и поддерживается всеми основными настольными браузерами.
• Доступ к буферу обмена — на данный момент выделен из HTML5 в отдельную спецификацию^[18], предоставляет браузерам доступ к буферу обмена в определённых ситуациях. Этот API изначально появился в Internet Explorer 6 и затем был скопирован Сафари, который переместил clipboardData от объекта window к объекту event для событий буфера обмена. Изменение Сафари осталось как часть версии HTML5, и доступ к буферу обмена теперь возможен во всех основных браузерах кроме Оперы.
• Редактирование форматированного текста — редактирование форматированного текста использует designMode, представленный в Internet Explorer 4, появившийся потому что Майкрософт хотели предоставить лучшие возможности форматирования текста пользователям Hotmail. Позднее, Internet Explorer 5.5 представил contentEditable как легковесный способ редактирования форматированного текста. Вместе с этим появился метод execCommand() и связанные с ним. К счастью или сожалению, этот API редактирования форматированного текста был стандартизирован в HTML5^[19] и сейчас поддерживается всеми основными настольными браузерами, вкупе с мобильным Сафари и браузером Андроид.

Заключение

В то время как легко и принято пинать Internet Explorer, на самом деле, мы не имели бы сеть такой, как мы её сегодня знаем, если не его вклад. Где была бы сеть без XMLHttpRequest и innerHTML? Они были катализаторами ajax-революции веб-приложений, на которых построено множество новых мощностей. Забавно посмотреть на браузер, который стал «плохим парнем» интернета, и увидеть, что без него мы не были бы там, где находимся сейчас.

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

Материалы

1. innerHTML в HTML5
2. textContent в DOM, уровень 3
3. insertAdjacentHTML() в HTML5
4. Обработчики событий на элементах (HTML5)
5. mouseenter (События DOM, уровень 3)
6. mouseleave (События DOM, уровень 3)
7. focusin (События DOM, уровень 3)
8. focusout (События DOM, уровень 3)
9. Интерфейс DOMParser (HTML5)
10. JavaScript Style Sheets (Википедия)
11. Сага CSS Хокона Виума Ли и Берта Боса
12. Свойство text-overflow (CSS3 UI)
13. overflow-x и overflow-y (Блочная модель CSS3)
14. word-break (Текст CSS3)
15. overflow-wrap/word-wrap (Текст CSS3)
16. Введение в фильтры и переходы (MSDN)
17. Drag and Drop (HTML5)
18. API буфера обмена и событий (HTML5)
19. Взаимодействие с пользователем — Редактирование (HTML5)

Автор: Aingis