Chẳng có gì phiền toái bằng cái sự “tương thích”. Mỗi phiên bản IE, Microsoft thường kén cá chọn canh chỉ hỗ trợ “một số” điều khiển CSS mà họ thích. Và đây là danh sách chi tiết cái sự “thích” của anh em nhà cụ Bill:
Các trình duyệt khác cũng tương tự, tuy dễ chịu hơn, hỗ trợ CSS nhiều hơn, nhưng không phải điều khiển CSS nào họ cũng… thích.
FF = Firefox, C = Chrome, S = Safari, O = Opera
Rules
IE6 | IE7 | IE8 | IE9 | FF | Chrome | Safari | Opera | |
---|---|---|---|---|---|---|---|---|
@charset | ||||||||
@import | ||||||||
@media | ||||||||
@page | ||||||||
@font-face | ||||||||
@namespace |
Element Selectors
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
.value { } | Class | ||||
#value { } | ID | ||||
E { } | Type | ||||
* { } | Universal | ||||
ns|E { } | Namespaced |
Attribute Selectors
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
[att=val] { } | Equality [=] | ||||
att] { } | Existence [] | ||||
[att|=val] { } | Hyphen [|=] | ||||
[att~=val] { } | Whitespace [~=] | ||||
[ns|attr] { } | Namespaced | ||||
[att^=val] { } | Prefix [^=] | ||||
[att*=val] { } | Substring [*=] | ||||
[att$=val] { } | Suffix [$=] |
Combinators
IE6 | IE7 | IE8 | IE9 | ||
---|---|---|---|---|---|
E + F { } | Adjacent Sibling (+) | ||||
E > F { } | Child (>) | ||||
E F { } | Descendant | ||||
E ~ F { } | General Sibling (~) |
Pseudo-classes
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
:active { } | ||||
:first-child { } | ||||
:focus { } | ||||
:hover { } | ||||
:lang(C) { } | ||||
:link { } | ||||
:visited { } | ||||
@page :first { } | ||||
@page :left { } | ||||
@page :right { } | ||||
:root { } | ||||
:nth-child(n) { } | ||||
:nth-last-child(n) { } | ||||
:nth-of-type(n) { } | ||||
:nth-last-of-type(n) { } | ||||
:last-child { } | ||||
:first-of-type { } | ||||
:last-of-type { } | ||||
:only-child { } | ||||
:only-of-type { } | ||||
:empty { } | ||||
:target { } | ||||
:not(s) { } | ||||
:enabled { } | ||||
:disabled { } | ||||
:checked { } | ||||
:indeterminate { } | ||||
:default { } | ||||
:valid { } | ||||
:invalid { } | ||||
:in-range { } | ||||
:out-of-range { } | ||||
:required { } | ||||
:optional { } | ||||
:read-only { } | ||||
:read-write { } |
Pseudo-elements
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
:after { } | ||||
:before { } | ||||
:first-letter { } | ||||
:first-line { } | ||||
::before { } | ||||
::after { } | ||||
::first-letter { } | ||||
::first-line { } | ||||
::selection { } | ||||
::value { } | ||||
::choices { } | ||||
::repeat-item { } | ||||
::repeat-index { } |
Properties
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ !important } |
2D Transforms
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ transform : sFunction } | No | No | No | Yes |
{ transform-origin : sOrigin } | No | No | No | Yes |
Lists
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ list-style : sStyle } | ||||
{ list-style-image : sStyle } | ||||
{ list-style-position : sStyle } | ||||
{ list-style-type : sStyle } |
Màu chữ và màu nền
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ color : sColor } | ||||
{ background : sBackground } | ||||
{ background-attachment : sAttachment } | ||||
{ background-color : sColor } | ||||
{ background-image : sLocation } | ||||
{ background-position : sPosition } | ||||
{ background-repeat : sRepeat } | ||||
{ color-profile : sProfile } | ||||
{ rendering-intent : sIntent } | ||||
{ background : sBackground1, sBackground2, … } | ||||
{ background-clip : sClip } | ||||
{ background-origin : sOrigin } | ||||
{ background-break : sBreak } | ||||
{ background-size : sSize } |
Phông chữ
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ direction : sDirection } | ||||
{ font : sFont } | ||||
{ font-family : sFamily } | ||||
{ font-size : sSize } | ||||
{ font-style : sStyle } | ||||
{ font-variant : sVariant } | ||||
{ font-weight : sWeight } | ||||
{ letter-spacing : sSpacing } | ||||
{ line-height : sHeight } | ||||
{ text-align : sAlign } | ||||
{ text-decoration : sDecoration } | ||||
{ text-indent : sIndent } | ||||
{ text-transform : sTransform } | ||||
{ unicode-bidi : sAlign } | ||||
{ vertical-align : sAlign } | ||||
{ white-space : sWrap } | ||||
{ word-spacing : sSpacing } | ||||
{ font-effect : sEffect } | ||||
{ font-emphasize : sEmphasize } | ||||
{ font-size-adjust : sSizeAdjust } | ||||
{ font-smooth : sSmooth } | ||||
{ font-stretch : sStretch } | ||||
{ hanging-punctuation : sHangingPunctuation } | ||||
{ punctuation-trim : sTrim } | ||||
{ ruby-align : sRubyAlign } | ||||
{ ruby-overhang : sRubyOverhang } | ||||
{ ruby-position : sRubyPlacement } | ||||
{ ruby-span : sRubySpan } | ||||
{ text-align-last : sAlignLast } | ||||
{ text-emphasis : sEmphasis } | ||||
{ text-justify : sJustify } | ||||
{ text-outline : sOutline } | ||||
{ text-overflow : sOverflow} | ||||
{ text-shadow : sShadow } | ||||
{ text-wrap : sWrap } | ||||
{ word-break : sBreak } | ||||
{ word-wrap : sWrap } | ||||
{ writing-mode : sFlow } |
Generated Content
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ content : sContent } | ||||
{ counter-increment : sCounter } | ||||
{ counter-reset : sCounter } | ||||
{ quotes : sQuotes } |
Khung viền
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ border : sBorder } | ||||
{ border-bottom : sBottom } | ||||
{ border-bottom-color : sColor } | ||||
{ border-bottom-style : sStyle } | ||||
{ border-bottom-width : sWidth } | ||||
{ border-collapse : sCollapse } | ||||
{ border-color : sColor } | ||||
{ border-left : sLeft } | ||||
{ border-left-color : sColor } | ||||
{ border-left-style : sStyle } | ||||
{ border-left-width : sWidth } | ||||
{ border-right : sRight} | ||||
{ border-right-color : sColor } | ||||
{ border-right-style : sStyle } | ||||
{ border-right-width : sWidth } | ||||
{ border-spacing : sSpacing } | ||||
{ border-style : sStyle } | ||||
{ border-top : sTop } | ||||
{ border-top-color : sColor } | ||||
{ border-top-style : sStyle } | ||||
{ border-top-width : sWidth } | ||||
{ border-width : sWidth } | ||||
{ caption-side : sLocation } | ||||
{ clear : sClear } | ||||
{ empty-cells : sEmptyCells } | ||||
{ float : sFloat } | ||||
{ margin : sMargin } | ||||
{ margin-bottom : sHeight } | ||||
{ margin-left : sWidth } | ||||
{ margin-right : sWidth } | ||||
{ margin-top : sHeight } | ||||
{ padding : sPadding } | ||||
{ padding-bottom : sPadding } | ||||
{ padding-left : sPadding } | ||||
{ padding-right : sPadding } | ||||
{ padding-top : sPadding } | ||||
{ table-layout : sLayout } | ||||
{ border-break : sBreak } | ||||
{ border-image : sImage } | ||||
{ border-radius : sRadius } | ||||
{ box-shadow : sShadow } |
Vị trí
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ bottom : sBottom } | ||||
{ clip : sClip } | ||||
{ display : sDisplay } | ||||
{ height : sHeight } | ||||
{ left : sPosition } | ||||
{ max-height : sMaxHeight } | ||||
{ max-width : sWidth } | ||||
{ min-height : sMinHeight } | ||||
{ min-width : sMinWidth } | ||||
{ overflow : sOverflow } | ||||
{ position : sPosition } | ||||
{ right : sPosition } | ||||
{ top : sTop } | ||||
{ visibility : sVisibility } | ||||
{ width : sWidth } | ||||
{ z-index : vOrder } | ||||
{ overflow-x : sOverflow } | ||||
{ overflow-y : sOverflow } |
In ấn
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ orphans : nLines } | ||||
{ page-break-after : sBreak } | ||||
{ page-break-before : sBreak } | ||||
{ page-break-inside : sBreak } | ||||
{ widows : nLines } | ||||
{ fit : sFit } | ||||
{ fit-position : sPosition } | ||||
{ image-orientation : sOrientation } | ||||
{ page : sPage } | ||||
{ size : sSize } |
User Interface
IE6 | IE7 | IE8 | IE9 | |
---|---|---|---|---|
{ cursor : sCursor } | ||||
{ outline : sOutline } | ||||
{ outline-color : sColor } | ||||
{ outline-style : sStyle } | ||||
{ outline-width : sWidth } | ||||
{ appearance : sAppearance } | ||||
{ box-sizing : sSizing } | ||||
{ icon : sIcon } | ||||
{ nav-down : sNavDown } | ||||
{ nav-index : sIndex } | ||||
{ nav-left : sNavLeft } | ||||
{ nav-right : sNavRight } | ||||
{ nav-up : sNavUp } | ||||
{ outline-offset : sOffset } | ||||
{ outline-radius : sRadius } | ||||
{ resize : sResize } |
Multi-column và Speech
Anh em nhà cụ Bill ứ thích “đám” Multi-column, Speech của CSS3, nên ứ chơi với cả đám.
Media Queries
Internet Explorer 9 hỗ trợ Media Queries với các thuộc tính: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution.
Values