Het probleem

Je kent het wel, je hebt een mooi ontwerp gemaakt voor een website maar bij de bouw ervan loop je tegen van alles aan. Zo liep ik een aantal dagen geleden aan tegen het feit dat je een H1 die over meerdere regels loopt geen mooie padding + achtergrond kan geven. Dan zal er een lelijk vierkant blok ontstaan.

Het idee was om rondom de tekst van de H1 een achtergrond te zetten met links en rechts 10px padding met een witruimte tussen eventueel meerdere regels. Zoals gezegd kan je hier niet af met alleen een H1.

De oplossing

Ik wist al snel dat ik jQuery moest gebruiken om het dynamisch te houden aangezien het in een CMS gebouwd gaat worden. Nu was de oplossing vrij simpel bedacht, alleen de uitvoering was wat lastiger; alle woorden in de H1 wrappen met een span en hieraan de achtergrondkleur + de padding + de witruimte aan de onderkant mee te geven.

Uiteindelijk kwam ik met de volgende oplossing:

http://jsfiddle.net/AAyNq/

Werking

De plugin is in principe een gewone FAQ met daaraan een leuke feature. De FAQ (zoals de naam al zegt) heeft een accordeon effect. Dit wil zeggen dat als je op een vraag klikt het antwoord naar onderen schuift.

De plugin is voorzien van een WYSIWYG editor. Op deze manier kun je alles wat je maar wenst in je antwoord zetten. Je kunt deze zelfs verduidelijken door links, plaatjes of zelfs video’s toe te voegen.

Installatie

1. Upload the files to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Place in your templates
4. You can allso use the shortcode [odd_faq] within WordPress to call the FAQ

Download

Je kunt de plugin downloaden op:

http://wordpress.org/extend/plugins/faq-accordion/installation/

Vragen en of suggesties voor de plugin kun je hier kwijt op de blog.

Layout en prestaties

De layout van IE10 zal nagenoeg hetzelfde zijn als die van IE9, er zal meer gefocust worden op het beter ondersteunen van HTML5, CSS3 en de snelheid van de browser. Microsoft heeft in een test aangetoond dat de huidige preview versie van IE10 sneller is dan Chrome op een Windows machine.

Voorheen heeft Microsoft vooral gebruik gemaakt van de processorinstructieset x86 van Intel, dit zal gaan veranderen. De nieuwe versie van Internet Explorer zal gebruik gaan maken van ARM, er is tevens aangekondigd dat Windows 8 gebruik zal gaan maken van ARM-processors.

Het eerste wat me opviel aan IE10 is dat er ondersteuning is ingebouwd voor multiple-columns. Dit is een CSS3 functie die erg handig is.

Updates

Chrome en Firefox hebben al aangegeven dat ze continu updates zullen gaan doorvoeren in plaats van grote updates. Microsoft zegt hier niet aan mee te werken, maar ze komen toch wel verdacht snel met een preview versie van IE10. Zullen ze dan toch meegaan met de snellere updates? Ik hoop het, dit zal namelijk betekenen dat alles wat ze ontwikkelen vrijwel direct gepubliceerd zal worden.

Als ze dan nog net als Chrome of Firefox de updates gewoon verplicht uitvoeren zal uiteindelijk iedereen met een fatsoenlijk browser werken.

Download

De preview versie van IE10 is nu al te downloaden.

HTML5 laten herkennen

Om de oudere versies van Internet Explorer de nieuwe elementen van HTML5 te laten herkennen zul je een stukje JavaScript moeten aanroepen. Het volgende moet je in de HEAD sectie van je bestand plaatsen:

Source code

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Nu zullen de oudere versies van Internet Explorer de nieuwe HTML5 elementen herkennen, maar dat is nog niet alles.

HTML5 CSS styling

Om ook de elementen de stijl te laten overnemen van de CSS in Internet Explorer zal je aan alle HTML5 elementen een stukje CSS moeten toevoegen. Dit komt omdat Internet Explorer elementen die hij niet kent standaard display:inline; meegeeft terwijl het een block element moet worden. Het volgende dien je in je CSS toe te voegen:

Source code

article, aside, figure, footer, header, hgroup,
menu, nav, section { display:block; }

Andere oude browsers en andere HTML5 elementen

Oudere versies van andere browsers zullen deze elementen wel zien en dus ook gewoon netjes renderen. Het is gewoon weer Internet Explorer die het weer niet voor elkaar heeft. Verder zijn er uiteraard nog de nieuwe Form elementen en de MultiMedia elementen in HTML5. De nieuwe Form elementen in HTML5 zullen door alle browsers gerenderd worden als text elementen. Dus dat gaat gewoon goed.

De Video en Audio elementen van HTML5 zijn zo ontwikkeld dat ze een fallback toelaten naar Flash, dus dit zal in alle gevallen netjes gaan, ook in IE.

CSS3 ondersteuning

Het ergste is dat de CSS3 ondersteuning gewoon niet optimaal is. Er zijn een aantal belangrijke zaken die niet werken in IE9. Waaronder border-image en text-shadow, hier vind je een complete lijst van ondersteunde CSS3 properties.

Ik vind dat we van een nieuwe browser toch mogen verwachten dat het de nieuwste technieken ondersteund, zo niet dan in elk geval de meest gebruikte en meest handige. Daarin faalt Microsoft weer eens. Microsoft heeft met haar browsers altijd achter de feiten aangelopen en zal dit denk ik ook nog wel een tijdje doen.

Hoe dan wel

Zoals jullie weten ondersteunen IE7 en IE8 ook geen CSS3, maar met CSS3PIE kun je toch een aantal belangrijke en handige properties toch laten werken. Maar nou wil het feit dus dat IE9 gewoonweg CSS3PIE niet ondersteund. Wat nu denk je?

Daar heb ik dus een oplossing voor gevonden, namelijk de Emulate functie van Internet Explorer. Zoals je ook IE8 als IE7 kon laten draaien kun je nu ook IE9 als IE8 laten draaien. Het is niet netjes, maar dan moet Microsoft maar niet zo achter de feiten aan lopen.

De code werkt als volgt:

Source code

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; charset=utf-8" />

Deze code moet in de direct na de <head> aangeroepen worden anders zal deze alsnog niet werken.

Internet Explorer 9 Update?

Ik hoop dat er heel snel een update zal komen voor Internet Explorer 9 die bij iedereen verplicht doorgevoerd zal worden die CSS3 wel compleet mogelijk maakt. Maar tot die tijd faalt Microsoft weer eens gigantisch heel jammer hoor…

Vandaag plaats ga ik het hebben over de DOCTYPE en de HTML tag.

HTML5 Doctype

In de vorige versie van HTML (HTML4) was de DOCTYPE één lange zien die je nooit zelf kon onthouden. Ook waren er verschillende DOCTYPES die je kon gebruiken. De oude zag er als volgt uit:

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Alhoewel je bovenstaande DOCTYPE gewoon kunt blijven gebruiken heeft HTML5 een nieuwe DOCTYPE namelijk:

Source code

<!DOCTYPE html>

Hoe gemakkelijk is dat, eindelijk een DOCTYPE die je wèl kunt onthouden.

HTML

Eerder moest je als je alles goed instellen qua taal etc in je HTML tag. Dit zag er bijvoorbeeld uit als volgt:

Source code

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

De xmlns kunnen we in HTML5 achterwege laten aangezien dit slechts aangeeft dat de elementen in de pagina in de XHTML namespace zijn geshreven. Maar aangezien HTML5 dit altijd heeft, kun je dit dus achterwege laten.

Dan zitten we nog met de dubbele taal attributen, wat een onzin. Twee dingen die hetzelfde aangeven. Wedereom is een van de 2 slechts voor XHTML, maar slechts de ‘lang’ attribuut heeft effect op HTML5. Vandaar dat we dit ook kunnen weglaten.

Je kunt ze eventueel nog wel beide gebruiken, maar zorg er dan wel voor dat de twee talen hetzelfde zijn om problemen te voorkomen.

Wederom een erg lange code voor relatief iets kleins, wederom is het met HTML5 zo gefixed en is het ook geen probleem om te onthouden:

Source code

<html lang="en">