CSS hack

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C 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.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C 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. Test ===Browser prefixes=== Each of the most popular browser rendering engines has its own vendor prefix for experimental properties. However, due to the proliferation of these properties in live code, the browser vendors have begun moving away from this practice in favor of feature flags. /* Cross-browser css3 linear-gradient */ .linear-gradient { /* Gecko browser (Firefox) */ background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%); /* Opera */ background-image: -o-linear-gradient(top, #D7D 0%, #068 100%); /* older Webkit syntax */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D7D), color-stop(1, #068)); /* Webkit (Safari, Chrome, iOS, Android) */ background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%); /* W3C */ background-image: linear-gradient(to bottom, #D7D 0%, #068 100%); } 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 @supports feature queries. 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 html element, allowing for CSS rules such as .cssgradients .header . 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 and , or , and not . Obviously, @supports rules will only work on browsers that support @supports . header { display: block; } @supports (display: flex) { header { display: flex; } } While JavaScript feature detection and @supports rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. 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. ==References== ==External links== 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 browserhacks.com – Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton) Safari/Webkit (webkit) prefix filters refix filters] Mozilla (moz) prefix filters Opera (wap) prefix filters – This page has all of Opera's CSS selectors. CSS Filters – A fairly complete table of CSS hacks which show and hide rules from specific browsers. Filters and Cross-Over – CSS filters. Parsing errors marked red. – CSS Browser Selector – Allows to combine browser specific CSS in single stylesheet (using JavaScript). – #IEroot – Targeting IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root ) How to target only IE (any version) within a stylesheet? – discussion on StackOverflow Apply style ONLY on IE – discussion on StackOverflow CSS Comments - How to add comments in CSS

Text derived from https://en.wikipedia.org/w/index.php?oldid=1322617155 under CC BY-SA 4.0; modifications have been made.