The innovation of Internet Explorer browser

Long before Internet Explorer became a browser that everyone hated, it was the driving force of innovation throughout the Internet. Sometimes it's hard to remember IE's contributions before IE 6 became a disaster for web developers around the world. Believe it or not, it is because of IE 4-6 that we now know about web development. Some of the unique features of IE used to be the standard of fact, and later became the official standard finally entered the HTML5 specification. It may be hard to believe that a large part of the real-time entertainment in the function that we now consider to be rightfully deserved to be attributed to IE, but a quick review of history lets us know that it does.

Dom

If IE is a browser that everyone hates, then the "Document Object Model" (DOM) is an API that everyone hates. You can say DOM is too cumbersome, not suitable for JavaScript, or even ridiculous, and that's all right. However, the DOM still gives developers access to every part of the page through JavaScript. Once you were able to access only certain elements of the page through JavaScript. IE 3 and Netscape 3 only allow programs to access form elements, pictures, and links. Netscape 4 improves this by extending the range of programs accessible through document.layers to its unique layer elements. IE 4 has been further improved to extend this range through document.all to all elements of the page.

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

IE 4 was also the first to introduce the ability to get a list of elements with a tag name using Document.all.tags (). At any point, this is the original version of document.getElementsByTagName () and works exactly the same way. If you want to get all the DIV elements, you can use Document.all.tags ("div"). Even in IE 9, this method still exists as an alias of document.getElementsByTagName ().

IE 4 also introduces us to perhaps the most popular private DOM extension ever: InnerHTML. It seems that Microsoft's people are aware of how painful it is to build a DOM programmatically, so this handy method, along with outerHTML, is provided to us. Both methods proved to be very useful and have been standardized in HTML5. The Api--innertext and outertext--that came with them to deal with plain text are also proving to be powerful enough because DOM level 3 has introduced textcontent similar to InnerText behavior.

In the same vein, IE 4 introduced insertadjacenthtml (), which is another way to insert HTML into a document. Although this took longer, it was eventually programmed into HTML5, and is now widely supported by browsers.

Event

At the beginning, JavaScript does not have an event mechanism. Both Netscape and Microsoft have tried, and have come up with different models. Netscape brings us to the event capture, the idea is that an event is sent to the window first, then the document, and then one after the other until it reaches the desired target. Only event captures are supported in previous versions of Netscape browser 6.

Microsoft has taken an opposite approach to designing event bubbling. They think that an event should start with the actual target and then trigger the upper node until the document. Only event bubbling is supported by browsers older than IE 9. While the official DOM event specification has evolved to include both event capture and event bubbling, most Web developers use event bubbling only, leaving event capture only in some of the solutions and tricks of the JavaScript class library.

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

• contextmenu– triggers when an element is clicked using the mouse button. First appeared in IE 5 and was later programmed into HTML5. It is now supported by all major browsers.
• Beforeunload– is triggered before the Unload event, allowing you to block the exit of the page. Originally introduced by IE 4, it is now also part of the HTML5.
• mousewheel– is triggered when the mouse wheel (or similar device) is used. The first browser to support this event is IE 6. Just like the others, it is now part of the HTML5. The only major desktop browser that does not support this event is Firefox (but it supports a Dommousescroll event that can be used instead).
• The non-bubbling version of Mouseenter–mouseover, introduced by Microsoft in IE 5, is used to overcome the problems that mouseover use. This event has been formalized by the DOM Level 3 event specification. Also supported by Firefox and Opera, but Safari and Chrome are both (temporarily?). ) is not supported.
• mouseleave– the non-bubbling version of the mouseout corresponding to the MouseEnter. Introduced in IE 5, is currently standardized by the DOM Level 3 event specification. Browser support is the same as MouseEnter.
• The bubbling version of the Focusin–focus event, which helps to better manage the focus behavior on the page. Originally introduced in IE 6, it has now become part of the DOM Level 3 event specification. It is not well supported at the moment, although Firefox has a bug about its implementation.
• The bubbling version of the Focusout–blur event, which helps to better manage the focus behavior on the page. Originally introduced in IE 6, it has now become part of the DOM Level 3 event specification. Like Focusin, there's no good support but Firefox is close.

<iframe>

The framework first was introduced as a private function Netscape Navigator 2. This includes <frameset>, <frame>, and <noframes>. The idea behind it is simple: when everyone is using a modem, the cost of commuting to and from the server is quite high. The main application scenario is to provide a frame that is loaded with navigation elements only once, and then other frames can be individually changed by navigation control. Save server rendering time and data transfer by using navigation as a separate page it was a huge triumph at the time.

IE 3 also supports frameworks, because they are becoming very popular on the web at the time. However, Microsoft has added its own private label:<iframe> to this feature. 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 frameset) for static navigation, whereas in IE you only need two pages (the main page with navigation and the content page in <iframe>) to create the same functionality. At first, this was one of the main battleground between IE and Netscape Navigator.

<iframe> is becoming more popular because it makes it easier to create a frameset. In version 4, Netscape introduced a very similar <ilayer> with <iframe> features to counter-attack. Of course,,<iframe> eventually wins and becomes an important part of web development today. The Netscape framework and Microsoft's <iframe> have been HTML4 standardized, but the Netscape framework was later scrapped in HTML5 (deprecated).

XML and Ajax

Although XML has been widely used in today's web as many people have expected, the guide to supporting XML is still IE. It is the first browser to support XML parsing and XSLT transformations on the client side through JavaScript. Unfortunately, it represents an XML document and an XSLT processor through an ActiveX object. But Mozilla's people clearly recognize the merits, because they later used Domparser, XMLSerializer and xsltprocessor to create similar functions. The top two have become part of the HTML5. Although the standard-based JavaScript XML processing mode and the version of IE provides a large difference, but it is undoubtedly affected by IE.

The client's XML processing is part of IE's implementation of XMLHttpRequest, which was first introduced in the form of an ActiveX object by IE 5. The idea is that you can get an XML document from the server in a Web page and allow the XML to be treated as a DOM using JavaScript. The version of IE requires you to use the new ActiveXObject ("MSXML2". XMLHttp "), which also makes it dependent on version strings, and gives developers the effort to test and use the latest version. Once again, Firefox came out and cleaned up the mess by creating a XMLHttpRequest object that was still private, with exactly the same name as the IE version of the interface. Since then, other browsers have copied the Firefox implementation, which eventually makes IE 7 an additional version that does not require ActiveX. Of course, the driving force behind the Ajax revolution that makes everyone excited about JavaScript is XMLHttpRequest.

Css

When you think of CSS, you may not think too much of IE's favor to IE -after all, its support for CSS is often lagging (at least until IE 10). However, IE 3 is the first browser that implements CSS support. At the time, Netscape was pushing another similar proposal: the JavaScript style sheet (jsss). As you can see from the name, this proposal uses JavaScript to define style information about the page. Netscape 4 introduced jsss and CSS, a whole version behind IE. The support for CSS is not as satisfactory, and it is often necessary to translate the style into jsss for application. This also means that, under Netscape 4, if JavaScript is banned, the CSS does not work properly.

At that time, IE's implementation of CSS was limited to the font family, font size, color and background, but the implementation was high quality and usable. At the same time, the implementation of Netscape 4 is easily problematic and difficult to use. Yes, to a very small extent, IE led to the success of CSS.

IE has also brought us other innovations that are ultimately standardized for CSS:

• text-overflow– is used to display ellipses when the text exceeds the size of the container. First appeared in IE 6 and has been standardized in CSS3. It is currently supported by various mainstream browsers.
• Overflow-x and overflow-y– allow you to control content overflow in two separate directions. This attribute was first presented in IE 5 and then normalized in CSS3. It is currently supported by various mainstream browsers.
• The word-break– is used to specify line-wrapping rules between words. Originally appeared in IE 5.5, has now been CSS3 normalized. Supported by all major browsers except Opera.
• word-wrap– Specifies whether the browser should wrap in the middle of a word. Created in IE 5.5, it has now been CSS3 standardized in order to Overflow-wrap, although all major browsers support it in the form of word-wrap.

In addition, many of the new visual effects in CSS3 should be thankful for the foundation laid by IE. IE 4 introduced the private Filter property, which became the first browser to do the following:

• Generate gradients based on CSS's instructions (CSS3: gradients)
• Using Alpha filters to create translucent elements (css3:opacity and RGBA)
• Rotates an element at any angle (CSS3: With Transform rotate ())
• Apply a shadow to an element (Css3:box-shadow)
• Apply a matrix transformation to an element (CSS3: With Transform with Matrix ())

In addition, IE 4 has a feature called "Transitions" that allows you to create some basic animations with filters. This feature is primarily based on transition features that are typically available in PowerPoint, such as fade in or fade out, checkerboard transformations, and so on.

All of these features have in some way become the main function of CSS3. These features were available in IE 4 released in 1997, and it is amazing that we are now starting to enjoy these features in other browsers.

Other contributions to the HTML5

A large part of the HTML5 comes from IE and the APIs it introduces. Here are some things that have not been mentioned before in this article:

• One of the coolest parts of drag-and-drop –html5 is the native drag-and-drop feature. This API is derived from IE 5 and is already described in HTML5 and is very small in variety. The main difference is that the draggable attribute is added to mark arbitrary elements as drag-and-drop (IE uses a JavaScript call--element.dragdrop () to do this). In addition, the API is nearly identical to the original version and is now supported by mainstream desktop browsers.
• Clipboard Access – has now separated its specifications from HTML5, giving the browser the ability to access the Clipboard in some cases. The API first appeared in IE 6 and was then imitated by Safari, which took the Clipboarddata from the Window object and placed it in the event object of the Clipboard events. Safari changes are retained as part of the HTML5 version, and access to the Clipboard is supported in all major browsers except Opera.
• Rich Text editing – Rich text editing with DesignMode is introduced in IE 4 because Microsoft wants to give Hotmail users a better text editing experience. Later, in IE 5.5, Contenteditable was introduced as a more lightweight way to make rich text edits. This is followed by a horrible execcommand () method and some of its affiliated methods. For better or worse, this rich text-editing API has been standardized in HTML5 and is now supported by all major desktop browsers and mobile Safari and Android browsers.

Conclusion

While it's easy and popular to laugh at IE, in fact, if it's not a contribution, we don't have the web we know. What if there is no XMLHttpRequest and InnerHTML web? They are the catalyst for the Ajax revolution in Web applications, and many of the new features are built on them. The funny thing is that when we look back on the history of this browser, which has become the "bad boy" on the internet, we will find that without it, we will not be in the same position today.

Yes, IE has its own flaws, but for most of the history of the Internet, it is a browser that drives technological advancements. Now we are in the age of a massive browser competition and innovation, but it's easy to forget where we've come from. So when you meet someone who is doing IE work next time, please don't throw the humiliation and tomatoes. Instead, thank them for helping IE go all the way to today and make Web developers one of the most important jobs in the world.

The innovation of Internet Explorer browser