Advancements like high-performance compiled JavaScript and hardware-accelerated rendering of HTML5 and CSS3 in Internet Explorer 9 and 10 allow Web developers to create richer and richer experiences. Two related features,
CSS3 Transitions and CSS3 Animations,
give Web developers a declarative way to add personality to Web page interactions
easily.
Like nearly all features new to IE9 and IE10, CSS3 Transitions and Animations are
standards-based features implemented with “same markup” interoperability in mind.
However, unlike features such as border-radius, box-shadow, and text-shadow, which
are part of stable W3C specifications, Transitions and Animations are still at a
specification stage where vendors prefix their implementations. Therefore, in this
case, “same markup” must be qualified as “same markup except for the vendor prefix.”
Many other writers have written about these features, including Rich Bradshaw’s excellent
article Using CSS3 Transitions, Transforms
and Animation. Many articles that discuss these features use only
the -webkit- prefix in their examples. Users wishing to experiment in other browsers
need to copy the example and change -webkit- to -ms-, -moz-, or -o-, as appropriate.
Bradshaw’s examples are an exception; they already work in IE10!
Transitions
The function of CSS3 Transitions is very straightforward: smoothly change the computed value
of a CSS property from its old value to its new value. Moreover, changes in value
resulting from changes in an element’s CSS class or pseudo-class also trigger transitions.
Consider the following markup:
img {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: linear;
}
img:hover {
opacity: 0;
}
The effect of this is that when the user moves his or her mouse over the image, the image will fade out smoothly
over 2 seconds starting immediately, as illustrated below (I’ve added a dropped
shadow on a wrapping element to illustrate the endpoint).
Fading one image to nothing over 2 seconds
The transition properties that cause this to occur are:
transition-property
– specifies which CSS properties are to be transitioned. The keyword “all” causes
all animatable
properties to transition when changed. The default value is “all.”
transition-duration
– the time, in seconds or milliseconds, of the transition, starting after the transition-delay.
The default value is zero, meaning that the transition is immediate.
transition-delay
– the time, in seconds or milliseconds, after the value is changed before the transition
starts. The time may be negative, in which case the transition starts part way through
its duration. The default value is zero.
transition-timing-function
– describes how the intermediate values of a transition are calculated. This allows
a transition to change speed over its duration. The underlying function is a
cubic Bézier curve; keywords match common functions. The default value is
the keyword “ease,” a function that starts fast and slows down toward the end.
Fading one image to nothing is a simple example. Let’s say we wanted to fade one
image to another, as illustrated below.
Fading from one image to another over 2 seconds
The following markup accomplishes this (except that vendor prefixes must precede
all the transition properties).
Move your mouse over the image to fade it to another.
Simple transitions, such as the one above, are moderately easy to simulate in JavaScript.
The benefits of CSS Transitions are their declarative definitions, making them easier
than script, and they run—at least in IE10—asynchronously to the main processing
thread resulting in smoother transitions and sites that are more responsive.
CSS3 Animations are similar to CSS3 Transitions in that they smoothly animate a CSS
value over time. The differences are (a) how one specifies the properties to animation,
(b) how one triggers the animation and (c) the complexity of the animation possible.
You define animations using a CSS “keyframes” at-rule. A simple keyframes rule that
matches the fade out behavior of the transition above would be:
@keyframes fadeOut {
from {
opacity:1;
}
to {
opacity: 0;
}
}
We apply this to our image with this CSS:
img {
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
img:hover {
animation-name: fadeOut;
}
Many of these properties are familiar from our discussion
of transitions. The new ones are:
animation-fill-mode – the “forwards” value of this property means to maintain
the “to” property values from the end of the animation going forward in time. The
default value of this property is “none,” which causes the properties to return
to their non-animated values at the end of the animation. (It’s possible to construct
the CSS above without using animation-fill-mode. Simply add “opacity: 0;” to the
img:hover rule to maintain the ending opacity at 0.)
animation-name – setting the animation-name property triggers the animation.
When the animation-name property is set, the
animation-delay time starts counting down. When animation-delay reaches
zero, the animation begins and continues for the
animation-duration. The
animation-timing-function behaves the same as the transition-timing-function
described above.
The power of CSS3 Animations lies in the ability to specify multiple keyframes with
properties and intermediate values that don’t have to stay within the bounds of
the start and end values. In CSS3 Transitions, intermediate values always progress
from the start to the end; they will never go outside that range. Animations do
not have that restriction.
This makes it possible to program a “bounce” such as shown in the markup and example
below.
#bouncingImage {
width: 400px;
height: 267px;
box-shadow: 2px2px5px0pxgray;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#bouncingImage:hover {
animation-name: zoomInBounce;
}
@keyframes zoomInBounce {
from {
transform: scale(1);
}
30% {
transform: scale(1.4);
}
40% {
transform: scale(1.15);
}
50% {
transform: scale(1.35);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1.3);
}
80% {
transform: scale(1.225);
}
90% {
transform: scale(1.275);
}
to {
transform: scale(1.25);
}
}
Move your mouse over the image to zoom it with a bounce effect.
The two examples shared in this post are unlikely to be things you adopt on your
site. Yet, well-designed transitions and animations are becoming an expected part
of a modern Web experience. Windows 8 Metro style uses fluid and subtle animations
extensively to help users better understand their interactions with the system.
These literally make Windows 8 Metro style apps feel more responsive to touch.
We hope the examples here, the IE Test Drive demos, and the growing number of articles
and examples elsewhere on the Web help you explore this new technology and add personality
to your Web site.
—Ted Johnson, Lead Program Manager for Graphics, Internet Explorer
Typing quickly and accurately is a critical part of the user experience for any piece of
software. When using a device without a physical keyboard, providing a great text input
experience is even more important. Windows 8 provides several capabilities to make text
input great on any device, and spellchecking is one of them.
Spellchecking in Windows 8 allows customers to identify misspelled words while
they are entering text, have commonly misspelled words fixed automatically, and take
corrective action on others. In Windows 8, spellchecking support is available to applications
across the entire operating system, including IE10. Of course, spellchecking will also be
available as an IE10 browser feature on all supported versions of Windows (including
Windows 7).
Auto-correction
IE10 has the first browser-based implementation of auto-correct.
In some cases, a misspelled word is so common that it is better to just correct the
word immediately, rather than wait for you to review the error later In the rare case that auto-correct changes something that you didn’t want changed,
you can undo the change via CTRL+Z (Undo) using the keyboard, or bring up the
auto-correction context menu using the mouse. In addition to using the mouse, the
auto-correction menu can be activated via the keyboard by moving the insertion point
inside of the word and pressing SHIFT+F10 (that key combo works to trigger any context
menu). From the auto-correction menu you can also prevent the word from being
auto-corrected in the future.
For auto-corrected words, press CTRL+Z to undo the change, or bring up a context
menu for additional actions
No spellchecking experience would be complete without the red squiggles
you’re familiar with from your favorite Office programs.
By default, as you enter text into any HTML textarea element (a multi-line input
box) or any region of editable HTML content, the spellchecking engine will be used
to check the last entered word. The word is checked against a dictionary associated
with the current keyboard input language. If that word is misspelled or repeated
it will be identified as a potential error using the familiar red squiggly underline.
The identification of potential misspelled or repeated words is done in the background
so that it does not slow your text entry.
The corrective actions menu has suggested alternate words and options to add the
misspelled word to your custom dictionary or ignore the word. This works across
all supported languages, including Portuguese (shown here).
The corrective actions menu will offer the most likely
replacements for the identified word. You can replace the identified word with the
suggested word in one step by selecting it from this menu. In addition you may choose
to:
Add to dictionary. Your Windows user account has a built-in custom dictionary (which
is initially empty). You may add frequently used words to this dictionary (in my
case, I always need to add my last name).
In Windows 8 this custom dictionary will be roamed to any other Windows
8 machine that you use via the cloud.
Ignore. The word will no longer be identified as a potentially misspelled
word on this page. After you navigate away from the current page, the list of ignored
words is cleared, and will again be flagged as a potential error.
Spellchecking in Your Language
Each of these spellchecking facilities (auto-correction, and word identification
with corrective action menus), use the spellchecking dictionaries installed on your
local PC. In the Windows
Developer Preview, all of the dictionaries for all the supported languages
are pre-installed. Many of the languages also include different language reform
variants that you can toggle between in the re-designed Language control panel.
All spellchecking options can be managed in the language control panel in Windows
8. On Windows 7, the spellchecking management experience for IE10 will be provided
by the browser instead; I'll describe this in more detail in a future post.
The Windows 8 language options dialog for Portuguese (Brazil), including language
reform variants
Internet Explorer 10 supports spellchecking in many common languages.
View a list of supported
spellchecking dictionaries and language/locales, including language reform variants.
There are sometimes needs for highly specialized spellchecking dictionaries, for example,
in specific industries with their own vernacular or for languages not commonly
spoken such as Latin. To support these scenarios, the Windows 8 spellchecking facility supports 3rd party spellchecking engines. When installed, IE10 and all other Windows
components will use the installed 3rd party spellchecking engine.
Web Developer Options
As alluded to earlier, textarea and contenteditable elements are spellchecked
by default; single-line input boxes (input type=text) are not checked by default
since many sites use them for username fields or other purposes not suitable for
spellchecking. We tried to pick good defaults, but if your Web site needs to change
any of these defaults, it can. The ‘spellcheck’ attribute defined by HTML5 allows
you as a developer to override the default spellchecking behavior for an element
and all of its children.
By adding the spellcheck=false attribute value on any element, you disable
spellchecking for all textarea, contenteditable, and input type=text
elements that are children of the given element (including the element itself).
Setting spellcheck=true enables spellchecking in the same scenario, and can
also be used to override the spellchecking setting from a parent in the element
tree. For example, if you want spellchecking disabled for all textarea elements
on a page, with one exception, you can add the spellcheck=false attribute
value to the HTML element, and then add a spellcheck=true attribute to the
textarea element that is the exception.
The spellcheck attribute gives Web developers the flexibility to tailor the experience to
the needs of their users.
Spellchecking and Multiple Languages
We know a lot of our customers speak and write in more than one language. It’s important
that the spellchecking engine use the right language when you are entering text,
and that it is easy to switch between languages when necessary.
In IE10, the selection of the spellchecking language is
determined by evaluating the following sources (in priority order):
The HTML lang attribute. The Web developer knows the design and intent of
the site and can control which parts of the page are associated with which language
(in multi-language scenarios).
The keyboard input language. Windows 8 makes it easy for users to specify the languages
they are interested in and to switch between them on the fly. To switch the language
used by the spellchecking engine while entering text, you simply change the input
language. With two or more languages configured (or two or more keyboard layouts)
simply press the Windows key + spacebar. On the touch keyboard, there is a key to
toggle the input language as well.
Window’s current display language (the language you are using to run Windows).
Switch between keyboard input languages via Win+Space or by the language key on
the touch keyboard
Spellchecking is an IE10 feature; while it is seamlessly integrated into Windows
8, we want to ensure that all users of IE10 benefit from this feature, including
our users of IE10 on Windows 7. I’ll share more about the IE10 on Windows 7 experience
in a future post.
Spellchecking in the browser will improve the accuracy and speed at which you input text
on the Web. I’ve really enjoyed having it available and I know that the people with whom I
correspond online also appreciate it!
—Travis Leithead, Program Manager, Internet Explorer
Building fast and functional sites is a challenge with which most Web developers are familiar. Loading a new page every time the user clicks a link is slow. Fetching all content dynamically effectively disables the back button. Working with hashes is better, but still not ideal. Internet Explorer 10 in the Windows Developer Preview eliminates the compromise by adding support for HTML5 History. The pushState, replaceState, and popstate APIs provide fine-grained control over the behavior of the back button and the URL presented to the user for dynamic content. Together these APIs help you improve the performance of your site without sacrificing usability.
If you’re not already familiar with the HTML5 History APIs, think of pushState as being the dynamic equivalent of navigating to another page. Similarly, replaceState is much like location.replace. The difference is these APIs leave the current page intact when updating the session history by storing states instead of pages. Both pushState and replaceState take three parameters: a data object, a title, and an optional URL.
history.pushState(data, title, url);
history.replaceState(data, title, url);
Note that the title parameter to pushState and replaceState is ignored by most browsers, including IE10. If you want, you can still provide this information since future browsers may expose it as part of their history UI.
Setting Custom URLs
The URL parameter to pushState and replaceState can be used to update the URL of the page without navigating. To illustrate, consider you’ve loaded “http://www.contoso.com/index.html.” Using hash changes, you can only append to the URL:
// Change to "http://www.contoso.com/index.html#about.html"
location.hash = "about.html";
But with pushState and replaceState you can point to a completely different page on your site without actually going there:
// Change to "http://www.contoso.com/about.html"
history.pushState(null, "About", "/about.html");
Make sure your server can handle all dynamic URLs you create so things like favorites still work. You can also add some data to the state object so you don’t have to parse the full URL later to restore the state:
The protocol, hostname, and port must match the current URL, but the path, query, and fragment are fair game for customization. This enables associating dynamic states with URLs that are easily backed by the server and work even when script is disabled. Ultimately, this lets you dynamically fetch and display only the data that changes from page to page while keeping the user experience intact.
Restoring Saved States
You should restore state after navigating the history (for example, when the user presses the back button) or reloading the page. Restoring state is accomplished by listening to the popstate event. The popstate event fires when state changes as a result of history navigation. At this point the data object for the destination state can be retrieved via history.state. In cases where the page is reloaded the popstate event will not fire, but history.state can still be accessed at any time during or even after the load. Thus code like the following can restore state at the appropriate times:
function init() {
/* ... */
// Handle page load and reload
loadState();
// Listen for history navigations (e.g. the back button)
// Grab the data for the current state so we can restore it
var state = history.state;
/* ... */
}
init();
Storing Complex, Dynamic Data
The data object stored in a state can be more than a string. Custom JavaScript objects and even some native types such as ImageData can also be used. The data provided is saved using the structured clone algorithm, which preserves complex relationships such as cycles and multiple references to the same object. This makes saving and restoring even complex objects a breeze as illustrated in this simple demo. In the demo, snapshots of a canvas are captured to create an undo stack using code like the following:
function init() {
/* ... */
// Handle page load and reload
loadState();
// Listen for history navigations (e.g. the back button)
// Take a snapshot of the current state as an ImageData instance
var state = context.getImageData(0, 0, canvas.width, canvas.height);
history.pushState(state, "");
/* ... */
}
function loadState() {
// Grab the data for the current state so we can restore it
var state = history.state;
/* ... */
if (state) {
// Restore the canvas to our saved ImageData state
context.putImageData(state, 0, 0);
}
}
To change this to keep track of the current state without tracking each change, you can use replaceState instead of pushState.
Size Considerations
HTML5 History makes pushing large amounts of data onto the stack easy if you’re not careful. For example, the undo demo above stores ~0.5MB per state and could easily use more if the canvas was larger. This data will consume memory as long the associated state entry remains in the session history, which can be long after the user leaves your site. The more data you store, the sooner a browser may start clearing your entries out to save space. In addition, some browsers also enforce a hard limit on the amount of data that can be stored with a single call to pushState or replaceState.
Cross-Browser Considerations
As always, use feature detection to handle differences in support across browsers. Since most of HTML5 History involves events and properties, the only new parts that truly require detection are calls to pushState and replaceState:
function stopDrawing() {
var state = context.getImageData(0, 0, canvas.width, canvas.height);
if (history.pushState)
history.pushState(state, "");
/* ... */
}
Such detection will at least keep your script from failing in older browsers. Depending on your scenario, you may want to start with full-page navigations and upgrade to dynamic content when HTML5 History is supported. Alternatively, you can use a history framework or polyfill to keep the back button working, but keep in mind that not everything can be emulated. For example, dynamic control over the path and query components of an URL can only be achieved via pushState and replaceState.
Note that some browsers support an earlier draft of HTML5 History with two notable differences from the current draft:
The popstate event fires even during page load
The history.state property does not exist
In order to support these browsers, you can fall back to reading the state information off the popstate event itself.
Wrap Up
Overall, the HTML5 History APIs provide a great deal of flexibility for building responsive and usable Web sites. With some care taken for legacy browsers, these APIs can be used today to great effect. Start testing them with your site in IE10 on the Windows Developer Preview and send feedback via Connect.
Vendor prefixes enable Web developers to experiment with new standards before they reach the Candidate Recommendation stage. I previously wrote how these prefixes are also a mechanism browser vendors use for handling timing conflicts between implementations and specifications. In building demos of new features for our IE Test Drive site and in various presentations, many of us on the IE team deal extensively with vendor prefixes.
This blog post describes a pattern we’ve used in some recent demos that’s making things significantly easier for us and has become a best practice. We’d like to share it with you and hear your thoughts on this approach or any others you consider a best practice.
Error-Prone Code
When using script to access CSS properties with vendor prefixes, it’s easy to end up with code that looks like this:
var elm = document.getElementById("myElement");
elm.style.msTransitionProperty = "all";
elm.style.msTransitionDuration = "3s";
elm.style.msTransitionDelay = "0s";
elm.style.webkitTransitionProperty = "all";
elm.style.webkitTransitionDuration = "3s";
elm.style.webkitTransitionDelay = "0s";
elm.style.MozTransitionProperty = "all";
elm.style.MozTransitionDuration = "3s";
elm.style.MozTransitionDelay = "0s";
elm.style.OTransitionProperty = "all";
elm.style.OTransitionDuration = "3s";
elm.style.OTransitionDelay = "0s";
While functional, it’s bloated, ugly, and error-prone.
Consolidating Vendor-Prefixed Properties to a Single Name
A better pattern is to define a method that loops through a list of property names and returns the first supported property or null if the browser doesn’t support any of them.
function FirstSupportedPropertyName(prefixedPropertyNames) {
var tempDiv = document.createElement("div");
for (var i = 0; i < prefixedPropertyNames.length; ++i) {
if (typeof tempDiv.style[prefixedPropertyNames[i]] != 'undefined')
return prefixedPropertyNames[i];
}
returnnull;
}
We then initialize a variable for each vendor-prefixed property we use, passing it an array of possible properties in the order we prefer to use them.
var transformName = FirstSupportedPropertyName(["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]);
var backfaceVisibilityName = FirstSupportedPropertyName(["backfaceVisibility", "msBackfaceVisibility", "MozBackfaceVisibility", "WebkitBackfaceVisibility", "OBackfaceVisibility"]);
var transitionName = FirstSupportedPropertyName(["transition", "msTransition", "MozTransition", "WebkitTransition", "OTransition"]);
var animationName = FirstSupportedPropertyName(["animation", "msAnimation", "MozAnimation", "WebkitAnimation", "OAnimation"]);
var gridName = FirstSupportedPropertyName(["gridRow", "msGridRow", "MozGridRow", "WebkitGridRow", "OGridRow"]);
var regionsName = FirstSupportedPropertyName(["flowFrom", "msFlowFrom", "MozFlowFrom", "WebkitFlowFrom", "OFlowFrom"]);
var hyphensName = FirstSupportedPropertyName(["hyphens", "msHyphens", "MozHyphens", "WebkitHyphens", "OHyphens"]);
var columnName = FirstSupportedPropertyName(["columnCount", "msColumnCount", "MozColumnCount", "WebkitColumnCount", "OColumnCount"]);
Then code throughout your site that uses these properties becomes something like this:
var elm = document.getElementById("myElement");
if (transitionName) {
elm.style[transitionName + "Property"] = "all";
elm.style[transitionName + "Duration"] = "3s";
elm.style[transitionName + "Delay"] = "0s";
}
else {
// fallback for browsers without CSS3 transitions
}
Note the simple feature detection enabled by returning null in FirstSupportedPropertyName.
That pattern also works when CSS properties have vendor prefixes. You can use a slightly different pattern for cases where a CSS value (for example, linear-gradient) has vendor prefixes:
function FirstSupportedFunctionName(property, prefixedFunctionNames, argString) {
var tempDiv = document.createElement("div");
for (var i = 0; i < prefixedFunctionNames.length; ++i) {
var radialGradientName = FirstSupportedFunctionName("backgroundImage", ["-ms-radial-gradient", "-moz-radial-gradient", "-webkit-radial-gradient", "-o-radial-gradient"], "(50% 50%, circle cover, black, white)");
Testing Sites that Use Vendor-Prefixed Properties
A common question is what property names to use if some browsers don’t yet support the property or if no browser supports the standards-based property without a prefix. There are a couple approaches, each with merit:
Always include all expected names, even if they don’t yet work in shipping browsers. The benefit of this path is that as browsers add support with their vendor prefix or add support for the non-prefixed property, your site will “just work” without changes. The risk is that the site will automatically pick up behavior you’ve never tested. A vendor prefix indicates the behavior isn’t finalized and all prefixed properties and the non-prefixed property may not behave the same, so as browsers add support your site might “just not work.”
Only include property names you can test. The benefit is that your site will behave the same as when you first wrote it even as browsers add support for new properties. The risk is that you have unnecessarily degraded functionality. For sample or demo sites, people can interpret this as a browser not having a feature at all.
You need to determine the right path for your site. In most of our demos we want to show off new Web platform functionality in any browser that supports it. And since small errors in these demos don’t create big problems for users, we usually choose option #1. On the other hand, if you have a production site where a change in behavior will cause a problem for your business, you may opt for the more risk-averse path.
Regardless of which path you choose, the one constant is testing. When using vendor-prefixed properties you’re leveraging early, often unstable functionality that can change even after a browser first introduces support for a property, so it’s critical to test with each browser update to make sure your site functions as expected.
—John Hrvatin, Lead Program Manager, Internet Explorer
Web graphics in SVG (Scalable Vector Graphics) format offer better quality display over a broader range of device sizes compared to bitmap-based graphics. SVG also has inherent accessibility making it the best choice for interactive graphics and those involving text.
SVG usage on the Web continues to grow. Last week at
SVG Open 2011, we had the opportunity to meet with and hear
from Web developers putting SVG to use in a wide variety of real-world applications.
These applications include data-driving charts, technical drawings, games, interactive
instructional diagrams, and geographic visualization of data.
Though the SVG specification itself is nearing a decade old, SVG wasn’t available
as an inline element in HTML until the HTML5 specification. As browsers support
SVG as part of HTML5, the next generation Web can use these technologies to enable
Web experiences previously available only with the use of plug-in technologies.
SVG’s easy integration with HTML markup, CSS, the HTML DOM, and JavaScript makes
it a natural choice for building integrated, interactive experiences that are stylable
and adaptable to different form factors. SVG is also the declarative vector
graphics technology for building
Windows 8 Metro style apps using HTML.
In this post, I offer ideas for
when to use SVG in your HTML5 Web sites and outline some best practices to help
you get started with SVG.
When to use SVG in HTML5
As the declarative graphics format in HTML5, SVG is designed for
graphics that need to scale, contain selectable text, are dynamic and interactive, or benefit
from being styled using CSS. (For a comparison of SVG and HTML5’s procedural 2D graphics element, <canvas>, see
Thoughts on when to use Canvas and SVG.)
Scalable Graphics
Graphics are used in different contexts and on different mediums. SVG is an excellent choice because fidelity is maintained at all resolutions—important for dealing
with different device form factors and high-quality printing. For instance, SVG
is a great format for logos as illustrated by the W3C HTML5 logo below.
Images containing text are better served as SVG than a raster alternative. Charts
and diagrams fall under this category. In addition to the added benefit of scalability,
the text in charts and diagrams retains the properties of text. It can be copied
and pasted, searched, and easily updated. Image headers containing decorative text
may be candidates for using SVG. WOFF fonts combined with a text stroke and gradient
or pattern fill enables customized text to remain selectable and indexed by search
engines.
Flow charts, for instance, tend to be composed mostly of text, which incidentally
serves as good search terms for the image. As can be seen in the screenshot below,
the text within an SVG chart can be selected; just like other text, it can be copied,
crawled by a search engine, or even used in conjunction with Accelerators in IE.
A flowchart showing selected text
Dynamic and Interactive Graphics
Dynamic and interactive graphics can include games, maps, graphs, seating charts,
and more. One use of SVG that Internet users frequently encounter can be found on
Bing and Google maps. When requesting directions, they draw a blue SVG path that
your car should follow, overlaid on a raster map image. SVG can be generated through
client-side scripting, which is great for making minor additions to existing images
as with mapping directions. SVG’s rich DOM support also makes it fantastic
for dynamically changing images. Charts can be updated in the browser as data changes.
Shapes can move and change size or color by altering their DOMs. Additionally, SVG’s
hit testing abilities mean that precise interactions with shapes can occur. Much
like with HTML elements, event handlers can be attached to an SVG element. However,
unlike HTML elements, mouse events will only be affected by mouse interactions on
the shape and not its entire rectangular bounding box.
Map showing driving directions: base map is a bitmap image, driving path is overlaid SVG
Formatting with CSS
The benefits of styling content with CSS are another core reason for using SVG. Every
shape in SVG is reflected in the DOM and contains all information about the graphic,
including the appearance of each shape. This makes it easy to update the styling
information about each shape. UI elements can benefit from using SVG as it allows
for non-rectangular shapes and its appearance is customizable. The fills, strokes,
and opacity of shapes can be modified via a new stylesheet, via script, or even
via a pseudo selector such as :hover.
These benefits of SVG are not mutually exclusive. For example, below is a map graphic
that displays data over time. It scales well and utilizes multiple stylesheets to
show data changes over time. On this map, only the colors of the states are changing. Each state is represented by a <path> element with an id
corresponding to its postal code. Using CSS selectors on these ids, the fill
color of the shapes is specified in stylesheets that are each applied as appropriate
when cycling through years. Election maps often show data trends in this color-coded
manner. You could easily envision live election result updates requiring only minor
modification of the graphic. These updates are simple, isolated, and small.
A choropleth map of the United States illustrating some data over time
Getting Started: Best Practices
Despite SVG’s similarities to HTML, some frequently made errors can easily be avoided.
Listed below are some common mistakes to avoid so that you don’t waste time figuring out what’s going
on.
HTML5 Doctype
If you are including SVG inline in HTML5, make sure you use the
HTML5 doctype<!DOCTYPE html>. This is a requirement of HTML5.
Without specifying the appropriate doctype, your page will not render in the expected
document mode in IE9 or IE10. As a result, your SVG content will not appear. Don’t forget
to specify the HTML5 doctype!
Default Overflow
Like other HTML elements such as <div>, the default overflow for a
top-level inline <svg> element is visible. (This is different from the default behavior of an <svg> element in XHTML, which is "overflow: hidden.") This default means that SVG content outside
the <svg> element’s bounding box will be visible. In some cases, this can
lead to unexpected behavior. You can remedy this by explicitly setting either the SVG attribute overflow="hidden"
on your <svg> element or by adding svg { overflow: hidden;
} to your document’s CSS block.
<svg>
default overflow is visible
<svg overflow="hidden">
SVG content is clipped
Default Text Baseline Position
If you are creating SVG by hand, you may not realize that the y attribute
of <text> and <tspan> elements refers to the baseline of your text.
If you do not specify the y attribute, text is positioned at y=0 relative to its containing transform. This could mean the text baseline is positioned at the top of the SVG container and end up being invisible if you’ve set overflow="hidden" as described above. So, if you don’t see your text, check to
see if the y attribute is specified with a positive value.
<text> (default y=0)
<text y="25">
Accessibility
Achieving a graphic fully accessible is challenging but because SVG supports adding descriptive text and titles to individual SVG graphic elements and groups of elements, it is possible to create an SVG graphic with much greater accessibility than an HTML <img> element’s alt text.
Without any additional markup, text content is naturally readable by screen readers. For graphic elements, adding <title> and <desc> tags as child elements of
the shape or group allows screen readers access to that descriptive text. Like the title attribute of an HTML <img> element, SVG title elements display as a tooltip with the mouse is hovered over the containing shape.
The following example illustrates the <title> element on a simple drawing.
In addition, the focusable
attribute can be used to enable keyboard access to these descriptions. If focusable="true",
a tab stop will be created for that element, making it easy for a keyboard-centric
user to focus on the shape and obtain its information from an accessibility tool.
Additionally, tabbing to and from these elements will trigger the focusin
and focusout events.
MIME type
If you are serving up standalone SVG files, ensure that the server is
configured to be serving up the files with the proper MIME type. The correct SVG
MIME type is image/svg+xml. This is not to be confused with image/svg-xml.
Some already existing content may use the incorrect MIME type due to the Adobe SVG
Viewer’s acceptance of it. Make sure you are using the correct MIME type.
SVGZ files
Similar to the above, if you are using compressed SVG, you should make the line
Content-Encoding: gzip is in your header response of the SVG file, much like
how other gzip-encoded files should have this header response line.
Scaling: viewBox and preserveAspectRatio
To ensure your graphics will scale the way that you’d like it to, specify the viewBox attribute
on your top-level <svg> element. With a viewBox specified, changing the height
and width of the graphic will scale it rather than clip the SVG image.
The preserveAspectRatio
attribute can also be used to control the scaling of images within SVG. The syntax
of this attribute is preserveAspectRatio="alignmeetOrSlice". These
two parameters describe the how an image is to fit into its containing <image>
element and where the image is positioned within the container. By setting preserveAspectRatio="none",
the SVG <image> element behaves like the HTML’s <img> element as illustrated
below.
Left: image at its original aspect
ratio; Right: same image stretched into a 200 x 81 container with
preserveAspectRatio="none"
Things get interesting when preserveAspectRatio is not "none".
In such cases you control how the image aligns within a container of a different
aspect ratio than the image itself. The meetOrSlice parameter determines
whether the image is scaled down to fit within the container (meet) or scaled
up to fill the container (slice). The align parameter specifies how
to align the image within its container. Three options—min, mid, and max—are
provided for each direction—x and y. This yields nine combinations of alignments
specified as:
xMinYMin – align image in left-top corner of container
xMidYMin – align image at center-top of container
xMaxYMin – align image in right-top corner of container
xMinYMid – align image at left-middle of container
xMidYMid – align image at center-middle of container
xMaxYMid – align image at right-middle of container
xMinYMax – align image in left-bottom corner of container
xMidYMax – align image at center-bottom of container
xMaxYMax – align image in right-bottom corner of container
The following examples show how an image is aligned for its controlling alignment.
Note that align only matters in one dimension at a time; the image exactly fills
the container in the other dimension so it doesn’t matter whether that dimension is min, mid, or max.
xMin
xMid
xMax
YMin
YMid
YMax
meetOrSlice parameter = "meet":
image is scaled down to fully fit within the container leaving empty space if the
container aspect ratio differs from that of the image
xMin
xMid
xMax
YMin
YMid
YMax
meetOrSlice parameter = "slice":
image is scaled up to fully fill the container cuttin off some of the image if the
container aspect ratio differs from that of the image
SVG’s preserveAspectRatio property gives you the control to define both the scaling and positioning
of an image within its container. preserveAspectRatio="none" yields behavior common with HTML.
Scripting: SVG DOM vs. Core DOM
The getAttribute() and setAttribute() methods come from the DOM Core specification
and apply to HTML and XML alike, including SVG. These methods are familiar, easy,
and consistent ways to make changes to element attributes. Regardless of the attribute
to be changed, setAttribute(attribute, value) can always be used.
However, performance gains can often be attained by taking advantage of the SVG
DOM. SVG supports its own DOM that exposes a multitude of attribute values and methods.
Due to the nature of the SVG DOM, modifying attribute values requires a steeper
learning curve than simply using setAttribute(). But the SVG DOM provides direct
access to attribute values, which both improves performance and can make value manipulation
simpler.
For instance, the following function doubles the radius of a circle element using
setAttribute():
By contrast, using the SVG DOM, achieving the same effect looks like this:
function doubleCircleRadius(circle)
{
circle.r.baseVal.value *= 2;
}
With the setAttribute() and getAttribute() methods of the Core DOM, parsing will
often be required to manipulate values. Modifying values based on the existing ones
is easier done with the SVG DOM.
Because the SVG DOM accesses attributes directly instead of dealing in strings, value
type awareness is necessary and makes scripting with it more complex.
Below is a table describing a generalization of how to access a few common attributes:
The SVG DOM interfaces are documented at the
end of each chapter in the SVG specification.
Tools & Libraries
Though SVG is readable and can be crafted by hand, it is still largely visual and
often unintuitive to translate a visual graphic into a mathematical description
of its shape. Using vector design tools already in existence today, static SVG images
can easily be created. Inkscape is an option
available for free download.
Adobe Illustrator, often used by professional Web developers to create vector
images, can save files in the SVG format.
Microsoft Visio, also capable of exporting in an SVG format, is tailored
towards developing business diagrams and flowcharts. If optimization is important
to you, note that these applications do not output SVG in the simplest format;
their output contains proprietary namespace elements and attributes that allow for round-trip editing but are not useful for final production
graphics. Additional markup cleanup may be desired for a reduction in file size
or for easy styling.
In addition to Inkscape, another free SVG editor is
SVG-edit. It is a JavaScript SVG editor and uses your browser to render the
SVG creation! The
latest alpha version has some great features. Try it in IE9!
IE9 supports WOFF fonts instead of SVG Fonts. WOFF
fonts bridge the gap between HTML and SVG, reducing the learning curve
for SVG and integrating SVG as a part of HTML. This makes it easy to apply the
same custom fonts to both your HTML and SVG content. For those already acquainted
with SVG fonts, Font Squirrel
can convert your SVG Fonts to the WOFF format.
Another common problem is providing fallback support for older versions of IE that
do not support SVG. SVG libraries on the Web often provide fallback support and
abstract the process away from you. RaphaelJS
is one of the most widely known that displays VML in older versions of IE. Charting
libraries that provide graceful fallback, such as
Highcharts are springing up all over the web.
These are just a few basic resources to help you get started. The tools and
libraries in existence today fall into two camps: (1) creation of
static, standalone SVG content and (2) programming dynamic, script-driven, and script-created
SVG. Both have their place in your toolbox. For those of you pioneering SVG on the Web, you’ll
find there is a lot to play around with.
Call to Action
You’ve
seen
SVG
inuse.
With its benefits outlined and some practical tips to avoid early roadblocks, there’s
every reason to start experimenting with SVG to see how you can take advantage of
it on your HTML5 Web site. Post some of your creations or links to other libraries – we’d love to see them!
—Jennifer Yu, Program Manager, Internet Explorer Graphics
Windows 8 Metro style apps let developers take their Web sites’ experiences
to the next level. With Metro style apps, developers can build experiences that are more immersive, beautiful, and
better connected with other apps and the rest of Windows.
Apps can utilize the Windows Runtime to deliver features beyond what’s possible
in a browser alone such as seamless access to local files and folders, integrating with Windows 8 Charms for sharing and search, and interacting with locally-connected devices. The Windows Store will deliver a great end-user experience to
browse, find, and get apps users care about. This post describes the features of
Metro style Internet Explorer in Windows 8 that connect Web sites to apps. It also describes
the mechanisms Web developers use to create that connection.
Browsing for Apps
Browsing the Web is a natural way to find and connect to Metro style apps. Metro
style Internet Explorer lets you know when apps for your
favorite sites are available. Starting from the address
bar, you can seamlessly acquire apps from the Windows Store and you can switch to
installed apps from their associated Web sites.
After building a Metro style app, developers can reach their existing Web site audience
by adding simple markup to their site that establishes a connection to their apps.
This connection makes it easy for users discover your app directly from the Metro
style Internet Explorer address bar when they visit your site.
Get
the App
You can simply browse to your favorite Web sites and discover they have apps associated
with them through the site icon. The site icon turns into a button when IE discovers
an app for the site. Tap on it to take you to the app’s
description in the Windows Store.
Switch to the App
When you navigate to a Web site with an associated installed Metro style app,
you can directly switch to that app using the site icon button. For example, a friend
shares a link to Web content via email or social media and the link launches the
Metro style browser. If there is an app associated with this site, you can tap on
the site icon and select “Switch to the app,” which launches it and takes you to
very same content within the app.
See this in action in the following video:
This video shows how Metro style Internet Explorer connects Web sites to Windows
8 Metro style apps
Behind the Scenes
Web developers can associate their Web sites with their Windows 8 apps through simple
markup on the site by including the following meta tags in the <head> element
of their Web pages. Both tags are required
for Metro style Internet Explorer to provide the site icon button.
When these tags are present, Metro style IE uses them to identify
if the app is already installed on the PC and, if not, to provide a direct link to the app description page in the Windows Store. The desktop
version of IE10 on Windows 8 does not provide this linkage.
These two required tags are among the five possible <meta> tags available for
controlling site/store/app interaction. Below is a complete table of the tags.
name
content
msApplication-ID
Required. Package-relative app-ID from Application
Manifest. Used to link your site to your app.
msApplication-PackageFamilyName
Required. Package Family Name of the app created by Visual Studio when the app is
published. Used to link your site to the store.
msApplication-Arguments
Optional. Argument string passed to your app. By default, IE passes the URL of the
Web page but you can use this to pass a context-relevant string.
msApplication-MinVersion
Optional. Enforces a required minimum version for the installed app. If the user
tries to switch from the Web page to an outdated app, he or she is first taken to
the Store to update the app.
msApplication-OptOut
Optional. Allows pages to opt-out of all or parts of this functionality:
“install” prevents offering the user to get the app when they do not have it installed
“switch” prevents offering the user to switch to an already installed app
“both” prevents both offers
Processing msApplication-Arguments
Developers can build the best experience for consumers by ensuring that the switch from the site to the app is
contextual. For example, in the above video, when the user switches to the app while reading
a review of a phone on the Web site, the app automatically navigates the user to
the phone review within the app. This provides users with a continuous experience
from the site to the app.
msApplication-Arguments enables this. The content string of this meta tag
is passed to the app as an argument string. The app parses this parameter and navigates
users to the relevant in-app content.
The following code fragment shows how to handle this parameter in a Metro style app
written in HTML/JavaScript:
// Function available
in default.js file in Visual Studio Express 11 templates provided in Developer Preview
Build
WinJS.Application.onmainwindowactivated =
function (e) {
if (e.detail.kind ===
Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Insert this code
to handle incoming argument when Metro style Internet Explorer launches the app
if (e.detail.arguments)
{
// Parse the value
of the msApplication-Arguments string
// Direct incoming
user to relevant in-app content
}
}
}
This fragment could be used in a Metro style app written in XAML/C#
// Function available in App.xaml.js
file in Visual C# templates provided in Developer Preview Build Visual Studio Express
11
// Insert this to handle incoming
arguments, when Metro Style Internet Explorer launches the app
if (!String.IsNullOrEmpty(args.Arguments))
{
// Parse the value of the
msApplication-Arguments string
// Direct incoming user to
relevant in-app content
}
}
}
Conclusion
Metro style Internet Explorer lets users discover and experience the Web through
associated Metro style apps. It enables Web developers to drive their existing site
audience to their apps, giving them new opportunities to engage their users with
an immersive experience on Windows 8.
—Rahul Lalmalani, Program Manager, Internet Explorer
Touch interaction with Web sites and apps has the opportunity to improve their usability and ubiquity as the Web and Windows 8 Metro style apps play a key role on tomorrow’s touch-enabled devices.
This post explains how Web developers can use the new IE10 pointer event model along with the iOS touch event model and the W3C mouse event model (as extended) to create a cross-browser, common-code handler for pointer, touch, and mouse input.
A little background: I’m fortunate to have a Samsung 700T Windows Developer Preview tablet PC. With it, I’ve been able to enjoy the IE Test Drive multi-touch demos Touch Effects and Lasso Birds. Like me, you may have noticed that Lasso Birds works across different devices and browsers in addition to IE10. For example, its multi-touch works on iOS devices. In this post, I’ve taken some of the patterns from Lasso Birds and generalized and extended them to include older versions of browsers.
The result of my experimentation is below. It should work in your browser. A discussion of the coding patterns and lessons learned follows below the demo.
The Code
The basic algorithm for drawing with the mouse model is straightforward:
var drawingStarted = false;
function DoEvent(eventObject) {
if (eventObject.type == "mousedown") {
drawingStarted = true;
startDraw(eventObject.pageX, eventObject.pageY);
}
else if (eventObject.type == "mousemove") {
if (drawingStarted) {
extendDraw(eventObject.pageX, eventObject.pageY);
}
}
else if (eventObject.type == "mouseup") {
drawingStarted = false;
endDraw();
}
}
The only change needed to make this work with IE10’s pointer events is to add awareness that multiple pointers can be down at the same time, each identified by a different pointerId value. The IE10 pointer model fires separate MSPointerDown, MSPointerMove, and MSPointerUp events for each pointer that changes state.
var drawingStarted = {};
function DoEvent(eventObject) {
eventObject.preventManipulation(); // without this, instead of drawing, you pan
Adapting the original mouse model to Apple’s iOS touch event model requires that you iterate through the list of changedTouches for each touchstart, touchmove, and touchend event because, in the iOS model, state changes that occur at the same time are bundled into one event. Like the IE10 pointer model, a unique identifier identifies each touch point.
var drawingStarted = {};
function DoEvent(eventObject) {
eventObject.preventDefault(); // without this, instead of drawing, you pan
for (var i = 0; i < eventObject.changedTouches.length; ++i) {
Merging these three individual algorithms requires noting the differences between the event names and the unique pointer identifier attribute names and accounting for the lack of an identifier in the mouse model.
In the merged model, below, I also add a check that the “move” position has actually changed because the IE10 pointer model streams MSPointerMove events with the same x, y position when a touch point is held down but not moved. By filtering out these redundant moves, I eliminate calls to extendDraw() that do nothing. I implemented this check by storing the last x,y position from a start or move in the lastXY object and, by checking that a lastXY entry exists for a particular id, lastXY replaces the drawingStarted object used in the previous two examples.
var lastXY = { };
function DoEvent(eventObject) {
// stop panning and zooming so we can draw
if (eventObject.preventManipulation)
eventObject.preventManipulation();
else
eventObject.preventDefault();
// if we have an array of changedTouches, use it, else create an array of one with our eventObject
The examples above specifically ignore the issues of registering to receive the events or ensuring that they apply to the drawing target. Making this work for real and with all browsers—including versions of Internet Explorer before IE9—requires a bit more work. Interested parties can peruse the final version of my multi-browser, multi-touch drawing class here.
By coding for touch alongside mouse, Web developers can assure their sites work with all browsers—whether desktop, tablet, or phone.
—Ted Johnson, Graphics Program Manager Lead, Internet Explorer
Scalable Vector Graphics (SVG) provides Web developers with a declarative, markup-based language for building rich, interactive content as part of their Web sites. With SVG Filter Effects, supported in IE10 in the Windows Developer Preview, developers have a collection of powerful, image-based effects that apply to all SVG elements. Like all Web page content in IE9, SVG Filter effects in IE10 are built with hardware-accelerated rendering, resulting in stunning performance and opening up new opportunities for Web developers to create exciting content for end-users.
SVG filters demo on IE Test Drive site
Introduction to SVG Filters
SVG Filter Effects expand the graphic capabilities of the Web. An SVG Filter defines
an operation on a graphical input. Just like other HTML elements, filters are
declarative in nature and have a supporting DOM for dynamic manipulation. A filter
is applied to an SVG element via the filter attribute, in the form of filter="url(#filterId)",
or it can be applied as a CSS property filter:url(#filterId). Each filter is composed
of one or more filter primitives, which are the basic building blocks for
creating nifty effects. Each applies a fundamental effect to a graphic. To form
more complex effects, filter primitives can be chained together, feeding the output
of one to the input of another. When a filter is applied to an SVG element, that
SVG element is used as the source graphic for the filter or the first filter in a chain.
An image of an SVG pig before (left) applying an SVG filter and after
(right) applying an SVG filter
There are 16 different filter primitives. They enable effects ranging from providing
light sources to applying matrix transformations to adding a Gaussian blur and
much more. SVG Filters make it easy to manipulate and apply Photoshop-like effects to
SVG elements. Akin to the rest of SVG, the results are scalable, retaining high quality
at any resolution. The filter definition is completely reflected in the DOM as is the original
SVG element. Effects can easily be removed by removing the filter attribute. The original,
unfiltered image can be attained in this manner. ilter primitives vary
widely to cover a large scope of possibilities but there are commonalities between
them. Most filter primitives take one or two input parameters. These inputs typically
reference the source element, the source element’s alpha channel, or the output
of another filter primitive. Having a choice of inputs increases the range of possible
effects.
All filter primitives let you specify an identifier for its output so that output
can be referenced later. Although filter primitives use the output of the previous
filter primitive by default, filter chains don’t have to be completely linear. In
fact, more complex filter chains, especially ones that use filter primitives with
multiple inputs, often aren’t.
Here’s a simple filter primitive in action:
The feColorMatrix filter primitive applies a matrix transform on the RGBA values
of every pixel on the input. A custom matrix can be defined, or a keyword can be
used. With it, SVG elements can easily be given a greyscale look or otherwise have
their colors altered. Below is an example of the hueRotate keyword being used, and
shifting the pixel hues 180 degrees to the opposite side of the color wheel.
<filterid="myHueRotate">
<feColorMatrixtype="hueRotate"values="180"/>
</filter>
<gid="myPig"filter="url(#myHueRotate)">
<!-- ... -->
</g>
An image of an SVG pig before (left) applying an feColorMatrix filter and after
(right) applying the feColorMatrix filter
Examples of Common SVG Filter Primitives
Below is an example of a lighting effect. There are two light filter primitives to
choose from: feDiffuseLighting and feSpecularLighting. There are also three light sources available: feDistantLight,
fePointLight, and feSpotlight.
An image of an SVG pig before (left) applying an lighting filter and after (right)
applying the lighting filter
As you can see, the lighting filter alone produces a greyscale image of a light map.
A spotlight filter is located in the upper left hand corner at coordinate (0, 0,
50) and is shining towards the lower right hand corner, creating the grey shape on
the black rectangle. The light filter becomes much more useful when it is used in
conjunction with another filter:
An feComposite filter primitive is tacked onto the end of the filter chain. You’ll
notice that it takes two inputs: SourceGraphic, the original image of the pig to
which the filter is applied, and the result of the lighting filter. The feComposite
filter primitive performs a compositing operation on the two inputs. It’s very useful
for compositing multiple filter primitive outputs together, such as creating a more
complex light map from multiple light sources. In this case, the result of the lighting
filter is multiplied with the pig graphic, resulting in the below graphic: a spotlight
on a pig.
An image of an SVG pig after applying the lighting filter and multiplying it with
the original image. Left: transparent background. Right: filter is applied to the SVG pig and a white <rect> behind it.
With the feComposite filter, an ‘over’ compositing operation is easy to achieve.
That is, it is easy to the composite the results of several filter primitives on
top of each other to form a single image. The <feMerge> element is a key filter
primitive, as it achieves this exact behavior – compositing the results of several
filter primitives on top of each other. <feMerge> simplifies this process with <feMergeNode>
child elements, enabling more than just two filter primitive results to be composited
with the ‘over’ operation at a single time.
Another important filter primitive to point out is the feImage filter primitive, as it makes
it possible to bring additional images into the filter. It can be used to reference
an external image or other svg elements. The image can then be used as an input
to another filter primitive.
An image of an SVG pig after applying a filter that multiplies the image with a
photo of the sky
These were just a few examples of SVG filter primitives. A complete list of filter
primitives can be found in the
SVG Filter Effects specification.
When to Use SVG Filters
First, SVG Filters can be used within image and design tools to make SVG elements
more interesting. They can provide a sense of depth or create appearances that
are otherwise not possible with SVG. It can also be used to achieve a variety of
scenarios outside of illustrating tools.
A commonly desired effect on the Web is the CSS3 text-shadow effect. Although text-shadow
doesn’t apply to SVG text, the effect can be replicated using SVG Filters.
This filter creates a drop shadow effect by taking the pig graphic, offsetting it
by 5 units in the x and y directions, applying a Gaussian blur, changing the color
of the shadow to a bluish green, then compositing the original pig image with the
shadow. It’s easy to create a shadow effect for text or images within SVG.
An image of an SVG pig with a shadow effect applied
In addition to adding dimension to SVG’s flatness, the filter effects can easily
be applied to raster images by bringing them into an <svg> element via the
<image> element. It’s great for client-side, dynamic image effects. Replacing
the image with another one is simple. It’s also easy to remove, intensify, or modify
a filter effect through the DOM.
An image of an SVG pig with an Inkscape-generated SVG filter applied
If your browser supports SVG Filters, you can click here to see the
light changing on the pig above with a single attribute change:
light1.setAttribute("elevation",
currentValue);
The filter attribute is a presentation attribute, which means it can be applied to
elements through CSS and has all the benefits of styling through CSS, including
being able to apply effects using the hover pseudoselector.
Try Them Now
We continue to improve the SVG Filters implementation in IE10. For example, there is a known issue that filters applied
to text within <tspan> or <textPath> elements do not work in the Windows
8 Developer Preview. This is an issue that will be remedied in future builds. You can try out SVG Filters in IE10 now with the Windows Developer Preview and provide your feedback on Connect.
Try the
SVG Filter Effects demo on the IE Test Drive site to get a feel for how filters
work or read more about it in the
IE10 Developer Guide. You can even write your own stack of filter primitives
to create a custom effect! Writing complex filters can be a daunting task. Developers familiar with graphics or having a strong background in math might enjoy trying that for yourself. Others may prefer using applications
like Inkscape, which have preset SVG Filters that can
be toggled and configured. With the right combination of filters, a myriad of desirable effects
can be achieved. We look forward to seeing what you build!
The promise of HTML5 is a Web that works for everyone. Media accessibility through captioning is an important part of that promise and an area that is still emerging through standards work. Using the proposed HTML5 track element, developers can add captioning to HTML5 video by pointing to a caption file that contains a written representation of the dialog or actions in the video. Once the standards for captioning converge, there will be less need for external add-ons to publish accessible video content.
The following HTML fragment shows how the track element works:
The W3C HTML5 specification allows for multiple caption formats. Internet Explorer 10 in the Windows Developer Preview supports the <track> element, but does not download or display any caption files yet. We use this implementation to prototype how different caption formats can be supported.
Even though we are not yet at the stage of a final HTML5 spec, it is stabilizing. In order to provide better feedback on <track> and caption file formats, the Internet Explorer and TwC Accessibility teams partnered to build a prototype that uses the element to display captions and descriptions on a video.
We wanted to test a scenario were multiple formats are used to gather more feedback, so we built the demo in such a way that both TTML-1.0 and WebVTT can be used. WebVTT originated from W3C discussions last year after a need for simple caption authoring was identified. TTML is already an established standard for full-featured video captioning and supported in Adobe Flash and Microsoft Silverlight. It is used on Netflix, Hulu and other sites that display broadcast content.
The prototype uses the video and track elements to show how TTML and WebVTT formats can be used to enable captions and descriptions on a video playback. The prototype supports all HTML5-enabled browsers.
You can interact with the prototype at the HTML5 Labs site. Use View Source or your browser’s developer tools to inspect the Javascript that parses the TTML and WebVTT formats.
As always, we welcome your feedback.
—Frank Olivier, Senior Program Manager, Internet Explorer
The October 2011 Cumulative Security Update for Internet Explorer is now available via Windows Update. This security update resolves eight privately reported vulnerabilities in Internet Explorer. The most severe vulnerabilities could allow remote code execution if a user views a specially crafted Web page using Internet Explorer. An attacker who successfully exploited any of these vulnerabilities could gain the same user rights as the local user. Users whose accounts are configured to have fewer user rights on the system could be less affected than users who operate with administrative user rights. This security update is rated Critical for Internet Explorer on Windows clients and Moderate for Internet Explorer on Windows servers. For more information, see the full bulletin.
Most customers have enabled automatic updating and do not need to take any action. We recommend that customers, who have not enabled automatic updating, enable it (Start Menu, type “Windows Update”). We recommend that administrators, enterprise installations, and end users who want to install this security update manually, apply the update immediately using update management software or by checking for updates using the Microsoft Update service.
Get
the App
Switch to the App
