Using top-level selectors

[John Dann]

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie

* {margin: 0; padding:0;}

But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:

html {font-size: 100%;}

body {font-size: 62.5%;}

I was then wondering if it was necessary to have rules for all three
of *, html and body, but I presume that it wouldn't be sensible to set
font-size within the * declaration to avoid unwitting effects on
font-size inheritance (ie cascades of 90% multiplied together). Though
having said this, is there any reason why:

* {font-size: 100%;}

couldn't replace the html rule?

Sorry - this isn't a very specific question but I guess I was just
wondering whether there was any web article that discussed the
relative use of these 'top-level' selectors in more detail?

JGD

[Bergamot]

Re: Using top-level selectors

John Dann wrote:

>
Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet
>
* {margin: 0; padding:0;}

That's debatable. My preference is to leave everything at defaults and
only specify those elements I know I want to override. That keeps the
stylesheet trimmer than over-specifying everything.

body {font-size: 62.5%;}

Wrong, wrong, wrong!!! *Never* do this. There is a ridiculous practice
out there of setting this tiny font-size on body, then making it larger
for individual sections of a page, like 1.3em for content. It is *BAD*.

Set body text to 100%, period. If you insist on using a smaller size for
content, don't do it this stupid way.

--
Berg

[Andreas Prilop]

Re: Using top-level selectors

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:

That's illegal in any civilized country.

Is there any civilized country on this planet?

>* {font-size: 100%;}

>
<smalland <bigwill not have effect

Have you tested it? In which browser?

--
Bugs in Internet Explorer 7

http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs

[Jukka K. Korpela]

Re: Using top-level selectors

Scripsit Andreas Prilop:

>>* {font-size: 100%;}

>>
><smalland <bigwill not have effect

>
Have you tested it?

I took it for granted that browsers don't get such a simple thing wrong.
Besides, I was describing the _defined_ effect of the rule.

In which browser?

Now that you asked, I tested it on IE 7, and it correctly displays
<smalland <bigcontents in the enclosing element's font size (that
is, copy text size), when the style sheet above is used.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Andreas Prilop]

Re: Using top-level selectors

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:

>>>* {font-size: 100%;}
>>>
>><smalland <bigwill not have effect

>>
>Have you tested it?

>
I took it for granted that browsers don't get such a simple thing wrong.

I'm sorry for the confusion. Obviously, I got such a simple thing wrong.
I had made a quick-and-dirty test for the above and noticed different
font sizes for <bigand <small>. There must have been something more
dirty than quick in my test. :-(

Sorry again.

[Jeff]

Re: Using top-level selectors

John Dann wrote:

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

I don't really know what the pragmatic difference is between * and
body, but I did run some tests.

I still have to work on transitional (quirks mode) doctypes. (nested
table client). Generally you don't want to take a complex transitional
layout to strict unless you have a lot of time on your hands to fix the
box model and don't mind pissing off the client.

In quirksmode, body does not style td, whereas * does (IE and FireFox,
windows). It's usually a good idea to set a default font-family and color.

That quirk must go back to NS4, IE4 days... I just now realized that
strict fixed it.

Jeff

>
Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie
>
* {margin: 0; padding:0;}
>
But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:
>
html {font-size: 100%;}
>
body {font-size: 62.5%;}
>
I was then wondering if it was necessary to have rules for all three
of *, html and body, but I presume that it wouldn't be sensible to set
font-size within the * declaration to avoid unwitting effects on
font-size inheritance (ie cascades of 90% multiplied together). Though
having said this, is there any reason why:
>
* {font-size: 100%;}
>
couldn't replace the html rule?
>
Sorry - this isn't a very specific question but I guess I was just
wondering whether there was any web article that discussed the
relative use of these 'top-level' selectors in more detail?
>
JGD

[Jukka K. Korpela]

Re: Using top-level selectors

Scripsit Andreas Prilop:

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:
>

>>>>* {font-size: 100%;}
>>>>
>>><smalland <bigwill not have effect
>>>
>>Have you tested it?

>>
>I took it for granted that browsers don't get such a simple thing
>wrong.

>
I'm sorry for the confusion. Obviously, I got such a simple thing
wrong. I had made a quick-and-dirty test for the above and noticed
different font sizes for <bigand <small>.

Well I can't tell what _you_ did, but _I_ observed something
superficially strange:

On IE, if I use the browser's "accessibil ity settings" to tell her (him?
it?) to ignore font sizes set on web pages, then <smallis suddenly
smaller and <bigis bigger, despite the above CSS setting that tells
everything to be 100%.

On second thought (or maybe third - I lost the count), it's not that
weird. The setting tells IE to ignore "physical" font size settings,
which in practice means CSS settings and <font size ...>, but it still
honors "logical" markup such as <h1and, apparently, <smalland <big>,
i.e. the browser's default font sizing is used for them, contrary to
anything the author might have said in CSS.

So it's odd, and on the other hand it's even.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/

[Felix Miata]

Re: Using top-level selectors

On 2008/05/30 12:58 (GMT-0500) Bergamot apparently typed:

Felix Miata wrote:

>FF3 seems to behave like Safari.

Even if it does, that doesn't make clagnut a good practice. It's still a
ridiculous, convoluted and illogical way to set font sizes.

Quite true. However, the problem is limited mainly to Opera users and the
idiot designers making their own jobs more complicated. Natural selection
should cull the number of those idiot desingers, eventually leading to the
takeover of sanity. Meanwhile, Opera is liable to see the light discovered by
Safari and Gecko.
--
". . . . in everything, do to others what you would
have them do to you . . . ." Matthew 7:12 NIV

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://fm.no-ip.com/