__
.
DNS4 
zoeken
  ⑬
«

CSS
CSS3

crossbrowser voorbeeld

Wat zou het leven makkelijk zijn (tenminste voor website bouwers) als alle browsers css3 al zouden ondersteunen. Tot CSS2 moest jij je in vele bochten wringen om een paar ronde hoekjes te maken of een gradient border om een box te zetten. CSS3 is er: dus waarom het niet gebruiken? De enige voorwaarde om dit te doen is er voor te zorgen dat als een browser niet verder komt dan css2, dat de bezoeker hier niets van merkt. De toverwoorden zijn hier: gelaagd bouwen. Er zijn twee manieren om dat te doen: "graceful degradation" en "progressive enhancement". De eerste probeert de boel te laten werken zonder dat de bezoeker in de problemen komt (als er geen javascript voorhanden is b.v.) en de tweede begint op een manier dat zelfs een "xt" uit de vorige eeuw nog iets op het scherm te zien krijgt, en schakelt op naar alle mogelijkheden die de browser hem toestaat. Duidelijk dat versie 2 hier de voorkeur geniet.. Samengevat: we maken de code op zo'n manier dat het in elke browser werkt, en als de browser "leuke trucjes" kent, maken we daar onmiddelijk gebruik van.

Als een browser geen css3 "kent" is deze tekst zichtbaar in een hoekig kader met een grijze achtergrond. Dit is de absolute basis. Niet mooi, wel functioneel... Als je deze pagina niet in
Opera of Chrome
bekijkt, mis je toch wel een griezelig mooi effect.. Maar ach.. de glimmende metalen rand (in een recente versie van FF) heeft toch ook wel wat! Mijn voorkeur gaat uit naar safari met z'n meervoudige achtergronden en "plastic" lettertjes. Een website- bouwer heeft alle browsers geinstalleerd om zijn werk te testen. Als jij een serieuze bouwer bent, kan je alles in elke browser bekijken. Geen hulp van mij met plaatjes van hoe het er allemaal uitziet. (gemeen ben ik, he?) ;-)

Ik denk dat het duidelijk is dat de validator van W3C volkomen op tilt gaat van de CSS die ik op deze pagina geplaatst heb. Maar ook daar is een oplossing voor. Zet de CSS gewoon tussen een stukje javascript en alles is dik in orde. De code is volkomen valide en de browsers hebben geen enkele moeite om al dit fraais in strict mode te parsen. Geef een <p> of een div het id: css3 en je hebt een css3 box op jouw web-pagina. En nu maar wachten tot dat de (alle) makers van de browsers de W3C standaard gaan respecteren...

De titel van deze pagina is: CSS3.
De sleutelwoorden zijn : css3, gelaagd en bouwen.
De omschrijving is: 'gelaagd bouwen met css3 : crossbrowser'.