Re: [css-d] class vs. id
> >
> >
> >
> >
>
> Now, most of us agreed that what the original poster was trying to do
> wasn't a Good Thing, and there otherwise wouldn't be much use to
> differentiate the links, but a better way would be to apply IDs instead
Unless you have more than one navigation on the page and want to do
the highlighting via a body id and the class selector on both of them.
However, as sexy as highlighting with CSS only is, it does not make
sense from a usability/accessibility point of view, as the current
page _should not be a link_. Personally I highlight the current page
with a strong - as this also makes sense without CSS and use the body
id coupled with the nav id and the strong to apply the style.
(http://www.csstoolshed.com/cocking/ page 8)
> Similarly, refer to elements with an ID by the ID alone: #m_home, not
> a#m_home. There should only be ONE, so there's no need to specify the
> element.
Hmm, that is an absolute that may be a relative (oh dear, what a bad
one). Specificity concerns might mean that you need both the element
and the ID selector to apply your style. Especially with links as your
nav might be in a #container and there is a #container a {} style.
> Conversely, when writing rules for a class, always specfy the element.
... unless you want to use the class for several elements, for example
a .moreinfo for a P and a link.
> Doing this, coupled with including CSS via a link tag (so the browser
> may cache it) will go along way towards speeding up the rendering of
> your whiz-bang designs.
@import also gets cached and it will not show up on buggy old
browsers. Another absolute that makes you a Sith Lord and not a
Jedi.:-)
> Sorry for the pedantic post but it's just something i've noticed a lot
> lately.
Start a blog, add a page to the wiki. This is where I put things like
that, as it is meant to be remembered, right?
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
> And, if you *do* want to IDentify each link, an ID is what you want, anyway. > Conversely, when writing rules for a class, always specfy the element. If only we all had the freedom to do so. ~ cj [stuck with Microsoft hijacking ID tags for their own use and making it impossible for me to specifically name or style those hijacked IDs.] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
>>> Now, most of us agreed that what the original poster was trying
>>> to do wasn't a Good Thing, and there otherwise wouldn't be much
>>> use to differentiate the links, but a better way would be to
>>> apply IDs instead
>
>
> Unless you have more than one navigation on the page and want to do
> the highlighting via a body id and the class selector on both of
> them.
Yes, that's absolutely correct.
> However, as sexy as highlighting with CSS only is, it does not make
> sense from a usability/accessibility point of view, as the current
> page _should not be a link_. Personally I highlight the current page
> with a strong - as this also makes sense without CSS and use the body
> id coupled with the nav id and the strong to apply the style.
> (http://www.csstoolshed.com/cocking/ page 8)
>
Correct again (in my opinion).
>>> Similarly, refer to elements with an ID by the ID alone: #m_home,
>>> not a#m_home. There should only be ONE, so there's no need to
>>> specify the element.
>
>
> Hmm, that is an absolute that may be a relative (oh dear, what a bad
> one). Specificity concerns might mean that you need both the element
> and the ID selector to apply your style. Especially with links as
> your nav might be in a #container and there is a #container a {}
> style.
>
Sure, if specificity is an issue, by all means, throw some more tags in
there and get specific. However, that #id *is* awfully specific, as it
refers to exactly ONE item on the page. If you have a rule for
#container a {} and want new rules for #container #foo {} just give it
the rules - anything that requires overriding has to be explicitly set
in any case. What would be the difference between #container #foo {} and
#container a#foo {} if you want to override #container a {} rules?
There's no point in specifying a#foo.
>>> Conversely, when writing rules for a class, always specfy the
>>> element.
>
>
> ... unless you want to use the class for several elements, for
> example a .moreinfo for a P and a link.
>
Well, yes. I think that's obvious.
>>> Doing this, coupled with including CSS via a link tag (so the
>>> browser may cache it) will go along way towards speeding up the
>>> rendering of your whiz-bang designs.
>
>
> @import also gets cached and it will not show up on buggy old
> browsers. Another absolute that makes you a Sith Lord and not a
> Jedi.:-)
>
*sigh* link tag/import tag. Excuse my brevity (evil though it is, it seems).
>>> Sorry for the pedantic post but it's just something i've noticed
>>> a lot lately.
>
>
> Start a blog, add a page to the wiki. This is where I put things like
> that, as it is meant to be remembered, right?
Go start your own blog. The last time i looked, the d in css-d stood for
'discuss'
b
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
I think the idea was that the wiki would stay "evergreen" while the past discussion would not be as available to new members (or existing members who don't feel like searching archives) Wiki pages are also more easily referred to in response to new questions than an old discussion thread. On Wed, 14 Dec 2005 11:54:40 -0500 brian <[EMAIL PROTECTED]> wrote: >> Start a blog, add a page to the wiki. This is where I put things like >> that, as it is meant to be remembered, right? > > Go start your own blog. The last time i looked, the d in css-d stood for > 'discuss' __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
Christian Heilmann wrote: > However, as sexy as highlighting with CSS only is, it does not make > sense from a usability/accessibility point of view, as the current > page _should not be a link_. Personally I highlight the current page > with a strong - as this also makes sense without CSS and use the body > id coupled with the nav id and the strong to apply the style. > (http://www.csstoolshed.com/cocking/ page 8) but if you are using server includes, you cannot do this-adding a strong tag to a specific link in the include. That's why many developers take the other approach. Additionally, the bottom (footer) links can be a "top level" category, where additional pages (3rd or deeper levels) fall under that category or section. I'm just adding to the conversation as to WHY someone might take the other approach. With includes, you cannot make them different on each page, except via some overriding (specificity) unique combination of selectors, often started with the body tag and applying a class or id to it. Just to throw in another thought on this - there are many times that you might have page functions that display or don't display, yet are part of an include. AND, you might be also setting the "selected" state of main and footer links (even utility type links)... in many cases, I find I have to go with classes *because* I can use more than one class, where I cannot use more than one ID on the body tag. HTH donna __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
> > However, as sexy as highlighting with CSS only is, it does not make
> > sense from a usability/accessibility point of view, as the current
> > page _should not be a link_. Personally I highlight the current page
> > with a strong - as this also makes sense without CSS and use the body
> > id coupled with the nav id and the strong to apply the style.
> > (http://www.csstoolshed.com/cocking/ page 8)
>
> but if you are using server includes, you cannot do this-adding a strong
> tag to a specific link in the include. That's why many developers take
> the other approach. Additionally, the bottom (footer) links can be a
> "top level" category, where additional pages (3rd or deeper levels) fall
> under that category or section.
Well, that is only partly true, as you _can_ use variables in SSI, too
and highlight according to those. It is a bit messy though.
If you use PHP for example it is really easy to highlight the current
page and add a class to the parent links in a nested list:
http://www.onlinetools.org/tools/easynav/
I wrote this to actually allow users of contribute to edit the
navigation as an own HTML document and get the functionality.
If the bottom link points to the same location it should not have a
link either, if it doesn't there is no issue... If they are "top level
links" then I normally tend to nest a strong inside those links
instead of highlighting via a CSS class. In the css you can actually
distinguish via descendant selectors:
li strong {}
li li strong {}
li li li strong {}
> I'm just adding to the conversation as to WHY someone might take the
> other approach. With includes, you cannot make them different on each
> page, except via some overriding (specificity) unique combination of
> selectors, often started with the body tag and applying a class or id to it.
Yes but using an idadequate technology should never be an excuse for
bad usability. You don't normally use windows paint to create your
website graphics either, and nobody complains that photoshop of
fireworks is not free or too expensive.
If your server does not support modern scripting technology, then you
might want to maintain the site locally, create static HTML pages from
templates with the unique navigation and FTP the lot over.
> Just to throw in another thought on this - there are many times that you
> might have page functions that display or don't display, yet are part of
> an include. AND, you might be also setting the "selected" state of main
> and footer links (even utility type links)... in many cases, I find I
> have to go with classes *because* I can use more than one class, where I
> cannot use more than one ID on the body tag.
Visually, that does the trick, however not every user agent supports
CSS, and why should I get a bunch of links or even content that I
shouldn't get just because the server the site maintainer chose (or
was forced to use) does not support technology that has been around
for quite a while now - and is free?
All this extra content also adds to pageweight, which can be quite significant.
The visitors are those who bring either yourself or the client
money/fame/fun in the end, you don't create sites for yourself or for
the client to use.
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs. id
Brian wrote:
> >>> Similarly, refer to elements with an ID by the ID alone: #m_home,
> >>> not a#m_home. There should only be ONE, so there's no need to
> >>> specify the element.
> >
>If you have a rule for
>#container a {} and want new rules for #container #foo {} just give it
>the rules - anything that requires overriding has to be explicitly set
>in any case. What would be the difference between #container #foo {} and
>#container a#foo {} if you want to override #container a {} rules?
>There's no point in specifying a#foo.
There still can be a good reason to specify the element: human
readability. If it isn't otherwise obvious to someone maintaining
the site a year later (or to someone helping someone else on a list
like this one) that the unique #foo is actually a link, having a#foo
in the CSS can help in figuring out what the identified item is
supposed to be doing. My understanding is that specifying the
element does add fractionally to rendering time in at least one
browsing engine, but in my view that consideration is generally
outweighed by the ease-of-use for future development.
In any case, this particular issue is largely a matter of choice, and
either way is not clearly better than the other. Personally, I use
both methods from time to time, depending on the particular context.
-Adam Kuehn
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs id issue
[tonyFelice] Ian, additional questions inline, please: Template coming together but cannot seem to get "div class" to work. [tonyFelice] does not work on what platform, please? The border doesn't appear if I use the class version [tonyFelice] which border, please? See http://www.iyesolutions.co.uk/templates/directory/recruiters2.php?ambusiness =A vs http://www.iyesolutions.co.uk/templates/directory/recruiters.php?ambusiness= A [tonyFelice] both appear the same - what is the difference I should see? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] class vs id issue
All sorted thanks to Roger Roelofs.
I must have replied to him directly.
Ta
Ian
-Original Message-
From: {tonyFelice} [mailto:[EMAIL PROTECTED]
Sent: 02 January 2006 19:02
To: 'Ian Young'; '[EMAIL PROTECTED] Css-Discuss. Org'
Subject: RE: [css-d] class vs id issue
[tonyFelice] Ian, additional questions inline, please:
Template coming together but cannot seem to get "div class" to work.
[tonyFelice] does not work on what platform, please?
The border doesn't appear if I use the class version
[tonyFelice] which border, please?
See
http://www.iyesolutions.co.uk/templates/directory/recruiters2.php?ambusiness
=A
vs
http://www.iyesolutions.co.uk/templates/directory/recruiters.php?ambusiness=
A
[tonyFelice] both appear the same - what is the difference I should see?
--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 29/12/2005
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 29/12/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
