[This documentation is preliminary and is subject to change.]
Windows Internet Explorer 10 Consumer Preview, as well as Metro style apps using JavaScript in Windows 8 Consumer Preview, adds support for several new Cascading Style Sheets (CSS) features, including new advanced layout, visual effects, and panning and zooming capabilities. This trend began with Windows Internet Explorer 8 (full compliance with the Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) standard) and continued with Windows Internet Explorer 9 (support for CSS rounded corners, multiple background images, new color models and opacity, Cascading Style Sheets, Level 3 (CSS3) Fonts and Web Open Font Format (WOFF), 2-D Transforms, Media Queries, CSS3 Namespaces, and more. Internet Explorer 10 continues this progress by introducing support for the following CSS features:
- Advanced Layout
- Visual Effects
- Panning and Zooming
- Removal of Style Sheet Limits
- Specifying Selectable Text
Important These features work identically in Internet Explorer 10 and Metro style apps using JavaScript.
Advanced Layout
Internet Explorer 10 and Windows 8 introduce several new methods to lay out your webpage or Metro style app using JavaScript with CSS. These methods include:
- CSS Exclusions: Wrap text so that it completely surrounds elements, instead of limiting elements to floating to the left or right of text.
- CSS Regions: Take a single stream of HTML content that includes both text and images, and stream that content into multiple empty containers defined in a standard HTML document.
- CSS3 Multi-column Layout: Flow content into multiple columns that allow for a gap and optional rule between them.
- CSS3 Flexible Box ("Flexbox") Layout: Takes the available space into account when defining box dimensions, thereby enabling relative sizes and positioning.
- CSS3 Grid Alignment: Divide space for major regions of a webpage or web app, and define the relationship between parts of an HTML control in terms of size, position, and layer.
CSS3 Exclusions
Note In previous pre-releases of Internet Explorer 10 and Windows 8, CSS Exclusions were called "positioned floats."
CSS Exclusions are new in Internet Explorer 10 and Metro style apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.
Support for CSS Exclusions in Internet Explorer 10 and Metro style apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application like Microsoft Word or Adobe InDesign.
Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Metro style apps using JavaScript, such as CSS Grid Alignment, CSS3 Multi-column Layout, and CSS Flexbox Layout. CSS Exclusions are defined in the World Wide Web Consortium (W3C)'s CSS exclusions and shapes draft.
To learn more about CSS Exclusions and how to implement them, see Exclusions.
For a hands-on demo of CSS Exclusions, see Hands On: CSS Exclusions on the IE Test Drive.
CSS3 Regions
CSS Regions is a page layout feature for Metro style apps using JavaScript in Windows 8 and for Internet Explorer 10. Using it, developers and designers can take a single HTML content stream of text and images and segment that stream into multiple empty containers defined in a standard HTML template. "HTML templates," in this context, are documents that are empty of original content, but are instead composed primarily of empty containers that are sized and positioned to give incoming content a specific layout.
This allows for a continuous content stream to be restructured into a layout more suited, for instance, for tablet consumption.
CSS Regions are defined by the W3C in the CSS Regions specification, which is currently a Working Draft.
Within a single page, CSS Regions allows web developers to develop complex content layouts equivalent to what might be seen in a magazine or newspaper, where multiple regions of the same flow of content (text, related pictures, video, and so on) are shaped around unrelated content elements, such as alternate stories or advertisements.
Furthermore, CSS Regions enables content placed in a target container to take on the styling of that container, even if it is independent of the content source formatting.
To implement CSS Regions, you first need an HTML file to serve as your content stream. It is a standalone HTML document that contains its own Document Object Model (DOM) and its own CSS styling. In the following diagram, the content stream is represented by the file "content.html".
You then need an HTML document to serve as the host for the content stream. This host document, or master page, is responsible for sizing and positioning the CSS regions, as well as defining the flow identifier into which the content stream will flow. In the following diagram, the master page is represented by the file "master.html."
When the master page is fully rendered, it contains connected regions that have the contents of the stream within them. It's important to remember that this fragmentation is for presentation purposes only, and does not affect the DOM structure of the content stream document.
To learn more about CSS Regions and for implementation instructions, see Regions.
For a hands-on demo of CSS Regions, see Hands On: CSS3 Regions on the IE Test Drive.
CSS3 Multi-column Layout
Internet Explorer 10, as well as Metro style apps using JavaScript in Windows 8, introduces support for the CSS Multi-column Layout Module. As of this writing, the CSS Multi-column Layout Module is a W3C Candidate Recommendation. Multi-column layout enables content to be flowed into multiple columns that retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window.
A multi-column element is defined by the W3C as an element whose column-width or column-count property is not set to "auto" and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Column boxes contain rows, which are ordered in the direction of the multi-column element. Every column box has a column height and a column width. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.
The columns property is the most frequently used of the multi-column properties. It is a shorthand property for both the column-width and column-count properties. For instance, the following selector has added the columns property and has set it equal to "auto 12em". This means that the multi-column element will have a column-width of 12 ems and a column-count of "auto".
<style type="text/css">
#multicol3 {
columns: auto 12em;
}
</style>
You can view this selector applied to a large block of text. (Internet Explorer 10 or a browser compatible with unprefixed CSS3 multi-column properties is required for this page to render correctly.)
For more information about multi-column layout using CSS, as well as descriptions of all of the multi-column properties, see Multi-column Layout.
For a hands-on demo of CSS3 Multi-column Layout, see Hands On: Multi-column Layout on the IE Test Drive.
CSS3 Flexible Box ("Flexbox") Layout
Internet Explorer 10 and Metro style apps using JavaScript in Windows 8 introduce support for the CSS Flexible Box Layout Module ("Flexbox"). The Flexbox module is, as of this writing, a W3C Working Draft. (The implementation of Flexbox in Internet Explorer 10 and Metro style apps using JavaScript is based on the July 23, 2009 version of the Flexbox Working Draft. Flexbox implementations in future pre-releases might change according to changes in the specification.) It adds to the four basic layout modes defined in CSS2.1 (and enabled via the display property): block layout, inline layout, table layout, and positioned layout. Flexbox layout is intended for laying out more complex webpages and is especially useful for making the relative position and size of elements stay constant, even as screen and browser window sizes vary and change. It can lessen the reliance on floats, which are more complicated to position and size correctly.
Flexbox layout takes the available space into account when defining box dimensions, which enables relative sizes and positioning. For example, you can ensure that extra whitespace in a browser window is equally distributed to the size of multiple child elements, and that those child elements are centered in the middle of the containing block.
With Flexbox layout, you can:
- Build a layout that is fluid—even when using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
- Specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements.
- Specify how excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements.
- Specify how excess space perpendicular to the layout axis of an element can be shaped around the element—for instance, extra space above or below buttons that have been laid out side-by-side.
- Control the direction that elements are laid out on the page—for instance, top-to-bottom, left-to-right, right-to-left, or bottom-to-top.
- Reorder elements on the screen in an order that is different from how they are specified by the DOM.
To learn more about CSS Flexbox layout, see Flexbox Layout.
For a hands-on demo of Flexbox layout, see Hands On: CSS3 Flexible Box Layout on the IE Test Drive.
CSS3 Grid Alignment
Like Flexbox, CSS3 Grid Alignment ("the Grid") enables more layout fluidity than is possible with positioning using floats or script. It enables you to divide space for major regions of a webpage or web app, and to define the relationship between parts of an HTML control in terms of size, position, and layer. This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window.
CSS3 Grid Alignment is, as of this writing, still in development. The implementation of CSS3 Grid Alignment in the current pre-release is partially based on the CSS Grid Positioning Module Level 3, which is currently a W3C Member's Only Draft. Be aware that Grid Alignment implementation in future Internet Explorer 10 pre-releases and Metro style apps using JavaScript might change according to changes in the specification.
Because the Grid enables you to align elements into columns and rows but has no content structure, it also enables scenarios that are not possible with HTML tables. By using the Grid in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more.
To learn more about CSS3 Grid Alignment, see Grid Alignment.
For a hands-on demo of Grid Alignment, see Hands On: CSS3 Grid Layout and The Grid System on the IE Test Drive.
CSS Device Adaptation
As a web (or Metro style app using JavaScript) developer, you are faced with a dilemma: Code your site to work with as many devices, sizes, and resolutions as possible; or risk alienating users by potentially allowing your content to be either clipped (in fixed layouts) or jumbled confusingly (in fluid layouts). The @-ms-viewport rule, in combination with CSS Media Queries, attempts to help solve this dilemma by enabling web developers and developers of Metro style apps using JavaScript for Windows 8 to optimize the layout of sites and apps for different devices with minimal effort.
The @-ms-viewport rule is based on the @viewport rule, which is defined in the CSS Device Adaptation specification. This specification is currently in the Working Draft stage. Be aware that the implementation of @-ms-viewport in Internet Explorer 10 and Metro style apps using JavaScript does not map exactly to that defined in the specification. This may change as both Internet Explorer 10 and the CSS Device Adaptation specification are revised and improved.
Most sites on the web today are not very usable when viewed in a very narrow window. Fixed layouts can become clipped, and fluid layouts can become jumbled. App scenarios in Windows 8 often involve very narrow windows; the Modern taskbar is even narrower. To avoid problems with clipping or jumbling of content, content is automatically scaled down. This requires no extra effort from you as a developer, but it may not be ideal, depending on the default width of your content. Users will be forced to zoom every time they need to access the content.
The @-ms-viewport rule is intended to help solve this problem by enabling you to easily deliver optimized sites and apps. Instead of forcing you into a "one-size-fits-all" scenario where you might have to awkwardly enlarge a small UI or over-compress a large UI, you can use both @-ms-viewport and existing support for CSS Media Queries to optimize your site or app for different ranges of resolutions. You can specify that devices that fall into a particular range are scaled more naturally for devices with resolutions within that range. This enables you to optimize your site not just for desktop displays, but for small slates, or even for the taskbar.
To learn more about CSS Device Adaptation, including example scenarios for the @-ms-viewport rule, see Device Adaptation.
Visual Effects
Internet Explorer 10 and Metro style apps using JavaScript support some of the latest visual effects modules of CSS3. They are:
- CSS3 3-D Transforms: Translate, rotate, and scale elements in both 2-D and 3-D space.
- CSS3 Animations: Animate elements by automatically varying CSS properties smoothly over time.
- CSS3 Fonts: Access advanced typographic features in OpenType fonts that include them.
- CSS3 Gradients: Add color gradients to any property that accepts images.
- CSS3 Transitions: Create simple animations by smoothly changing CSS property values from a start value to an end value.
- CSS3 Text: Apply a drop shadow to text, or automatically hyphenate blocks of text.
CSS3 3-D Transforms
Internet Explorer 10 and Metro style apps using JavaScript in Windows 8 introduce support for CSS3 3-D transforms. Internet Explorer 9 added support for CSS3 2-D transforms, and Metro style apps using JavaScript support them as well. Transforms enable translation, rotation, and scaling of elements in 2-D and 3-D space without the need for a plug-in. CSS33-D transforms are defined by the W3C in the CSS 3D Transforms Module Level 3 specification, which is currently in the Working Draft stage.
To implement CSS transforms, you define one or more transformation functions using the -ms-transform property. For instance, the following snippet shows a selector that applies both a 2-D skew function and a 3-D rotation function to a div element:
div {
...
-ms-transform: skew(-45deg, 15deg) rotate3d(0.7, 0.8, 0.4, 55deg);
}
This results in the following image:
To learn more about CSS3 3-D Transforms, the available transformation functions, and how to implement them, see 3-D Transforms.
You can see CSS3 3-D transforms in action by going to Hands On: 3-D Transforms on the IE Test Drive.
CSS3 Animations
Internet Explorer 10 and Metro style apps using JavaScript support CSS3 Animations. CSS3 Animations enable you to create visually appealing rich applications with smooth, fluid, animated experiences.
CSS3 Animations are defined by the W3C in the CSS Animations Module Level 3 specification, which is currently in the Working Draft stage.
You create an animation in three basic steps: Specify the animation properties, create the keyframes, and apply the animation to one or more elements.
Animations are similar to transitions in that they animate elements as they change position, size, color, and opacity; and as they rotate, scale, translate, and so on. And just as you can with transitions, you can specify timing functions to control the rate of progression of an animation.
However, with CSS3 Animations, you can also use keyframes, which specify the values for the animating properties at various points during the animation. This way, you can define the behavior of an animation not only at the beginning and end of the animation, but in between as well. Animations can also have iterations and reverse-direction capability, and can be given the ability to pause and resume.
For a hands-on demo of CSS3 Animations, see Hands On: Animations on the IE Test Drive. Following is a complete example of a simple CSS animation. For a fuller explanation of this example, and of all the animation properties, see Animations.
<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
body {
padding: 10px;
font-family: "Segoe UI";
}
div { /* Defines the div to be animated */
width: 250px;
background-color: lime;
padding: 10px;
font-weight: bold;
font-size: 20pt;
}
div:active { /* Defines animation parameters. */
-ms-animation-delay: 0s;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: 2;
-ms-animation-name: demo;
}
@-ms-keyframes demo { /* Defines the animation's */
from { /* keyframes. */
-ms-animation-timing-function: ease;
}
50% { /* Uses an ease timing function to */
background-color: purple; /* move and change the color of */
-ms-animation-timing-function: ease-in; /* the div. */
-ms-transform: translate(20px,30px);
}
to {
background-color: blue; /* Uses an ease-in timing function */
} /* to change the div to blue. */
}
</style>
</head>
<body>
<h1>CSS3 Animations Example</h1>
<p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum
enim, vitae euismod odio. Suspendisse eu. </div>
</body>
</html>
This markup sample defines two properties to animate: background-color and -ms-transform. Over the course of a single cycle of the animation, the background color of the div element animates from lime (the original color) to purple, and then to blue. The div element also moves to the right and down by 20 pixels and 30 pixels, respectively, and then back. The animation uses the ease timing function to animate from the beginning to the halfway point (the keyframe at 50%), and then the ease-in timing function to animate from the halfway point to the end. The animation repeats one time. View this animation. (Internet Explorer 10 is required.)
As you might expect, CSS3 Animations provides you with infinite possibilities for creating rich, compelling experiences. For a brief overview of how to create a CSS animation in Internet Explorer 10 and Metro style apps using JavaScript, plus an example of CSS3 Animations in use, see Animations.
You can see CSS3 Animations in action by going to Hands On: Animations on the IE Test Drive.
CSS3 Fonts
Web typography takes a big step forward with support for low-level control over OpenType layout features included in Internet Explorer 10 and Metro style apps using JavaScript. The font-feature-settings property, defined in Section 6.12 of the W3C's CSS Fonts Module Level 3 specification, enables you to specify glyph substitution and positioning in fonts that include Microsoft OpenType layout features.
The OpenType specification defines many advanced typographic features that can be implemented by font designers. For instance, you can define vertical positioning for a font, substitute glyph forms with ligatures, contextual alternates, stylistic alternates, or swashes, include a set of small caps, and more.
Each defined feature has a corresponding feature tag that identifies its function and effects. Font developers can also define their own features. By examining a feature's tag, Internet Explorer 10 and Metro style apps using JavaScript determine what the feature does and whether to implement it.
For an overview of how to implement OpenType Layout feature tags in Internet Explorer 10 and Metro style apps using JavaScript, see Fonts.
CSS3 Gradients
Internet Explorer 10 and Metro style apps using JavaScript support CSS3 gradients in any property that accepts images, such as the background-image property (plus the image value of the background shorthand property), the list-style-image property, and generated content. Gradients act as specified in the Gradients section of the CSS3 Image Values and Replaced Content Module, which, as of this writing, is in the Working Draft stage.
Gradients are images that transition smoothly from one color to another. Internet Explorer 10 and Metro style apps using JavaScript support linear, circular, and elliptical CSS3 gradients, each of which are specified by a gradient line and two or more stop points. Each stop point has its own color, and Windows Internet Explorer fills in the area between each set of points with a continuous color transition from one to the other.
Following is a simple example of gradients. This linear gradient (used as the argument for the background-image property) has three color stops:
- The first color stop is in the top-right corner and defines a gradient line that extends to the bottom-left corner. The first stop is a shade of yellow.
- The second color stop is halfway along the gradient line and is a shade of green.
- The final color stop is 80% of the way along the gradient line and is a shade of blue. From this stop to the end of the gradient line (between 80% and 100%), the color remains this shade of blue.
background-image: -ms-linear-gradient(top right, #FFF133 0%, #16D611 50%, #00A3EF 80%);
This declaration appears like this in Internet Explorer 10:
To learn more about CSS3 Gradients and how to implement them, see Gradients.
For a hands-on demo of CSS3 Gradients, see the CSS Gradient Maker on the IE Test Drive.
CSS3 Transitions
Internet Explorer 10 and Metro style apps using JavaScript support CSS3 Transitions. Transitions enable you to create simple animations by smoothly changing CSS property values over a specified duration of time. For instance, you could vary the size and color of an object over a period of 10 seconds. What you might have previously accomplished using a complicated combination of CSS and JavaScript, you can now do using just a few lines of CSS. CSS3 Transitions are defined by the W3C in the CSS Transitions Module Level 3 specification, which is currently in the Working Draft stage.
For a hands-on demo of CSS3 Transitions, see Hands On: transitions on the IE Test Drive. The following is a complete example of a simple CSS transition. For a fuller explanation of this example, and of all the transition properties, see Transitions.
<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
body {
padding:10px;
font:bold 20pt "Segoe UI";
}
div {
width:250px;
background-color:lime;
padding:10px;
opacity:1;
-ms-transition:opacity 5s linear 1s; /* This property indicates the
CSS transform. */
}
div:active {
opacity:0;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>
</body>
</html>
In this example, the property -ms-transform has been set to "opacity 5s linear 1s". Thanks to the :active pseudo-class, when you click (or touch) and hold the lime green div, it slowly disappears. Specifically, its opacity property, after a 1 second delay, causes it to transition evenly (using a linear timing function) from completely opaque to completely transparent in 5 seconds. View this page.
The -ms-transform property is a shorthand property. This same declaration could have also been accomplished by using the following properties:
-ms-transition-property:opacity; -ms-transition-duration:5s; -ms-transition-timing-function:linear; -ms-transition-delay:1s;
For more information about what you can do with CSS transitions, see Transitions.
CSS3 Text
Internet Explorer 10 and Metro style apps using JavaScript for Windows 8 introduce support for two features of the W3C CSS Text Level 3 Module: text drop shadows and hyphenation.
Text Drop Shadows
The text-shadow property applies a drop shadow effect to the specified text, and is defined in the W3C CSS Text Level 3 Module. If you are familiar with the syntax for the box-shadow property, you already know the syntax for text-shadow. They are identical, except that the text-shadow property does not accept the "inset" keyword.
For a hands-on demo of the text-shadow property, see Hands On: text-shadow on the IE Test Drive.
The following example applies a dark gray shadow with a small blur value slightly to the right and under the specified text:
.myselector
{
...
text-shadow: 0.1em 0.1em 0.15em #333;
}
This results in the following when applied to a short text block:
The W3C has a page full of text-shadow tips and examples: CSS text shadows.
For more detailed information about the syntax of the text-shadow property, see Text Drop Shadows.
Hyphenation
Internet Explorer 10 and Metro style apps using JavaScript for Windows 8 introduce support for another important CSS Text Level 3 feature: automatic hyphenation. This feature is especially useful given the new support for multi-column layout. Specifically, CSS3 Hyphenation enables the following capabilities:
- Hyphenate text automatically according to a built-in dictionary
- Specify the minimum number of characters a word must have before it can be hyphenated
- Specify a minimum word fragment length following a hyphenation break
- Specify a minimum word fragment length preceding a hyphenation break
- Specify a hyphenation "zone," outside of which hyphenation is forced
- Specify a maximum number of consecutive hyphenated lines
For example, the -ms-hyphens property is the basic hyphenation property, and simply turns on hyphenation. Following is an example of the -ms-hyphens property in use, when it has been set to "auto":
<!DOCTYPE html> <html lang="en-us"> <body> <div style="width: 130px; border: 1px solid black;"> <p style="-ms-hyphens: auto; text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus. Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor ornare.</p> </div> </body> </html>
This markup appears like this in Internet Explorer 10:
For more information about automatic hyphenation using CSS, as well as descriptions of all of the hyphenation properties, see Hyphenation.
Panning and Zooming
Internet Explorer 10 and Metro style apps using JavaScript support programmatic control of touch input and gesture recognition through CSS. In particular, these features enable panning and zooming.
More documentation on panning and zooming in the Internet Explorer 10 Guide for Developers is forthcoming. Until then, try the following Quickstarts:
You can also view the following API documentation on MSDN: Touch: Zooming and Panning.
Removal of Style Sheet Limits
In Internet Explorer 9 and earlier, there is a limit of 31 style sheets per webpage. There is also a nesting limit of four levels deep for style sheets that are linked using @import rules.
In Internet Explorer 10 (as well as Metro style apps using JavaScript), this limit has been removed. There is no limit to the number of style sheets you can reference per webpage in Internet Explorer 10 or Metro style apps using JavaScript for Windows 8. You are also not limited in the number of times you can nest @import rules inside style sheets.
Specifying Selectable Text
The -ms-user-select property is a new CSS property that enables app and web developers to control where users are able to select text within their Metro style apps using JavaScript or webpages. The user-select property is not currently part of any W3C CSS specification. It was originally proposed in the User Interface for CSS3 module, but this module has since been superseded by CSS3 Basic User Interface Module, which does not contain the user-select property. Other major browsers support their own prefixed versions of this property. There are minor differences between the three implementations, so be sure to test your application across browsers.
For information about the syntax for the -ms-user-select property, see Specifying selectable text.
For a hands-on demonstration of the -ms-user-select property, see User-Select on the IE Test Drive.
Related topics
Build date: 3/14/2012
