CSS hack: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 14:27, 27 February 2024

A CSS hack 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 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

Invalid or non-compliant CSS

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 _width) to target Internet Explorer 6—other browsers will ignore the line, allowing it to be used to write code specific to one 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 !important declaration is recognized as such with any string after the exclamation mark, e.g. !ie.^[1]

Unsupported CSS

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

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.

<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]-->
   <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Critics

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

Browser prefixes

Each of the most popular browser 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.^[2]

List of prefixes

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

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
`-fx-`	Yes		Sun Microsystems (now acquired by Oracle Corporation)	JavaFX applications
`-hp-`			Hewlett-Packard (now HP Inc. and Hewlett Packard Enterprise)
`-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	RealObjects	RealObjects 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

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%);

}

Limitation

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 @supports feature queries.

Feature deletion

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 html element, allowing for CSS rules such as .cssgradients .header.

Feature queries

A new feature known as feature queries was introduced in CSS3, allowing the detection of specific functionality within the CSS (without requiring the use of a JavaScript library for 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 and, or, and not. Obviously, @supports rules will only work on browsers that support @supports.

header {
    display: block;
}

@supports (display: flex) {
    header {
        display: flex;
    }
}

Script polyfills

While JavaScript feature detection and @supports rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. 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.

Conditional comments

References

^ Paul Irish (15 April 2009). "Browser CSS hacks". www.paulirish.com. Retrieved 8 June 2022.
^ "Vendor Prefix". Mozilla Developer Network. Retrieved 12 October 2016.

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.
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>)
How to target only IE (any version) within a stylesheet? – discussion on StackOverflow
Apply style ONLY on IE – discussion on StackOverflow
CSS Comments - How to add comments in CSS

[1] Paul Irish (15 April 2009). "Browser CSS hacks". www.paulirish.com. Retrieved 8 June 2022.

[2] "Vendor Prefix". Mozilla Developer Network. Retrieved 12 October 2016.

[1]

[2]

@@ Line 1: / Line 1: @@
+{{Short description|Coding technique}}
 {{hatnote|This article is about a CSS technique. Not to be confused with the proprietary Microsoft-specific CSS property.}}
+{{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.
@@ Line 5: / Line 7: @@
 === Invalid or non-compliant CSS ===
-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 browser.
+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>
+=== Unsupported CSS ===
+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 ===
@@ Line 12: / Line 19: @@
 The following are examples of the different syntax for these comments.
-<source lang="html4strict">
+<syntaxhighlight lang="html">
 <head>
   <title>Test</title>
@@ Line 19: / Line 26: @@
   <!--[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]-->
+   <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
 </head>
+</syntaxhighlight>
-</source>
-== Criticism ==
+=== Critics ===
 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.
@@ Line 29: / Line 36: @@
 ===Browser prefixes===
-Each of the most popular browser rendering engines has its own vendor-specific prefix for experimental properties. However, due to the proliferation of these properties in live code, the browser vendors have begun to move away from this in favor of user-controlled 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>
+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 ====
-The following is a list of prefixes from various layout engines:
+The following are a list of prefixes from various layout engines:
 {| class="wikitable"
 |-
 ! Vendor Prefix !! In Use    !! Layout Engine    !! Created by            !! Used by
 |-
-| <code>-ah-</code>          || yes       || Formatter        || Antenna House         || Antenna House Formatter
+| <code>-ah-</code>          || Yes       || Formatter        || Antenna House         || Antenna House Formatter
 |-
-| <code>-apple-</code>       || yes       || [[WebKit]]           || [[Apple Inc.]]            || [[Safari (web browser)|Apple Safari 2.0]], Opera Widgets, [[Acid3#Presto and WebKit based browsers|WebKit-Based Browsers (as legacy prefix)]]
+| <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>-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>-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>-hp-</code>          ||           ||                  || [[Hewlett-Packard]] (now [[HP Inc.]] and [[Hewlett Packard Enterprise]])     ||
 |-
-| <code>-khtml-</code>      || yes / yes || [[KHTML]] / WebKit   || [[KDE]]                   || KDE [[Konqueror]] / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)
+| <code>-khtml-</code>      || Yes / 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>-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>-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>-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           || [[YesLogic]]              || YesLogic Prince
+| <code>prince-</code>       || Yes       || [[Prince (software)|Prince]]           || [[YesLogic]]              || YesLogic Prince
 |-
 | <code>-rim-</code>         ||           || WebKit        || [[BlackBerry Limited]]    || RIM Blackberry Browser
 |-
-| <code>-ro-</code>          || yes       || MARTHA           || Real Objects          || Real Objects PDFreactor
+| <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>-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)/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).
+| <code class=nowrap>-webkit-</code>      || yes       || WebKit/Blink || [[Apple Inc.]] ([[WebKit]])/[[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
+| <code>-xv-</code>          || No        || Presto           || Opera Software        || Opera Desktop Browser for Windows 2000/XP
 |}
 ==== Example ====
-<source lang="css">
+<syntaxhighlight lang="css">
 /* Cross-browser css3 linear-gradient */
@@ Line 97: / Line 104: @@
 }
+</syntaxhighlight>
-</source>
-==== Limitations ====
+==== Limitation ====
 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.
-=== Feature detection ===
+=== Feature deletion ===
 ==== 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>.
+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 ====
-==== <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> ====
-A new feature known as feature queries was introduced in CSS3, allowing the detection of specific functionality within the CSS (without requiring the use of a JavaScript library for 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">
+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">
 header {
     display: block;
 }
-@supports (display:flexbox) {
+@supports (display: flex) {
     header {
-        display: flexbox;
+        display: flex;
     }
 }
 </syntaxhighlight>
-=== JavaScript polyfills ===
+=== Script polyfills ===
-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 (for example, [https://github.com/rodneyrehm/viewport-units-buggyfill fixing the implementation of viewport units in mobile Safari]). Since polyfills add or fix functionality in browsers that don't have it, they serve a different purpose than feature queries, but can be used in combination with them.
+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.
-==See also==
-* [[Comparison of web browser engines (CSS support)]]
 * [[Conditional comment]]s
-==Notes==
+==References==
 <references/>
 ==External links==
-* [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
+* [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://browserhacks.com browserhacks.com] - Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
+* [http://browserhacks.com/ browserhacks.com] – Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
-* [http://qooxdoo.org/documentation/general/webkit_css_styles Safari/Webkit (webkit) prefix filters] refix filters]
+* [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]
-* [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/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.
-* [ CSS Filters – CSS-only Filters Summary] – More CSS filters.
 * [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).
+* [http://rafael.adm.br/css_browser_selector – CSS Browser Selector] – Allows to combine browser specific CSS in single stylesheet (using JavaScript).
-* [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 [div])
+* [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]]
-{{Use dmy dates|date=September 2011}}
+* [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}}