Share via

Internet Explorer 9 Guide for Developers

  • Article

March 14, 2011

Cascading Style Sheets, Level 3 (CSS3)

Internet Explorer 9 has more support for Cascading Style Sheets (CSS) than any prior Microsoft browser. Continuing on the work that was done in Internet Explorer 8—where Internet Explorer became fully compliant with the CSS2.1 specification—Internet Explorer 9 adds support for many components of CSS3.

Note  It is important to remember that many CSS3 modules are still in the Working Draft or Last Call stages. Until they reach the Candidate Recommendation stage, they could change significantly. For more information, see the latest CSS3 draft modules.

CSS3 2D Transforms

Internet Explorer 9 adds support for CSS3 2D Transforms. CSS 2D Transforms enables elements that are rendered by CSS to be transformed in two-dimensional space.

Internet Explorer 9 supports the following 2D Transforms properties:

  • The -ms-transform property applies one or more two-dimensional transformation function to an element.
  • The -ms-transform-origin property establishes the origin of transformation for an element. This property is useful when you want to change the default origin (the center).

Note   Because the CSS 2D Transforms module has not yet received Candidate Recommendation status from the W3C, both the transform and transform-origin properties must be used with the -ms- prefix to be recognized by Internet Explorer 9. For more information on vendor-specific prefixes, see “IE9, Vendor Prefixes, and Developers” on the IE Team Blog.

Internet Explorer 9 supports the following transformation functions for use with the -ms-transform property:

  • The matrix(a,b,c,d,e,f) function specifies a 2D transformation in the form of a transformation matrix of six values (a through f). 
  • The translate(tx,[ty]) function specifies a 2D translation by the vector [tx,ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not specified, its value is zero. (Translation-value parameters can be either percentages or lengths.)
  • The translateX(tx) function specifies a translation by the given amount in the x direction.
  • The translateY(ty) function specifies a translation by the given amount in the y direction.
  • The scale(sx,[sy]) function specifies a 2D scale operation by the [sx,sy] scaling vector that is described by the two parameters. If the second parameter is not provided, it takes a value equal to the first.
  • The scaleX(sx) function specifies a scale operation by using the [sx,1] scaling vector, where sx is given as the parameter.
  • The scaleY(sy) function specifies a scale operation by using the [1,sy] scaling vector, where sy is given as the parameter.
  • The rotate(angle) function specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
  • The skewX(ax) function specifies a skew transformation along the x-axis by the given angle.
  • The skewY(ay) function specifies a skew transformation along the y-axis by the given angle.
  • The skew(ax,[ay]) function specifies a skew transformation along the x- and y-axes. The first angle parameter specifies the skew on the x-axis. The second angle parameter specifies the skew on the y-axis. If the second parameter is not given, a value of zero is used for the y angle (that is, no skew on the y-axis).

The -ms-transform-origin property accepts one or two values. Each value can be a keyword, a length, or a percentage. If the -ms-transform-origin property is not set, the transform begins in the center (equal to a -ms-transform-origin value of 50% 50%).

  • The first value indicates the horizontal position (the position along the x-axis), and can be negative. This value can be a length value (in any of the supported length units), a percentage (of the total box length), or one of the following three keywords: left (equal to 0% or a zero length), center (equal to 50% or half the box length), or right (equal to 100% or the full box length).
  • The second value indicates the vertical position (the position along the y-axis), and can be negative. This value can be a length value (in any of the supported length units), a percentage (of the total box height), or one of the following three keywords: top (equal to 0% or a zero height), center (equal to 50% or half the box height), or bottom (equal to 100% or the full box height).

If only one value is specified, the second value is assumed to be center.

Consider the following markup.

div {
     -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
     -ms-transform-origin: 60% 100%;
}

In Internet Explorer 9, setting the -ms-transform-origin property to 60% 100% sets the transform’s origin point to 60% of the length and 100% of the height of the element to be transformed. The -ms-transform property first moves the element 200 pixels in the x direction and 100 pixels in the y direction. It then scales the element by 75%. Finally, it rotates the element 40 degrees clockwise around the origin point set by the -ms-transform-origin property.

For more information on CSS3 2D Transforms, see MSDN.

CSS3 Backgrounds and Borders Module

Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature. Internet Explorer 9 also introduces support for the following new CSS3 properties:

Internet Explorer 9 also adds functionality to the following existing CSS background and border properties:

The border-radius properties

The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse. The properties consist of the following:

For example, take a look at the following markup:

  border-radius: 100px 66.66px 200px 50px;
border: 10px blue double;
padding: 24px;
width: 400px;height: 125px;

This will generate the following when applied to a text block.

CSS3 Color Module

Internet Explorer 9 adds support for the CSS3 Color module. This module includes support for the RGBA, HSL, and HSLA color models; the opacity property; and the currentColor keyword. Internet Explorer 9 also expands support for the transparent keyword.

RGBA Color model

The RGB color model has been extended to include an alpha channel, or transparency. The format of an RGBA value is rgba(red,green,blue,alpha).The red, green, and blue components are identical to those of the RGB color model, and are expressed as integers or percentages. The alpha component is expressed as a value between 0.0 (completely transparent) and 1.0 (completely opaque).

For instance, to set the background color to red with 50% transparency, you can include either of the following two CSS declarations in your style sheet:

  background-color: rgba(255,0,0,0.5);
FakePre-9f36865b6c6248aaad4e31d05acb5aa5-65a911031eb84a6dbe6a24e212ba27f5

Be aware that though RGB values support hexadecimal notation, RGBA values do not.

HSL Color Model

Internet Explorer 9 supports the CSS3 Color module’s hue-saturation-lightness (HSL) color values. In the HSL color model, “hue” is defined as the indicated color’s angle on the color wheel (for instance, red is 0 or 360, green is 120, and blue is 240). “Saturation” and “lightness” are expressed as percentages. For instance, the following CSS declaration defines a red background.

  background-color: hsl(0,100%,50%);

HSLA Color Model

Internet Explorer 9 also extends the HSL color model with an alpha channel. As with the RGBA model, the alpha channel is expressed as a value between 0.0 and 1.0. For instance, the following CSS declaration defines a red background with 50% transparency.

  background-color: hsla(0,100%,50%,0.5);

The opacity Property

Internet Explorer 9 adds the CSS3 Color module’s opacity property, which enables you to control transparency at the element level. Similar to the alpha component of RGBA values, the opacity value is a number that ranges between 0.0 (completely transparent) to 1.0 (completely opaque). The opacity property is available on all elements.

The following example shows the opacity property on the color navy, with opacity values in increments of 0.2 from 0 to 1.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0.2;"></div>
    <div style="background: navy; opacity: 0.4;"></div>
    <div style="background: navy; opacity: 0.6;"></div>
    <div style="background: navy; opacity: 0.8;"></div>
    <div style="background: navy; opacity: 1;"></div>
 </div>

This example generates the following output for a 25×125-pixel div.

Color Keywords

The CSS3 Color module makes the list of color keywords for CSS identical to that for SVG 1.0. Though SVG support is new in Internet Explorer 9, this change was implemented in Internet Explorer 8.

Internet Explorer 9 introduces the CSS3 Color module’s currentColor keyword, which indicates the current value of the color property on any property that accepts color. When set on the color property itself, currentColor is equivalent to color:inherit.

Internet Explorer 9 also expands the use of the transparent keyword beyond the border-color and background-color properties. It can now be used with any property that accepts the color property.

CSS3 Fonts Module

Better typographic control has been a consistent feature of each new version of CSS. At the same time, the lack of an interoperable web font format can be frustrating. Internet Explorer 9 enhances existing support for CSS fonts to provide compliance with the CSS3 Fonts Module. It also adds support for the Web Open Font Format (WOFF) and raw TrueType fonts.

Font Properties

The font-weight property has been updated so that Internet Explorer 9 calculates font weights as specified in the CSS3 Fonts Module.

The font-size property has been updated so that each keyword’s scaling factor is as defined in the CSS3 Fonts Module. Also, keywords and HTML heading sizes are now mapped as specified in the CSS3 Fonts Module.

The font-stretch property is new in Internet Explorer 9, and selects a normal, condensed, or expanded face from a font family. This property is also available as a @font-face rule descriptor.

The @font-face Rule

The @font-face rule enables font linking. That is, a style sheet can reference a specific font file for the browser to download and use. For instance, consider the following markup.

  @font-face {
   font-family: MyFont;
   src: url(https://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
 }
 p {font-family: MyFont, serif;
 }

In this example, the @font-face rule instructs the browser to go to the URL specified in the src descriptor to download the font file that contains the specified font. In Internet Explorer 8 and earlier, the src descriptor was incorrectly ignored if it contained an optional format string, such as the one shown in the previous example. In Internet Explorer 9, the src descriptor is parsed as expected.

Internet Explorer 9 also adds support for the unicode-range descriptor, which enables you to specify the range of Unicode characters supported by a given font. For instance, the following code example specifies the range of basic ASCII characters.

@font-face {
   font-family: MyFont;
   src: url(https://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
 }

Web Font Formats

Microsoft created Internet Explorer 9 to maximize web font choice. To that end, we have done the following:

  • Ensured backward compatibility with continued support for Embedded OpenType (EOT)
  • Added support for the Web Open Font Format (WOFF), which repackages sfnt-based font files (TrueType, OpenType, and Open Font Format fonts) by compressing each table individually using a ZIP compression format
  • Added support for installable (no embedding permission bits set) raw TrueType fonts

To see an example of web fonts in Internet Explorer 9, see the “Web Fonts” or “More Web Fonts” demos on the Internet Explorer Test Drive

For more information on CSS3 fonts in Internet Explorer 9, see MSDN.

CSS3 Media Queries Module

The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a very small screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (that has a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.

The following declaration is a typical media query, using the @media rule.

  @media screen and (max-width:400px) {div {border:none;}}

In this case, screen indicates the target media type, and max-width is the target media property. The declaration states that the specified rules (no border on div elements) are only to be applied when the page is displayed on a screen with a width of at most 400 pixels. You can use media properties together to create even more specific queries, such as the following.

@media screen and (max-width:400px) and (max-height:600px) {…}

This declaration applies the specified rules when the medium is a screen that has a width of no more than 400 pixels and a height of no more than 600 pixels.

Check out media queries in action on the Internet Explorer Test Drive site.

Internet Explorer 9 introduces support for media queries in CSS, HTML, XML, and XHTML. For more information about media queries in Internet Explorer 9, see MSDN.

CSS3 Namespaces Module

Internet Explorer 9 supports much of the CSS3 Namespaces Module. CSS namespaces enable a developer to declare a default namespace for a CSS file. That is, by default, any element or attribute selector also uses that namespace.

CSS namespaces also enable a developer to create namespace prefixes, which can be used later within the CSS file. Internet Explorer 9 further enables you to declare a namespace that targets SVG elements.

The @namespace at-rule

The @namespace at-rule declares an XML namespace (and, optionally, its prefix) and associates it with a string that represents a namespace name. For example, the following rule declares a default namespace.

@namespace "https://www.w3.org/1999/xhtml";

The default namespace is applied to names that don’t have an explicit namespace component.

If an @namespace rule is declared with a prefix, the prefix can be used in namespace-qualified names. For example, given the following namespace declaration for a namespace prfx…

@namespace prfx "https://prfx.contoso.com";

…the following selector matches E elements in the namespace referred to by the prfx prefix.

prfx|E

The following example is slightly more complex.

  @namespace prfx "https://prfx.contoso.com";
@namespace msft "https://msft.example.com";

 p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

In this example, two namespace prefixes are created. First, p elements in any namespace are colored red. Any p elements in the prfx namespace are then recolored blue, and p elements in the msft namespace are recolored green.

The following example styles an SVG element.

  @namespace svg "https://www.w3.org/2000/svg";
svg|circle {fill:red;}

Using the namespace and declaration from this example, all circles created with SVG will be given a red fill.

For more information, see the @namespace rule reference page on MSDN.

CSS3 Values and Units Module

Internet Explorer 9 adds support for many of the new values and units described in the CSS3 Values and Units Module. Most of these new values and units are required to support the other CSS3 features described in this document.

Internet Explorer 9 adds support for the following new values and units:

  • deg: degrees (angle unit)
  • grad: grads (angle unit)
  • rad: radians (angle unit)
  • turn: turns (angle unit)
  • ms: milliseconds (time unit)
  • s: seconds (time unit)
  • rem: font size of the root element (relative length unit)
  • vw: viewport width (relative length unit)
  • vh: viewport height (relative length unit)
  • vm: smaller of viewport width or height (relative length unit)
  • ch: zero-width (width of the zero glyph in the rendering font; relative length unit)

In addition, Internet Explorer 9 updates the attr() function that is used for generated content. It can now be applied on any property and accept multiple arguments.

The following CSS3 function is new for Internet Explorer 9:

  • calc(): calculates values using arithmetic operators and is usable wherever length values are allowed

For more information on CSS functions, see CSS Values and Units Reference on MSDN.

CSS3 Selectors

Internet Explorer 9 supports the additions to CSS Selector syntax specified in the CSS3 Selectors Proposed Recommendation. Listed here are the selectors that are new for Internet Explorer 9. (For full details about selector support in Internet Explorer, see CSS Compatibility and Internet Explorer on MSDN.)

For more information, see the CSS Selectors reference section on MSDN.

To see an example of CSS3 selectors in action, go to the Internet Explorer Test Drive site.

Structural Pseudo-Classes

Structural pseudo-classes enable selection based on extra information in the document tree that can’t be selected using simple selectors or combinators.

The following selects an E element that is the root of the document.

E:root 

The following selects an E element that is the n-th child of its parent.

E:nth-child(n)

The following selects an E element that is the n-th child of its parent, counting from the last one.

E:nth-last-child(n) 

The following selects an E element that is the n-th sibling of its type.

E:nth-of-type(n) 

The following selects an E element that is the n-th sibling of its type, counting from the last one.

E:nth-last-of-type(n)

The following selects an E element that is the last child of its parent.

E:last-child 

The following selects an E element that is the first sibling of its type.

E:first-of-type 

The following selects an E element that is the last sibling of its type.

E:last-of-type 

The following selects an E element that is the only child of its parent.

E:only-child

The following selects an E element that is the only sibling of its type.

E:only-of-type

The following selects an E element that has no children (including text nodes).

E:empty

The target Pseudo-Class

The target pseudo-class selects the target element of the referring URI. A fragment identifier is used to identify a location within a page, and is formed using a number sign followed by an anchor identifier—for example, https://www.example.com/mypage.html#section_3.

The following selects the div element of class important that is the target element of the referring URI. If the document’s URI has no fragment identifier, there is no target element.

div.important:target

UI Element States Pseudo-Classes

The UI element states pseudo-classes are used to select UI elements (form controls such as radio buttons or check boxes) that are in a certain state—enabled, disabled, or selected (checked).

The following selects an E form control element that is enabled.

E:enabled

The following selects an E form control element that is disabled.

E:disabled 

The following selects an E form control element that is selected.

E:checked 

The :indeterminate pseudo-class selects radio buttons and check boxes whose toggle states cannot be determined—they are neither checked (selected) nor unchecked (cleared). The following selects an E form control element whose state cannot be determined.

E:indeterminate

Note   The :indeterminate pseudo-class is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

The negation Pseudo-Class

The negation pseudo-class takes a simple selector as an argument to select elements that are not selected by that argument. The following selects an E element that does not match the simple selector s:

E:not(s)

The UI element fragments pseudo-element

The UI element fragments pseudo-element, ::selection, is used to select any part of the page that the user has highlighted, including text within an editable text field. This pseudo-element can be applied to the color and background-color properties. The following selects any user-selected text within an E element.

E::selection 

Note  The ::selection pseudo-element is no longer defined in the current CSS3 specification, but is supported in many popular browsers.

Additional CSS Capabilities

Some support for the CSS Object Model (OM) View Module Working Draft has been implemented in Internet Explorer 9.

CSSOM View Module

The CSSOM View Module defines APIs that enable web developers to inspect and programmatically change the visual properties of a document and its contents, including layout box positioning, viewport width, and element scrolling. Internet Explorer 8 introduced support for some of this module. Internet Explorer 9 extends support for even more of the CSSOM View APIs: