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

---------------------------------------------------
Margin-color:

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}
<body>
<div>
</div>
</body>

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}
-------------------------------------------------------Attribute
selectors:

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.

Thus:
<div>
<p>
</p>
</div>
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
itself.
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
sheet:

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

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

ie345op3nn.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.
E.g.:

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
sheets:

<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"
href="ie345op3.css">

ie345op3.css:

@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
Netscape.
@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 (http://members.tripod.co.uk/lawnet (for law)or http://members.tripod.co.uk/lawnet/WEBFRAME.HTM (for CSS))
__________________________________________________
Do You Yahoo!?
Bid and sell for free at http://auctions.yahoo.com

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