CSS hackA 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. Types of hacksInvalid or non-compliant CSSDue 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 bugs in specific browsers. An example of this is prefixing rules with an underscore (as in Similar CSS hacks involve inducing syntax errors like asterisks, missing whitespace, and CSS comments around property names. Additionally, in Internet Explorer 6 and 7, the Unsupported CSSAlthough newer CSS rules are correct by current standards, they are ignored by older browsers as "invalid". By writing old rules followed by newer rules that cancel out or modify the old ones, it is possible to only activate certain rules on older browsers. Conditional commentsPrior 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. 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 lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
CriticsHiding 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. AlternativesBrowser prefixesEach 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.[2] List of prefixesThe following are a list of prefixes from various layout engines:
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%);
}
LimitationVendor 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 Feature deletionJavaScript feature detectionMultiple 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 Feature queries
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 header {
display: block;
}
@supports (display: flex) {
header {
display: flex;
}
}
Script polyfillsWhile JavaScript feature detection and References
External links
|
Portal di Ensiklopedia Dunia