This third part of learning is about improving your current markup. We replace some things with CSS, you are going to learn where you should use entities instead of the 'un-escaped' form (entity: &, un-escaped: &). In general you can call it this: eliminating common markup mistakes. Fixing these 'mistakes' is really easy and makes your site more accessible (we all now that Google has a disability I think). There is also an (huge) improvement on the maintaining front of your site.
The first thing you need to do is to take a look at the source of your web document. Can you find any &, which is not coded like &? You should look for this particularly within the href attribute. Most mistakes are made there. You could have a PHP site for example and have a link that looks like this (Invalid XHTML):
<a href="/index.php?page=contact&subpage=form">Contact form</a>
That should be (Valid XHTML):
<a href="/index.php?page=contact&subpage=form">Contact form</a>
Easy isn't it? Another reason to do this is that is it is better supported by older browsers. Besides that, this is required by the specification and therefore you should code it that way. Some other entities should be converted as well. I'm not going to name these all here, but the W3C validator will tell you when you miss one ;).
It's time to look at our body element. What presentational attributes are currently in use there and which can be removed. The body element in all it's glory (err, with all it's presentational attributes):
<body bgcolor="#ffffff" background="background.png" bgproperties="fixed" text="#00000" link="blue" alink="red" vlink="red" scroll="no" topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" />
I was surprised by the amount of presentational attributes available for the body element, 'cause I actually started to learn quite quickly CSS, I never had any time to learn these :). Time to eliminate them and replacing them with CSS! All properties which contain the word margin can easily be erased:
html,body{
margin:0;
padding:0;
}
We use padding:0; for Opera, which uses a W3C sample style sheet in their rendering engine. The W3C specified padding in there and not margin. And see, with both properties all the margins/paddings are eliminated and we can remove six presentational attributes.
Now lets take a look at the background attributes of the body element and the text attribute. I can tell you know, with CSS you will have more control! I will explain this within the following CSS code (between comments deliminators of course):
body{
color:#000;
/* Replacement for text="#000000" */
background-color:#fff;
background-image:url(background.png);
background-attachment:fixed;
/* Replacements for the first three attributes in the same order. However, we
can do more with CSS.
background-position:50% 50%;
Will center the image. You can also use 'center' (short for 'center
center'). It is also possible to specify the length in pixels. Just
remember this: first the vertical value, than the horizontal value.
background-repeat:no-repeat;
Will show only 1 instance of the image. Other possible values are:
'repeat-x', 'repeat-y' and 'repeat'. The default value is 'repeat'.
You can also specify all the values within one line:
background:#fff url(background.png) no-repeat fixed center; */
}
The only leftovers are the hyperlinks and the scroll attribute. Let's tackle the scroll attribute first. It's really easy:
html,body{
/* We also take the HTML element in case, since more advanced user agents use
that element. */
overflow:hidden;
}
The last one is a bit more difficult perhaps, since there is only one element, but we want to apply different styles on it for different situations. That's why the W3C has invented pseudo-classes. There are five pseudo-classes, which we are regular used for styling the a element: :link, :visited, :active, :hover and :focus. :focus and :active are not that good supported by the most common used browsers (read: Internet Explorer). You should, however, always specify :focus (together with :hover), since that one highligts links when you tab through them with keyboard for example. This is how I do it:
a{
/* Combines a:link, a:visited and a:active, but is _not_ the same. Using it
this way we don't have to specify all three of them and we can overwrite
this default style of a with other pseudo-classes. */
color:blue;
}
a:hover,a:focus{
color:red;
}
I can do it this way, since I don't use the name attribute for the a element. Every a element on my pages contains the href attribute and none of them contain the name attribute, because I/we don't need that attribute anymore. It has been replaced by the id attribute, which can be applied to any element on the page. Just make sure you will never let it start with a number. A small example:
<ul> <li><a href="#news">News</a></li> <li><a href="#links">Links</a></li> <li><a href="#contact">Contact</a></li> </ul> <h2 id="news">News</h2> <p>Today I moved to a new server, where I hope to stay a bit longer than 6 months.</p> <h2 id="links">Links</h2> <p><a href="http://www.google.nl" hreflang="nl">Google</a> should get a price for something. The price should be a markover of Google.</p> <h2 id="contact">Contact</h2> <p>You wish.</p>
That is really easy, isn't it? So stop using the useless name attribute and start using id. Thank you. Some additional resources:
Send addional links by filling out the contact form.
Yes, it's easy to replace ampersands with entities. Even so, you missed the first one!
Sorry, remove that. My mistake. Think I should get some sleep now...
Well i see the trackback have doubled itself. Is this a problem which comes form my part ? or is this a problem known by movable type ? The article is great do.
I think it has something to do with WP. It looks like you have edited a typo and WP generated a new entry id for that? PING: TITLE: Body make over via css BLOG NAME: Swapdepths Anne is wer aan het stoeien geweest check zijn uiteenzetting over de body en het anders gebruiken van je css LINK PING: TITLE: Body make over via css BLOG NAME: Swapdepths Anne is weer aan het stoeien geweest check zijn uiteenzetting over de body en het anders gebruiken van je css LINK