CSS hack: Difference between revisions

Revision as of 11:02, 20 January 2021

Revision as of 08:28, 16 December 2021

Line 1:

{{hatnote|This article is about a CSS technique. Not to be confused with the proprietary Microsoft-specific CSS property.}}

{{Use dmy dates|date=SeptemberDecember 20112021}}

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 32 ⟶ 33:

===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 vendor have begin to move away from this in favor of feature flag.<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 ====

Line 50 ⟶ 51:

| <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 / yes || [[KHTML]] / WebKit || [[KDE]] || KDE [[Konqueror]] / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)

Line 111 ⟶ 112:

==== 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 (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">

Line 125:

</syntaxhighlight>

=== 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. 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.

* [[Comparison of web browser engines (CSS support)]]

Line 134:

==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://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 [div])

{{Use dmy dates|date=September 2011}}

{{DEFAULTSORT:Css Filter}}