Flag of Sweden
Andreas Rejbrand’s Website

News

Only displaying articles whose title contains ‘web ’ (case-insensitive match).


Web design: Microdata (for software)

When I updated the homepage of BookBase, I also added microdata annotation using the http://schema.org/SoftwareApplication vocabulary:

<section class="software" itemscope="" itemtype="http://schema.org/SoftwareApplication">

<h1 itemprop="name">Rejbrand BookBase</h1>

<img class="logo" itemprop="image" src="pix/screenshots/bb11/bbicon.png" alt="The BookBase logo: A leaf" />

<p itemprop="description">Rejbrand BookBase is a book cataloguing software with HTML and microdata export
capabilities.</p>

<meta itemprop="url" content="http://english.rejbrand.se/rejbrand/apps_bookbase.asp" />

<dl class="software metadata">
<dt>Version</dt>
<dd itemprop="softwareVersion">1.1.0.1</dd>
<dt>Date</dt>
<dd><time itemprop="datePublished">2014-11-30</time></dd>
<dt>File size</dt>
<dd><data itemprop="fileSize" value="1420">1.39&nbsp;MB</data></dd>
<dt>System requirements</dt>
<dd itemprop="operatingSystem">Microsoft Windows 2000, XP, 7, 8, or 8.1</dd>
<dt>Copyright</dt>
<dd>Copyright © 2011-<time itemprop="copyrightYear">2014</time>
<span itemprop="copyrightHolder author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="givenName">Andreas</span> <span itemprop="familyName">Rejbrand</span>
</span>
</dd>
<dt>License</dt>
<dd itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<meta itemprop="price" content="0.00" />Freeware
</dd>
<dt>Download link</dt>
<dd><a itemprop="downloadUrl"
href="http://english.rejbrand.se/rejbrand/applications/bookbase/bb11.exe">bb11.exe</a> (installer)</dd>
<dt>Other links</dt>
<dd><a href="bb_screenshots.asp">Screenshots</a>, <a href="bb_documentation.asp">Documentation</a></dd>
</dl>

<p><img id="screenshot" itemprop="screenshot" src="pix/screenshots/bb11/bbmain.png"
alt="Screenshot of Rejbrand BookBase" /></p>

</section>

Using the style

/* Software downloads */

section.software img.logo {
float: right
}

dl.metadata.software {
border: 2px solid black;
border-style: solid none;
}
dl.metadata.software dt {
width: 12em;
text-align: right;
padding: 4px;
}
dl.metadata.software dd {
padding: 4px;
}

the rendering is

Rendering of the above HTML and CSS

Web design: Non-conforming examples at schema.org

When investing the http://schema.org/Book vocabulary, I also had a look at the examples given on that web page. And it turns out they are non-conforming.

Recall that I wrote <meta itemprop="inLanguage" content="en" />English in my book list sample item. The text displayed to the user is ‘English’ and the microdata value, seen by robots, is ‘en’. This difference is necessary since ‘English’ is human-readable, while the microdata field should be a BCP 47 code. As a second example, recall that I wrote <span itemprop="bookFormat">Hardcover</span>. According to the vocabulary, the bookFormat property must be Hardcover, Paperback, or EBook. Hence, if I would like to present a book’s format as ‘PDF’ to the user, I could write <meta itemprop="bookFormat" content="EBook" />PDF.

As demonstrated above, the microdata specification allows the use of <meta> elements as a generic way of specifying user-invisible microdata properties (often next to a user-friendly presentation). [In some cases, there are more specific ways to achieve this, like dates and times, e.g. <time itemprop="something" datetime="2014-11-29">November 29, 2014</time>.]

The problem with the examples at schema.org is that they use a non-conforming way of achieving this (instead of the standard <meta> way). For instance, the following three lines can currently be seen at the Book page at schema.org:

<!-- Wrong! -->
<span itemprop="price" content="6.99">$6.99</span>
<span itemprop="inLanguage" content="en">English-language</span>
<span itemprop="name" content="Tolkien, J. R. R. (John Ronald Reuel)">
J. R. R. Tolkien</span>

Clearly, they use <span> elements with content attributes. This is non-conforming. Neither the HTML5 specification nor the microdata specification even mentions this attribute! (Much less does the microdata specification take this attribute into account when determining the value of a property.) Se this StackOverflow question for more information.

Update (2014-11-29 19:45:57): Of course, a different general way of providing a machine-readable form (possibly a microdata value) of some text is to use the <data> element, as in <data itemprop="inLanguage" value="en">English</data>. This also connects the machine-readable form to the human-friendly form.

Web design: Microdata (for books)

The last months I have been considering adding semantic annotation to my web site, but I have not been sure about the choice of technique (microdata, RDFa, or microformats). I eventually chose microdata. (However, I am still not convinced that microdata is the best option.)

Today I added the first microdata to this site. I chose to start by annotating the list of books in my personal ‘library’ using the http://schema.org/Book vocabulary. (My understanding is that schema.org is the de facto first choice of vocabulary. And it is great if we all speak the same language.) So, the old markup,

<ul>
[...]
<li>Bondy, J.A.; Murty, U.S.R. (2008). Graph Theory. Springer (Graduate Texts in Mathematics),
United Kingdom (2010). ISBN 978-1-84628-969-9 (Hardcover) (English) (651 pages)<br/>
<em>A very nice, comprehensive, and detailed book on graph theory.</em></li>
[...]
</ul>

has been replaced by

<ul>
[...]
<li itemscope="" itemtype="http://schema.org/Book">
<p>
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="familyName">Bondy</span>,
<span itemprop="givenName">J.A.</span>
</span>;
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
<span itemprop="familyName">Murty</span>,
<span itemprop="givenName">U.S.R.</span>
</span>
(<time itemprop="dateCreated">2008</time>).
<cite itemprop="name">Graph Theory</cite>.
<span itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<span itemprop="name">Springer</span>
</span>,
<span itemprop="isPartOf" itemscope="" itemtype="http://schema.org/CreativeWork">
<span itemprop="name">Graduate Texts in Mathematics</span>
</span>
(<span itemprop="position">244</span>).
United Kingdom (2010).
ISBN <span itemprop="isbn">978-1-84628-969-9</span>
(<span itemprop="bookFormat">Hardcover</span>)
(<meta itemprop="inLanguage" content="en" />English)
(<span itemprop="numberOfPages">651</span> pages)
</p>
<p class="comment">A very nice, comprehensive, and detailed book on graph theory.</p>
</li>
[...]
</ul>

I also updated the style to

/* (Global stylesheet) */

[itemprop=isbn] {
font-family: monospace;
}

/* Books, movies, etc. */

p.comment {
padding-left: 2em;
}
p.comment:before {
content: "\1f4ac";
color: #AEAD71;
padding-right: 0.5em;
}

The result:

Rendering of the above hypertext and style

You can investigate the semantic markup yourself using the demo.

Web design: Link types

Additional semantics can be added to links (<link>, <a>, <area>) by specifying the type of link. For instance, the footer of my site now explicitly declares that the e-mail address is that of the page author:

<footer>
<p>Andreas Rejbrand’s Website</p>
<p>Copyright © 1997-2014 <a rel="author" href="mailto:andreas@rejbrand.se">Andreas Rejbrand</a></p>
<p>Page last modified: <% =LastModified %></p>
<p class="additional">This page is served with alternate stylesheets.
<a href="http://english.rejbrand.se/rejbrand/news.asp?ItemIndex=165">Read more.</a></p>
</footer>

In addition, the article permalinks are now marked up as such:

<article lang="en" id="ITEM214">
<header>
<h2>Web design: Default browser list style</h2>
<dl class="metadata" lang="sv">
<dt>Notis</dt>
<dd><a rel="bookmark" href="article.asp?ItemIndex=214">214</a></dd>
<dt>Datum</dt>
<dd><time>2014-11-19</time></dd>
</dl>
</header>
<p>Some time ago, I <a href="article.asp?ItemIndex=166">noticed</a> that [...]</p>
</article>

Link types are not new to HTML5, although the semantics has been clarified in HTML5.

Web design: Default browser list style

Some time ago, I noticed that the horizontal spacing in the TOC was too large in IE7. I didn’t care much about it then, because this was only a minor esthetical issue present only in very old browsers. However, I recently accidently found out the cause of this behaviour. In most modern browsers, the horizontal indentation in a UL (say) is done by the rule padding-left: 40px, and the left margin is zero. Consequently, to change the horizontal indentation (for instance, to remove it), you have only to change padding-left. But IE 7 and below creates the horizontal indentation using margin-left: 30pt instead.

My original CSS was

div#toc ol {
list-style-type: none;
padding-left: 2em;
}

which creates an indent of 2 em in a modern browser, but an indent of 30 pt + 2 em in IE7 and below. When I realised this, I changed the CSS to

div#toc ol {
list-style-type: none;
padding-left: 2em;
margin-left: 0em; /* Old IE */
}

In fact, I do not know of any specification saying that the left margin must be implemented using padding, so it was a bit thoughtless of me not to consider the margin in the first place.

In the same article, I also noticed that the TOC spacing problem worsened in IE6. The reason is that the + selector doesn’t work in IE6, so the following style is ignored:

div#toc>ol {
padding: 0;
margin: 0;
}

See the change in IE7 on Windows Vista: Before and after.

Update (2014-11-21): Well, the HTML5 specification suggests that padding-left: 40px be used for lists (OL, UL).

Web design: HTML forms

The form used to submit messages to the guestbook hasn’t changed either in many years. The original markup was

<h2 id="writeMsg">Write a new message</h2>

<form id="msg" method="post" action="gb_post.asp">

<p>Subject:<br /><input type="text" name="fTitle" style="width:400px;"/></p>
<p>Your name:<br /><input type="text" name="fName" style="width:400px;" /></p>
<p>E-mail:<br /><input type="text" name="fMail" style="width:400px;" /></p>
<p>Website:<br /><input type="text" name="fWeb" style="width:400px;" /></p>
<p>Message text:<br /><textarea name="fMsg" cols="74" rows="12" style="width:600px; height:200px;"></textarea></p>

<ul>
<li>Also include the website protocol (most often <code>http://</code>).
(The <code>mailto:</code> e-mail protocol is understood and should not be entered.)</li>
<li>By submitting a message you accept the "<a href="gb_rules.asp">terms of use</a>".</li>
</ul>



<p><strong>Security check</strong><br />Enter the sum to unlock the questbook!<br />
<input type="text" name="security1" readonly="readonly" value="16" />
<input type="text" name="security2" readonly="readonly" value="26" />
<input type="text" name="security3" />
</p>

<p><input type="submit" value="Send message" /> <input type="reset" value="Reset" /></p>

</form>

the rendering of which is given below.

Rendering of the above HTML

I have now changed this to

<section id="writeMsg">

<h2>Write a message</h2>

<form method="post" action="gb_post.asp">

<p>
<label for="InputTitle">Subject:</label>
<input id="InputTitle" name="fTitle" type="text" size="50" required="required">
</p>
<p>
<label for="InputName">Your name:</label>
<input id="InputName" name="fName" type="text" size="50" required="required">
</p>
<p>
<label for="InputMail">Your e-mail address (optional):</label>
<input id="InputMail" name="fMail" type="email" size="50">
</p>
<p>
<label for="InputWeb">Your website (optional):</label>
<input id="InputWeb" name="fWeb" type="url" size="50">
<small>Include the protocol, e.g. <kbd>http://</kbd>.</small>
</p>
<p>
<label for="InputMsg">Message text:</label>
<textarea id="InputMsg" name="fMsg" cols="74" rows="12" required="required"></textarea>
</p>

<fieldset>
<legend>Security check</legend>
<p>Compute the sum to unlock the guestbook.</p>
<input name="security1" readonly="readonly" value="3" type="text" size="4"> +
<input name="security2" readonly="readonly" value="19" type="text" size="4"> =
<input name="security3" type="text" size="4" autocomplete="off" required="required"
oninput="security3.setCustomValidity(parseInt(security1.value) + parseInt(security2.value) !=
parseInt(security3.value) ? 'Incorrect value.' : '')">
</fieldset>

<p>
<input id="InputAcceptRules" type="checkbox" name="fAcceptRules" value="yes" required="required" />
<label for="InputAcceptRules">I have read and I accept the
<a href="gb_rules.asp" target="_blank">terms of use</a>.</label>
</p>

<p>
<input value="Send message" type="submit">
<input value="Reset" type="reset">
</p>

</form>

</section>

which looks like

Rendering of the above HTML

There are quite a few improvements:

In order to style this, a very small piece of CSS is needed:

#writeMsg label + input, #writeMsg label + textarea {
display: block;
}
#writeMsg fieldset {
display: inline;
}

Indeed, I clearly want text fields and similar controls to be positioned below their labels, but I do want checkboxes and radio buttons, which precede their labels, to remain inline.

The second rule is needed to reduce the width of the fieldset.

Notice that labels, fieldsets, and legends are not new to HTML5 (and neither is good general design). On the other hand, the new types of input controls (type=email and type=url), the autocomplete attribute, and client-side validation are HTML5 additions.

Web design: Document lists

Below I give a screenshot of a document list on this site; the style hasn't changed the last 10 years.

A document list rendered using the markup below

The associated markup is (here I use the third item as the example)

<!-- Serier -->
<table class="singleBorder limWidth">
<tr>
<th class="left"><a href="dokument/serier.pdf">Numeriska serier</a> (Kategori: Matematik/Analys)</th>
</tr>
<tr>
<td>Skrivet: april 2014 &nbsp; Sidantal: 29</td>
</tr>
<tr>
<td>Författarens erfarenhet säger att momentet med numeriska serier [...]</td>
</tr>
</table>

The markup is dreadful! Although the problems are obvious, here they are:

Clearly, this ancient markup had to be improved, and yesterday I changed it to

<ul class="documentList">

[...]

<li>
<h2><a href="dokument/serier.pdf">Numeriska serier</a></h2>
<dl class="metadata">
<dt>Kategori</dt>
<dd>Matematik/Analys</dd>
<dt>Skrivet</dt>
<dd><time datetime="2014-04">april 2014</time></dd>
<dt>Sidantal</dt>
<dd>29</dd>
</dl>
<div class="itemDescription">
Författarens erfarenhet säger att momentet med numeriska serier [...]
</div>
</li>

[...]

</ul>

This is, obviously, a major improvement; now the mark up is essentially perfect. The associated style and browser rendering are shown below.

/* Document lists */

ul.documentList {
margin: 2em 0em;
padding: 0;
}
ul.documentList li {
transition: background 250ms, border 250ms;
list-style-type: none;
margin: 2em 0em;
border-left: 2ex solid #CCC;
padding: 4px 2ex;
background: #EEE;
}
ul.documentList li:hover {
border-color: #AEAD71;
background: #CFCFAC;
}
ul.documentList li h2 {
margin-top: 0;
}
body:lang(sv) ul.documentList li:lang(en) h2:after {
content:url("http://rejbrand.se/pix/Flag_of_the_United_Kingdom_small.png");
padding-left:0.5em;
}
body:lang(en) ul.documentList li:lang(sv) h2:after {
content:url("http://rejbrand.se/pix/Flag_of_Sweden_small.png");
padding-left:0.5em;
}
ul.documentList li dl, ul.documentList li div {
margin-top: 1em !important;
}
ul.documentList li h2 a {
color: black !important;
text-decoration: none;
}
ul.documentList li:hover h2 a {
text-decoration: underline;
}

A document list, rendered using the above (new) markup and style

Initially, my plan was to recreate the original style, but halfway through the process of writing the CSS I discovered that the current partial result actually looked better than the original design, so I decided to divert from my plan; instead, I added some visual candy to the intermediate result. The end result looks much more modern and clean.

Unfortunately, there appears to be a ‘bug’ in IE 6 and below which creates a ‘staircase’ going into the left margin of the page; see a minimal example demonstrating the issue. I ‘solved’ the issue by adding an IE 6-and-below stylesheet with

ul.documentList li {
padding: 0px; /* To work around an IE 6 bug */
}

Update (2014-11-17 19:28:42): I changed padding: 0px to boder: none. Both make the staircase disappear and the padding is more important than the border.

Web design: More HTML5 semantics

The markup of a general article on this site is now almost perfect:

<article id="ITEM170">
<header>
<h2>Boktips: <cite>Svenska skrivregler</cite> från Språkrådet</h2>
<dl class="metadata" lang="sv">
<dt>Notis</dt>
<dd><a href="article.asp?ItemIndex=170">170</a></dd>
<dt>Datum</dt>
<dd><time>2013-10-18</time></dd>
</dl>
</header>
<p>Det var med skräckblandad förtjusning [...]</p>
</article>

(This is from the Swedish site, so <html> has lang=sv.) Notice the use of the <time> element to mark up the date. Since the date string is already machine-readable (in one of the formats given in the HTML5 specification), there is no need for the datetime attribute. The CSS and the rendering is shown below.

/* Newsitems */

article { }
article header h2, article header p {
margin: 0;
}
article header {
color: black;
background: #EEE;
padding: 4px;
border: 1px solid black;
}
article header dl, article header div {
margin-top: 1em !important;
}
article {
margin-bottom: 4em;
}
:lang(sv) article:lang(en) header h2:after {
content:url("http://rejbrand.se/pix/Flag_of_the_United_Kingdom_small.png");
padding-left:0.5em;
}
:lang(en) article:lang(sv) header h2:after {
content:url("http://rejbrand.se/pix/Flag_of_Sweden_small.png");
padding-left:0.5em;
}

Rendering of the above HTML with the default stylesheet

These articles are considered the standard ‘articles’ on my site, so there is no need for a class attribute on the <article> element.

Now, I have also improved the markup of guestbook messages, as shown in the following message:

<article class="guestbookMessage" id="MSG343">
<header>
<h2>
Dina dokument
</h2>

<dl class="metadata">
<dt>Från</dt>
<dd>Jan</dd>
<dt>Datum</dt>
<dd><time>2014-11-06</time></dd>
</dl>

<div>
<a href="gb_response.asp?MessageIndex=343">Läs svar från Andreas Rejbrand</a>
</div>

</header>

<div class="messageText">
<p>Hur kommer det sig att du väljer att skriva dina dokument i Word [...]</p>
</div>
</article>

The rendering of this new semantic markup should match the original style of my guestbook, as shown in the following screenshot.

Rendering of the above HTML with the (old or new) default stylesheet

Here I use a special class to indicate that this is not a standard ‘article’ but a guestbook message. And obviously, a special class is needed in order to style guestbook messages differently from the standard ‘articles’. The new CSS is

/* Guestbook */

article.guestbookMessage {
margin-top: 4em;
margin-bottom: 4em;
width: 75%;
}

article.guestbookMessage header {
background: inherit;
color: inherit;
border: none;
padding: 0;
margin-bottom: 1em;
}

article.guestbookMessage header dl, article.guestbookMessage header div, article.guestbookMessage .messageText {
background: #DDD;
color: black;
padding: 4px;
border: 1px solid black;
}

article.guestbookMessage header div a {
font-weight: bold;
}

I clearly need the inherit value, because I want the header to be transparent (and, indeed, the parent element is not guaranteed to be black text on white background). But this gave rise to a minor problem, because this CSS value is not supported (at least not properly) in IE 7 and below. The solution is simple enough, however. I simply added the following code to my IE7-and-below stylesheet:

article.guestbookMessage header {
background: white; /* IE ≤7 doesn't understand inherit */
color: black;
}

This assumes that the parent indeed has black text on a white background, but this is the case if the default stylesheet is used, and alternate stylesheets are not supported in IE 7 and below anyway.

Web design: HTML5 and old user agents

Although it was mainly a trivial exercise to upgrade to the HTML5 doctype and start using the new semantic elements, some additional effort was required in order to maintain compatibility with old user agents. Indeed, Internet Explorer 8 and below will simply ignore these elements when constructing the DOM. This is a problem, in particular, if you want to style them. Fortunately, there is a very simple way of making Internet Explorer 5.5–8 keep these elements. The trick is to create ‘samples’ of them using JavaScript. In my case, I added

<!--[if lte IE 8]><script type="text/javascript" language="JavaScript" src="../JavaScript/html5.js"></script><![endif]-->

to the HEAD section where the contents of html5.js is simply

/* Make HTML5 elements accessible to IE 5.5 - IE 8. */
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("footer");
document.createElement("aside");

This will make the new elements appear in the DOM as expected, but they will be given a ‘default’ style of display: inline instead of the expected display: block. Therefore I also added

header, footer, main, nav, article, aside {
display: block;
}

to my global CSS file. This CSS is also required by other pre-HTML5 browsers that do create the expected DOM but – of course – do not know that the unknown elements should be ‘blocks’.

Web design: HTML5 is a W3C Recommendation

HTML5 became a W3C recommendation last week (28 October 2014). Therefore I have now changed the doctype of my main websites from XHTML 1.0 Strict to HTML5. Since I have been thinking in terms of the HTML5 semantics a long time, only very minor changes had to be made in order to make the pages make full use of the new language. Besides changing the doctype, I have performed substitutions such as <div id="footer"> to <footer>. Indeed, the main benefit of the new doctype is that I can use the new HTML5 semantic elements, such as <header>, <footer>, <main>, <nav>, and <article>, to make the markup more semantic. For instance, consider the main layout of a typical web page on this site:

Screenshot of a typical web page with header, navigational links, main body, and footer

The markup of this body is now

<header>
<div id="chlang"></div>
<div id="logobar"></div>
<nav></nav>
</header>

<main>
</main>

<footer>
</footer>

Recall that the <nav> contains an unordered list of list items, each being a hyperlink.

In addition, the News page, which contains a number of articles, makes perfect use of the <article> and <header> elements:

<main>
<h1>News</h1>
<article id="ITEM208">
<header></header>
<p>Body text...</p>
</article>
<article id="ITEM207"></article>
<article id="ITEM206"></article>
<article id="ITEM205"></article>
<article id="ITEM204"></article>
...
</main>

(Recall that each article header contains a heading and a metadata name–value DL.)

Of course, HTML5 has many more benefits in addition to the semantic elements listed above. For instance, I can now use the <video> element to embed videos. I have actually already done so for quite some time on a small number of pages, but not until now will pages with such content validate.

Web design: Styling metadata name–value lists

While studying web standards and improving the markup of my own sites, I noted that the <di> element from XHTML 2.0 would be practical. In particular, it would make it much simpler to style metadata name–value lists that are semantically marked up using HTML5 description lists using currently-available CSS selectors and properties. I wrote a letter to Ian Hickson (the WHATWG HTML5 editor) about this. Already before I had received his reply, I realised how bad it sounds to ask for HTML changes to simplify styling, but in my defence, the DI element in itself has nothing to do with styling, and makes sense semantically (although it is superfluous). Naturally, Mr Hickson pointed this out in his reply, but he also informed me about the run-in value for the CSS display property, which I was not aware of. And, as it turns out, this is in fact perfect for my needs.

From the W3C (see below):

A run-in box behaves as follows:

  1. If the run-in box contains a block box, the run-in box becomes a block box.
  2. If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
  3. Otherwise, the run-in box becomes a block box.

The example given in the spec. is about an H3 entering the paragraph following it. Consequently, using this value on DT elements (each followed by a DD element, like in a metadata name–value list) is very natural, and much more appropriate than using float.

run-in is a somewhat lesser known value, and it appears like it is only mentioned in the CSS basic box model Working Draft from August 2007. Turning to browser support, it is remarkably good in Internet Explorer, which supports run-in already in IE8. Google Chrome and Safari supports it as well. However, not even the latest version of Firefox supports this value.

As an example, consider the following hypertext document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
font-weight: bold;
display: run-in;
}
dt:after {
content: ": "
}
</style>
</head>

<body>

<dl>
<dt>Subject</dt>
<dd>A Question</dd>
<dt>From</dt>
<dd>Mr Smith</dd>
<dt>Time</dt>
<dd>2013-08-05</dd>
</dl>


</body>
</html>

which you can find live. It is beautiful.

Update (2013-10-17 21:44:33): I just saw that the W3C document has a current version.

Update (2014-03-24 22:15:55): A month ago, I noticed that Google Chrome no longer implements run-in. Therefore, I suppose we will not see any universal support for this value any time soon.

Web design: Compatibility with old user agents

Compatibility with old user agents is very important to me, because I strongly believe that if you buy a computer at any time, and it works perfectly, then you should be able to stick to that computer for as long as you wish. After all, a writer who bought a high-quality computer in the late 90s should still be able to use it the exact same way he did when it was new. In addition, if you do separate content (HTML) from style (CSS) as you should do, it should not be particularly difficult to ensure a decent fallback on old user agents.

Before the recent markup improvement on my sites, they were essentially compatible with every version of Internet Explorer from 5.0. The new markup, which is far more elegant, efficient, and modern, requires only little more: Internet Explorer 5.5. Hence, my sites remain very compatible in this respect. As a comparison, some of the most visited sites on the web fail already in Internet Explorer 6.0 on Windows XP (microsoft.com being one example).

At my sites, almost no JavaScript is used; I almost exclusively work with hypertext documents (as apposed to hypertext applications), and I strongly believe that hypertext documents should only be declarative if possible. Therefore, the main issue in terms of legacy browser compatibility is the CSS support. At the MSDN, Microsoft provides a comprehensive description of the CSS support in old versions of Internet Explorer. Below is the subset of this data that is of significance to my sites:

Feature IE 5.5 IE 6 IE 7 IE 8 IE 9 IE 10
text-shadow No No No No No Yes
box-shadow No No No No Yes Yes
:last-child No No No No Yes Yes
:not No No No No Yes Yes
:lang No No No Yes Yes Yes
:before, :after, content No No No Yes Yes Yes
+, >, ~ selectors No No Yes Yes Yes Yes
Attribute selectors No No Yes Yes Yes Yes
linear-gradient No No No No No Yes
-ms-filter No No No Yes Yes Yes
filter Yes Yes Yes Yes Yes Yes

I have every (non-current) version of Internet Explorer from 3.0 and upwards installed in virtual machines. Below, I give the details of the rendering of my sites in all these versions of Internet Explorer. I investigate only my article on Swedish grammar since that page is the most technically demanding page on the site; it even includes a JavaScript that automatically generates a TOC.

Internet Explorer 10 is the most recent (stable) version of Internet Explorer, and this produce the reference rendering of the page. Of course, the page looks exactly the same in any modern browser (Chrome, Firefox, Safari, Opera). See screenshot. In Internet Explorer 9, we lose support for the text-shadow property, which is used as a special effect when hovering the logo at the upper-left part of the page. It cannot be stressed enough how unimportant that feature is; hence, essentially, my site looks perfect even in IE9. It is interesting to notice, however, that the square bullet (in a UL, say) has a very distinctive look in IE9. See screenshot. Turning to Internet Explorer 8, we lose box-shadow, as apparent in the screenshot from Windows XP. We also lose the :last-child and :not selectors used in the pixlinks (see below). Moving on to Internet Explorer 7, we lose CSS generated content (:before, :after, and content) and, at the same time, :lang(). At my sites, a link on a page in Swedish to a page in English is marked with the flag of the United Kingdom, and similarly the other way around. These are added using CSS content, the language selector, and attribute selectors testing the hreflang attribute on the anchor element. Also, an article in one language, found on a page in the other language, display a flag in the header. This is also done using CSS generated content and the language selector. Apparently, these features are lost in IE 7. Screenshot from Windows Vista.

In Internet Explorer 6, the attribute selectors are gone, but that doesn't affect me much, since I mainly use them together with the language selector and CSS generated content, which were lost already in IE7. Much worse is the lack of support for the + selector; now there is no longer a border between the items in the navbar, as apparent in the screenshot from Windows XP. Also notice the strange left margin in the TOC. In Internet Explorer 5.5, some more CSS problems arise. See the screenshot from Windows 95. But if you only ignore these (fairly minor) visual imperfections, the site is still very readable. Even the JavaScript TOC generator works perfectly.

Internet Explorer 5.5 is the oldest version supported. However, the horror is not particularly severe when you turn to Internet Explorer 5. In this screenshot from Windows 95, it is apparent that most parts are still perfectly readable. The navbar styling is now very poor, however, and the TOC doesn't look good either. Since most pages do not have a TOC, it is the new semantic navbar that made me stop supporting Internet Explorer 5. Moreover, at least on my virtual system, many (Unicode) font glyphs are missing. Turning to Internet Explorer 4.0, things get much worse. As seen in the screenshot, basic CSS positioning fails (the flag is not at the right side of the page any more), and the navbar is no longer horisontal. In addition, the TOC JavaScript fails. We end this journey with Internet Explorer 3 which fails rather badly. In the screenshot it seems like most CSS is ignored, there is no PNG support, all non-ASCII characters are displayed incorrectly, and all sorts of things go wrong. Still, with some effort, the page is readable (although it might actually be easier to read the text in the HTML source code, at least if you have access to a UTF-8-aware editor).

Perhaps the most thrilling observation of them all, however, is that the vector linear gradient in the logobar works all the way down to Internet Explorer 5.5.

Web design: Alternate stylesheets

The improved markup of my websites has made it possible to serve the pages with alternate stylesheets. The following stylesheets are offered:

Style name Screenshot 1 Screenshot 2
Classic Screenshot of web page Screenshot of web page
Single column of limited width Screenshot of web page Screenshot of web page
Widescreen layout in two columns Screenshot of web page Screenshot of web page
High contrast (black) Screenshot of web page Screenshot of web page
Single column of limited width +
High contrast (black)
Screenshot of web page Screenshot of web page
Widescreen layout in two columns +
High contrast (black)
Screenshot of web page Screenshot of web page

Web design: The cite HTML element

A few days ago, I observed that the latest version of the HTML5.1 Editor's Draft has changed the meaning of the cite element: now it is allowed for many more things than just titles of works. The only requirement is that the contents of the element is a reference to a 'creative work' (in a very broad sense) and contains at least the title of the work, the author, or a URL. The contents can be of any form. I am not really fond of this change, since the previous version was much easier to use right and it had a very precise meaning. (It also was very useful in practice, since you generally do need some markup for titles because you generally want them in italics.) However, since the new version is a superset of the old one, in the sense that every valid use of cite according to the previous version is also valid according to the new version, this doesn't effect me, so I won't complain: I can still use the element the way I want to, and it is conforming.

Actually, I had the great privilege of discussing the matter directly with Steve Faulkner, one of the W3C HTML5 editors.

Web design: Standards compliance

Yesterday I wrote about the improved markup on my sites. Although I didn’t mention it explicitly, it almost goes without saying that almost all my webpages are now conforming to the W3C HTML and CSS3 specifications. Although I think in terms of HTML5 and use the HTML5 semantics in most cases, the doctype is still XHTML 1.0 Strict. Now, on one single page, I do actually use the HTML5 <video> tag. Of course, this makes that page a non-conforming XHTML 1.0 Strict document, but in practice there is no problem at all: every HTML5-aware browser I know of will display the video just fine, as if the doctype was the HTML5 one. I will soon upgrade to the HTML5 doctype, and then 100 % of my webpages will be standards-compliant.

It is somewhat interesting to examine the standard compliance of external major websites. It turns out that many, if not most, actually are non-conforming. Here are a few examples:

Website Doctype HTML status CSS status
rejbrand.se XHTML 1.0 Strict Valid Valid
svt.se HTML5 Invalid (not far from valid) Invalid
datormagazin.se HTML 4.01 Transitional Invalid Invalid
bbc.co.uk XHTML + RDFa Valid Invalid
microsoft.com HTML5 Invalid Invalid
apple.com HTML5 Invalid (not far from valid) Invalid
adlibris.se HTML5 Invalid Invalid
google.com HTML5 Invalid Invalid
w3.org XHTML 1.0 Strict Valid Valid

In most cases, I have examined only the main page of the site. I suppose most big sites use frameworks making each page comparable to each other page in terms of overall markup and page layout.

Web design: Improved markup

As I wrote a few days ago, I have been studying web standards rather intensely during my recreational time this summer, and I have used my new knowledge to improve my web sites. In this article, I’d like to discuss the main improvements.

First, you should notice that most improvements are invisible to the outcome of rendering the HTML in a browser; instead, most improvements are related to the semantics and cleanness of the markup. By ‘cleanness’, I mean that all parts of the markup related to styling the document has been removed to CSS stylesheets. Nevertheless, there have been a small number of visual improvements.

Now, let’s dive into the details. First, as I wrote, I have separated contents (HTML markup) and presentational information (CSS stylesheets) perfectly. Now the HTML markup only contains the information of the document, and makes absolutely no assumptions about the way the document should, can, or may be styled. Actually, my sites were rather good in this respect already before this work began, but I have removed a number of <p>&nbsp;</p> previously used to add vertical space. Now this is done using CSS margins.

Turning to the general structure of each page, I have been thinking in terms of the HTML5 semantics. Hence, each document consists of DIVs with different IDs: header, toolbar, mainContents, and footer. When the time comes and I move to the HTML5 doctype, I might change these to the new semantic HTML5 elements (<header>, <nav>, <main>, <footer>). Previously I used classes instead of IDs for these DIVs. The new use of IDs feels more appropriate since these elements occur exactly once per page. Notice that the ID toolbar of the main navigation bar is a leftover from the very first version of my current site design from the early 2000s. This strange ID will (obviously) vanish when I upgrade to the HTML5 elements.

The navigation bar was previously marked up using

<div class="toolbar">
<a href="default.asp" class="tlbLnk">Main Page</a> |
<a href="biography.asp" class="tlbLnk">Biography</a> |
<a href="ideas.asp" class="tlbLnk">Philosophy</a> |
<a href="documents.asp" class="tlbLnk">Writings</a> |
<a href="applications.asp" class="tlbLnk">Software</a> |
<a href="nature.asp" class="tlbLnk">Photos</a> |
<a href="news.asp" class="tlbLnk">News</a> |
<a href="guestbook.asp" class="tlbLnk">Guest Book</a> |
<a href="contact.asp" class="tlbLnk">Contact Me</a> |
<a href="links.asp" class="tlbLnk">Links</a>
</div>

This has been changed to

<div id="toolbar">
<ul>
<li><a href="default.asp">Main Page</a></li>
<li><a href="biography.asp">Biography</a></li>
<li><a href="ideas.asp">Philosophy</a></li>
<li><a href="documents.asp">Writings</a></li>
<li><a href="applications.asp">Software</a></li>
<li><a href="nature.asp">Photos</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="guestbook.asp">Guest Book</a></li>
<li><a href="contact.asp">Contact Me</a></li>
<li><a href="links.asp">Links</a></li>
</ul>
</div>

First, notice that the separator character, which was purely presentational, has been removed from the markup, as required by the principles. Also notice the semantic use of the unordered list. Notice that the classes on the links have been removed. This is because I don’t want to repeat myself (DRY); it is already apparent that the links are toolbar (navbar) links, because they are children of the div#toolbar node in the DOM tree. All the fancy CSS selectors are there to be used! This removal of unnecessary classes in this way has been done in many places. The CSS related to the navbar is

#toolbar {
color: #FFFFFF;
background-color: #000000;
padding: 0;
}
#toolbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background: black;
color: white;
padding: 2px;
font-size: 0px;
}
#toolbar li {
background: black;
display: inline; /* If 'inline-block' is not recognised, like in FF 2 */
display: inline-block;
margin: 0;
padding: 2px 4px;
font-size: small;
}
#toolbar li + li {
border-left: 1px solid gray;
}
#toolbar a {
text-decoration: none;
padding: 2px 5px;
}
#toolbar a:link, #toolbar a:visited {
color: white;
background: black;
}
#toolbar a:hover {
color: black;
background: #CFCFAC;
}
#toolbar a:active {
color: black;
background: #AEAD71;
}

I considered using CSS content to add a vertical line character (|,U+007C: VERTICAL LINE) between the items in the list, but eventually settled for the border approach instead; it looks somewhat better, actually. Since display: inline-block is recognised in IE 7 and some earlier versions, but ignored on elements that are block-level by default, I use an IE conditional comment <!--[if lte IE 7]> to include the following CSS file:

/* This is not a valid CSS stylesheet. However, it conforms to a data format expected by Internet Explorer 7 and earlier. */
/* This file must not be used by a valid HTML document. Of course, it may be 'linked' inside a HTML comment. */

#logobar {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#AEAD71', EndColorStr='#CFCFAC'); /* IE 5.5 to 7 */
/* IE 8 and 9 recognises -ms-filter. IE 10 supports linear-gradient. */
}

#toolbar li {
display: inline; /* IE ≤7 recognises 'inline-block' but doesn't render it correctly for LIs. */
}

Oh, this reminds me of an improvement of the logobar (webpage header). Previously, the logobar consisted of a raster image with the text “Andreas Rejbrand’s Website” on a linear-gradient background. Of course, that sucks! Both text and linear gradients should be done by ‘vector’ means. Now, the markup is simply

<div id="logobar">
<a href="default.asp">
Andreas Rejbrand's Website
</a>
</div>

and the associated style is

#logobar {
font-family: Cambria, Georgia, Serif;
height: 1.5em;
line-height: 1.5em;
font-size: 1.5em;
padding: 0.5em;
background-color: #CFCFAC;
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#AEAD71', EndColorStr='#CFCFAC')"; /* IE 8 and 9 */
background-image: -webkit-linear-gradient(left, #AEAD71, #CFCFAC);
background-image: -moz-linear-gradient(left, #AEAD71, #CFCFAC);
background-image: -ms-linear-gradient(left, #AEAD71, #CFCFAC);
background-image: -o-linear-gradient(left, #AEAD71, #CFCFAC);
background-image: linear-gradient(to right, #AEAD71, #CFCFAC);
}
#logobar a {
color: black;
text-decoration: none;
}
#logobar a:hover {
text-shadow: white 0px 0px 5px;
}

Yes, I couldn’t help adding some visual candy there (:hover). In the block above, you can see the CSS3 way of adding a linear gradient, plus a few vendor-prefix versions conforming to a somewhat older syntax. Unfortunately, MSIE doesn’t support linear gradients in any CSS3-like way before IE10 (almost surprisingly, since IE9, even IE8, is pretty good in most other cases). Instead, in IE8+ you can use -ms-filter. But IE5.5-IE7 only supports the non-conforming unprefixed filter property. Hence, to add the gradient in old IEs, without making the CSS invalid, I put the unprefixed filter version in the IE7-specific stylesheet mentioned previously.

Similar to the main navbar, the pixlinks navbar was previously

<div class="logobar singleBorder" style="padding:8px;">
<strong>Plants:</strong>
<a href="sommar.asp">Nature, summer</a>,
<a href="vinter.asp">Nature, winter</a> |
<strong>Animals:</strong>
<a href="djur.asp">Mammals</a>,
<a href="aves.asp">Birds</a>,
<a href="reptiler.asp">Reptiles</a>,
<a href="leddjur.asp">Arthropods and Molluscs</a> |
<strong>Culture:</strong>
<a href="nyc.asp">New York City (1/2</a>,
<a href="nyc2.asp">New York City (2/2)</a> |
<a href="portratt.asp">Portraits</a> |
<a href="mathart.asp">Mathematical pictures</a>
</div>

That is ugly! First, the separators, “,” and “|” are purely presentational (especially the latter). Second, the CSS class singleBorder was, as the name suggests, purely presentational, and hence it is an invalid class name (classes have nothing to do with styles). Third, inline CSS should only be used in the very rare cases when the style in some sense is very intimately connected with the element, maybe in a semi-semantic way. Fourth, according to the HTML5 semantics, <strong> is used to signify something important, like some particularly important passage in a warning text. It should definitely not be used to mark up some kind of ‘header’, like in this case. It’s plain incorrect. Today, the markup is much improved:

<ul class="two-level-nav">
<li>
<b>Plants</b>
<ul>
<li><a href="sommar.asp">Nature, summer</a></li>
<li><a href="vinter.asp">Nature, winter</a></li>
</ul>
</li>
<li>
<b>Animals</b>
<ul>
<li><a href="djur.asp">Mammals</a></li>
<li><a href="aves.asp">Birds</a></li>
<li><a href="reptiler.asp">Reptiles</a></li>
<li><a href="leddjur.asp">Arthropods and Molluscs</a></li>
</ul>
</li>
<li>
<b>Culture</b>
<ul>
<li><a href="nyc.asp">New York City (1/2)</a></li>
<li><a href="nyc2.asp">New York City (2/2)</a></li>
</ul>
</li>
<li><a href="portratt.asp">Portraits</a></li>
<li><a href="mathart.asp">Mathmematical pictures</a></li>
</ul>

two-level-nav is a site-wide new class that can be used for two-level navigational lists, like this one. Notice that the class describes the semantics of the UL; it is not purely presentational like the ugly old singleBorder. I’d like a list header tag here, but <b> is fine according to the HTML5 semantics. The corresponding style is

/* Two-level nav */

ul.two-level-nav, ul.two-level-nav ul, ul.two-level-nav li {
padding: 0;
margin-left: 0;
margin-right: 0;
}
ul.two-level-nav > li, ul.two-level-nav > li > ul {
display: inline-block;
}
ul.two-level-nav > li > ul > li {
display: inline;
}
ul.two-level-nav li {
list-style-type: none;
}
ul.two-level-nav {
background: #AEAD71;
color: black;
padding: 4px;
}
ul.two-level-nav > li {
background: #CFCFAC;
margin: 0px 0px;
padding: 4px 8px;
transition: background 250ms;
}
ul.two-level-nav > li:hover {
background: white;
}
ul.two-level-nav b:after {
content: ":";
}
ul.two-level-nav ul li:not(:last-of-type):after {
content: ",";
}

One downside of this approach is that the last selector is very fancy, so the commas will disappear already in IE8. Of course, I could have used a simple ul.two-level-nav ul li + ul.two-level-nav ul li:before selector to add a comma followed by a space (this also requires some additional changes (why?)), but that appears somewhat less elegant. Since the loss of the commas isn’t that terrible, I chose elegant code before perfect backwards compatibility in this case. Also notice the nice CSS3 transition.

Turning to the main contents of the web pages, I follow strictly the HTML5 semantics, as described in the previous article. In practice, this means that quite a few <em> has been changed to more suitable elements. Yes, unfortunately, I used the stress emphasis element as a generic italics element, which is a semantic nightmare (almost, at least). Now I strictly use <em> only for stress emphasis, I use <dfn> for defining instances of phrases, <cite> for titles (of books, films, …), and <i> for phrases in a foreign language (together with the lang attribute, of course).

I actually believe that my sites are far better than most on the web today when it comes to semantics.

Further, I have been very careful to markup the (human) language of text. My site is bilingual (Swedish and English). The lang attribute is always set on the <html> element to the main language of the page. I also set the language explicitly on articles (<div class="article" lang="en">), sample grammar boxes, etc., explicitly. Then I use CSS content to add an English flag every time an English article appears on a Swedish page, and vice versa. For example, an article may look like

<div class="article" lang="en" id="ITEM159">
<div class="header">
<h2>Web standards</h2>
<dl class="metadata" lang="sv">
<dt>Notis</dt>
<dd><a href="news.asp?ItemIndex=159">159</a></dd>
<dt>Datum</dt>
<dd>2013-08-21</dd>
</dl>
</div>

<p>During my recreational hours this summer,

...

This article is found on my Swedish site, so an English flag will appear in the article’s header, because the article is in English. But the metadata names are in Swedish, because the article is served on the Swedish site. But the metadata is in the header, which is in the article, so the metadata needs to set the language to “sv” explicitly.

The CSS related to articles is

.article { }
.article .header h2, .article .header p {
margin: 0;
}
.article .header {
color: black;
background: #EEE;
padding: 4px;
border: 1px solid black;
}
.article .header h2 + dl {
margin-top: 1em;
}
.article {
margin-bottom: 4em;
}
:lang(sv) > .article:lang(en) .header h2:after {
content: url("http://rejbrand.se/pix/Flag_of_the_United_Kingdom_small.png");
padding-left: 0.5em;
}
:lang(en) > .article:lang(sv) .header h2:after {
content: url("http://rejbrand.se/pix/Flag_of_Sweden_small.png");
padding-left: 0.5em;
}

Notice that I think in HTML5 terms: Articles and headers.

I am also very careful to set the language correctly even on very small phrases in a foreign language, like in

<p>Jag påverkas också oerhört starkt av vissa filmer. Till exempel såg jag <cite lang="en">Titanic</cite> förra året. Efter filmen vaknade jag mitt i natten, och kände en förtvivlad sorgsenhet. Det var som att all lycka och glädje i världen sjönk med Titanic, och allt som återstod i min värld var tomhet. Ännu värre var <cite lang="en">The Phantom of the Opera</cite> (2004). Det är en alldeles underbar film, dels för musiken och scenerna, men också för filmens oerhörda (psykologiska) verklighet.

Being careful with the language, I suppose, is very important for screen readers.

Naturally, there are quite a few hyperlinks on my English site to my Swedish site, and in the opposite direction. If following a hyperlink will change the webpage language, this is indicated visually:

body:lang(sv) a[hreflang=en]:after {
content:url("http://rejbrand.se/pix/Flag_of_the_United_Kingdom_small.png");
padding-left:0.5em;
}
body:lang(en) a[hreflang=sv]:after {
content:url("http://rejbrand.se/pix/Flag_of_Sweden_small.png");
padding-left:0.5em;
}

Now, return for a while to the article headers. Notice that I use description lists to mark up metadata name–value pairs, as is semantically rich. This is also new: Previously I used (oh, horror) <strong> and <br/> with plain text in a paragraph. Today I use the semantically-named class metadata when a description list is used as a metadata list. The CSS is

dl.metadata {
margin: 0;
}
dl.metadata dt {
float: left;
clear: left;
font-weight: bold;
padding: 0;
margin: 0;
margin-right: 1ex;
}
dl.metadata dt:after {
content: ":";
}
dl.metadata dd {
margin: 0;
padding: 0;
}

I also took the liberty of adding some new visual sugar while updating my sites:

blockquote {
position:relative;
}
blockquote p:before {
color: darkgrey;
display: block;
position: absolute;
font-size: 400%;
left: -30px;
top: -10px;
}
blockquote:lang(sv) p:before {
content: "\201D";
}
blockquote:lang(en) p:before {
content: "\201C";
}

and

img:target, ul:target, ol:target, p:target, div:target,
blockquote:target, table:target {
box-shadow: red 0px 0px 5px;
}

and

code {
background: #EEE;
color: black;
padding: 2px;
display: inline-block;
}
kbd kbd {
display: inline-block;
background: black;
color: white;
font-family: 'Arial Unicode MS', Arial, Helvetica, sans-serif;
border: 0.3em outset gray;
padding: 0.1em 0.3em 0.1em 0.3em;
}
kbd kbd:active {
border: 0.3em inset gray;
}

Let me end this article by giving a more fancy example of CSS content: I do write quite a lot about Swedish grammar on my site, and thus I need textboxes that exemplify both correct and incorrect written text. The markup might look like

<div class="correct-language">
<p>Vi kommer till tre städer: Stockholm, Linköping och Malmö.</p>
</div>

The corresponding style is

:lang(sv) > .correct-language:lang(en):before, :lang(sv) > .incorrect-language:lang(en):before,
:lang(sv) > .possibly-correct-language:lang(en):before {
background-image: url("http://rejbrand.se/pix/Flag_of_the_United_Kingdom_small.png");
background-repeat: no-repeat;
background-position: 90% 50%;
padding-right: 3em;
}
:lang(en) > .correct-language:lang(sv):before, :lang(en) > .incorrect-language:lang(sv):before,
:lang(en) > .possibly-correct-language:lang(sv):before {
background-image: url("http://rejbrand.se/pix/Flag_of_Sweden_small.png");
background-repeat: no-repeat;
background-position: 90% 50%;
padding-right: 3em;
}

.correct-language {
background: #CCFFCC;
color: black;
padding: 0.2em 1em 0.2em 1em;
margin: 1em 0 1em 0;
}
div.correct-language:before {
position: relative;
left: -2em;
top: 0.5em;
font-weight: bold;
background: #4C994C;
color: white;
padding: 0em 1em 0em 1em;
box-shadow: black 2px 2px 5px;
}
div.correct-language:lang(sv):before {
content: "Korrekt";
}
div.correct-language:lang(en):before {
content: "Correct";
}

Of course, I strictly make sure that the type of textbox (like correct or incorrect language) is made clear even with no stylesheet is applied.

The separation of presentational information (style) from markup has allowed me to serve a number of alternate stylesheets the user can choose from. I will talk more about that in a few days.

Web standards

During my recreational hours this summer, I studied web standards. First I read (very carefully) the specifications for HTML+, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.01, XHTML 1.0, XHTML 2.0, and HTML 5.1. I also read (very carefully) about HTML Microdata, Using WAI-ARIA in HTML, and Polyglot Markup: HTML-Compatible XHTML Documents.

Then I turned to CSS, and read the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification along with Selectors Level 3 and some smaller documents: CSS Backgrounds and Borders Module Level 3, CSS Conditional Rules Module Level 3, CSS Image Values and Replaced Content Module Level 3, CSS Marquee Module Level 3, CSS Multi-column Layout Module, CSS Speech Module, CSS Values and Units Module Level 3, CSS Flexible Box Layout Module, CSS Text Decoration Module Level 3, CSS Animations, CSS Fonts Module Level 3, CSS Counter Styles Level 3, CSS Text Module Level 3, CSS Transforms, CSS Transitions, CSS Custom Properties for Cascading Variables Module Level 1, and possibly a few others that I don't remember right now.

I also reread the Scalable Vector Graphics (SVG) 1.1 (Second Edition) specification.

Since I am also interested in general XML, I continued by reading Extensible Markup Language (XML) 1.0 (Fifth Edition) and Namespaces in XML 1.0 (Third Edition) carefully, along with XML Schema Part 0: Primer Second Edition. Then I read XML Path Language (XPath) Version 1.0, XSL Transformations (XSLT) Version 1.0, and Associating Style Sheets with XML documents 1.0 (Second Edition). Finally, I read XML Linking Language (XLink) Version 1.1, XPointer Framework, XPointer element() Scheme, XPointer xmlns() Scheme, XPointer xpointer() Scheme, and XML Base (Second Edition).

To try some of my new knowledge in practice, I wrote a primitive desktop calculator that woks in any modern browser (IE10, Chrome, Firefox, Safari, Opera, ...).

Generally, I love HTML5, CSS, SVG, and XML. Regarding HTML5, I am particularly fond of the new semantic elements (<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, and <figure>), the clarified semantics of old elements (such as <em>, <strong>, <i>, <b>, <cite>, and <dl>), the new <audio> and <video> elements, microdata, and the new form capabilities, just to mention a few of my personal favourites.

I am very fascinated by the power of XML, and – in particular – the power of XSL(T).

I have used my new knowledge to improve my own websites; now, almost all of my web pages are conforming XHTML 1.0 documents (and any exception is well-motivated and will vanish as soon as I upgrade to the HTML5 doctype). I have also redesigned the pages to be more semantic, and to separate content and style perfectly, where possible (and most often it is possible). In addition, I have added quite a lot of visual improvements using CSS, particularly using :before and :after, which will be visible in any modern browser, even including IE8+. When it comes to text-level semantics, I strictly follow the new HTML5 rules:

In addition, I try to use the description list (<dl>) every time I need to mark up any kind of name–value pairs (in a broad sense), including definition lists, metadata name–value pairs, and FAQs. However, for practical purposes, it would be good if the <di> tag from XHTML 2 was reinstalled (see my comment at html5doctor.com).

I would also like to replace <div id="header"> with <header>, and similarly for the other new semantic div-like elements. I believe this will fail in Internet Explorer 5.0 (even with the JavaScript trick), a browser that today is perfectly able to render my sites in a primitive but readable fashion. Hence, by using the new HTML5 semantic elements, I will raise the Internet Explorer minimum support level from 5.0 to 5.5, which I guess is acceptable, since Internet Explorer 5.5 can also be installed on Windows 95, an operating system I want to support. I would also like to replace the current navbar by a completely semantic one that perfectly separates content and style. I could do it like this, but this again would make the page harder to render for old IEs.

While improving my websites, I carefully monitor the rendering in old browsers. I have virtual machines running Windows 95, Windows XP, Windows Vista, and Windows 7, and the following versions of Internet Explorer:

In a few days, I will publish a small article giving all the details of the rendering of my sites in old versions of Internet Explorer.


Show all news items.

Only show the most recent news items.