CSS hack: Difference between revisions

Revision as of 04:42, 11 July 2020

Revision as of 09:56, 6 October 2020

Line 1:

{{DISPLAYTITLE:CSS }}

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

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 23 ⟶ 24:

</syntaxhighlight>

== CriticismCritics ==

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 ⟶ 30:

===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 vendorsvendor have begunbegin to move away from this in favor of user-controlled feature flagsflag.<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 isare a list of prefixes from various layout engines:

{| class="wikitable"

|-

Line 99 ⟶ 100:

</syntaxhighlight>

==== LimitationsLimitation. ====

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

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

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

Line 120 ⟶ 121:

</syntaxhighlight>

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

==See also==

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

* [[Conditional comment]]s

==NotesNoted==

<references/>

==ExternalInternal 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)

Line 145 ⟶ 144:

{{DEFAULTSORT:Css Filter}}

[[Category:Cascading Style Sheets]]

__FORCETOC__

__NOEDITSECTION__

__DISAMBIG__

__NOINDEX__

__NONEWSECTIONLINK__