CSS hack: Difference between revisions

Revision as of 06:01, 10 January 2021

Revision as of 11:02, 20 January 2021

Line 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 browser.

=== Unsupported CSS ===

Although newer CSS rules are correct by current standards, they are unsupported and therefore 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 23 ⟶ 26:

</syntaxhighlight>

=== 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 99 ⟶ 102:

</syntaxhighlight>

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

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