Det finns mycket härliga och efterlängtade funktioner i HTML5 och CSS3, men även om stödet i de flesta moderna webbläsarna är stort så är det långt ifrån hundraprocentigt. Dessutom vill du troligtvis att sajten ska se ok ut även i något äldre webbläsare.
I många fall räcker det att vara medveten om hur sajten ser ut i en äldre webbläsare (det kanske inte är hela världen om knapparna inte har runda hörn för vissa besökare).
För att du snabbt och enkelt ska se vilka webbläsare som har stöd för vad finns det några riktigt bra webbtjänster:
- When Can I use… har kompabilitetstabeller för CSS, HTML, SVG med mera, även för mobila webbläsare.
- HTML5 Please hjälper dig även att implementera alternativ och reservlösningar för de webbläsare som ej har stöd.
Vilka delar av HTML5 och CSS3 vågar du använda när du designar sajter, dela gärna med dig i kommentarerna?
Modernizr is your friend.
Allt utom flexbox (aka Flexible Box Model). Stöds det inte i browsern får användaren ifråga se en kantigare/oskuggad/o-roterad version av sidan.
Graceful degradation är faktiskt inte så klurigt så länge man har det i åtanke från början. De flesta CSS-properties behöver du inte ens tänka på om de funkar; antingen så gör de det, eller så gör de inte. I vissa fall krävs det att man gör en separat style-klausul för browsers utan stöd för den specifika funktionen, men med Modernizr är det inte svårare än
/* targeta funktionen i CSS-filen */
.no-boxshadow{
/* funktionen-stöds-inte-style här */
border: 1px solid #333333;
}
De (många) attribut som numera finns på blir automatiskt ett textfält om browsern inte stöder just den funktionen. Ett bra tips är att (som vanligt) ha en liten notis om vilket format datat borde ha;
Glöm inte att du måste fylla i fältet med ÅÅÅÅ-MM-DD
(Jag har medvetet lagt in mellanrum i taggarna eftersom jag inte vet hur kommentaren kommer att visas på Loopias blogg.)
Skönt att se att IE klarar sig så bra…