CSS

Internet Explorer 10, as well as Windows apps using JavaScript in Windows 8, 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 CSS features described in this section.

  • Advanced Layout
  • Visual Effects
  • Other New Features
  • Related topics

Important  These features work identically in Internet Explorer 10 and Windows apps using JavaScript.

 

Note  For a complete list of CSS support across all recent versions of Windows Internet Explorer, see CSS Compatibility in Internet Explorer.

 

Advanced Layout

Internet Explorer 10 and Windows 8 introduce several new methods to lay out your webpage or Windows app using JavaScript with CSS. These methods include:

Topic Description

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

Take the available space into account when defining box dimensions, thereby enabling relative sizes and positioning.

CSS3 Grid Layout

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.

CSS Device Adaptation

The @-ms-viewport rule, in combination with CSS Media Queries, enables web developers and developers of Windows apps using JavaScript for Windows 8 to optimize the layout of sites and apps for different devices with minimal effort.

 

Visual Effects

Internet Explorer 10 and Windows apps using JavaScript support some of the latest visual effects modules of CSS3. They are:

Topic Description

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.

 

Other New Features

Internet Explorer 10 and Windows apps using JavaScript also introduce the following new features:

Topic Description

Removal of style sheet limits

Limits to the number of style sheets per webpage and to the number of nesting levels that were present in previous versions of Internet Explorer have been removed in Internet Explorer 10.

Scrolling and zooming with touch

Using CSS, you can control the scrolling and zooming views of your touch-optimized webpage in Internet Explorer 10 or your Windows app using JavaScript in Windows 8.

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 Windows apps using JavaScript or webpages.

 

Internet Explorer 10 Guide for Developers