FileNav

online
online: /HTML & CSS/Browser_CSS_Support.md

Browser CSS Support

Generic

Comparison of layout engines (Cascading Style Sheets)

Detection

CSS Selectors

Selector CSS Android BB Chrome* FF* IE IE Mobile iOS Opera Opera Mobile Opera Mini Safari
elem > elem 2.1 2.1 7.0, 10.0 4.0 2.0 7 10 3.2 9.0 10.0 5.0-7.0 3.1
elem + elem 2.1 2.1 7.0, 10.0 4.0 2.0 7 10 3.2 9.0 10.0 5.0-7.0 3.1
elem ~ elem 3 2.1 7.0 4.0 3.5 7 10 3.2 9.5 10.0 5.0-7.0 3.2
:checked 3 2.1 7.0 4.0 3.5 9 10 3.2 9.5 10.0 5.0-7.0 3.2
:disabled 3 2.1 7.0 4.0 3.5 9 10 3.2 9.5 10.0 5.0-7.0 3.2
:first-child 2.1 2.1 7.0, 10.0 4.0 2.0 7 10 3.2 9.0 10.0 5.0-7.0 3.1
:first-of-type 3 2.1 7.0 4.0 3.5 9 10 3.2 9.5 10.0 5.0-7.0 3.2
:last-child 3 2.1 7.0 4.0 3.5 9 10 3.2 9.5 10.0 5.0-7.0 3.2
:nth-child() 3 2.1 7.0 4.0 3.5 9 10 3.2 9.5 10.0 5.0-7.0 3.2
[attr] 2.1 2.1 7.0, 10.0 4.0 3.5 7 10 3.2 9.0 10.0 5.0-7.0 3.1
[attr^=val] 3 2.1 7.0 4.0 3.5 7 10 3.2 9.5 10.0 5.0-7.0 3.2
[attr$=val] 3 2.1 7.0 4.0 3.5 7 10 3.2 9.5 10.0 5.0-7.0 3.2
[attr*=val] 3 2.1 7.0 4.0 3.5 7 10 3.2 9.5 10.0 5.0-7.0 3.2

CSS Media Queries

1in = 96px = 2.54cm
2dppx = 192dpi

@media only screen and (-webkit-device-pixel-ratio: 2),/* WebKit DPR */
 only screen and (-moz-device-pixel-ratio: 2),/* FF 16- DPR */,
 only screen and (-o-device-pixel-ratio: 2/1),/* Opera 11.1 */
 only screen and (resolution: 192dpi),/* W3C dppx fallback */
 only screen and (resolution: 2dppx)/* W3C DPR */ {
    /*  */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),/* WebKit DPR */
 only screen and (min--moz-device-pixel-ratio: 2),/* FF 16- DPR */,
 only screen and (-o-min-device-pixel-ratio: 2/1),/* Opera 11.1 */
 only screen and (min-resolution: 192dpi),/* W3C dppx fallback */
 only screen and (min-resolution: 2dppx)/* W3C DPR */ {
    /*  */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),/* WebKit DPR */
 only screen and (-o-min-device-pixel-ratio: 13/10),/* Opera 11.1 */
 only screen and (min-resolution: 120dpi) {
    /* Your code to swap higher DPI images */
}

window.DevicePixelRatio
Feature Chrome Firefox (Gecko) IE Opera (Presto) Safari Android FF Mobile (Gecko) IE Mobile Opera Mobile iOS
resolution 29 3.5 (1.9.1) † 9.0 10.x (2.3) ‐ ? all 10? all ‐
resolution dppx 29 16.0 (16.0) ? 12.10 ‐ ? 16.0 (16.0) ? 12.10 ‐
-webkit-device-pixel-ratio 1.0 ‐ ‐ ‐ 4 all? ‐ ‐ ‐ 4
-moz-device-pixel-ratio ‐ 4 ‐ ‐ ‐ ‐ ? ‐ ‐
-o-device-pixel-ratio ‐ ‐ ‐ 11.10 (2.8) ‐ ‐ ‐ ‐ ?
†
Before Firefox 8 (Gecko 8.0), it erroneously accepted only CSS dimensions that were followed by the unit. From that version, it supports any valid CSS dimensions ( immediately followed by the unit).

Layout

CSS Unit Browser Support

Can I Use: rem

  IE FF Chrome Safari Opera iOS Opera Mini Android Blackberry Opera Mobile Chrome FA FF FA
px all all all all all all all all all all all all
em all all all all all all all all all all all all
rem 9.0 3.6 6.0 5.0 11.6 4.0 ‐ 2.1 7.0 12.0 all 15.0
% all all all all all all all all all all all all
pt all all all all all all all all all all all all
in all all all all all all all all all all all all

Internet Explorer

Internet Explorer 7 and earlier don’t support the CSS value inherit for any properties other than direction and visibility.