CSS hack: Difference between revisions

Content deleted Content added
No edit summary
Line 9:
=== Conditional comments ===
{{Main article|Conditional comment}}
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 JavascriptJavaScript 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.
Line 102:
=== Feature detection ===
 
==== JavascriptJavaScript 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. LibrariesJavaScript such as Modernizr add classes to the <code>html</code> element, allowing for CSS rules such as <code>.cssgradients .header</code>.
 
==== <code>@supports</code> ====
A new feature known as feature queries was introduced in CSS 3, allowing the detection of specific functionality within the CSS (without requiring the use of a JavascriptJavaScript 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, <code>@supports</code> rules will only work on browsers that support <code>@supports</code>. <syntaxhighlight lang="css">
header {
display: block;
Line 118:
</syntaxhighlight>
 
=== JavascriptJavaScript polyfills ===
While JavascriptJavaScript feature detection and <code>@supports</code> rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. [[Polyfill|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==