CSS hack: Difference between revisions

Revision as of 08:34, 23 July 2018

Revision as of 05:41, 27 July 2018

Line 1:

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

== Types of hacks ==

Line 8:

=== 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 JavaScript workarounds to older versions of the browser. No other browsers interpreted these comments or offered similar functionality.

Line 24:

== Criticism ==

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.

== Alternatives ==

===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 vendors have begun to move away from this in favor of user-controlled feature flags.<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 45:

| <code>-epub-</code> || yes || WebKit || [[EPUB|EPUB Working Group]] || [[Chromium (web browser)|Chromium]] / [[Google Chrome]], WebKit-Based Browsers

|-

| <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]]) ||

Line 105:

==== 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 <code>.cssgradients .header</code>.

==== <code>@supports</code> ====