CSS filter
Encyclopedia
- This article is about a CSS hacking technique. Not to be confused with the proprietary Microsoft-specific CSS property.
A CSS filter is a coding
Computer programming
Computer programming is the process of designing, writing, testing, debugging, and maintaining the source code of computer programs. This source code is written in one or more programming languages. The purpose of programming is to create a program that performs specific operations or exhibits a...
technique used to hide or show CSS
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
markup
Markup language
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...
depending on the browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
, 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
This filter uses the prefixes browsers need for certain styles, which are ignored by all other browsers. So defining-moz-color:red; would show up red in all GeckoGecko (layout engine)
Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation and the Mozilla Corporation , as well as in many other open source software projects....
browsers, but the default color in other browsers
p {
color: #000; /* paragraphs in black for browsers that ignore all of the below */
-moz-color: #F00; /* paragraphs in red for Gecko browsers */
-webkit-color: #00F; /* paragraphs in blue for WebKit browsers */
-khtml-color: #0F0; /* paragraphs in green for KHTML browsers */
-xv-color: #FF0; /* paragraphs in yellow for Presto browsers */
}
The styles for specific browsers only should be defined after the style for browsers ignoring it is defined, or be marked with
!important with the style without prefix not marked with !important. This will make the styles with prefix override the style without prefix, resulting in the wanted code for the specific browsers.Commented backslash
This hack exploits a bugSoftware bug
A software bug is the common term used to describe an error, flaw, mistake, failure, or fault in a computer program or system that produces an incorrect or unexpected result, or causes it to behave in unintended ways. Most bugs arise from mistakes and errors made by people in either a program's...
in Internet Explorer for Mac
Internet Explorer for Mac
Internet Explorer for Mac was a proprietary web browser developed by Microsoft for the Macintosh platform. Initial versions were developed from the same code base as Internet Explorer for Windows...
related to comment
Comment (computer programming)
In computer programming, a comment is a programming language construct used to embed programmer-readable annotations in the source code of a computer program. Those annotations are potentially significant to programmers but typically ignorable to compilers and interpreters. Comments are usually...
parsing
Parsing
In computer science and linguistics, parsing, or, more formally, syntactic analysis, is the process of analyzing a text, made of a sequence of tokens , to determine its grammatical structure with respect to a given formal grammar...
. 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./* 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 bugInternet Explorer box model bug
The Internet Explorer box model bug refers to the way in which earlier versions of Internet Explorer handle the sizing of elements in a web page, which differs from the standard way recommended by the W3C for the Cascading Style Sheets language...
, this hack provides a different set of properties to Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
and other browsers. As of version 6
Internet Explorer 6
Internet Explorer 6 is the sixth major revision of Internet Explorer, a web browser developed by Microsoft for Windows operating systems...
, IE has corrected the box model bug in documents which include certain Document Type Declaration
Document Type Declaration
A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document with a Document Type Definition...
s (required by the HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
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 backslashBackslash
The backslash is a typographical mark used mainly in computing. It was first introduced to computers in 1960 by Bob Bemer. Sometimes called a reverse solidus or a slosh, it is the mirror image of the common slash....
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 OperaOpera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector).
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 underscoreUnderscore
The underscore [ _ ] is a character that originally appeared on the typewriter and was primarily used to underline words...
or a hyphen
Hyphen
The hyphen is a punctuation mark used to join words and to separate syllables of a single word. The use of hyphens is called hyphenation. The hyphen should not be confused with dashes , which are longer and have different uses, or with the minus sign which is also longer...
is applied exclusively in Internet Explorer 6 and below.
- elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
This hack uses invalid CSS and there are valid CSS directives to accomplish a similar result. Thus some people do not recommend using it. 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 underscoreUnderscore
The underscore [ _ ] is a character that originally appeared on the typewriter and was primarily used to underline words...
or a hyphen
Hyphen
The hyphen is a punctuation mark used to join words and to separate syllables of a single word. The use of hyphens is called hyphenation. The hyphen should not be confused with dashes , which are longer and have different uses, or with the minus sign which is also longer...
(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
Underscore
The underscore [ _ ] is a character that originally appeared on the typewriter and was primarily used to underline words...
or a hyphen
Hyphen
The hyphen is a punctuation mark used to join words and to separate syllables of a single word. The use of hyphens is called hyphenation. The hyphen should not be confused with dashes , which are longer and have different uses, or with the minus sign which is also longer...
, such as an asterisk
Asterisk
An asterisk is a typographical symbol or glyph. It is so called because it resembles a conventional image of a star. Computer scientists and mathematicians often pronounce it as star...
, is applied exclusively in Internet Explorer 7 and below.
- elem {
width: [W3C Model Width];
*width: [BorderBox Model];
}
This hack uses invalid CSS and there are valid CSS directives to accomplish a similar result. Thus some people do not recommend using it. 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
Thehtml element is the root element of the W3C standard DOMDocument Object Model
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
, but Internet Explorer versions 4 through 6 include a mysterious parent element. 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.This hack uses fully valid CSS.
Star plus hack
Although Internet Explorer 7 no longer recognizes the classic star HTML hack, it has introduced a similar hack using selectors new to IE7:Or...
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.
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.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.
Negation pseudo-class hack
Internet Explorer 8 and below do not support the CSS3:not negation pseudo-class.Internet Explorer 9 added support for CSS3 pseudo-classes including the negation pseudo-class.
.yourSelector {
color: black;
} /* values for IE */
html:not([dummy]) .yourSelector {
color: red;
} /* values for 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).
It then applies the following properties to all elements which do not match this argument.
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./* 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. 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. 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.Criticism
Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updatedPatch (computing)
A patch is a piece of software designed to fix problems with, or update a computer program or its supporting data. This includes fixing security vulnerabilities and other bugs, and improving the usability or performance...
. 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
Microsoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
Internet Explorer development team have asked that people use conditional comment
Conditional comment
Conditional comments are conditional statements interpreted by Microsoft Internet Explorer in HTML source code. Conditional comments can be used to provide and hide code to and from Internet Explorer....
s instead of hacks.
External links
- 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])