CSS hack: Difference between revisions

Revision as of 03:09, 15 November 2007

Latest revision as of 19:25, 17 June 2025

(239 intermediate revisions by more than 100 users not shown)

Line 1:

{{Short description|Coding technique}}

A '''CSS Filter''' is a coding technique used to hide or show CSS markup depending on the browser's brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. Web developers will implement CSS Filters when attempting to achieve consistent layout appearance in browsers that do not have a consistent CSS behavior.

{{Use dmy dates|date=December 2021}}

A '''CSS hack''' is a [[Computer programming|coding]] technique used to hide or show [[Cascading Style Sheets|CSS]] [[Markup language|markup]] depending on the [[Web browser|browser]], version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the [[W3C]] [[World Wide Web Consortium#Standards|standards]]. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

== Types of hacks ==

Some of these CSS Filters make use of expected tags called Conditional Comments to denote special instructions. Other developers have exploited the rendering flaws of certain browsers when Conditional Comments were not available or were perceived to be a better solution at the time.

=== Invalid or non-compliant CSS ===

The practice of exploiting rendering flaws in different browsers is commonly referred to as CSS Hacks. These hacks may provide desired results across all the browsers the developers chooses to support at the time, however, they may not have the same results when new browsers are released.

Due to quirks in the interpretation of CSS by various browsers, most CSS hacks involve writing invalid CSS rules that are interpreted only by specific browsers, or relying on bugs in specific browsers. An example of this is prefixing rules with an underscore (as in <code>_width</code>) to target Internet Explorer 6—other browsers will ignore the line, allowing it to be used to write code specific to one [[Web browser|browser]].

Similar CSS hacks involve inducing syntax errors like asterisks, missing whitespace, and CSS comments around property names. Additionally, in [[Internet Explorer]] 6 and 7, the <code>!important</code> declaration is recognized as such with any string after the exclamation mark, e.g. <code>!ie</code>.<ref>{{cite web |title=Browser CSS hacks |author=Paul Irish |url=https://www.paulirish.com/2009/browser-specific-css-hacks/ |website=www.paulirish.com |access-date=8 June 2022 |date=2009-04-15}}</ref>

=== Conditional Comments ===

{{mergefrom|Conditional comment}}

Conditional Comments are supported by Microsoft Internet Explorer (version 5 or greater[http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]). They allow web developers to show or hide [[HTML]] code based on the version of the viewer's browser.

=== Unsupported CSS ===

There are two types of conditional comments, downlevel revealed which is a proprietary Microsoft HTML tag and downlevel hidden which are ignored by non Microsoft browsers because they are treated as a standard comment.

Although newer CSS rules are correct by current standards, they are ignored by older browsers as "invalid". By writing old rules followed by newer rules that cancel out or modify the old ones, it is possible to only activate certain rules on older browsers.

=== Conditional comments ===

Conditional comments can be used to hide certain styles from a specific browser, or even to supply a tailored style sheets for individual browser versions.

Prior to version 10, [[Internet Explorer]] supported a special comment syntax that would allow blocks of HTML to be read only by specific versions of the browser. These comments are mostly used to provide specific CSS and JavaScript workarounds to older versions of the browser. No other browsers interpreted these comments or offered similar functionality.

The following are examples of the different syntax for these comments.

Below is an example of a "downlevel hidden" conditional comment:

<syntaxhighlight lang="html">

<pre>

<head>

<!--[if IE 7]>

<title>Test</title>

<link rel="stylesheet" type="text/css" href="ie7only.css">

<link href="all_browsers.css" rel="stylesheet" type="text/css">

<![endif]-->

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

</pre>

<!--[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]-->

<link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

</head>

</syntaxhighlight>

=== Critics ===

or

Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. These hacks can lead to unexpected behavior in newer browsers that may interpret them differently than their predecessors. Since Internet Explorer 6 and 7 have fallen out of use, CSS hacks have declined as well. Modern methods of feature targeting are less fragile and error-prone.

== Alternatives ==

<pre>

<!--[if lte IE 7]>

<style>

some css tags

</style>

<![endif]-->

</pre>

===Browser prefixes===

This tag will let IE 7 read the specified CSS file while IE 6 or less will ignore it. Browsers other than IE will also ignore it because it looks like a standard HTML comment. With different uses of this tag you can also single out IE 6, IE 5, or versions of IE that are greater or lesser than a specified version.

Each of the most popular browser [[Rendering (computer graphics)|rendering]] engines has its own [[vendor prefix]] for experimental properties. However, due to the proliferation of these properties in live code, the browser [[vendors]] have begun moving away from this practice in favor of feature flags.<ref>{{Cite web|url=https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix|title=Vendor Prefix|website=Mozilla Developer Network|access-date=2016-10-12}}</ref>

==== List of prefixes ====

Below is an example of a "downlevel revealed" conditional comment:

The following are a list of prefixes from various layout engines:

<pre>

{| class="wikitable"

<![if !IE]>

|-

<link rel="stylesheet" type="text/css" href="non-ie.css">

! Vendor Prefix !! In Use !! Layout Engine !! Created by !! Used by

<![endif]>

|-

</pre>

| <code>-ah-</code> || {{Yes}} || Formatter || Antenna House || Antenna House Formatter

This is recommended by Microsoft for when the content should be exposed to non-IE browsers.

|-

| <code>-apple-</code> || {{Yes}} || [[WebKit]] || [[Apple Inc.]] || [[Safari (web browser)|Apple Safari 2.0]], Opera Widgets, [[Acid3#Chrome, Presto and WebKit based browsers|WebKit-Based Browsers (as legacy prefix)]]

|-

| <code>-atsc-</code> || || || [[Advanced Television Systems Committee standards]] ||

|-

| <code>-epub-</code> || {{Yes}} || WebKit || [[EPUB|EPUB Working Group]] || [[Chromium (web browser)|Chromium]] / [[Google Chrome]], WebKit-Based Browsers

|-

| <code>-fx-</code> || {{Yes}} || || [[Sun Microsystems]] (now acquired by [[Oracle Corporation]]) || [[JavaFX]] applications

|-

| <code>-hp-</code> || || || [[Hewlett-Packard]] (now [[HP Inc.]] and [[Hewlett Packard Enterprise]]) ||

|-

| <code>-khtml-</code> || {{Yes}} || [[KHTML]] / WebKit || [[KDE]] || KDE [[Konqueror]] / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)

|-

| <code>-moz-</code> || {{Yes}} || [[Gecko (software)|Gecko]] || [[Mozilla Foundation]] || Gecko-Based Browsers[?], Mozilla Firefox

|-

| <code>-ms-</code> || {{Yes}} || [[Trident (layout engine)|Trident]] / MSHTML || [[Microsoft Corporation]] || [[Internet Explorer|Microsoft Internet Explorer]]

|-

| <code>mso-</code> || || Office || Microsoft Corporation || Microsoft Office[?]

|-

| <code>-o-</code> || {{Yes}} || [[Presto (layout engine)|Presto]] || [[Opera Software]] || [[Opera (web browser)|Opera desktop Browser up to version 12.16]], [[Opera Mini]], and [[Opera Mobile|Opera Mobile up to version 12.1]], [[Nintendo DS]] & [[Nintendo DSi]] Browser, Nintendo Wii Internet Channel

|-

| <code>-prince-</code> || {{Yes}} || [[Prince (software)|Prince]] || [[YesLogic]] || YesLogic Prince

|-

| <code>-rim-</code> || || WebKit || [[BlackBerry Limited]] || RIM Blackberry Browser

|-

| <code>-ro-</code> || {{Yes}} || MARTHA || RealObjects || RealObjects PDFreactor

|-

| <code>-tc-</code> || || || TallComponents || TallComponents

|-

| <code>-wap-</code> || {{Yes}} || Presto || [[Open Mobile Alliance|The WAP Forum]] || Opera Desktop Browser and Opera Mobile, The WAP Forum

|-

| <code class=nowrap>-webkit-</code> || {{Yes}} || WebKit/Blink || [[Apple Inc.]] ([[WebKit]])/<br/>[[Google|Google Inc.]] ([[Blink (browser engine)|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).

|-

| <code>-xv-</code> || {{No}} || Presto || Opera Software || Opera Desktop Browser for Windows 2000/XP

|}

==== Example ====

Microsoft acknowledges this method is not standardized markup for comments[http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp], intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique[http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/] for downlevel-revealed conditional comments in order to only use standardized markup.

<syntaxhighlight lang="css">

/* Cross-browser css3 linear-gradient */

<pre>

.linear-gradient {

<!--[if !IE]>-->

<link rel="stylesheet" type="text/css" href="non-ie.css">

<!--<![endif]-->

</pre>

Adding the dashes before and after each if statement tag completes them as a valid HTML comment and leaves center code open to rendering on non-IE browsers.

/* Gecko browser (Firefox) */

While this method is functional in current versions of Internet Explorer, there is no guarantee that future versions will continue to operate this way.

background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);

/* Opera */

Note: Internet Explorer 4 and below do not support conditional comments.

background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);

/* older Webkit syntax */

=== "Hacks" ===

background-image: -webkit-gradient(linear, left top, left bottom,

"Hacks" are style definitions that exploit known peculiarities and bugs to control whether style rules are seen by a specific browser version. Care should be taken when using hacks: website authors should check that hacks still work as intended when new version of browsers are released.

color-stop(0, #D7D), color-stop(1, #068));

==== Import Hacks ====

The <code>@import</code> statement is not supported at all in [[Netscape 4]], so many sites will import their real stylesheets from a small inline stylesheet to hide it from IE. IE 5 Mac has parsing bugs related to the import statement.

<!--details?-->

/* Webkit (Safari, Chrome, iOS, Android) */

==== Parsing Hacks ====

background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);

There are many hacks based on CSS parser bugs in particular browsers, particularly parsing of comments, and [[escape character|backslash-escaping]].

/* W3C */

===== Commented Backslash =====

background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);

This hack uses 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.

<pre>/* Ignore the next rule in IE mac \*/

selector { ...styles... }

/* Stop ignoring in IE mac */</pre>

===== "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 IE and other browsers.

<pre>#elem {

width: [IE width];

voice-family: "\"}\"";

voice-family:inherit;

width: [Other browser width];

}

</syntaxhighlight>

html>body #elem {

width:[Other browser width];

}

</pre>

==== Limitation ====

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 } for the end of the rule. voice-family is chosen because it will not affect rendering on a screen stylesheet. The second rule uses the [[#html>body hack|html>body hack]] for browsers such as [[Opera (Internet suite)|Opera]] 5 that have the parsing bug but do not have the box model bug (and, additionally, which support the child selector)

Vendor prefixes were designed for features that were under development, meaning that the syntax may not even be final. Also, adding a rule for each browser's implementation of a function does not scale well when you want to support many browsers. Consequently, the major browser vendors are moving away from vendor prefixes in favor of other methods such as <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> feature queries.

==== SelectorFeature Hacksdeletion ====

===== Star HTML hack =====

The <code>html</code> element is the root element of the W3C standard [[Document Object Model|DOM]], but Internet explorer versions 5.5 and 6 include a mysterious parent element. Fully-compliant browsers will ignore the <code>* html</code> selector, while IE 5.5 and 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 5.5 and 6, but not in any other browsers.

* html p {font-size: 5em; }

==== JavaScript feature detection ====

Multiple [[JavaScript]] libraries exist to detect what features are available in a particular browser so that CSS rules can be written to target them. Libraries such as Modernizr add classes to the <code>html</code> element, allowing for CSS rules such as <syntaxhighlight lang="CSS" inline>.cssgradients .header</syntaxhighlight>.

==== Feature queries ====

Same way, only IE7 will catch this rule:

*:first-child+html p {font-size: 5em; }

A new feature known as feature queries was introduced in [[CSS|CSS3]], allowing the detection of specific functionality within the CSS (without requiring the use of a JavaScript library for [[feature detection (web development)|feature detection]]). This new directive can be used to check for the support or lack of support for a specific feature, and checks can be combined with <code>and</code>, <code>or</code>, and <code>not</code>. Obviously, <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> rules will only work on browsers that support <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight>. <syntaxhighlight lang="css">

===== html>body hack =====

header {

Versions of Internet Explorer before version 7 do not support the "child selector" (<code>></code>), allowing rules to be specified for all browsers except Internet Explorer. For example, this rule will turn paragraph text blue in Firefox, but not in IE before version 7.

display: block;

html&gt;body p {color: blue; }

}

@supports (display: flex) {

===== Negation pseudo class hack =====

header {

All versions of Internet Explorer and Opera do not support the "negation pseudo class" (<code>not()</code>) [http://www.ceprix.net/archives/css-filter-for-ie7/] that is a Mozilla's CSS extension.

display: flex;

<pre>

}

.yourSelector {

}

color: black;

</syntaxhighlight>

} /* values for IE */

html:not([dummy]) .yourSelector {

color: red;

} /* values for Safari and Firefox */

@media all and (min-width: 0px) { .yourSelector {

color: blue;

} } /* values for Opera */

</pre>

==== CriticismsScript ofpolyfills Hacks ====

While JavaScript feature detection and <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. [[Polyfill (programming)|Polyfills]], scripts that make behavior consistent across all browsers, can be used to add support for new CSS rules (for example, [[media queries]] in IE 8) as well as fix bugs in specific browsers. Since polyfills add or fix functionality in browsers that do not have it, they serve a different purpose than feature queries, but can be used in combination with them.

==References==

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 Internet Explorer 7 due to Internet Explorer 7 improved support for CSS standards. The Microsoft Internet Explorer development team have asked that people use conditional comments instead[http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx] of hacks.

<references/>

== External links ==

* [https://web.archive.org/web/20150311021026/http://browserstrangeness.bitbucket.org/css_hacks.html 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

* [http://centricle.com/ref/css/filters/ CSS Filters] - A fairly complete table of CSS "hacks" which show and hide rules from specific browsers

* [http://browserhacks.com/ browserhacks.com] – Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)

* [https://web.archive.org/web/20120212190720/http://qooxdoo.org/documentation/general/webkit_css_styles Safari/Webkit (webkit) prefix filters] refix filters]

* [https://developer.mozilla.org/Special:Tags?tag=CSS:Mozilla+Extensions Mozilla (moz) prefix filters]

* [https://web.archive.org/web/20161221232725/http://www.opera.com/docs/specs/opera9/css/index.dml Opera (wap) prefix filters] – This page has all of Opera's CSS selectors.

* [https://web.archive.org/web/20060804012032/http://centricle.com/ref/css/filters/ CSS Filters] – A fairly complete table of CSS hacks which show and hide rules from specific browsers.

* [https://web.archive.org/web/20070715175654/http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html Filters and Cross-Over] – CSS filters. Parsing errors marked red.

* [http://rafael.adm.br/css_browser_selector – CSS Browser Selector] – Allows to combine browser specific CSS in single stylesheet (using JavaScript).

* [https://web.archive.org/web/20110720143842/http://www.positioniseverything.net/articles/cc-plus.html – #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 {{Tag|div|o}})

* [https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet How to target only IE (any version) within a stylesheet?] – discussion on [[StackOverflow]]

* [https://stackoverflow.com/questions/11173106/apply-style-only-on-ie Apply style ONLY on IE] – discussion on [[StackOverflow]]

* [https://www.rareprogrammer.com/css-comments CSS Comments] - How to add comments in CSS

{{DEFAULTSORT:Css Filter}}

{{Compu-lang-stub}}

[[Category:Stylesheet languages]]

[[Category:Cascading Style Sheets]]