CSS hack is a technical coding 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 standard W3C . CSS hacks are sometimes used to achieve consistent layout 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

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 specific browser bugs. An example of this is prefixing rules with an underscore (as in _width) to target Internet Explorer 6-other browsers will ignore the line, allowing it to be used to write code specific to one browser.

Conditional comments

Main article: Conditional comment

Prior to version 10, Internet Explorer has a special syntax that would allow blocks of HTML to be read 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.

The following are examples of the different syntax for these comments.

< head >
 < title > Test </ title >
 < link href = "all_browsers.css" rel = "stylesheet" type = "text / css" >
 <! - [if IE]> <link href = "ie_only.css "rel =" stylesheet "type =" text / css "> <! [endif] ->
 <! - [if IE 7]> <link href =" ie_6_and_below.css "rel =" stylesheet "type =" text / css "> <! [endif] ->
 <! - [if! IE 7]> <! [IGNORE [-> <! [IGNORE []]> < link href = "recent.css " rel = " stylesheet " type = " text / css " > <! - <! [endif] ->
 <! - [if! IE] -> < link href = "not_ie.css" rel = "stylesheet" type = "text / css" > <! - <! [endif] ->
</ head >

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 than they can 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 functional 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, the browser is a tool for the use of these devices. [1]

List of prefixes

The following is a list of prefixes from various layout engines:

Vendor Prefix In Use Layout Engine Created by Used by
-ah- yes Formatter Antenna House Antenna House Formatter
-apple- yes WebKit Apple Inc. Apple Safari 2.0 , Opera Widgets, WebKit-Based Browsers (as legacy prefix)
-atsc- Advanced Television Systems Committee standards
-epub- yes WebKit EPUB Working Group Chromium / Google Chrome , WebKit-Based Browsers
-hp- Hewlett-Packard (now HP Inc. andHewlett Packard Enterprise )
-khtml- yes / yes KHTML / WebKit KDE KDE Konqueror / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browser (as a legacy prefix)
-moz- yes Gecko Mozilla Foundation Gecko-Based Browsers [?], Mozilla Firefox
-ms- yes Trident / MSHTML Microsoft Corporation Microsoft Internet Explorer
mso- Office Microsoft Corporation Microsoft Office [?]
-o- yes Presto Opera Software Desktop Opera Browser up to 12.16 , Opera Mini , and Opera Mobile up to 12.1 , Nintendo DS & Nintendo DSi Browser, Nintendo Wii Internet Channel
prince- yes Prince YesLogic YesLogic Prince
-rim- WebKit BlackBerry Limited RIM Blackberry Browser
-ro- yes MARTHA Real Objects Real Objects PDFreactor
-tc- TallComponents TallComponents
-wap- yes Presto The WAP Forum Opera Desktop Browser and Mobile Opera, The WAP Forum
-webkit- yes WebKit / Blink Apple Inc. (WebKit) / Google Inc. (Blink) Apple Safari & Safari for iOS (WebKit), Chromium / Chrome desktop and mobile (Blink), Opera desktop and mobile from version 14 (Blink), Android browser (Blink), Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 and later ( WebKit), BlackBerry Browser 6.0 and later (WebKit).
-xv- No. Presto Opera Software Opera Desktop Browser for Windows 2000 / XP

Example

/ * 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 % );
}

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 other browsers. Consequently, the major browser vendors are moving away from vendor prefixes in favor of other methods such as @supportsfeature 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 htmlelement, allowing for CSS rules such as .cssgradients .header.

@supports

A new feature known as a feature queries was introduced in CSS3, allowing the detection of specific functionality within the CSS (without requiring JavaScript library for feature detection). This new directive can be used to check for the gold bracket Lack of Support for a specific feature, and checks can be combined with andor, and not. Obviously, @supportsrules will only work on browsers that support @supports.

header {
 display : block ;
}
@ supports ( display : flexbox ) {
 header {
 display : flexbox ;
 }
}

JavaScript polyfills

While @supportsfunctionality is required, they will not be able to address the problem. Polyfills , scripts That Make behavior consistent across all browsers, can be used to add the support for new CSS rules (for example, media queries in IE 8) as well as fix bugs in specific browsers (for example, fixing the implementation of viewport units in Mobile Safari ). Since they have not been used, they have a different purpose than feature queries, but can be used in combination with them.

See also

  • Cascading Style Sheets
  • Conditional comments

Notes

  1. Jump up^ “Vendor Prefix” . Mozilla Developer Network . Retrieved 2016-10-12 .