CSS hack: Difference between revisions

Revision as of 22:55, 31 January 2019

Revision as of 23:14, 31 January 2019

Line 100:

==== Limitations ====

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 <codesyntaxhighlight lang="CSS" inline>@supports</codesyntaxhighlight> feature queries.

=== Feature detection ===

==== 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 <codesyntaxhighlight lang="CSS" inline>.cssgradients .header</codesyntaxhighlight>.

==== <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, <codesyntaxhighlight lang="CSS" inline>@supports</codesyntaxhighlight> rules will only work on browsers that support <codesyntaxhighlight lang="CSS" inline>@supports</codesyntaxhighlight>. <syntaxhighlight lang="css">

header {

display: block;

Line 121:

=== JavaScript polyfills ===

While JavaScript feature detection and <codesyntaxhighlight lang="CSS" inline>@supports</codesyntaxhighlight> 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.

==See also==