The WHATWG Blog

Please leave your sense of logic at the door, thanks!

Archive for the ‘Elements’ Category

Styling HTML5 markup in IE without script

Saturday, January 17th, 2009

The previous post discussed how to enable styling of the new HTML5 elements in IE by using a simple script. However, if the user has scripting disabled, the layout would probably fall apart badly.

So that means if you care about IE users with scripting disabled, you can't use the new elements, right?

Not necessarily.

There are some tricks to work around the broken DOM and limited styling in IE:

  1. Know what the DOM looks like and target other elements than the new elements for styling.
  2. Use the universal selector (*) to target the right element.
  3. Use noscript.

What does this mean?

Target other elements for styling

Consider you have the following markup:

<body>
 <article>
  ...
 </article>
 <nav>
  <ul>
   ...
  </ul>
 </nav>
</body>

Instead of doing this:

* { margin:0; padding:0 }
body { background:silver }
article { border:solid; background:white; margin-left:10em }
nav { position:absolute; top:0; left:0; width:10em }

...do this:

* { margin:0; padding:0 }
html { background:silver }
body { border:solid; background:white; margin-left:10em }
ul { position:absolute; top:0; left:0; width:10em }

Now of course you're going to use other ul elements than the navigation, so how do we get more specific on which element to target? The obvious solution is to set a class or id on the ul element, but there's another solution which might be more convenient in some cases, which brings me to...

Using the universal selector

Depending on the situation, and whether you care about IE6 or not, you can use the universal selector to target the element you want.

Consider you have the following markup:

<body>
 <article>
  <header>
   <h1>...</h1>
   <p>...</p>
  </header>
  ...

...and you want to style the p that is in header, you would do this in the normal case:

article header p { font-weight:bold }

But in IE, the article, header, h1 and p elements are all siblings, so the selector wouldn't match.

So then one would expect this to match, but it doesn't (IE doesn't allow selecting unknown elements using type selectors):

article + header + h1 + p { font-weight:bold }

However, this matches:

body > * + * + h1 + p { font-weight:bold }

Using noscript

The above techniques shouldn't mess up other browsers (or IE when scripting is enabled), however if you prefer (or if something would screw up) you can use a separate style sheet for IE when scripting is disabled by just using the following markup:

<head>
 <!--[if IE]>
  <noscript><link rel="stylesheet" href="ie-noscript.css"></noscript>
 <![endif]-->
 ...

Conclusion

The above techniques might not be very scalable or might well impact maintanence, but the point of this article is to show that it is possible to use the new elements while still supporting IE with scripting disabled.

Posted in Browsers, DOM, Elements | 11 Comments »

Supporting New Elements in IE

Wednesday, January 7th, 2009

Internet Explorer poses a small challenge when it comes to making use of the new elements introduced in HTML5. Among others, these include elements like section, article, header and footer. The problem is that due to the way parsing works in IE, these elements are not recognised properly and result in an anomalous DOM representation.

To illustrate, consider this simple document fragment:

<body>
  <section>
    <p>This is an example</p>
  </section>
</body>

Strangely, IE 6, 7 and 8 all fail to parse the section element properly and the resulting DOM looks like this.

Notice how IE actually creates 2 empty elements. One named SECTION and the other named /SECTION. Yes, it really is parsing the end tag as a start tag for an unknown empty element.

There is a handy workaround available to address this problem, which was first revealed in a comment by Sjoerd Visscher. The basic concept is that by using document.createElement(tagName) to create each of the unknown elements, the parser in IE then recognises those elements and parses them in a more reasonable and useful way. e.g. By using the following script:

document.createElement("section");

The resulting DOM for the fragment given above looks like this:

This same technique works for all unknown elements in IE 6, 7 and 8. Note that there is a known bug that prevented this from working in IE 8 beta 2, but this has since been resolved in the latest non-public technical preview.

For convenience, Remy Sharp has written and published a simple script that provides this enhancement for all new elements in the current draft of HTML5, which you can download and use.

This script is not needed for other browsers. Opera 9, Firefox 3 and Safari 3 all parse unknown elements in a more reasonable way by default. Note, however, that Firefox 2 does suffer from some related problems, for which there is unfortunately no known solution; but it is hoped that given the faster upgrade cycle for users of Firefox, relatively speaking compared with IE, Firefox 2 won't pose too much of a problem in the future.

Posted in Browsers, DOM, Elements, Events, Syntax | 25 Comments »

Google Tech Talk: HTML5 demos

Friday, September 26th, 2008

I gave a talk at Google on Monday demonstrating the various features of HTML5 that are implemented in browsers today. The video is now on YouTube, so now you too can watch and laugh at my lame presentation skills!

The segments of this talk are as follows. Some of the demos are available online for you to play with and are linked to from the following list:

  1. Introduction
  2. <video> (00:35)
  3. postMessage() (05:40)
  4. localStorage (15:20)
  5. sessionStorage (21:00)
  6. Drag and Drop API (29:05)
  7. onhashchange (37:30)
  8. Form Controls (40:50)
  9. <canvas> (56:55)
  10. Validation (1:07:20)
  11. Questions and Answers (1:09:35)

If you're very interested in watching my typos, the high quality version of the video on the YouTube site is clear enough to see the text being typed. More details about the demos can be found on the corresponding demo page.

Posted in Browser API, Browsers, Conformance Checking, DOM, Elements, Events, Forms, Multimedia, Syntax, WHATWG | 7 Comments »

Reverse Ordered Lists

Wednesday, April 23rd, 2008

One of the newly introduced features in HTML 5 is the ability to mark up reverse ordered lists. These are the same as ordered lists, but instead of counting up from 1, they instead count down towards 1. This can be used, for example, to count down the top 10 movies, music, or LOLCats, or anything else you want to present as a countdown list.

In previous versions of HTML, the only way to achieve this was to place a value attribute on each li element, with successively decreasing values.

<h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

The problem with that approach is that manually specifying each value can be time consuming to write and maintain, and the value attribute was not allowed in the HTML 4.01 or XHTML 1.0 Strict DOCTYPEs (although HTML 5 fixes that problem and allows the value attribute)

The new markup is very simple: just add a reversed attribute to the ol element, and optionally provide a start value. If there’s no start value provided, the browser will count the number of list items, and count down from that number to 1.

<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

Since there are 5 list items in that list, the list will count down from 5 to 1.

The reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as: reversed="reversed".

The start attribute can be used to specify the starting number for the countdown, or the value attribute can be used on an li element. Subsequent list items will, by default, be numbered with the value of 1 less than the previous item.

The following example starts counting down from 100, but omits a few items from the middle of the list and resumes from 3.

<h3>Top 100 Logical Fallacies Used By Creationists</h3>
<ol reversed="reversed" start="100">
  <li>False Dichotomy</li>
  <li>Appeal to Ridicule</li>
  <li>Begging the Question (Circular Logic)</li>
  <!-- Items omitted here -->
  <li value="3">Strawman</li>
  <li>Bare Assertion Fallacy</li>
  <li>Argumentum ad Ignorantiam</li>
</ol>

Posted in Elements, Syntax | 26 Comments »

Dlaczego atrybut alt można pominąć

Sunday, January 13th, 2008

This is a Polish translation of this article: Why the Alt Attribute May Be Omitted.

Prace prowadzone ostatnio nad specyfikacją atrybutu alt mają na celu gruntowną poprawę jego definicji, m.in. dokładne wyjaśnienie sposobów tworzenia poprawnego tekstu zastępczego oraz jasne sprecyzowanie wymagań autorskie.

Wymagania te określają sytuacje, w których konieczne jest użycie tekstu zastępczego, zastosowanie pustego atrybutu alt oraz, co najbardziej zaskakujące, kiedy atrybut alt można całkowicie pominąć. Jest to kwestia kontrowersyjna, ponieważ na pierwszy rzut oka wygląda to na próbę zachęcania do złego i sprzecznego z zasadami dostępności zwyczaju pomijania atrybutu alt, co wydaje się być kolejnym policzkiem dla dostępności w sieci. Jest to niewłaściwe rozumowanie, które należy przeanalizować ze szczególną uwagą tak, aby rozwiać wszelkie wątpliwości, jakie mogą powstać. Choć taka sytuacja wydawać się może uwstecznieniem jest to w rzeczywistości bardzo pozytywny zabieg.

W wielu sytuacjach tekst zastępczy jest po prostu niedostępny i nic nie można na to poradzić. Przykładowo, większość użytków serwisów wymiany zdjęć takich jak Flickr nie miałoby pojęcia jak, ani dlaczego, należy dołączyć tekst zastępczy, nawet gdyby Flickr dawał im taką możliwość. Chociaż wszyscy są zgodni co do tego, że wspaniale byłoby gdyby wszyscy użytkownicy stosowali tekst zastępczy (specyfikacja wyraźnie to zaleca), to większość z nich po prostu tego nie zrobi.

Należy zastanowić się nad problemem co zrobić w sytuacji kiedy tekst alt jest niedostępny i nie ma tak naprawdę sposobu żeby go wstawić. Przy obecnych wymaganiach stosowania atrybutu alt w HTML4 zaobserwować można próby spełnienia tego wymagania przez systemy, które podejmują próbę utworzenia tekstu zastępczego w oparciu o metadane obrazu.

Flickr na przykład powtarza tytuł obrazu; Photobucket najwyraźniej łączy ze sobą nazwę pliku, jego tytuł i nazwę autora; z kolei Wikpedia niepotrzebnie powtarza podpis pod obrazem. Problemem wynikającym z takiego podejścia jest to, że stosowanie takich wartości nie dostarcza ani dodatkowych ani użytecznych informacji dotyczących obrazu, co w niektórych przypadkach jest gorsze niż całkowity brak tekstu zastępczego.

Korzyścią płynącą z wymogu opuszczenia atrybutu alt zamiast pozostawienia po prostu pustej wartości jest jasne rozróżnienie pomiędzy obrazem, który nie posiada tekstu zastępczego (jak np. reprezentacja otaczającego tekstu w postaci grafiki lub ikony) a obrazem będącym kluczowym elementem zawartości, dla którego tekst zastępczy nie jest dostępny. Podobno Lynx i Opera stosują już takie rozróżnienie. Przy obrazach bez atrybutu alt Lynx wyświetla nazwę pliku a Opera pokazuje napis "Obraz", jednak żadne z nich nie wyświetla niczego przy obrazach z pustym atrybutem alt. Wciąż niewiadomo do końca czy takie rozróżnienie jest naprawdę użyteczne oraz czy przeglądarki mogą realistycznie je stosować. Kwestia ta jest otwarta do dyskusji jeżeli tylko ktoś dysponuje argumentami.

Sugeruje się też, że zrezygnowanie z bezwarunkowej konieczności stosowania atrybutu alt wpłynie na zdolność walidatorów do powiadamiania autorów o błędach i odbierze nam narzędzie pomocne w promowaniu dostępności. Jednak wykorzystywanie komunikatów o błędach walidacji jako narzędzia oświatowego nie jest ani jedynym ani najlepszym rozwiązaniem problemu.

O ile autorzy lubią wiedzieć kiedy przypadkowo pominęli atrybut alt, to bezwarunkowe wymuszanie użycia tego atrybutu przy wykorzystaniu tak prymitywnego narzędzia jakim jest walidator daje dokładnie przeciwne wynik, ponieważ zachęca do korzystania z generowanych automatycznie tekstów kiepskiej jakości. Zresztą nic nie powstrzyma narzędzi autorskich i sprawdzających zgodność ze standardami przed powiadomieniem autorów jeśli będą sobie tego życzyć.

Przyznając, że nie da się zmusić każdego do stosowania tekstu zastępczego i czyniąc atrybut alt opcjonalnym w standardach dokumentu nie traci się żadnych praktycznych korzyści płynących z dostępności. Nikt nie twierdzi, że zgodność z HTML5 jest tym samym co zgodność ze wymogami dostępności. Wiele rzeczy uważa się za spełniające techniczne wymogi HTML, a jednak ich niewłaściwe stosowanie czyni je niedostępnymi. Uczynienie atrybutu alt opcjonalnym nie jest sprzeczne z wymogami dostępności ani nie ma wielkiego wpływu na ich propagowanie. Opisuję tu tylko rzeczywistość mając przy tym nadzieję na zmniejszenie powszechności automatycznie generowanego tekstu alt kiepskiej jakości.

Posted in Browsers, Elements, Processing Model | 1 Comment »