Internet Explorer 10 can split paragraph text into columns and automatically split words according to a dictionary borrowed from Microsoft Office. It can position elements according to the Grid just like in WPF. It supports database data storage as well as an open connection to the server. There is also an API for saving and opening files. The previous generation had POSIX as a guarantee of multiplatform. Today’s has HTML5.
Internet Explorer 10 is a web browser whose core renders not only web pages, but also Metro-style applications. Its development continues smoothly from the previous version. After the first two Platform Previews, the third appeared in Windows Developer Preview. The final version will be released alongside Windows 8 in the fall of 2012. However, most of the features are already available to developers today.
Flash
Internet Explorer has built-in Adobe Flash Player. Compared to the reference one, its implementation is performance-optimized and modified for comfortable touch control. It is based on the desktop implementation, not the mobile subset. However, it will also be supported on devices with ARM processors. Microsoft helped Adobe fix a number of security vulnerabilities and crash vulnerabilities that Flash suffered from. This implementation is also used in Aero, where a separate plug-in no longer needs to be installed.
While in Aero Flash will run on all pages, in Metro only on those listed in the Compatibility View List. To be included in this list, the content of the page in Flash must respond to touch, work well with the keyboard displayed on the display, and must not perform complex calculations to save the device’s battery.
API
Animation Frames
Animations that take place by a gradual change of the position of the element triggered via setTimeout have the disadvantage that a large part of the changes may not even be rendered. This unnecessarily uses the CPU and drains the battery. Therefore, the requestAnimationFrame method is introduced, which differs from setTimeout mainly in that the excitation time depends on the frequency of the device’s display. In addition, in the case of several animations at the same time, the browser can make all the changes at once. And if the tab is not active, the animation is not performed at all.
File Reader
Working with files always meant uploading a file to the server. This may no longer be the case, because it is possible to read from the file in text or binary mode by dragging and dropping a file into the browser window or via input of the text type.
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.onload = loaded;
reader.readAsText(file, 'UTF-16');
function loaded(evt) {
var fileString = evt.target.result;
}File Saving
Objects representing files such as File or Blob will be easily saved to your computer. Until now, it is only possible to save files as request handlers with a header that the browser cannot open. It is now possible to save data as a file, which does not even have to be on the server, but only in the browser’s memory.
Gesture Events
Windows takes care of all gesture-related calculations and provides their results directly. It is therefore possible to subscribe directly to gesture events MSGestureTap, MSGestureDoubleTap and MSGestureHold. For more complex gesture processing, events MSGestureStart, MSGestureChange and MSGestureEnd are used. These provide accurate data on momentum, angle of rotation or displacement vector.
document.addEventListener("MSGestureChange",logGesture,false);
var log = document.getElementById("log");
function logGesture(event) {
var gesture = "Translation: " + event.translationX + "px, " + event.translationY + "px<br>";
gesture += "Scale: " + event.scale + "x<br>";
gesture += "Rotation: " + event.rotation*360/Math.PI + " deg<br>";
gesture += "Velocity: " + event.velocityX + ", " + event.velocityY;
log.innerHTML = gesture;
}Hit Testing
Web Developer Tools allow you to click on a page element to view its source code. Visual Studio will be able to do this as well, with the only difference being that it will show the source code that generates the HTML of the relevant element. To make it work with all browsers, there is an effort to standardize this API.
IndexedDB
Fortunately, the original plans to choose the SQLLite relational database as the main HTML5 database fell through and the more sensible idea of choosing the IndexedDB object database won. Therefore, there is no need to map data to objects in a complicated way, because the database stores JavaScript objects directly. Instead of tables, object stores are used. But they serve the same purpose. Like relational colleagues, they also have indexes, indexing properties, or object methods. Each object has its own unique identifier. This is set in the property index keyPath. The data query looks something like this:
var oRequestDB = window.indexedDB.open("Library");
oRequestDB.onsuccess = function (event) {
db1 = oRequestDB.result;
if (db1.version == 1) {
txn = db1.transaction(["Books"], IDBTransaction.READ_ONLY);
var objStoreReq = txn.objectStore("Books");
var request = objStoreReq.get("Book0");
request.onsuccess = processGet;
}
};Unfortunately, nothing like LINQ is supported, so we have to put up with querying for a specific object (as in the example above), filtering, or iterating through the index.
Page Visibility
The new event visibilitychange of object document is useful, for example, when a user is playing a video and switches to another tab. At that point, it is possible to react to the event and pause the video playback so as not to unnecessarily burden the server when the user does not see the video anyway.
Pointer Events
The events for both mouse and touch have been consolidated into four basic events MSPointerOver, MSPointerOut, MSPointerHover, and MSPointerCancel for loss of contact (which can never happen with a mouse, except by unplugging it from the USB). For backward compatibility, the browser will also trigger corresponding events for the mouse. To determine whether a browser supports gestures, there is a property window.navigator.msPointerEnabled.
Multi-File Upload
As is well known, the file opening dialog can be used to select either one or more files. However, multifile mode could not be used for the web. The HTML5 specification also thinks about this and introduces one input for multiple files:
<form action="#" method="post" enctype="multipart/form-data">
<input name="uploads[]" type="file" multiple>
<input type="submit">
</form>Resource Timing
This API is used to accurately measure the time that has elapsed between loading the watched parts of the page (e.g. images).
WebSockets
HTTP is a protocol for websites, not web applications. The client asks for data and the server sends it to him. It is not possible for the server to send data to the client smoothly, or vice versa. Although the problem can be circumvented to a certain extent, it causes great complexity on the part of server clusters.
WebSocekts is a protocol that was designed for the contemporary web. It counts on firewalls and proxies, supports TCP and SSL, and the protocol itself ensures that the two-way connection is kept alive using Ping/Pong. It also has the advantage that the server learns that the client has lost connection. Because the proxy only passes through the HTTP protocol, the connection is established first by the HTTP protocol and only later is it switched to WebSockets. Each message in the log has a specified type of data to be transferred (text, blob, etc.).
var url = "ws://domain.com/ocr/handler.ashx";
var websocket = new WebSocket(url);
websocket.onmessage = function(event) {
if (event.data instanceof String) {
var text = event.data;
}
}
if (socket.readyState == WebSocket.OPEN) {
var canvas = document.getElementById('canvas');
websocket.send(canvas.msToBlob());
}On the server side, in the Microsoft.Web.WebSockets namespace, there is class WebSocketHandler, from which you can inherit your own Genric Handler and conveniently operate protocol WebSockets.
Web Workers
Because all JavaScript is executed in the UI thread, it is unsuitable for intensive computing. After all, it was not even designed for them. Web Workers are used for background calculations. However, in order not to have to deal with a very demanding synchronization between multiple threads and the DOM, the code executed in the background does not have access to the DOM. The only chance to influence the DOM is to send a message to the UI thread and make the desired change from there.
XmlHttpRequest Level 2
Events onloadstart, onprogress, onabort, onerror, onload, ontimeout and onloadend have been added, which are intended to make the current investigation of what actually happened after the onreadystatechange event was triggered, more pleasant. Another new feature is the ability to set timeout and easily find out the progress of sending a request to the server. To make it easy to transfer files, it is also possible to send objects of the ArrayBuffer, Blob, File and FormData types. It is also possible to set the request to be anonymous. In this case, referrer, origin or credentails will not be sent. In addition, it is possible to send data to a server in another domain.
CSS3
3D Transforms
The transformation does not affect the page layout. Text marking, as well as form elements, still respond in the same way even after it has been used. After rotation around an axis, the depth of perspective can also be determined. Do you remember the movie Star Wars and the yellow text at its beginning? It’s nothing that can't be done with CSS3 3D transformations. The video element is overlapped by a paragraph that rotates around the X axis and at the same time a relatively large perspective depth is set. You can read how to scroll text under the heading Transitions.
Animations
Unlike Transitions, which are executed as soon as the CSS value changes, the animation is assigned a name via the -ms-animation-name property, which is used to run it via JavaScript. The animation has key frames in which a certain CSS property is always defined. The speed of the animation as a function versus time can be defined by its own function as a Bezier curve, so you only need 4 numbers.
Background & Borders
Property background-clip and its values border-box and content-box can be used to determine whether the framing of a component is transparent to the background color or the component color.
Content Flow
If an element, typically an image, interferes with an element with text, the text flows around it. Not that the images can't be wrapped around the text now. But in the case where you have more columns and the image is wider than the column, you need this feature.
Exclusions
Text wrapping always counts on rectangular wrapping. However, flowing around wilder shapes is outside the principles of good typography. However, it is possible. It is possible to define an empty div, which is defined as the shape, size and rotation. When you place it, a runaround area is defined in the text.
Flexbox
Flexbox is used for a simple layout of elements that are supposed to take up the entire space and adapt to its size. It can be used well, for example, to display folder or file icons. It is applied by setting the value of box of the display property. Subsequently, you can set eight more features related to the flexbox. All the gaps between the individual boxes are distributed evenly in both the vertical and horizontal directions.
Gradients
The property background-image has always had the only conceivable value of url with a parameter pointing to the image. Since a large part of the page images are just gradients, it is now possible to use the value -ms-linear-gradient instead of url and specify the gradient parameters. Transparency support is a matter of course. The prefix is still necessary because the specification working group still needs to change the meaning of the parameter order.
Grid Layout
Do you like the system of positioning elements from WPF applications and are you annoyed that it can't be used for HTML as well? So it’s going. Basically, it is easy to achieve what was previously solved by tables. Slice an area and set specific columns or rows to either a constant size in pixels or a size that depends on the size of the entire area.
Hyphenation
Internet Explorer 10 will be able to split text into columns. This is also related to hyphenation, which IE10 also supports automatically. It is provided by the Windows service for working with text, which has been adopted from Microsoft Office. So if you set <html lang="cs">, Czech words will be hyphenated correctly using the dictionary that was found in Microsoft Office. LaTeX fans will be pleased to know that it is possible to specify the highest number of lines on which a hyphenated word can appear consecutively. Isolated letters are also under control.
Multi-column Layout
In 1996, Netscape 3 made it possible to use the MULTICOL tag (at that time it was still customary to capitalize tags) to divide text into multiple columns. Now it is possible to achieve the same thing in IE10 using CSS. In addition, it is possible to set an automatic number of columns, which is very useful for devices with different display sizes today. Drawing the vertical line between the columns that separates them is a matter of a single CSS property column-rule. The value balance of the column-fill property can be used to set the same height for all columns.
Panning
If overflow is set to scroll, you can use the -ms-overflow-style property to set how scrolling should take effect. The value of -ms-autohiding-scrollbar sets scrollbars so that they will be visible only when the cursor is near them. The value of auto makes scrollbars visible in Internet Explorer and hides the Metro style phenomenon in the application. Scrolling with a gesture is always allowed.
Regions
Regions are used to lay out the text in the style known from magazines. This is basically overflow: hidden, with the content that is already overflowing and hidden being displayed in another element. This allows the text to flow smoothly across several elements.
Transitions
As mentioned in 3D Transforms, scrolling yellow text in a Star Wars movie is very easy to define. All you have to do is change some CSS property and determine how long it will take to take effect and at what speed in relation to time the action should take place. Specifically, after changing the value of the translate3d property of the -ms-transform3d element with the property -ms-transition, the change will be made smoothly, so the whole text will slowly move deeper into space.
Text Shadow
It is one of the most requested features. However, it is one of the most problematic. All versions of Internet Explorer up to version 8 rendered via GDI+. However, version 9 renders via DirectX, just like WPF. And let’s remember the development of WPF, where the biggest problem was the rendering of fonts. It was the only thing that practically prevented WPF from being used, until font rendering was moved directly to DirectX under the name DirectWrite. However, even that was not enough. Text Shadow can do a lot in the concept of CSS, and DirectWrite had to adapt to all this. The shadow can be set vertical and horizontal distance, intensity, sharpness, and as for color, you can define a gradient of several colors. It is therefore no wonder that everything took so long. But the wait was worth it. Everything takes place on the GPU.
Snap Points
For content that overflows an element, you can set glue points between which the content will move. This can be used primarily to display a set of images that are placed horizontally one after the other, and it is not useful to display half of each of the adjacent images. Instead, you can simply move from one image to another with gestures.
Zooming
The new property -ms-content-zooming with the value of zoom allows you to increase and decrease the size of an element with gestures. It does not enlarge or shrink the entire page, but only a part of it. This is desirable, for example, in maps where the user typically wants to zoom in on a certain area and does not expect to enlarge the controls around the map.
HTML5
Application Cache
In the days when Internet Explorer 4 roamed the Internet waters, and the beginning of every voyage was accompanied by a modem dialing melody, there were channels where websites worked even when the computer was offline. The way you worked with this was to connect, quickly download channel updates, and then disconnect again. Only then did we read in peace. The channels were removed as obsolete in the seventh version of Internet Explorer, so that they could return three versions later in the form of Application Cache. It is nothing more than a list of files to be downloaded in order for the site to work offline.
<html manifest="/cache.manifest">Async
The async attribute of the script tag is very similar to the defer attribute. The only difference is that there is no guarantee that the scripts will be executed in the same order as they are on the page. They are executed immediately after downloading and after assembling the entire DOM.
<script async src="script.js" onload="Init()"></script>Drag & Drop
Elements have an attribute draggable, which determines whether they can be moved. To react to dragging over an element or triggering an element over another, event dragover or drop is used. However, the most interesting thing is the fact that you can also drag and drop files from the explorer into the browser window.
var dropArea = document.getElementById('dropspot');
dropArea.addEventListener('drop', dropHandler, false);
function dropHandler(event) {
var filelist = event.dataTransfer.files;
}Forms & Validation
The classic input has been extended to include email and url. Custom types can be defined using the regular expression in attribute pattern. Attribute required has been added, preventing the form from being sent if the field is not filled in. If the field is filled in incorrectly, it is possible to apply the pseudoclass style :invalid to it.
History
The development of modern websites is challenging. Loading a new page every time you change content is slow. Dynamically loading all content makes it impossible to use the back button. Event onhashchange works, but it’s still not the same. Only HTML History finally brings a dynamic replacement for a link.
history.pushState(data, title, url);
history.replaceState(data, title, url);The methods of history.pushState and history.replaceState replace location.href and location.replace, respectively. To register the event of clicking on the back or forward button, popstate is used.
window.addEventListener("DOMContentLoaded", loadState, false);
window.addEventListener("popstate", loadState, false);
function loadState() {
var data = history.state;
}Parser
Internet Explorer 10 includes an HTML5 parser. It is a standardized parser that processes not only HTML5, but also HTML3, HTML4 and XHTML1. Conditional Comments can still be used, but it can only be aimed at older versions of Internet Explorer.
<!--[if IE]>
Tento obsah je zobrazen pouze v Internet Exploreru od verze 5 do verze 9.
<![endif]-->One of the benefits of the new parser is the optimized execution of property assignment innerHTML.
Sandbox
The iframe tag may contain a new attribute sandbox, which says that the page within the framework will have JavaScript disabled, all browser add-ons, target="top" will not be effective, and forms will be disabled. Individual privileges can be turned on if needed.
<iframe src="iframe.html" sandbox="allow-scripts allow-forms allow-top-navigation"></iframe>Video Captioning
The <video> tag now supports subtitles in TTML (which is also supported by Silverlight) and WebVTT.
<video>
<source type="video/mp4" src="video.mp4"></source>
<track src="captions.ttml" label="České titulky" kind="captions" srclang="cs-cz" default></track>
</video>SVG
Filter Effects
Vector graphics can be enriched with graphic effects, the most effective of which is probably the illumination of the scene. Everything is calculated, as is customary in IE, on the GPU. A very nice effect can be achieved by this. If you draw the background of the page via SVG, you can blur certain parts using the feGaussianBlur filter and thus lay the foundation for the glass base of the page.