Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

De bouw van deze site (1)

Door Peter  — / update

Met het uitkomen van de vierde editie van het Handboek HTML5 en CSS3 is ook een nieuwe site gelanceerd. Het is een eenvoudig ontwerp, maar toch is er alle ruimte om verschillende technieken te gebruiken. Vandaar dat deze site wordt gebruikt als praktisch voorbeeld van de technieken die in het boek worden besproken.

Vanuit de inhoud kijken we naar het structuren van de pagina’s met HTML en vanuit het ontwerp gaan we naar de opmaak met CSS. Het uitgangspunt is mobile first en van daaruit wordt doorgebouwd naar grotere weergaven. Het meeste kan worden gebouwd met alleen HTML en CSS, maar soms is wat JavaScript nodig. Het duidelijkste voorbeeld daarvan is het menu voor de codevoorbeelden. Dat is gebouwd met de HTML-elementen <details> en <summary> en op dit moment worden die nog niet door alle browsers ondersteund. Met een polyfill wordt dit opgevangen. (Een polyfil is een script dat het gedrag van HTML-elementen namaakt voor browsers waarin dat niet is ingebouwd. Bij <details> is dat Edge.) Voor diezelfde pagina is verder een klein script geschreven om het gekozen bestand te kunnen laden in het iframe; dat wordt in een volgend artikel toegelicht.

Aan onder meer het blogdeel wordt nog gewerkt, waardoor dat er nog niet goed uitziet. Maar het belangrijkste is klaar: de codevoorbeelden uit het boek zijn beschikbaar voor download en u kunt vragen en opmerkingen kwijt via de contactpagina.

Update 10 augustus 2017

Het menu voor de voorbeeldcode in het iframe, dat was gemaakt met <details> en <summary>, heb ik veranderd in een <select> met <options>. Zo neemt de lijst veel minder ruimte in en is het iframe ook te gebruiken op smartphones. Een ander voordeel is dat de polyfill voor <details> niet meer nodig is. Ook het script waarmee de gekozen optie wordt geladen in het iframe moest worden herschreven, maar dat zijn nog steeds maar een paar regels code.

Verder staat nu vanaf 1024px breedte de header rechtop aan de linkerkant, in plaats van liggend bovenaan.

Intussen begint het blogdeel ook ergens op te lijken en hoop ik binnenkort meer te kunnen schrijven over de site, in plaats van te sleutelen aan de site. Het enige probleem blijft (nog even) Edge, omdat die CSS Grid layout niet goed ondersteunt. Ik los dat op met flexbox. Dat is voorlopig opgelost met de oude implementatie in Edge en de prefix -ms-. (Later meer hierover.) In de najaarsupdate van Windows 10 zal het probleem zijn opgelost, omdat de nieuwe versie van Edge wel de goede CSS-gridspecificatie ondersteunt. Bent u aangemeld voor het Windows Insider-programma dan kunt u dit zelf testen. In mijn build 16257 werkt het als zonnetje.

Tags: html, css, algemeen


Reageer op dit artikel

* Vul a.u.b. alle velden in.