Verslag Thema-avond 4 december 2018

 
Nieuwe CSS3-features en Firefox CSS-editors.

htmlcssBenno Stulemeijer (Klipper) geeft een presentatie over ‘CSS- clip-path, shapes, variabelen, multiple columns layout. Variabele webfonts en de nieuwe Firefox developertools’. Deze presentatie (voorzien van diverse linkjes) is door Benno als PDF beschikbaar gesteld.

De ontwikkeling van CSS blijft steeds doorgaan, en de verschillende browsers zijn niet allemaal even ver met het ondersteunen van de nieuwe mogelijkheden. Via de website https://caniuse.com kun je zien welke mogelijkheden door welke browser worden ondersteund. Mocht je CSS-code gebruiken die niet (door een specifieke browser) wordt ondersteund, dan zal de betreffende code worden genegeerd.

Benno geeft een uitgebreide demo / uitleg bij het gebruik van de website caniuse.com. Op basis van deze informatie kun je besluiten of je specifieke CSS-opties gaat gebruiken.

Benno vervolgt de presentatie met een beknopte uitleg van het principe van Cascading binnen CSS (Cascading Style Sheet), en de hiërarchie (volgorde / voorrang) van de verschillende CSS-declaraties.

Met CSS-clip-path kun je een afbeelding met een afwijkende vorm opmaken. Benno laat een video zien met uitleg van clip-path, in combinatie met een tool voor het bepalen van de vorm voor de opmaak. Vervolgens kun je zorgen dat de tekst om de afwijkende vorm heenvloeit. Met clip-path bepaal je de vorm, en met shape-outside bepaal je hoe de tekst om de gemaakte vorm wordt getoond / geplaatst.

Door middel van Clippy (zie link in de presentatie) kun je de CSS-code ten behoeve van clip-path genereren. Dit kun je om te testen in de code-editor plaatsen (bij Firefox bij het betreffende element).

Sinds kort kun je binnen CSS ook variabelen gebruiken (bijvoorbeeld voor kleuren. Deze variabelen zet je aan het begin van het CSS-bestand

:root{
--body-bg-color: #fff;
--text-color: #575656;
}
body{
background: var(--body-bg-color);
color: var(--text-color);
}

Een andere nieuwe CSS-mogelijkheid is ‘Multiple Columns Layout’. Dit maakt het mogelijk om een meerkolomslayout te maken met CSS. De demo in de presentatie toont dat de layout eenvoudig wordt aangepast aan een smaller scherm (eenvoudige realisatie van responsiveness).

In verband met de tijd toont Benno in vogelvlucht de ‘Variabele webfonts’. Je hoeft nog maar één font te laden en kunt hier vervolgens verschillende effecten op toepassen.

firefoxBij het tonen van de verschillende mogelijkheden hebben we al enkele keren de Developertools van Firefox voorbij zien komen. Tegenwoordig is er een eenvoudige manier beschikbaar om de eigenschappen van het gebruikte font te wijzigen (vervolgens kun je de code kopiëren voor gebruik op je website).

Zoals aangegeven, is deze presentatie beschikbaar op onze website.

Relevante link(s):

https://caniuse.com

Al met al weer een interessante en leerzame avond!

Verslag door Frits Schippers

HCC-Joomla! Heerenveen