Innovations in Internet Explorer

Press]IE was a pioneer in web innovation, but in recent years it has been criticized for its support for web standards lags behind that of other browsers and various bugs in earlier versions of IE. Yahoo's Nicholas C. Zakas reminds us of the brilliant role played by IE in web development, so that we can look at IE from a more objective perspective. After reading this article, we may make some changes to the IE browser, which is also the purpose of my translation of this article.

Translation

A long time ago when Internet Explorer became a hateful browser, it was once an innovative driving force for the entire Internet. Sometimes it is hard to remember the contributions of IE before IE 6 becomes a disaster for web developers around the world. Believe it or not, it's because we have Internet Explorer 4-6 that we now know about web development. Some of the unique features of IE were used to be a de facto standard. Later, it became an official standard and finally entered the HTML5 standard. It may be hard to believe that a large part of the functions that we now consider as appropriate should think of IE, but a quick review of history can let us know that this is true.

DOM

If IE is a browser that everyone hates, then "Document Object Model" DOM) is an API that everyone hates. You can say that DOM is too cumbersome, not suitable for JavaScript, or even a little ridiculous, and that's all true. However, DOM allows developers to access each part of a webpage through JavaScript. At one time, you could only access some specific elements on the page through JavaScript. IE 3 and Netscape 3 only allow applications to access form elements, images, and links. Netscape 4 has improved this by extending the accessible scope of the program through document. layers to its unique layer element. IE 4 was further improved to extend the range to all elements of the page through document. all.

In many aspects, document. all is the original version of document. getElementById. You still need to use the element ID to access it through document. all, such as document. all. myDiv or document. all ["myDiv"]. The main difference is that IE uses a set instead of a method, which is consistent with other access methods such as document. images and document. forms.

In IE 4, document. all. tags () is used to obtain an element list by Tag name. From any point of view, this is the original version of document. getElementsByTagName () and works in the same way. If you want to obtain all div elements, you can use document. all. tags ("div "). Even in IE 9, this method still exists as an alias for document. getElementsByTagName.

Internet Explorer 4 also introduced the most popular private DOM extension in history: innerHTML. It seems that Microsoft's team realized how painful it was to establish a DOM through programming, So we provided this convenient method together with outerHTML. It turns out that both methods are very useful and have been standardized in HTML5 [1]. The APIs that come along with them to process plain text-innerText and outerText-are also proven to be influential, Because DOM Level 3 has introduced textContent [2] with similar innerText behavior.

According to the same idea, IE 4 introduced insertAdjacentHTML (), which is another way to insert HTML into the document. Although it took a longer time, it was finally compiled into HTML5 [3] and has been widely supported by various browsers.

Event

At the beginning, JavaScript has no event mechanism. Both Netscape and Microsoft have made attempts and come up with different models. Netscape captures events. The idea is that an event is first sent to a window, followed by a document, one by one until it reaches the expected goal. Web browser versions earlier than 6 only support event capture.

Microsoft adopts the opposite Method to Design event bubbles. They think that an event should first start from the actual target, and then be triggered on the upper-layer node until the document. Browsers earlier than IE 9 only support event bubbling. Although the development of the official DOM Event specification also includes event capture and event bubbling, most web developers only use event bubbling, the event capture is only used in some solutions and tips in the JavaScript class library.

In addition to event bubbling, Microsoft also created a series of additional events that were subsequently standardized:

• Contextmenu-triggered when an element is clicked with the mouse and secondary buttons. It first appeared in IE 5 and was later compiled into HTML5 [4]. It is now supported by all mainstream browsers.
• Beforeunload-triggered before the unload event, allowing you to block page exit. It was initially introduced by IE 4 and is now part of HTML5 [4].
• Mousewheel-triggered when the mouse wheel or similar device is used. The first browser that supports this event is IE 6. Like others, it is currently part of HTML5 [4]. The only mainstream desktop browser that does not support this event is Firefox, But it supports a DOMMouseScroll event that can be replaced ).
• The non-bubble version of mouseenter-mouseover is introduced by Microsoft in IE 5 to overcome the troubles caused by mouseover. This event has been normalized by DOM Level 3 event specification [5]. It is also supported by Firefox and Opera, but is Safari and Chrome currently supported ?) Not supported.
• Mouseleave-non-bubble version of mouseout corresponding to mouseenter. It was introduced in IE 5 and is currently standardized by DOM Level 3 event specification [6]. The browser supports the same as mouseenter.
• The focusin-focus event's bubble version is used to help better manage the page's focus behavior. It was first introduced in IE 6 and has become part of DOM Level 3 event specification [7]. It is not well supported at present, despite a bug in Firefox's implementation.
• The focusout-blur event's bubble version helps you better manage page-focused behavior. It was first introduced in IE 6 and has become part of DOM Level 3 event specification [8]. Like focusin, there is no good support, but Firefox is close.

XML and Ajax

Although XML has been widely used on today's web as many people expect, the leading way to support XML is IE. It is the first browser that supports XML parsing and XSLT transformation through JavaScript on the client. Unfortunately, it uses ActiveX objects to represent XML documents and XSLT processors. However, Mozilla people clearly recognized the merits, because they later used DOMParser, XMLSerializer, and XSLTProcessor to create similar functions. The first two have become part of HTML5 [9]. Although the standard JavaScript XML processing method differs greatly from the version provided by IE, it is undoubtedly affected by IE.

XML processing on the client is all part of the implementation of XMLHttpRequest by IE, which was first introduced by IE 5 in the form of ActiveX objects. The idea is to get an XML document from the server on a webpage and allow JavaScript to treat the XML as DOM. The IE version requires you to use new ActiveXObject ("MSXML2.XMLHttp"), which also makes it dependent on the version string and allows developers to test and use the latest version. Again, Firefox stands out and cleans up this mess by creating an XMLHttpRequest object that is private at the time and has the same name as the IE interface. Since then, other browsers have copied the implementation of Firefox, and eventually added a version without ActiveX to IE 7. Of course, the driving force behind the Ajax revolution that inspires everyone for JavaScript is XMLHttpRequest.

CSS

When thinking about CSS, you may not think too much about IE-after all, its support for CSS tends to lag behind at least until IE 10 ). However, IE 3 is the first browser that supports CSS. At that time, Netscape was pushing another similar proposal: JavaScript style sheet JSSS) [10]. From the name, we can see that this proposal uses JavaScript to define page style information. Netscape 4 introduces JSSS and CSS, which lags behind IE. The support for CSS is not satisfactory. It is often necessary to translate styles into JSSS for application [11]. This also means that in Netscape 4, CSS will not work normally if JavaScript is disabled.

At that time, the implementation of CSS by IE was limited to font family, font size, color and background, but this implementation was superior and available. At the same time, the implementation of Netscape 4 is prone to problems and difficult to use. Yes, to a very small extent, IE leads to CSS success.

IE also brings us other final standardized CSS innovations:

• Text-overflow-used to display ellipsis when the text exceeds the container size. It was first introduced in IE 6 and has been standardized in CSS3 [12]. It is currently supported by mainstream browsers.
• Overflow-x and overflow-y-allow you to control content overflow in two independent directions. This attribute appears for the first time in IE 5, and is then normalized in CSS3 [13]. It is currently supported by mainstream browsers.
• Word-break-is used to specify the line feed rules between words. Initially appeared in IE 5.5 and has been normalized by CSS3 [14]. All mainstream browsers except Opera are supported.
• Word-wrap-specifies whether the browser should wrap in the middle of the word. It was created in IE 5.5 and has been standardized by CSS3 as overflow-wrap [15], although all mainstream browsers support it in the form of word-wrap.

In addition, many new visual effects in CSS3 should be thanked for the foundation laid by IE. IE 4 introduces the private filter attribute, from being the first browser that can do the following:

• Generate a gradient CSS3 Based on CSS instructions: gradient)
• Use the alpha filter to create translucent elements CSS3: opacity and RGBA)
• Rotate an element to any angle CSS3: use transform with rotate ())
• Apply shadow CSS3: box-shadow to an element)
• Apply a matrix transformation CSS3 to an element: use transform with matrix ())

In addition, Internet Explorer 4 has a feature called transition, which allows you to use filters to create basic animations. This function is mainly based on the transition functions that are usually available in PowerPoint, such as fade in or fade out, board transform, and so on [16].

All these functions have become the main functions of CSS3 in some way. These features were available in IE 4, which was released in 1997, and we have only begun to enjoy these features in other browsers, which is amazing.

Other contributions to HTML5

A large part of HTML5 comes from IE and the APIS it introduces. Here are some content that has not been mentioned before:

• Drag and Drop-one of the coolest parts of HTML5 is the native drag and drop function [17]. This API is derived from IE 5 and has been described in html5. the changes are very small. The main difference is that the draggable attribute is added to mark any element as a drag-and-drop IE and uses JavaScript to call -- element. dragDrop () to do this ). In addition, this API is similar to the original version and is currently supported by mainstream desktop browsers.
• Access to the clipboard-the browser has now separated its own specification [18] From html5. this gives the browser the ability to access the clipboard in some cases. This API first appeared in IE 6 and was subsequently imitated by Safari. It fetched clipboardData from the window object and placed it in the event object of the clipboard event. Safari changes are retained as part of the HTML5 version, and access to the clipboard is also supported in all mainstream browsers except Opera.
• Rich text editing-rich text editing with designMode is introduced in IE 4, because Microsoft wants to provide Hotmail users with a better text editing experience. Later, contentEditable was introduced in IE 5.5 as a lightweight Method for rich text editing. What follows is the terrible execCommand () method and some of its ancillary methods. Good or bad, this rich text editing API has been standardized in HTML5 [19] and is now supported by all mainstream desktop browsers as well as mobile Safari and Android browsers.

Conclusion

Despite the fact that it is simple and popular to laugh at IE, we will not have the web we know as we are currently. What if XMLHttpRequest and innerHTML web are not available? They are the catalyst for the Ajax revolution of web applications, and many new functions are built based on them. It is ridiculous that when we look back at the history of a browser that has become a "bad boy" on the Internet, we will find that we are not in the position of today.

Yes, IE is flawed, but for the vast majority of the history of the Internet, it is a browser that promotes technological progress. Now we are in an era of large-scale browser competition and innovation, but it is easy to forget where we are going along. So the next time you meet someone who is working on IE, don't drop in for humiliation or tomato. On the contrary, I would like to thank them for helping IE stay here and making web developers one of the most important tasks in the world.

Original article: The innovations of Internet Explorer