Long before Internet Explorer became the web browser everyone loves to hate , it was the push back force play of creation on the cyberspace . Sometimes it ’s hard to remember all of the good that Internet Explorer did before Internet Explorer 6 became the scourge of vane developers everywhere . Believe it or not , Internet Explorer 4 - 6 is heavily creditworthy for WWW development as we get it on it today . A number of proprietary features became de facto criterion and then prescribed standards with some ending up in the HTML5 specification .
It may be laborious to believe that Internet Explorer is actually to thank for a mess of the features that we take for grant today , but a quick walk through history prove that it ’s true .
It ’s about time someone showed Internet Explorer some lovemaking . On his site , NCZOnline , Nicholas C. Zakas walk us through some of the major contribution to the modern web that we owe to IE .
DOM
If Internet Explorer is a web web browser that everyone loves to hate , the Document Object Model ( DOM ) is the API that everyone love to detest . you may call the DOM overly verbose , badly - suited for JavaScript , and somewhat preposterous , and you would be correct on all counts . However , the DOM gives developer entree to every part of a webpage through JavaScript . There was a time when you could only access certain elements on the page through JavaScript . Internet Explorer 3 and Netscape 3 only reserve programmatic access to form elements , range , and links . Netscape 4 meliorate the site by expand programmatic admittance to the proprietary < layer > element via document.layers . Internet Explorer 4 improve the situation even further by allow programmatic admittance of every element on the Sir Frederick Handley Page via document.all
In many regards , document.all was the very first adaptation of document.getElementById ( ) . You still used an element ’s ID to get at it through document.all , such as document.all.myDiv or document.all[“myDiv ” ] . The primary conflict was that Internet Explorer used a collection instead of the subprogram , which oppose all other access methods at the time such as document.images and document.forms .
Internet Explorer 4 was also the first internet browser to innovate the power to get a lean of elements by tag name via document.all.tags ( ) . For all purport and purposes , this was the first version of document.getElementsByTagName ( ) and worked the precise same way . If you want to get all < div > element , you would use document.all.tags(“div ” ) . Even in Internet Explorer 9 , this method still exists and is just an false name for document.getElementsByTagName ( ) .
Internet Explorer 4 also introduced us to perhaps the most popular proprietary DOM extension of all time : innerHTML . It seems that the folks at Microsoft realized what a pain it would be to build up a DOM programmatically and afforded us this crosscut , along with outerHTML . Both of which proved to be so useful , they were standardized in HTML5[1 ] . The companion APIs dealing with plain text , innerText and outerText , also demonstrate influential enough that DOM Level 3 introduced textContent[2 ] , which acts in a similar mode to innerText .
Along the same lines , Internet Explorer 4 introduced insertAdjacentHTML ( ) , yet another way of inserting HTML text into a document . This one have a piffling longer , but it was also codified in HTML5[3 ] and is now wide brook by web internet browser .
Events
In the start , there was no event system for JavaScript . Both Netscape and Microsoft took a stab at it and each came up with different models . Netscape brought us event capturing , the estimation that an outcome is first delivered to the windowpane , then the document , and so on until finally reaching the intended aim . Netscape web browser prior to version 6 support only event capturing .
Microsoft took the diametrical feeler and came up with effect belch . They believed that the outcome should begin at the actual target and then fire on the parents and so on up to the document . Internet Explorer prior to interlingual rendition 9 only supported event bubbling . Although the official DOM events specification evolves to include both event capturing and effect gurgle , most World Wide Web developer use consequence bubble exclusively , with effect capturing being saved for a few workarounds and tricks buried deep down inside of JavaScript libraries .
In addition to creating event burble , Microsoft also created a bunch of additional events that eventually became standardised :
contextmenu – fires when you use the secondary computer mouse button on an constituent . First appear in Internet Explorer 5 and later on codify as part of HTML5[4 ] . Now supported in all major background browsers .
beforeunload – fire before the unload case and allow you to block unloading of the varlet . Originally insert in Internet Explorer 4 and now part of HTML5[4 ] . Also patronize in all major desktop web browser .
mousewheel – ardour when the black eye bike ( or standardized twist ) is used . The first browser app to support this event was Internet Explorer 6 . Just like the others , it ’s now part of HTML5[4 ] . The only major desktop web internet browser to not fend for this event is Firefox ( which does support an substitute DOMMouseScroll event ) .
mouseenter – a non - bubbling version of mouseover , introduced by Microsoft in Internet Explorer 5 to help battle the trouble with using mouseover . This consequence became formalized in DOM Level 3 Events[5 ] . Also supported in Firefox and Opera , but not in Safari or Chrome ( yet ? ) .
mouseleave – a non - bubbling rendering of mouseout to match mouseenter . preface in Internet Explorer 5 and also now standardized in DOM Level 3 Events[6 ] . Same financial support level as mouseenter .
focusin – a ripple version of focus to help more easily manage focus on a varlet . Originally bring out in cyberspace Explorer 6 and now part of DOM Level 3 Events[7 ] . Not currently well supported , though Firefox has a glitch opened for its implementation .
focusout – a burp version of blur to serve more easily superintend focus on a pageboy . Originally precede in Internet Explorer 6 and now part of DOM Level 3 Events[8 ] . As with focusin , not well supported yet but Firefox is close .
< iframe >
Frames were ab initio introduced by Netscape Navigator 2 as a proprietary feature . This admit < frameset > , < frame > , and < noframes > . The idea behind this feature was pretty simple : at the time , everyone was using modems and roundtrips to the waiter were quite expensive . The principal use type was to furnish one figure with navigational elements that would only be loaded once , and another bod that could be insure by the navigation and change separately . Saving host render time and data point transfer by having navigation as a separate page was a vast win at the time .
Internet Explorer 3 supported frames as well , since they were becoming quite popular on the web . However , Microsoft added its own proprietary tag to that functionality : < iframe > . The basic idea behind this factor was to embed a page within another page . Whereas Netscape ’s implementation take you to create three pages to have stable navigation ( the sailing pageboy , the content page , and the frameset Sir Frederick Handley Page ) , you could create the same functionality in Internet Explorer using only two pages ( the chief page include navigation , and the depicted object Sir Frederick Handley Page within the < iframe > ) . Initially , this was one of the major field of battle between Internet Explorer and Netscape Navigator .
The < iframe > started to become more popular because it was less work than creating framesets . Netscape countered by introducing < ilayer > in interpretation 4 , which had very like feature of speech to < iframe > . Of course , the < iframe > won out and is now an crucial part of web development . Both Netscape ’s frames and Microsoft ’s < iframe > were standardized in hypertext mark-up language 4 , but Netscape ’s frames were later obsoleted ( deprecated ) in HTML5 .
XML and Ajax
Although XML is n’t used about as much in the web today as many conceive it would be , Internet Explorer also led the way with XML support . It was the first web web browser to stick out client - side XML parsing and XSLT translation in JavaScript . Unfortunately , it did so through ActiveX object representing XML documents and XSLT central processing unit . The folks at Mozilla clearly thought there was something there because they forge similar functionality in the form of DOMParser , XMLSerializer , and XSLTProcessor . The first two are now part of HTML5[9 ] . Although the measure - based JavaScript XML handling is quite different than Internet Explorer ’s version , it was undoubtedly influenced by IE .
The client - side XML handling was all part of Internet Explorer ’s implementation of XMLHttpRequest , first introduce as an ActiveX physical object in Internet Explorer 5 . The idea was to enable recovery of XML document from the host in a webpage and earmark JavaScript to manipulate that XML as a DOM . Internet Explorer ’s version ask you to use new ActiveXObject(“MSXML2.XMLHttp ” ) , also making it reliant upon rendering strings and making developers chute through hoops to test and use the most late version . Once again , Firefox came along and clean house up the mess up by produce a then - proprietary XMLHttpRequest object that duplicate the user interface of Internet Explorer ’s version exactly . Other browsers then copied Firefox ’s implementation , ultimately lead to Internet Explorer 7 creating an ActiveX - costless version as well . Of of course , XMLHttpRequest was the drive military unit behind the Ajax revolution that got everybody excited about JavaScript .
CSS
When you think of CSS , you likely do n’t suppose much about Internet Explorer . After all , it ’s the one that tend to jail behind in caesium financial backing ( at least up to Internet Explorer 10 ) . However , Internet Explorer 3 was the first web browser app to implement CSS . At the time , Netscape was pursuing an substitute proposition , JavaScript Style Sheets ( JSSS)[10 ] . As the name suggest , this marriage proposal used JavaScript to limit stylistic info about the pageboy . Netscape 4 introduced JSSS and CSS , a full version behind Internet Explorer . The CSS implementation was less than starring , often translating styles into JSSS so as to apply them properly[11 ] . That also meant that if JavaScript was handicapped , CSS did n’t work in Netscape 4 .
While cyberspace Explorer ’s implementation of Cs was limited to font kin , font size , vividness , and background , the carrying out was solid and available . Meanwhile , Netscape 4′s effectuation was buggy and tough to exercise with . Yes , in some small way , Internet Explorer led to the success of CSS .
The box model , an important foundation of CSS , was heavily shape by cyberspace Explorer . Their first implementation in Internet Explorer 5 interpret breadth and altitude to mean that the element should be that sizing in sum , including cushioning and border . This add up to be known as perimeter - boxwood sizing . The W3C resolve that the appropriate box seat size method was content - box seat , where width and height specified only the size of the box in which the content lived so that padding and border added size to the element . While Internet Explorer switched its standards mode to use the content - boxful plan of attack to match the standard , Internet Explorer 8 inaugurate the boxful - sizing property as a way for developer to interchange back to the border - box seat example . Of naturally , box - size was standardize in CSS3[12 ] and some , most notably Paul Irish , recommend that you should modify your default box - sizing to molding - box[13 ] .
Internet Explorer also brought us other caesium origination that ended up being standardized :
text - overflow – used to show ellipsis when textbook is larger than its container . First appeared in net Explorer 6 and standardise in CSS3[14 ] . Now fend for in all major browsers .
overflow - tenner and runoff - y – allows you to verify overspill in two separate instruction of the container . This property first appeared in Internet Explorer 5 and afterward was formalized in CSS3[15 ] . Now supported in all major browsers .
word - break – used to specify line fall in formula between give-and-take . Originally in Internet Explorer 5.5 and now standardized in CSS3[16 ] . Supported in all major browsers except Opera .
word - wrapper – specifies whether the web browser app should break lines in the midsection of Scripture are not . First make for Internet Explorer 5.5 and now standardize in CSS3 as flood - wrap[17 ] , although all major web browser keep going it as word - wrap .
to boot , many of the unexampled CSS3 optical event have Internet Explorer to thank for laying the groundwork . Internet Explorer 4 introduce the proprietary filter property work it the first web internet browser capable of :
Generating gradients from CSS instructions ( CSS3 : gradient )
Creating translucent chemical element with an alpha filter ( CSS3 : opaqueness and RGBA )
rotate an element an arbitrary issue of degree ( CSS3 : transform with rotate ( ) )
utilise a fall shadow to an ingredient ( CSS3 : box - shadow )
Applying a intercellular substance transform to an element ( CSS3 : transform with ground substance ( ) )
to boot , Internet Explorer 4 had a feature called conversion , which permit you to create some basic vitality on the page using filter . The transitions were mostly found on the transitions usually available in PowerPoint at the metre , such as fading in or out , checker board , and so on[18 ] .
All of these capabilities are featured in CSS3 in one way or another . It ’s pretty amazing that Internet Explorer 4 , released in 1997 , had all of these potentiality and we are now just bulge to get the same capabilities in other internet browser .
Other HTML5 contributions
There is a good deal of HTML5 that comes directly out of net Explorer and the APIs introduced . Here are some that have not yet been mentioned in this postal service :
Drag and Drop – one of the cool parts of HTML5 is the definition of aboriginal drag - and - drop[19 ] . This API rise in Internet Explorer 5 and has been key , with very few changes , in HTML5 . The main difference is the improver of the draggable attribute to strike off arbitrary elements as draggable ( Internet Explorer used a JavaScript call , element.dragDrop ( ) to do this ) . Other than that , the API nearly mirrors the original and is now supported in all major desktop web web browser .
Clipboard Access – now split out from HTML5 into its own spec[20 ] , grants the web web browser access to the clipboard in certain situations . This API to begin with appeared in net Explorer 6 and was then copied by Safari , who move clipboardData off of the window physical object and onto the event object for clipboard issue . Safari ’s variety was maintain as part of the HTML5 translation and clipboard admission is now useable in all major desktop web browser except for Opera .
Rich Text Editing – deep text redaction using designMode was introduced in Internet Explorer 4 because Microsoft want a dependable text redaction experience for Hotmail drug user . afterwards , Internet Explorer 5.5 introduced contentEditable As a lighter weight way of doing rich text editing . Along with both of these came the dreaded execCommand ( ) method and its associated methods . For better or bad , this API for copious text redaction was standardized in HTML5[21 ] and is presently supported in all major desktop browsers as well as Mobile Safari and the Android internet browser .
So Thanks, Internet Explorer
While it ’s easy and popular to poke at Internet Explorer , in reality , we would n’t have the vane as we know it today if not for its contribution . Where would the web be without XMLHttpRequest and innerHTML ? Those were the very catalyst for the Ajax gyration of WWW applications , upon which a lot of the unexampled capability have been build . It seems odd to look back at the web browser that has become a “ bad guy wire ” of the cyberspace and see that we would n’t be where we are today without it .
Yes , Internet Explorer had its flaws , but for most of the chronicle of the net it was the web browser app that was pushing technology forth . Now that were in a period with massive web web browser competition and innovation , it ’s easy to forget where we all came from . So the next time you hunt into people who lick on Internet Explorer , instead of hurling insults and tomatoes , say thanks for assist to make the Internet what it is today and for making web developer one of the most important jobs in the world .
reference
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 story 3 Events )
7.focusin(DOM Level 3 event )
8.focusout(DOM Level 3 Events )
9.DOMParser interface(HTML5 )
10.JavaScript Style Sheets(Wikipedia )
11.The CSS Sagaby Håkon Wium Lie and Bert Bos
12.box - sizing property(CSS3 UI )
13 . * { box seat - sizing : border - box seat } FTW(Paul Irish )
14.text - overspill property(CSS3 UI )
15.overflow - x and flood - y(CSS3 Box )
16.word - break(CSS3 Text )
17.overflow - wrap / word - wrap(CSS3 Text )
18.Introduction to Filters and Transitions(MSDN )
19.Drag and Drop(HTML5 )
20.Clipboard API and Events(HTML5 )
21.User Interaction – Editing(HTML5 )
Nicholas C. Zakas is master designer atWellFurnishedand the author of several JavaScript book , including Maintainable JavaScript and Professional JavaScript for World Wide Web Developers . He twinge at@slicknet .
InternetInternet ExplorerMicrosoft
Daily Newsletter
Get the best technical school , science , and culture news in your inbox daily .
News from the future , deliver to your present .
Please select your desired newssheet and submit your email to upgrade your inbox .
