Innovations in IE browser

ArticleDirectory

• Press
• Translation

This is a translation article.

Original article: the innovations of Internet Explorer

Author: Nicholas C. zakas

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 take for granted should be attributed to IE, but a quick review of history can help us know that this is true.

Dom

If IE is a browser that everyone hates, "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 in the page through JavaScript. IE 3 and Netscape 3 only allowProgramAccess form elements, images, and links. Netscape 4 improves this by passing the accessible range of the programDocument. LayersExtended to its uniqueLayerElement. IE 4 has been further improved to pass this rangeDocument. AllExtended to all elements of the page.

In many ways,Document. AllYesDocument. getelementbyid (). You still need to use the element IDDocument. AllAccess it, suchDocument. All. mydivOrDocument. All ["mydiv"]. The major difference is that IE uses a set instead of a method, which is different from other access methods suchDocument. ImagesAndDocument. FormsIs consistent.

IE 4 is also the first applicationDocument. All. Tags ()To obtain an element list by Tag name. From any point of view, this isDocument. getelementsbytagname ()And works in the same way. If you want to obtain allDivElement, you can useDocument. All. Tags ("Div "). Even in IE 9, this method still actsDocument. getelementsbytagname ().

Internet Explorer 4 also introduced the most popular private Dom extensions in history:Innerhtml. It seems that Microsoft's group of people realized how painful it was to establish a DOM through programming, so they put this convenient method togetherOuterhtmlTogether. It turns out that both methods are very useful and have been standardized in HTML5 [1]. APIS that come with them to process plain text --InnertextAndOutertext-- It is also proved to be influential, Because Dom Level 3 has been introducedInnertextSimilar BehaviorTextcontent[2].

According to the same idea, ie 4 introducedInsertadjacenthtml ()This 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-InUnloadTriggered before the event, allowing you to block the exit of the page. 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 usable alternativeDommousescrollEvent ).
• Mouseenter-MouseoverNon-bubble version, introduced by Microsoft in IE 5, used to overcomeMouseoverProblems arising during use. This event has been normalized by Dom Level 3 event specification [5]. It is also supported by Firefox and opera, but both safari and chrome (temporarily ?) Not supported.
• Mouseleave-AndMouseenterCorrespondingMouseoutNon-bubble version. It was introduced in IE 5 and is currently standardized by Dom Level 3 event specification [6]. Browser support andMouseenterSame.
• Focusin-FocusEvent bubble version, used to help better manage focused behavior on the page. 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.
• Focusout-BlurEvent bubble version, used to help better manage focused behavior on the page. It was first introduced in IE 6 and has become part of Dom Level 3 event specification [8]. AndFocusinSimilarly, there is no good support, but Firefox is close.

<IFRAME>

The framework was introduced to Netscape Navigator 2 as a private function at the beginning. This includes<Frameset>,<Frame>And<Noframes>. The idea behind it is actually very simple: At that time, everyone was using a modem, and the price for switching between servers was quite high. The main application scenario is to provide a framework with navigation elements loaded only once, and other frameworks can be independently changed by navigation control. Using navigation as a separate page to save server rendering time and data transmission volume was a huge victory at that time.

IE 3 also supports frameworks because they were becoming very popular on the web. However, Microsoft has added its own private tag for this feature:<IFRAME>. The basic idea behind this element is to embed another page in one page. In the implementation of Netscape, you need to create three pages (navigation pages, content pages, and frame sets) for static navigation. In IE, you only need two pages (with the navigation home page and<IFRAME>To create the same function. At first, this was one of the main battlefields between IE and Netscape Navigator.

<IFRAME>Gradually become more popular because it is easier to create a framework set. Netscape introduced and<IFRAME>Similar functions<Ilayer>. Of course,<IFRAME>It eventually wins and becomes an important part of current web development. The Netscape framework and Microsoft's<IFRAME>All of them were standardized by html4, but the Netscape framework was later deprecated in html5. (not recommended.

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 recognize the merits of the solution because they later usedDomparser,XmlserializerAndXsltprocessorA similar function is created. 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 performed by IEXMLHttpRequestIs 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. You need to use the IE version.New activexobject ("msxml2.xmlhttp ")This also makes it dependent on version strings, and allows developers to test and use the latest version. Again, Firefox stands out and creates a private interface with the same name as the IE interface.XMLHttpRequestObject To clear this mess. 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 exactlyXMLHttpRequest.

CSS

When you think of CSS, you may notThink too much about IEHow nice it is to IE-- After all, its support for CSS is often lagging 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-xAndOverflow-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-It 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-Determines whether the browser should wrap the word in the middle. Created in IE 5.5 and has been standardized by css3Overflow-wrap[15], although all mainstream browsers useWord-wrap.

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

• Generate a gradient Based on CSS instructions (css3: gradient)
• Use the Alpha filter to create a translucent element (css3:OpacityAnd rgba)
• Rotate an element to any angle (css3:TransformCooperationRotate ())
• Apply a shadow to an element (css3:Box-shadow)
• Apply a matrix transformation to an element (css3: UseTransformCooperationMatrix ())

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 thatDraggableAttribute to mark any element as a drag-and-drop (ie uses a javascript call --Element. dragdrop ()). In addition, this API is similar to the original version and is currently supported by mainstream desktop browsers.
• Clipboard access-Now I have separated my 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.ClipboardDataSlaveWindowThe object is retrieved and stored in the clipboard eventEventObject. 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-UseDesignModeRich text editing is introduced in IE 4 because Microsoft wants to provide Hotmail users with a better text editing experience. Later, I introducedContenteditableIs used as a lightweight Method for rich text editing. What follows is 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. If noXMLHttpRequestAndInnerhtmlWhat will happen to the web? 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.

References

1. innerhtml in HTML5
2. textcontent in Dom Level 3
3. insertadjacenthtml () in HTML5
4. Event Handlers on elements (HTML5)
5. mouseenter (DOM Level 3 events)
6. mouseleave (DOM Level 3 events)
7. focusin (DOM Level 3 events)
8. focusout (DOM Level 3 events)
9. domparser interface (HTML5)
10. JavaScript Style Sheets (Wikipedia)
11. the CSS saga by H sort Kon Wium lie and Bert Bos
12. text-overflow property (css3 UI)
13. overflow-X and overflow-y (css3 box)
14. word-Break (css3 text)
15. overflow-wrap/word-wrap (css3 text)
16. introduction to filters and transitions (msdn)
17. drag and drop (HTML5)
18. clipboard API and events (HTML5)
19. User Interaction-editing (HTML5)