Dealing with browser inconsistencies often makes up a majority of the work for a web designer/developer.
Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines.
Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately.
The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.
HTML Conditional Statements
One major issue most developers encounter is the layout inefficiencies of Internet Explorer. Most other browsers tend to work on predecessor bugs, while keeping with the underlying framework, thus meaning, that predecessor functionality will most likely exist in newer versions.
This is not the case with Internet Explorer. It seems like Microsoft rebuilds each new browser from scratch...LOL!
However, when developing a website, it's important to take note of some important markup which has been developed for microsoft systems. The HTML Conditional Statement.
These statements allow you to include or ignore snippets of code depending on the version of Internet Explorer being used.
Syntax
Include: <!--[if condition]> HTML <![endif]-->
Ignore: <!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
Condition can be any of the following:
IE - Any version of IE
IE version - Specific versions of IE e.g 6, 7, etc.
lt IE version - IE lower than specified version
lte IE version - IE lower than or equal to specified version
gt IE version - IE greater than specified version
gte IE version - IE greter than or equal to specified version
HTML is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.
See below for practical usage:
<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]-->
</head>
CSS Hacks
Most CSS hacks deal with selector bugs.
The following is a list of browser version ranges and the beginnings of selectors that are known to select elements in them.
Note that because these hacks rely on browser bugs or missing features, results may vary in some lesser-known or future browsers.
All of these selectors use valid CSS.
IE 6 and below - * html {}
IE 7 and below - *:first-child+html {} * html {}
IE 7 only - *:first-child+html {}
IE 7 and modern browsers only - html>body {}
Modern browsers only (not IE 7) - body {}
Recent Opera versions 9 and below - html:first-child {}
Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. The rest of the desired selector must be added to both parts of the hack. The two parts cannot be combined with a comma, because IE 6 and below will fail to correctly parse the selector and won't be targetted.
The above selectors will select either the html or body element. This should be used as the start of your full selector.
For example, if your desired selector is #header .nav and you want it to apply only to IE 7, your resulting selector will be *:first-child+html #header .nav
!important
CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet.
However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
Internet Explorer 6 and below had a problem with the !important identifier that caused it to be ignored if another declaration of the same property appeared later in the same style declaration block. This can be used to feed Internet Explorer 6 and below special property values that are ignored by other browsers. Internet Explorer 7 fixed this issue.
Here's an example of this in practice. We'll use this IE6 flaw to set the min-height and min-width property for a div:
#container{ min-height: 500px; height:auto !important; height: 500px; min-width: 500px; width:auto !important; width: 500px; }
Both min-height & min-width aren't recognized in IE6, however, by setting height: auto !important, then negating the rule in the same style block, the div will first be rendered as 500px high but maintain it's auto scalability.
@import "non-ie.css" all;
Internet Explorer 7 and below don't support media selectors on @import rules, instead ignoring the entire rule when they are present. Therefore, you can create an entire stylesheet for non-IE browsers and import it into your main stylesheet by adding @import "non-ie.css" all;.
Future versions of Internet Explorer may support the @import rule correctly.
@import "stylesheet.css" all; imports the stylesheet in all major browsers except IE 7 and below. It may or may not work in future versions of IE.
body[class|="page-body"]
The CSS 2.1 specification isn't clear about whether or not a hyphen can be included in the value of a hyphen-separated attribute selector.
Most browsers, including Firefox and Internet Explorer 7, Allow the body[class|="page-body"] selector to select an element whose start tag looks like this: <body class="page-body">.
However, Opera interprets the specification differently in this regard. It splits up the attribute value by hyphens and only checks the first piece against the attribute selector value.
Obviously, if the attribute was split by hyphens, the first piece won't have any hyphens in it, so Opera treats this selector as a non-match. Therefore, when the proper class is applied to the body element, this selector matches Internet Explorer 7 and most modern browsers except Opera. Opera may change their behavior to match other browsers in the future, but this technique is known to work for Opera 8 and 9.
Example of usage:
<head>
<title>Test</title>
<style type="text/css">
p{
background: red; /* Applies to all major browsers */
}
body[class|="page-body"] p{
background: green; /* Applies to IE 7 and most modern browsers except Opera */
}
</style>
</head>
Other Notable Hacks
_property: value and -property: value - Invalid CSS, works in IE6 and below.
*property: value - Invalid CSS, works in IE7 and below.
body: empty {} - Invalid CSS, works in Firefox 1.5 & 2.0.
a:link:visited, a:visited:link {} - Valid CSS, selects anchor tag in IE7 & below.
>body {} - Invalid CSS, selects body tag in IE7 only.
html * {} - Invalid CSS, selects all descendants of html tag. Works in IE7 and below.
No comments:
Post a Comment