CSS hack

src: i.ytimg.com

Hacked CSS is a coding technique used to hide or display CSS markup depending on browser, version number, or capability. The browser has different interpretations of different CSS behavior and support levels for W3C standards. Hacking CSS is sometimes used to achieve a consistent layout view in some browsers that do not have compatible rendering. Most of this hacking does not work in modern version browsers, and other techniques, such as feature support detection, have become more common.

Video CSS hack

Hack type

Invalid or inappropriate CSS

Because of quirks in CSS interpretations by various browsers, most CSS hacks involve writing invalid CSS rules that are interpreted only by certain browsers, or relying on bugs in certain browsers. An example of this is a prefix with the bottom line (as in _width ) to target Internet Explorer 6 - other browsers will ignore the line, allowing it to be used to write code specific to a single browser.

Conditional comments

Prior to version 10, Internet Explorer supports a custom comment syntax that allows HTML blocking to be read only by certain versions of the browser. These comments are mostly used to provide CSS and JavaScript workarounds specific to older versions of the browser. No other browser interpreted this comment or offered similar functionality.

The following are examples of different syntax for this comment.

Maps CSS hack

Criticism

Hiding code using hacking often leads to pages that are displayed incorrectly when the browser is updated. This hack can cause unexpected behavior in newer browsers that may interpret it differently than its predecessor. Since Internet Explorer 6 and 7 are no longer in use, the CSS hack is decreasing as well. Modern feature targeting methods are less fragile and prone to errors.

src: www.tobys.dk

Alternative

Browser prefix

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 direct code, browser vendors have begun to move away from this to support user-controlled feature flags.

List of prefix

The following is a prefix list of various layout engines:

Example

Limitations

The vendor prefix is ​​designed for features that are being developed, which means that the syntax may not even be final. Also, adding rules for each browser's implementation of a function is not good enough when you want to support multiple browsers. As a result, major browser vendors are moving away from vendor prefixes that support other methods such as @supports query feature.

Feature detection

JavaScript feature detection

Some JavaScript libraries are available to detect which features are available in certain browsers so that CSS rules can be written to target them. Libraries like Modernizr add classes to the html element, allowing for CSS rules like .cssgradients.header .

@supports

New features known as feature queries are introduced in CSS3, enabling the detection of certain functions in CSS (without requiring the use of JavaScript libraries for feature detection). This new directive can be used to check support or lack of support for certain features, and checks can be combined with and , or , and no . Obviously, the @supports rule will only work on browsers that support @supports .

polyfill JavaScript

While detecting JavaScript features and the @supports rule can help to target browsers that require fallback functionality, they will not address bugs in certain browsers or enable advanced functionality. Polyfill, scripts that create consistent behavior across all browsers, can be used to add support for new CSS rules (for example, media requests in IE 8) as well as fixing bugs in certain browsers (for example, improving the implementation of viewport units in mobile Safari). Because polyfills add or improve functionality in browsers that do not have them, they serve different purposes than feature queries, but can be used in combination with them.

src: i.ytimg.com

See also

• Comparison of web browser engines (CSS support)
• Conditional feedback

src: cs2.gamemodding.net

Note

src: i.ytimg.com

External links

• Browser Oddity - Jeff Clayton's Live CSS hacks and tests to filter mainstream browsers, including the only known CSS Hacks for Safari 7 and 8
• browserhacks.com - Some methods and testing of browser filters (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
• Safari/Webkit (webkit) filter prefix filter filters]
• Mozilla (moz) prefix filter
• Opera prefix (wap) - This page has all Opera CSS selectors.
• CSS Filter - A fairly complete CSS hatching table that shows and hides rules from certain browsers.
• [CSS filter - CSS custom filter Summary] - More CSS filters.
• Filter and Cross-Over - CSS filters. Archives errors marked red.
• - CSS Browser Selector - Allows to combine browser specific CSS in one stylesheet (using JavaScript).
• - #IEroot - Target IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tags to the root of random content [div])

Source of the article : Wikipedia