[xhtml/css] id attribute on the root element
I did some research on this subject and I want to know some opinions on the accessibility matter. Does this really help people for example? Posts I have made related to this:- <html id=""> {why XHTML1.1 doesn't allow the id attribute on the root element}
- There was need for the id attribute on the root element {hack/solution to that problem}
- Styling different sections different {how can we keep that id attribute, while having different layouts for different page}
- Power of CSS3 selectors (solution to the previous problem}
Thanks,
Anne
Share: 
Due to the fact that all documents only have one html element there is no need for having an id when talking about a single document, I can however see that you may want to do this if you have a site that uses different styles for different pages. (I haven't read all of your links).
I did this on our site by having a div enclosing the entire document.
| Code: |
| <body>
<div id="content-blue"> ............ </div> </body> |
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
First of all. How do I use a single style sheet for multiple pages that have different background images?
Correct, with the id attribute. This should be applied to the html element. Not to the body or a useless div since I'm talking about XML (XHTML).
The solution to do this and give the user the ability to style my pages costumly is this:
| Code: |
| <html id="annevankesteren-nl-home"> |
| Code: |
| [id*=annevankesteren-nl]{a{color:red;} |
I think there should be a general @address "annevankesteren.nl"{a{color:red;}} for doing this.
Anne
Share:
| Anne van Kesteren wrote: |
| First of all. How do I use a single style sheet for multiple pages that have different background images?
Correct, with the id attribute. This should be applied to the html element. Not to the body or a useless div since I'm talking about XML (XHTML). |
Since the div get's the job done it can hardly be called useless. How does it make any difference whether we are talking about html or xhtml? It would be ok to do it this way with html but not with xhtml
I have no idea of browser support for id on the html element but I would suggest that until browser support is acceptable you simply set a different style sheet for different pages or import a second style sheet that just applies the background style.
| Quote: | ||||
The solution to do this and give the user the ability to style my pages costumly is this:
I think there should be a general @address "annevankesteren.nl"{a{color:red;}} for doing this. Anne |
Have you spoken to your users? Do some of them want to be able to write their own style sheets just for your site?
If they do wouldn't is be more usable to offer them a feature within the site for doing it rather than only offering it to users with a deep knowledge of css or forcing them to learn it?
| Quote: |
| to style my pages costumly |
costumly? to style your pages while wearing a costume?
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| Nigel Peck wrote: |
| Since the div get's the job done it can hardly be called useless. How does it make any difference whether we are talking about html or xhtml? It would be ok to do it this way with html but not with xhtml |
Anne may have meant that a div is semantically useless.
Assigning an ID to the html element, rather than body or a div, is useful if you want to style the head element or its descendants. Who knows, you might want to put the title element to use in some creative manner?
There is an important difference between HTML and XHTML in this case, I think. In XHTML, the html element is the root element, by definition. In HTML, some browsers consider html to be the root element, while others think it's body. For advanced uses, this distinction can be quite important.
I think Anne has discovered something important here, but in XHTML 1.1 she can overcome the problem, and in XHTML 1.0 I think it's not an issue.
Tommy has left the building
Share:
| Nigel Peck wrote: |
| I have no idea of browser support for id on the html element but I would suggest that until browser support is acceptable you simply set a different style sheet for different pages or import a second style sheet that just applies the background style. |
That solves this particular problem, but there's another angle to this: skinning. By assigning an ID to the html element, you provide a means for users to override your style sheet - including head elements - on a site-wide basis.
Tommy has left the building
Share:
I agree it's semantically useless but I try to keep a balance between semantics and stuff that actually makes a significant difference to the site for users. In this case it is more usable currently to use a 'useless' div than an id on the root element due to browser support (I'm assuming older browsers don't support it, I haven't checked).
I agree totally that it will be nice when it is possible to use it.
My point on the difference between html and xhtml is that a div enclosing the entire document is just as 'useless' in html as it is in xhtml.
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| Quote: |
| That solves this particular problem, but there's another angle to this: skinning. By assigning an ID to the html element, you provide a means for users to override your style sheet - including head elements - on a site-wide basis. |
Yes I see that but wouldn't it be more usable to do this with cookies and a dynamically delivered style sheet based on cookie settings set through an in site style setup tool?
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
Nigel
I'm suprised at you
| Quote: |
| Quote:
to style my pages costumly costumly? to style your pages while wearing a costume? |
Considering that English is not Anna's first language I think she is writing remarkably well. What she means is Customly, not quite right but enough to understand.
Mike Abbott
Accessible to everyone
Share:
It was meant to be half a laugh (the wink) and half I really didn't know what she meant.
custom is prob right missed that one. The other one I thought of was 'consummately' (which I had to use dictionary.com for the right spelling (and meaning)
)
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| Nigel Peck wrote: |
| Yes I see that but wouldn't it be more usable to do this with cookies and a dynamically delivered style sheet based on cookie settings set through an in site style setup tool? |
LOL. Obviously, at least one of us is misunderstanding the other.
To dynamically create a style sheet based on users' cookie setting would be a daunting task, which would also eliminate most benefits from cacheing(sp?) style sheets.
The idea behind skinning is that I (boy, does that look weird in BBCode
) get to impose any style I like on any web page ... well, those that support skinning.
A highly designed web site may have quite a few rules in its CSS, and building those dynamically from cookie settings sounds like quite a handfull. You'd also need a fairly complex form to allow each user to set those cookies.
Tommy has left the building
Share:
What I'm talking about is single site customisation ranging from a choice of two styles (choose this style or that style) up to things like changing font size, link colors, background images etc.
Can all be done in a single cookie string like:
stylesettings
fs=1;lc=3300FF;vlc=333333;
fs: font-size
lc: link color
vlc: visited link color
etc.
I admit it can be daunting for the developer but not as daunting as learning CSS for the average user
You can keep the caching advantage by having one style sheet for the stuff that is common and one for the dynamic stuff.
How does a site go about supporting skinning? Do they have to use a standard set of class names? Is this defined somewhere?
Or if it's just setting global styles how does a site not support skinning apart from the use of inline style?
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
First of all it is: "he" . Perfectly normal here in Holland .
Second of all. How can you use a div to apply a background image on a page? A div is normally not 100% in height, is it? Nor is the body element in some cases. The html element is, and that's why I'm styling that element.
It is not the problem that I can't manage these things. The id attribute works. But what do you think of accessibility.
Is het important to apply a 'id' attribute for user styling? Or should the W3C introduce a new at-rule/selector?
And if it is important, is it ok, that the user can only do this by using a CSS3 selector? For example: [id*=annevankesteren-nl]{/*styling*/}
Anne
Share:
Oh, sorry about the gender mixup Anne. 
I've been visiting your weblog for some time, and I never realized. Oh well, that's why have use TOOLman as my screen name!
Nigel - the traditional way of facilitating skinning is to use the site URL as the ID for the body or html element. The dots are replaced by dashes, so for this side it would be e.g.
| Code: |
| <body id="www-accessifyforum-com"> |
This way, a user can override any styles he or she wants, by prefixing rules with
| Code: |
| body#www-accessifyforum-com |
in their user style sheet. As you see, this provides a much greater level of user control than an in-site customizing tool. Unless you make that tool very complex, that is.
Anne - I'm not an expert, so please take this with a pinch of salt. If you are using the ID to facilitate skinning, it might be inappropriate to use multiple IDs that will require a CSS3 selector. Would it be possible to use a (single) ID, and then classes for your internal distinction?
If you're thinking about the future, then I think your ID scheme would be as good as a new @address rule.
I'm not really sure how either of this is applicable to accessibility, though.
Tommy has left the building
Share:
class is not allowed on the html element currently.
It has to do with accessibility, 'cause some people can't read you site thanks to your color schemes (i'm not just talking about my own site, you have to see it more general, as a discussion) in that case it would really help for the user to style the site using a user style sheet.
The problem with #site-com h1{} for example is that you always have to use a descendent selector.
If we could use @address user style sheets become much easier to use. You could the following:
| Code: |
| @address "accessify-com"{
h1{color:green;} p{margin:30px;} a[target]{font-weight:bold;color:red;} } |
This way a user can easilier maintain his style sheets I think and I wanted to know your opinion about this and of there are possible other solutions for now.
Anne
Share: