CSS filter
A CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS filters are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering.
Prefix filters
Vendor Prefix | In Use | Layout Engine | Created by | Used by |
---|---|---|---|---|
-ah- | yes | Formatter | Antenna House | Antenna House Formatter |
-apple- | yes | WebKit | Apple Inc. | Apple Safari 2.0, Opera Widgets, WebKit-Based Browsers (as legacy prefix) |
-atsc- | Advanced Television Systems Committee standards | |||
-epub- | yes | WebKit | EPUB Working Group | Chromium / Google Chrome, WebKit-Based Browsers |
-hp- | Hewlett-Packard | |||
-khtml- | yes / yes | KHTML / WebKit | KDE | KDE Konqueror / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix) |
-moz- | yes | Gecko | Mozilla Foundation | Gecko-Based Browsers[?], Mozilla Firefox |
-ms- | yes | Trident / MSHTML | Microsoft Corporation | Microsoft Internet Explorer |
mso- | Office | Microsoft Corporation | Microsoft Office[?] | |
-o- | yes | Presto | Opera Software | Opera desktop Browser up to version 12.16, Opera Mini, and Opera Mobile up to version 12.1, Nintendo DS & Nintendo DSi Browser, Nintendo Wii Internet Channel |
prince- | yes | Prince | YesLogic | YesLogic Prince |
-rim- | WebKit | BlackBerry Limited | RIM Blackberry Browser | |
-ro- | yes | MARTHA | Real Objects | Real Objects PDFreactor |
-tc- | TallComponents | TallComponents | ||
-wap- | yes | Presto | The WAP Forum | Opera Desktop Browser and Opera Mobile, The WAP Forum |
-webkit- | yes | WebKit/Blink | Apple Inc. (WebKit)/Google Inc. (Blink) | Apple Safari & Safari for iOS (WebKit), Chromium / Google Chrome desktop and mobile (Blink), Opera desktop and mobile from version 14 (Blink), Android browser (Blink), Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 and later (WebKit), Blackberry Browser 6.0 and later (WebKit). |
-xv- | no | Presto | Opera Software | Opera Desktop Browser for Windows 2000/XP |
Most browsers have CSS properties that apply in that browser only, or at least in the underlying render engine.[1] The prefix on these properties is specific to each rendering engine.[2] Here is an example.
/* Cross-browser css3 linear-gradient */
.linear-gradient {
/* Gecko browser (Firefox) */
background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);
/* Opera */
background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);
/* older Webkit syntax */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #D7D), color-stop(1, #068));
/* Webkit (Safari, Chrome, iOS, Android) */
background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);
/* W3C */
background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);
}
Trident
-ms-
— All experimental properties are prefixed with "-ms-", e.g. -ms-interpolation-mode
instead of interpolation-mode
.
Gecko
-moz-
— All experimental selectors, properties and values are prefixed with "-moz-", e.g. ::-moz-selection
instead of ::selection
.
WebKit
-webkit-
— All experimental selectors, properties and values are prefixed with "-webkit-", e.g. -webkit-box-shadow
instead of box-shadow
.
KHTML
-khtml-
— All experimental selectors, properties and values are prefixed with "-khtml-", e.g. -khtml-opacity
instead of opacity
.
Presto
-
-xv-
— All new selectors, properties and values introduced by CSS3 Speech Module are prefixed with "-xv-" (but not found in CSS2 aural style sheets), e.g.-xv-voice-rate
instead ofvoice-rate
. -
-o-
— All experimental properties are prefixed with "-o-", e.g.-o-transition-property
instead oftransition-property
.
The DOM properties corresponding to vendor-specific experimental CSS properties are prefixed with the vendor-prefix, without any hyphens.
Commented backslash
This hack exploits a bug in Internet Explorer for Mac related to comment parsing. A comment ending in \*/
is not properly closed in IE Mac, so rules that need to be ignored in IE Mac can be placed after such a comment. Another comment is needed after the rule to close the comment for IE Mac.[3]
/* Ignore the next rule in IE mac \*/
selector { ...styles... }
/* Stop ignoring in IE mac */
Box model hack
Called the "box model hack" because the bug it is most often used to work around is the Internet Explorer box model bug, this hack provides a different set of properties to Internet Explorer and other browsers. As of version 6, IE has corrected the box model bug in documents which include certain Document Type Declarations (required by the HTML specifications) in certain ways.
#elem {
width: [IE width];
voice-family: "\"}\"";
voice-family: inherit;
width: [Other browser width];
}
html>body #elem {
width: [Other browser width];
}
The first voice-family
statement is set to the string "}"
, but an IE parser bug will interpret it as a string with a single backslash followed by a closing brace for the end of the rule. voice-family
is chosen because it will not affect rendering on a screen style sheet. The second rule uses the html>body
hack for browsers such as Opera 5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector).[4]
Underscore hack
Versions 6 and below of Internet Explorer recognize properties with this prefix (after discarding the prefix). All other browsers ignore such properties as invalid. Therefore, a property that is preceded by an underscore or a hyphen is applied exclusively in Internet Explorer 6 and below.
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
This hack uses invalid CSS[5] and there are valid CSS directives to accomplish a similar result. Thus some people do not recommend using it.[6][7] On the other hand, this hack does not change the specificity of a selector making maintenance and extension of a CSS file easier.
Star hack
Versions 7 and below of Internet Explorer recognize properties which are preceded by non-alphanumeric characters except an underscore or a hyphen (after discarding the prefix). All other browsers ignore such properties as invalid. Therefore, a property that is preceded by an non-alphanumeric character other than an underscore or a hyphen, such as an asterisk, is applied exclusively in Internet Explorer 7 and below.
#elem {
width: [W3C Model Width];
*width: [BorderBox Model];
}
This hack uses invalid CSS[5] and there are valid CSS directives to accomplish a similar result. On the other hand, this hack doesn't change the specificity of a selector making maintenance and extension of a CSS file easier.
Star HTML hack
The html
element is the root element of the W3C standard DOM, but Internet Explorer versions 4 through 6 include a mysterious parent element.[8] Fully compliant browsers will ignore the * html
selector, while IE4-6 will process it normally. This enables rules to be specified for these versions of Internet Explorer which will be ignored by all other browsers. For example, this rule specifies text size in Internet Explorer 4-6, but not in any other browsers.
* html p {font-size: 5em; }
This hack uses fully valid CSS.[5]
Star plus hack
Although Internet Explorer 7 no longer recognizes the classic star HTML hack,[9] it has introduced a similar hack using selectors new to IE7:
*:first-child+html p { font-size: 5em; }
Or...
*+html p { font-size: 5em; }
This code will be applied in Internet Explorer 7, but not in any other browser. Note that this hack only works in IE7 standards mode; it does not work in quirks mode. This hack is also supported by Internet Explorer 8's compatibility view (IE7 standards mode), but not in IE8 standards mode. Like the star HTML hack, this uses valid CSS.[5]
Child selector hack
Internet Explorer 6 and earlier do not support the "child selector" (>
), allowing rules to be specified for all other browsers. For example, this rule will turn paragraph text blue in Firefox, but not in IE before version 7.[5]
html > body p { color: blue; }
Although IE7 added support for the child selector, a variation of the hack has been discovered which allows Internet Explorer 7 to be excluded as well. When an empty comment occurs immediately after the child selector, IE7 will drop the rule that follows, as will earlier versions of IE.
html >/**/ body p { color: blue; }
Negation pseudo-class hack
Internet Explorer 8 and below do not support the CSS3 :not()
negation pseudo-class.[10]
Internet Explorer 9 added support for CSS3 pseudo-classes including the negation pseudo-class.[11]
.yourSelector {
color: black; /* value for IE 8 and below */
}
html:not([ie8andbelow]) .yourSelector {
color: red; /* value for Chrome, Safari, Opera, Firefox, and IE9+ */
}
The negation pseudo-class accepts any simple selector: A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class. (excluding pseudo-elements and the negation pseudo-class itself).
[12]
It then applies the following properties to all elements which do not match this argument. Note that the ie8andbelow
selector has no meaning, it is simply a string that will never match an actual selector. The string dummy
would work equally as well.
A variation of this hack uses the :root
pseudo-class, which is also unrecognized by Internet Explorer 8 and below.
body:empty hack
The :empty pseudo-class, introduced in CSS3, is supposed to select only elements which do not contain any content. However, Gecko 1.8.1 and below (used in Firefox 2.0.x and below) incorrectly selects body:empty even when the body element contains content (which it usually should). This can be taken advantage of to feed exclusive CSS rules to Firefox 2.0.x and below, along with other browsers using the same rendering engine.[5]
/* Make p elements disappear in Firefox 2.0.x and below */
body:empty p {
display: none;
}
This hack uses valid CSS.
!important quirks
Internet Explorer 7 and below have a few quirks related to the !important declaration, which is supposed to give a value higher importance than normal.[5] IE7 and earlier accept virtually any string in place of important and process the value normally, while other browsers will ignore it. This can be used to specify values exclusively for these browsers.
/* Make text blue in IE7 and below, black in all other browsers */
body {
color: black;
color: blue !ie;
}
Similarly, IE7 and earlier accept non-alphanumeric characters after an !important declaration, while other browsers will ignore it.
body {
color: black;
color: blue !important!;
}
Both of these hacks use invalid CSS. Internet Explorer 6 and below also have a problem with !important declarations when the same property of the same element has another value specified within the same code block, without another !important declaration. This should result in the second value being overridden by the first, but IE6 and lower do not honor this.
/* Make text blue in IE6 and lower */
body {
color: black !important;
color: blue;
}
This hack uses valid CSS.
Dynamic properties
Between versions 5 and 7, Internet Explorer has supported a proprietary syntax for applying CSS properties which change dynamically, sometimes referred to as CSS expressions.[13] Dynamic properties are typically combined with other hacks to compensate for unsupported properties in older versions of Internet Explorer.
div {
min-height: 300px;
/* simulates min-height in IE6 */
_height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}
Conditional comment
Conditional comments are conditional statements interpreted by Microsoft Internet Explorer in HTML source code.
<head>
<title>Test</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
Criticism
Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. Many hacks that used to hide CSS from Internet Explorer 6 and lower no longer work in version 7 due to its improved support for CSS standards. The Microsoft Internet Explorer development team have asked that people use conditional comments instead of hacks.[14] Unfortunately, Microsoft removed support for Conditional Comments after Internet Explorer 9.[15]
See also
Notes
- ↑ - WebKit CSS Styles
- ↑ Render Engine Prefixes
- ↑ QuirksMode - CSS Hacks
- ↑ "Box Model Hack".
- 1 2 3 4 5 6 7 "WebDevout - CSS Hacks". WebDevout.
- ↑ http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml#unrecommended-vendor_prefix
- ↑ http://stackoverflow.com/questions/15641506/css-underscore-hack-for-ie-still-relevant
- ↑ "IEBlog". Improving the CSS 2.1 strict parser for IE 7. Microsoft.
- ↑ The IEBlog
- ↑ "Sitepoint CSS Reference". SitePoint. Retrieved 2009-01-07.
- ↑ MSDN. "CSS Compatibility and Internet Explorer". Retrieved 19 March 2011.
- ↑ "Simple selectors". World Wide Web Consortium. Retrieved 2011-07-04.
- ↑ About Dynamic Properties
- ↑ IEBlog – Call to action: The demise of CSS hacks and broken pages
- ↑ Conditional comments are no longer supported
External links
- Browser Strangeness - Jeff Clayton's Live CSS hacks and tests to filter for mainstream browsers, including the only known CSS Hacks for Safari 7 and 8
- browserhacks.com - Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
- Safari/Webkit (webkit) prefix filters refix filters]
- Mozilla (moz) prefix filters
- Opera (wap) prefix filters - This page has all of Opera's CSS selectors.
- CSS Filters – A fairly complete table of CSS hacks which show and hide rules from specific browsers.
- CSS Filters – CSS-only Filters Summary – More CSS filters.
- Filters and Cross-Over – CSS filters. Parsing errors marked red.
- - CSS Browser Selector - Allows to combine browser specific CSS in single stylesheet (using JavaScript).
- - #IEroot - Targeting IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root [div])