Since we style the root element in XML, there was a certain need for the id attribute on the html element in XHTML1.1. Unfortunately the W3C only changed this in XHTML1.0, but not in the modularization of XHTML, where XHTML1.1 spawned of.
Two items back a user asked me for an id attribute, so that he could style me page the way he wanted, though I think it was a kind of a joke, this can be handy. I had applied it on the body element, but that was not really useful for him since I use XML and the root element should be styled.
So I learned a little bit about DTD and came up with the following solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [ <!ATTLIST html id ID #IMPLIED > ] >
Internet Explorer however didn't support this and I don't like IE for Windows, don't get me wrong, but this could be easily solved, by downloading the DTD and adding this rule at the top. I still validate, I didn't expand my DTD with font or u, just one little attribute that can be really valuable. If Even Goer still read my weblog he could say that I validate as: "XHTML 1.1 + id on root".
This topic was BTW earlier discussed by me, you can find that one here: <html id="">.
I suppose you are referring to me. Actually, it wasn't a joke. While I love the new design, there are a couple of things in which my taste differs. So I did edit my user style sheet and added a few tweaks. Most importantly I removed the symbol you add on outgoing links as this doesn't display properly in my browser (it's not in any of the standard lists of entities and unicode characters).
While I was at it I also added a general rule (applying to all sites) to use Andale Mono for code, samp and pre, which I much prefer over Courier, which is often set for these elements.
This gives me an idea: users that insist on using IE and care enough could add the proprietary filter to fix the PNG-alpha-transparency to their user stylesheet (if IE has such a thing). But then again, if you care that much you are probably using a decent browser already...
For as far as I know, IE does not have a user stylesheet.
User stylesheets can indeed be very usefull. I use
line-height:200% !important;
for some sites with long lines of text in small font sizes (which can be very hard to read). Now if only all those sites were easy to identify with CSS selectors...
I also use the following rule to warn myself against outgoing links:
a:hover[target="_blank"],a:hover[target="_new"]{
color:white !important;
background:red !important;
}
IE does support user stylesheets: go to the options, first tab, bottom right "accessibility".
I've probably described this all wrong, cause I'm using a Dutch IE.
What about using this trick from WebFX (http://web-fx.info/dhtml/pn...) for fixing the PNG problems in IE?
Martijn: I like the new window styling idea.
Mark: that is the proprietary filter I was refering to. It is invalid CSS, so dear Anne can't possibly put that in this site's stylesheet, but you can put it in your user stylesheet.
Martijn: that's a neat idea to distinguish links that open new windows!
I can't use it. I use two PNGs, one applied as background image and one is imported with the object element. That solution will not work so far I know.
#3 Mark & #4 Ben: I don't remember exactly, but I think it wasn't my own idea. I don't know were I saw it though, but credits to those who deserve it ;)
Anne,
Here, so far as Safari is concerned, is the "offending" item of CSS code:
div#content h3::first-letter{
text-transform:uppercase;
}
Anyone with Safari can verify that for himself by saving and displaying the following minimal example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Smallcaps test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<![CDATA[
h1,p{
font-variant: small-caps;
}
h1:first-letter{
text-transform:uppercase;
}
]]>
</style>
</head>
<body>
<h1>Heading</h1>
<p>Here is some text</p>
</body>
</html>
Can't you take out that line of code? I can't see that removing it would adversely affect, or even change, the display in any other browser.
#4 Ben, I indeed meant my user stylesheet.
How does using a custom DTD affect browsers that sniff for doctypes?
As far as I know, all the major browsers use doctype switching to see if they should render a page in Standards or Quirks mode. To quote Zeldman:
Such browsers (IE, Mozilla/Netscape, and now Opera 7) do not download and parse DTDs; they rely on known DOCTYPE declarations stored in an internal database to determine how a page should be rendered.
Reference: http://www.zeldman.com/dail...
Mozilla does parse the DTD's and IE6 is already in quirks mode thanks to the xml-prolog. I like it when IE6 is in quirks mode, 'cause it will simplify the Box Model Hack.
Which box model hack are you using?
I use Tantek's, which chokes on IE6 in Quirks mode, since IE6 does not exhibit the voice-family parsing bug that IE5.x does. For that reason, I've been serving the xml prolog to Mozilla only via PHP.
Or am I doing something wrong?
div#id{
padding:5px
width:590px; /* width for all IEs */
}
body>div#id{
width:600px; /* width for standard compliant browsers */
}
Argh! Damn you, Anne! :P
I just finished redesigning my site, complete with xml-stylesheet PI and now I need to change my DOCTYPE and custom ID. Staying on the bleeding edge of XHTML is a never ending struggle.
Don't know about you Gary, but I don't really style the root element. So I keep my signature ID on the body element. That works okay and keeps the validator happy, without having to fiddle with DTDs.
Ben,
I checked your site and since you don't style the root element you are kind of 'violating the specification': <html id=""> comment 6
For the reasons Anne gives, I do style the root rather than body.