Margin-color; text-indent; browser detection without script; attribute selector, ! combinator


It has always been a mystery to me why the CSS spec
states that margins are always transparent. This means
that you have to do this:
BODY {background-color: black}
DIV {margin-left: 5%;
margin-right: 5%;
background-color: red}

When it would be more in the spirit of CSS to have:

BODY {margin-left: 5%;
margin-right: 5%;
background-color: red;
margin-color: black}

At present TABLE[border="0"] does not match <table>,
even though it actually has no border.

However, I would propose a refinement to the attribute
selector, where
TABLE[border=/"0"] matches TABLE with border
explicitly 0 or at its initial value.
Error in CSS spec on text-indent:

The CSS spec states that % on text-indent relate to
the width of the containing block.

DIV {width: 600px}
P {width: 50px;
text-indent: 10%} 

Would result in a text-indent of 60px.

Really what % should relate to is the width of element
This is OK because text-indent only applies to block
elements which always have a width.
! combinator:

This seems like a good idea to me.

E.g. DIV.usedfordivision ! DIV {line-height: 14pt}
Thus ! means the opposite of the combinator, so !
means that it is the opposite of " " - i.e. it matches
DIV that is not a descendant of DIV.usedfordivision.

Equally !> means not a child.

The above example is one I'd really like to see.
Browser detection without script using one style

This probably isn't the best place to put this, but:

<link rel="stylesheet" type="text/css"


@import "opera.css" all;
.dummydeclaration {color: red}

P {property: ie3value}
P {property: nnvalue}

/* This uses IE3's lack of order sorting - if a
property is defined on a selector, a subsequent
redefine is ignored.

BODY P {color: red}
BODY P {color: green}
Note that the selectors must be identical, and that
margin-* will override margin

@madeup at rule;
P {propertythatmustbehiddenfromie3: value}
/* E.g., line-height, margin-top */

@import "ie4.css";
@import "ie5.css" all;

/* Uses IE's habit of importing @rules that don't
precede all declarations */

Browser detection without script using two style

<link rel="stylesheet" type="text/css" href="nn.css">

Won't be read by Netscape because of media="all":
<link rel="stylesheet" type="text/css" media="all"


@import "opera.css" all;
.dummydeclaration {color: red}

P {property: ie3value}

@import "ie4.css";
@import "ie5.css" all;

Other techniques:

type="text/madeup" - excludes Netscape
Add HTML to selector - e.g., HTML BODY - excludes
@media all {
.dummydeclaration {color: blue}

/* Rest of style here */
Excludes all except for IE 3

NB. Some of these techniques are invalid CSS, and I
personally prefer to parse the UserAgent string and
have a <noscript> for everyone else, but I thought
that some people might find them useful.

From Matthew Brealey ( (for law)or (for CSS))
Do You Yahoo!?
Bid and sell for free at

Received on Monday, 8 November 1999 07:52:45 UTC