HTML and CSS Technical Articles
CSS Compatibility and Internet Explorer
This is preliminary documentation and is subject to change.
With each new release of Windows Internet Explorer, support for the Cascading
Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first
fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer
8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some
features of CSS 3.
If the browsers your Web site is targeting include earlier versions of Internet
Explorer, however, you want to know the level of CSS compliance for those as well.
This article provides an at-a-glance look at CSS compliance across recent versions
of Internet Explorer, including support in Internet Explorer 8 Beta 1 for Developers
and planned support in the final version of Internet Explorer 8.
This article's organization is loosely based on that of the
CSS reference documentation
on MSDN. It contains the following sections:
Introduction
Each table lists support status information for grouped CSS features across recent versions of Internet
Explorer. In each section, the first table represents
features introduced in CSS 2.1 or earlier, and the second table represents features
planned for CSS 3.
A value of "Yes" in a cell indicates that that feature is implemented in that
version of Internet Explorer. (For the "IE 8.0" column, a value of "Yes" indicates
that the feature is currently planned for implementation in Internet Explorer 8.)
A value of "Partial" in a cell indicates that that feature is only partially
implemented in that version of Internet Explorer. For more information, click the
link to view that feature's reference page on MSDN.
A value of "No" in a cell indicates that that feature is not implemented in that
version of Internet Explorer.
At-rules
CSS 2.1:
| | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| @charset | No | Yes | Yes | Yes | Yes | Yes |
| @import | Yes | Yes | Yes | Yes | Yes | Yes |
| @media | No | Yes | Yes | Yes | Yes | Yes |
| @page | No | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| @font-face | No | Yes | Yes | Yes | Yes | Yes |
| @namespace | No | No | No | No | No | No |
Selectors
Element Selectors
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| .value {
sRules } | Class
(see Note) | Partial | Partial | Partial | Yes | Yes | Yes |
| #value { sRules
} | ID | Yes | Yes | Yes | Yes | Yes | Yes |
| E { sRules } | Type | Yes | Yes | Yes | Yes | Yes | Yes |
| * { sRules
} | Universal | No | No | No | Yes | Yes | Yes |
Note Prior to Internet Explorer 7, there was a two-class
selector limit per element.
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| ns|E { sRules
} | Namespaced | No | No | No | No | No | No |
Attribute Selectors
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| [att=val]
{ sRules } | Equality
[=] | No | No | No | Yes | Yes | Yes |
| [att] { sRules
} | Existence
[] | No | No | No | Yes | Yes | Yes |
| [att|=val]
{ sRules } | Hyphen
[|=] | No | No | No | Yes | Yes | Yes |
| [att~=val]
{ sRules } | Whitespace
[~=] | No | No | No | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| [ns|attr] { sRules
} | Namespaced | No | No | No | Yes | Yes | Yes |
| [att^=val]
{ sRules } | Prefix
[^=] | No | No | No | Yes | Yes | Yes |
| [att*=val]
{ sRules } | Substring
[*=] | No | No | No | Yes | Yes | Yes |
| [att$=val]
{ sRules } | Suffix
[$=] | No | No | No | Yes | Yes | Yes |
Combinators
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| E + F { sRules
} | Adjacent
Sibling (+) | No | No | No | Yes | Yes | Yes |
| E > F { sRules
} | Child
(>) | No | No | No | Yes | Yes | Yes |
| E F { sRules } | Descendant | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| E ~ F { sRules
} | General
Sibling (~) | No | No | No | Yes | Yes | Yes |
Pseudo-classes
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| :active { sRules } | :active | No | No | No | Partial | Partial | Yes |
| :after { sRules } | :after | No | No | No | No | Yes | Yes |
| :before { sRules } | :before | No | No | No | No | Yes | Yes |
| :first-child { sRules } | :first-child | No | No | No | Yes | Yes | Yes |
| :focus { sRules } | :focus | No | No | No | No | No | Yes |
| :hover { sRules } | :hover | No | No | No | No | No | Yes |
| :lang(C) { sRules
} | :lang() | No | No | No | No | Yes | Yes |
| :link { sRules } | :link | Yes | Yes | Yes | Yes | Yes | Yes |
| :visited { sRules } | :visited | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| :root { sRules } | :root | No | No | No | No | No | No |
| :nth-child() { sRules } | :nth-child() | No | No | No | No | No | No |
| :nth-last-child() { sRules } | :nth-last-child() | No | No | No | No | No | No |
| :nth-of-type() { sRules } | :nth-of-type() | No | No | No | No | No | No |
| :nth-last-of-type() { sRules
} | :nth-last-of-type() | No | No | No | No | No | No |
| :last-child { sRules } | :last-child | No | No | No | No | No | No |
| :first-of-type { sRules } | :first-of-type | No | No | No | No | No | No |
| :last-of-type { sRules } | :last-of-type | No | No | No | No | No | No |
| :only-child { sRules } | :only-child | No | No | No | No | No | No |
| :only-of-type { sRules } | :only-of-type | No | No | No | No | No | No |
| :empty { sRules } | :empty | No | No | No | No | No | No |
| :target { sRules } | :target | No | No | No | No | No | No |
| :not(X) { sRules
} | :not() | No | No | No | No | No | No |
| :enabled { sRules } | :enabled | No | No | No | No | No | No |
| :disabled { sRules } | :disabled | No | No | No | No | No | No |
| :checked { sRules } | :checked | No | No | No | No | No | No |
| :indeterminate { sRules } | :indeterminate | No | No | No | No | No | No |
| :default { sRules } | :default | No | No | No | No | No | No |
| :valid { sRules } | :valid | No | No | No | No | No | No |
| :invalid { sRules } | :invalid | No | No | No | No | No | No |
| :in-range { sRules } | :in-range | No | No | No | No | No | No |
| :out-of-range { sRules } | :out-of-range | No | No | No | No | No | No |
| :required { sRules } | :required | No | No | No | No | No | No |
| :optional { sRules } | :optional | No | No | No | No | No | No |
| :read-only { sRules } | :read-only | No | No | No | No | No | No |
| :read-write { sRules } | :read-write | No | No | No | No | No | No |
Pseudo-elements
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| :first-letter { sRules } | :first-letter | No | Yes | Yes | Yes | Yes | Yes |
| :first-line { sRules } | :first-line | No | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| ::before { sRules } | ::before | No | No | No | No | No | No |
| ::after { sRules } | ::after | No | No | No | No | No | No |
| ::first-letter { sRules } | ::first-letter | No | No | No | No | No | No |
| ::first-line { sRules } | ::first-line | No | No | No | No | No | No |
| ::selection { sRules } | ::selection | No | No | No | No | No | No |
| ::value { sRules } | ::value | No | No | No | No | No | No |
| ::choices { sRules } | ::choices | No | No | No | No | No | No |
| ::repeat-item { sRules } | ::repeat-item | No | No | No | No | No | No |
| ::repeat-index { sRules } | ::repeat-index | No | No | No | No | No | No |
Attributes
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { sRule!important } | !important
Declaration | Partial | Partial | Partial | Yes | Yes | Yes |
Lists
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { list-style : sStyle
} | list-style | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-image
: sStyle } | list-style-image | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-position
: sStyle } | list-style-position | Yes | Yes | Yes | Yes | Yes | Yes |
| { list-style-type :
sStyle } | list-style-type | No | No | No | Partial | Yes | Yes |
Color and Background
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { color : sColor } | color | Yes | Yes | Yes | Yes | Yes | Yes |
| { background : sBackground
} | background | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-attachment
: sAttachment } | background-attachment | Partial | Partial | Partial | Yes | Yes | Yes |
| { background-color
: sColor } | background-color | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-image
: sLocation } | background-image | Yes | Yes | Yes | Yes | Yes | Yes |
| { background-position
: sPosition } | background-position | Partial | Partial | Partial | Partial | Yes | Yes |
| { background-repeat
: sRepeat } | background-repeat | Yes | Yes | Yes | Yes | Yes | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { color-profile : sProfile
} | color-profile | No | No | No | No | No | No |
| { rendering-intent
: sIntent } | rendering-intent | No | No | No | No | No | No |
{ background : sBackground1,
sBackground2, etc. } | background (multiple) | No | No | No | No | No | No |
| { background-clip :
sClip } | background-clip | No | No | No | No | No | No |
| { background-origin
: sOrigin } | background-origin | No | No | No | No | No | No |
| { background-break
: sBreak } | background-break | No | No | No | No | No | No |
| { background-size :
sSize } | background-size | No | No | No | No | No | No |
Font and Text
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { direction : sDirection
} | direction | Yes | Yes | Yes | Yes | Yes | Yes |
| { font : sFont } | font | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-family : sFamily
} | font-family | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-size : sSize
} | font-size | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-style : sStyle
} | font-style | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-variant : sVariant
} | font-variant | Yes | Yes | Yes | Yes | Yes | Yes |
| { font-weight : sWeight
} | font-weight | Partial | Partial | Partial | Partial | Partial | Yes |
| { letter-spacing
: sSpacing } | letter-spacing | Yes | Yes | Yes | Yes | Yes | Yes |
| { line-height
: sHeight } | line-height | Yes | Yes | Yes | Yes | Yes | Yes |
| { text-align : sAlign
} | text-align
| Yes | Yes | Yes | Yes | Yes | Yes |
| { text-decoration :
sDecoration } | text-decoration
| Yes | Yes | Yes | Yes | Yes | Yes |
| { text-indent : sIndent
} | text-indent
| Yes | Yes | Yes | Yes | Yes | Yes |
| { text-transform :
sTransform } | text-transform
| Yes | Yes | Yes | Yes | Yes | Yes |
| { unicode-bidi : sAlign
} | unicode-bidi
| Yes | Yes | Yes | Yes | Yes | Yes |
| { vertical-align :
sAlign } | vertical-align | Yes | Yes | Yes | Yes | Yes | Yes |
| { white-space : sWrap
} | white-space
| Partial | Partial | Partial | Partial | Yes | Yes |
| { word-spacing : sSpacing
} | word-spacing
| Partial | Partial | Partial | Partial | No* | Yes |
CSS 3:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 | IE 8 Beta 1 | IE 8.0 |
| { font-effect :
sEffect } | font-effect | No | No | No | No | No | No |
| { font-emphasize :
sEmphasize } | font-emphasize | No | No | No | No | No | No |
| { font-size-adjust
: sSizeAdjust } | font-size-adjust | No | No | No | No | No | No |
| { font-smooth :
sSmooth } | font-smooth | No | No | No | No | No | No |
| { font-stretch :
sStretch } | font-stretch | No | No | No | No | No | No |
| { hanging-punctuation
: sHangingPunctuation } | hanging-punctuation | No | No | No | No | No | No |
| { punctuation-trim
: sTrim } | punctuation-trim | No | No | No | No | No | No |
| { ruby-align :
sRubyAlign } | ruby-align | Yes | Yes | Yes | Yes | No* | Yes |
| { ruby-overhang :
sRubyOverhang } | ruby-overhang | Yes | Yes | Yes | Yes | No* | Yes |
| { ruby-position :
sRubyPlacement } | ruby-position
| Yes | Yes | Yes | Yes | No* | Yes |
| { ruby-span : sRubySpan
} | ruby-span | No | No | No | No | No | No |
| { text-align-last :
sAlignLast } | text-align-last
| Partial | Partial | Partial | Partial | Partial | Partial |
| { text-emphasis :
sEmphasis } | text-emphasis | No | No | No | No | No | No |
| { text-justify :
sJustify } | text-justify
| No | Yes | Yes | Yes | Yes | Yes |
| { text-outline : sOutline
} | text-outline | No | No | No | No | No | No |
| { text-overflow : sOverflow} | text-overflow
| No | Partial | Partial | Partial | Partial | Partial |
| { text-shadow : sShadow
} | text-shadow | No | No | No | No | No | No |
| { text-wrap : sWrap
} | text-wrap | No | No | No | No | No | No |
| { word-break :
sBreak } | word-break
| Partial | Partial | Partial | Partial | Partial | Partial |
| { word-wrap : sWrap
} | word-wrap
| Yes | Yes | Yes | Yes | Yes | Yes |
| { writing-mode : sFlow
} | writing-mode
| Yes | Yes | Yes | Yes | Yes | Yes |
Generated Content
CSS 2.1:
| | | IE 5.0 | IE 5.5 | IE 6.0 | IE 7.0 |