The ninth version of Internet Explorer brings quality support for young technologies. The new version will offer more new features than any previous version. CSS 3, DOM 3, SVG, ES5 and many parts of HTML 5 are implemented. An XML parser has also been added. Since the seventh version, all major parts of the browser have been rewritten. All rendering is calculated on the graphics card. Nothing prevents you from using the same effects on the web that we know from WPF applications.
API
DOMParser & XMLSerializer
Since XmlHttpRequest is usually used to transfer new HTML code, an object has been created to convert the string to the DOM element tree. To process it into XML, it is sufficient to use the properties responseXML. On the other hand, object XMLSerializer is used to convert a DOM tree to a string.
Selectors Level 2
In addition to the querySelector and querySelectorAll methods, the msMatchesSelector method has been added, which finds out whether a given element matches a certain selector.
Site Mode
It’s been a long time since creating a shortcut to a web page as easily as it is to a file. However, you can't pin this shortcut to the taskbar. This is now possible by dragging a tab to the taskbar. Although this shortcut cannot be dragged to the desktop, you can add custom tasks to the JumpList via JavaScript that open a specific web page. A pinned website can also add buttons below the page preview in the taskbar in the same way. It can have any icon. Pressing the button triggers an event that can be subscribed to via EventListener. The page button pinned to the main page displays the site icon. Over this icon, you can use JavaScript to overlay another small arbitrary icon showing, for example, the number of unread messages in Hotmail.
CSS3
2D Transforms
Elements can be rotated, enlarged, reduced, skewed or stretched as desired. For demanding users, there is also the option to define a transformation using a matrix.
Backgrounds & Borders
A lot of work is also made easier by supporting the rounded corners of the element by setting the border-radius property. The possibility of defining multiple background elements is also nice.
background-image: url(first.png), url(second.png);
background-position: left top, center bottom;An element can have a shadow in addition to the border.
Color
The most requested change is the support for semi-transparent colors, which has so far been circumvented by inserting a semi-transparent PNG image on the background of the element. Colors in CSS can therefore be set using both rgba() and hsla(), which is much better than opacities, which make everything transparent, including the content. Typically, only the background needs to be made transparent.
Fonts
The relatively young Web Open Font Format specification, developed in 2009, has also been implemented in IE9. It unifies the rendering of fonts across browsers, with the font being able to be downloaded from the web if it is not installed on the system.
Resource Timing
To obtain the page loading time, a new JavaScript object window.msPerformance is used, which mediates the measurement of Internet Explorer directly.
Media Queries
Media Queries allow you to set aside a portion of CSS for specific devices. You can distinguish the width and height of the display, its orientation, aspect ratio, or color support.
Namespaces
Namespaces in CSS are especially useful for styling SVG elements. They allow you to distinguish identically named elements and different HTML namespaces.
OM Views
The CSSOM View Module covers long-known features such as innerWidth, innerHeight, screenX, screenY or methods getBoundingClientRect or getClientRects.
Selectors
Selectors allow you to apply a style only to certain elements, depending on their location in the DOM. You can target a root, an element in a specific order, the first or last element that is a single child, or is empty. You can also target an element that is referenced by a URI using a path after #. In the case of form elements, it is possible to distinguish whether it is prohibited or allowed. You can also specify the color and background of the selected text.
Values & Units
Units like px or em are commonly used in CSS. Now it is also possible to use deg for degrees, s and ms for time.
Data URI
Images and can be saved directly to the HTML source code of the page. Just use base64 encoding and data protocol. It is now possible to embed scripts in a similar way. The data size limit has been increased from 32 KB to 4 GB.
DOM
Element Traversal
It covers the methods of childElementCount, firstElementChild, lastElementChild, nextElementSibling and previousElementSibling for traversing the element tree.
HTML Level 2
It defines the frequently used function getElementsByClassName along with the property characterSet.
Level 3 Core
The DOM has been extended to include the methods of adoptNode, compareDocumentPosition, CDATASection, createDocument, documentType, importNode, inputEncoding, isDefaultNamespace, isEqualNode, isSameNode, isSupported, lookupNamespaceURI, lookupPrefix, ProcessingInstruction, replaceWholeText, textContent, xmlEncoding, xmlStandalone, xmlVersion and wholeText.
Level 3 Events
If you're programming something bigger in JavaScript, you'll find that registering events for Internet Explorer is very different from Firefox, Chrome, Safari, or Opera. A function that is performed after the page is launched is registered as follows:
if (typeof document.onreadystatechange != 'undefined') {
document.onreadystatechange = function() {
if (document.readyState == 'complete') Init();
}
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', Init, false);
}
function Init() { }The developers of Internet Explorer decided to implement a more robust DOM Event Listener model in the ninth version, allowing web designers to write uniform code for all browsers. IE9 is also the first browser to support Keyboard event interface of the DOM Level 3 Events specification. After sufficient expansion of IE9, we can enjoy unified registration and event management such as mouseenter, mouseleave, focusin, focusout, keydown, keyup or keypress.
Style
It introduces the getComputedStyle method, which differs from the style property in that it returns all CSS, including the one defined in the stylesheet.
Traversal & Range
Range defines how elements can be selected in a specific range defined by a list of points. Traversal defines the way in which elements can be traversed using objects NodeIterator and TreeWalker. Filters can be applied so that only certain elements are selected. It can be used, for example, in SVG-based graphics editors.
ECMAScript 5
The new JavaScript engine, which is called Chakra, is different from other engines. Optimizes JavaScript code behind the scenes. The original code is then replaced with optimized code. This way, the user doesn't have to wait for JIT to compile and optimize the code to execute while the page is loading. This code is executed immediately without demanding optimizations by the new fast interpreter. During page loading, there are basically four important things that take place in parallel – DOM construction, continuous page rendering, compilation together with JavaScript code optimization, and fast execution of JavaScript code with only basic optimization.
Internet Explorer 9 supports new features for working with fields: every, filter, forEach, indexOf, isArray, lastIndexOf, map, reduce, reduceRight and some. It makes available new functions for working with objects: Object.create, Object.defineProperties, Object.defineProperty, Object.freeze, Object.getOwnPropertyDescriptor, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.isExtensible, Object.isFrozen, Object.isSealed, Object.keys, Object.preventExtensions, Object.seal. It also includes new functions for working with dates: Date.now, Date.parse (supports ISO format) and Date.toISOString. Finally, the chain has the trim method.
HTML5
Audio & Audio
The main innovations in HTML 5 include support for the <video> tag with MPEG-4/H.264 formats and the <audio> tag with MP3/AAC formats. Support for DOM 2 and 3 was announced, as well as the resulting support for the standard event model – EventListener. The way IE treats unknown elements will also change. For example, using the <article> tag caused problems if the developer wanted to access it via the DOM. IE9 already includes unknown elements in the DOM, as well as non-printing characters.
Canvas
Also new in IE9 is the <canvas> tag, which renders graphics. Unlike SVG, which is designed more for static diagrams or graphs, canvas is designed for a dynamic scene composed of vector and raster graphics. Canvas provides a set of drawing functions via JavaScript. It is a full-fledged 2D API. Its capabilities were demonstrated by the Google team, which created a port of the game Quake II running in a web browser.
Geolocation
Internet Explorer 9 allows the site to access the location data of the PC via the API. Object window.navigator implements the interface NavigatorGeolocation. This defines the methods of getCurrentPosition, watchPosition, clearWatch and events PositionCallback and PositionErrorCallback.
Selection
There are three different APIs through which you can access the marked text. Selection is an object returned by the window.getSelection method. The properties of selectionStart and selectionEnd return or set the areas where the text designation begins or ends.
SVG
In short, vector graphics did not come either. IE9 will bring SVG support, which can be embedded directly into HTML and access SVG elements via DOM.
XHTML/XML
The long-awaited XHTML support is finally here. The new version has a built-in XML parser, so it also accepts pages with the application/xhtml+xml header. At the same time, pages rendered in this way are processed in the latest rendering mode and it is not even possible to switch to the older mode. This will eliminate the difficulty of using XSLT. Starting with the seventh version of Internet Explorer, each new version has an additional rendering mode.