HOW TO write browser specific CSS
The need to write browser specific CSS arises due to browser quirks and web designers have to invent CSS hacks when nothing else works.
There are 2 techniques to display style settings conditionally depending on the browser - Conditional Comments & CSS child selector.
I assume here that there are only 2 types of browsers (as a majority of people categorise). IE and non-IE.
To make a style take effect ONLY in IE (5 and above) Conditional Comments can be used. The functionality of conditional comments is derived through HTML comments and conditional expressions that are designed to be understood by IE 5 and above only.
The CSS child selector technique exploits the fact that IE (except IE 7 in standards-compliant mode, more about it in a moment) cannot understand child selectors but works for all (ok, atleast Firefox, Opera & Mozilla based) non-IE browsers. IE 7 has greater CSS standard compliance that IE 6 and it now supports CSS child selector. So web pages which earlier used the CSS child selector hack to differentiate between IE and non-IE browsers will now fail in IE 7.
There is a little twist here. While experimenting on this CSS technique with a sample page, I noticed that IE 7 did not honour CSS child selector. With help from experts and some tinkering, I found that CSS Child Selector works in IE 7 only in standards-compliant mode (i.e if the document type declaration is set to one of these -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or even when the DTD is set to XHTML Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or HTML Loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">) but not in Quirks mode (A web page which does not include a DOCTYPE at all, as in the sample page, renders in quirks mode)
Considering this, it may be worthwhile to use the Conditional Comment technique to write browser-specific CSS.
There are 2 techniques to display style settings conditionally depending on the browser - Conditional Comments & CSS child selector.
I assume here that there are only 2 types of browsers (as a majority of people categorise). IE and non-IE.
To make a style take effect ONLY in IE (5 and above) Conditional Comments can be used. The functionality of conditional comments is derived through HTML comments and conditional expressions that are designed to be understood by IE 5 and above only.
The CSS child selector technique exploits the fact that IE (except IE 7 in standards-compliant mode, more about it in a moment) cannot understand child selectors but works for all (ok, atleast Firefox, Opera & Mozilla based) non-IE browsers. IE 7 has greater CSS standard compliance that IE 6 and it now supports CSS child selector. So web pages which earlier used the CSS child selector hack to differentiate between IE and non-IE browsers will now fail in IE 7.
There is a little twist here. While experimenting on this CSS technique with a sample page, I noticed that IE 7 did not honour CSS child selector. With help from experts and some tinkering, I found that CSS Child Selector works in IE 7 only in standards-compliant mode (i.e if the document type declaration is set to one of these -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or even when the DTD is set to XHTML Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or HTML Loose:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">) but not in Quirks mode (A web page which does not include a DOCTYPE at all, as in the sample page, renders in quirks mode)
Considering this, it may be worthwhile to use the Conditional Comment technique to write browser-specific CSS.
Comments
Post a Comment