Content deleted Content added
Artoria2e5 (talk | contribs) |
Remove hatnote: no target (WP:HATNOTE) |
||
| (17 intermediate revisions by 14 users not shown) | |||
Line 1:
{{Short description|Coding technique}}
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 ⟶ 6:
=== 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 [[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 ===
Line 11 ⟶ 14:
=== 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.
<syntaxhighlight lang="
<head>
<title>Test</title>
Line 22 ⟶ 24:
<!--[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]-->
</head>
</syntaxhighlight>
Line 32 ⟶ 34:
===Browser prefixes===
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
==== List of prefixes ====
Line 40 ⟶ 42:
! Vendor Prefix !! In Use !! Layout Engine !! Created by !! Used by
|-
| <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#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]]
|-
| <code>-khtml-</code> || {{Yes
|-
| <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 ||
|-
| <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> ||
|-
| <code>-xv-</code> || {{No}} || Presto || Opera Software || Opera Desktop Browser for Windows 2000/XP
|}
Line 108 ⟶ 110:
==== 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 ====
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">▼
▲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 (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:
header {
display:
}
}
</syntaxhighlight>
=== Script
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==
Line 134 ⟶ 133:
==External links==
* [https://web.archive.org/web/20150311021026/http://browserstrangeness.bitbucket.org/css_hacks.html Browser Strangeness]
* [http://browserhacks.com/ browserhacks.com]
* [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]
* [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
* [https://web.archive.org/web/20110720143842/http://www.positioniseverything.net/articles/cc-plus.html
* [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}}
| |||