Word lid!

Activiteit: Bijeenkomst bij Namahn op 22 september 2011

Mathias heet iedereen welkom bij alweer de vijfde Fronteersbijeenkomst in Vlaanderen. Deze bijeenkomst werd gehouden bij Namahn in Brussel.

Lennart Schoors geeft de presentatie 'Look ma, no images'. over hoe je 'afbeeldingen' met CSS in plaats van afzonderlijke afbeeldingen kunt gebruiken. Het begon allemaal met het Opera logo in CSS. Kort daarna zag je allerlei indrukwekkende voorbeelden van CSS-afbeeldingen.

Waarom zou je dit doen? Voor de snelheid van het binnenhalen van de pagina. Tweede is onderhoudbaarheid, je hebt alles in een CSS bestand, waar je gemakkelijk een kleur kunt aanpassen. In het geval van gewone afbeeldingen moet je het aanpassen in Photoshop, nu gewoon in je CSS. Derde punt is dat je oneindig in kunt zoomen, in plaats van pixelated afbeeldingen als je inzoomt. Het gaat ook goed samen met adaptieve ontwerpen.

Hij vertelt verder over hoe je diverse vormen zoals cirkels en driehoeken kunt maken met CSS. Driehoeken kun je met zowel een border als een gradient achtergrond. Dat laatste is iets mooier als je niet-standaard-hoeken gebruikt.

Handig voor het toepassen van de stijlen zijn de :before en :after pseudo-elementen. Ook kun je de shadow-DOM gebruiken. Als je bijvoorbeeld de handle van een input[type="range"] aan wilt passen in kleur of vorm, dan is er een selector om die aan te passen (in dit geval ::-webkit-slider-thumb, er is nog geen voor niet-Webkit browsers).

Wat is de browserondersteuning voor de coole dingen? IE9 en hoger komen dicht in de buurt. Opera is ook soms een hardkoppige browser. SVG werkt wel op veel meer platformen.

Benjamin de Cock neemt het stokje over en vertelt over CSS Transities en Animaties. Browser support voor transitions is vrij goed, alleen Internet Explorer ondersteund het pas sinds versie 10. Alle browsers behalve Opera ondersteunen CSS Animaties.

De syntax voor transities is vrij simpel. Met transition: property tijd easing. Omdat de transities native zijn, zijn ze veel smoother dan JavaScript animaties.

CSS Animaties zijn vrij nieuw. Ze moeten een declaratief blok hebben met de keyframes. Omdat ze met alle vendor prefixes aangemaakt moeten worden, is je CSS bestand al snel heel erg groot. De beschikbare easingfuncties zijn onder andere ease, linear, ease-in/out/in-out en cubic-bezier om je eigen easing te maken. Zie ook generator door Lea Verou.

Aanwezigen

meetup