CSS – Prefixes schrijven

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Als ik de huidige productie controleer in Chrome.

Dan zie je dat de animatie en de transform niet wordt afgespeeld.

Bekijk ik deze ook in Safari.

En ook hier wordt deze niet afgespeeld. Bekijk ik deze in Opera.

Ook Opera speelt deze niet af en dat komt omdat deze allen de 'webkit' prefix nodig hebben.

Voordat we deze gaan schrijven ga ik eerst mijn bestand voorbereiden voor het schrijven van de prefixes.

Deze schrijfwijze is wel heel erg overzichtelijk, maar kost wel een heleboel regels.

In principe kan ik deze eigenschappen gewoon achter elkaar aan schrijven.

En alleen degenen waar ik zometeen de prefix voor moet schrijven.

Namelijk d transform-opdracht die laat ik op een aparte regel staan.

En ditzelfde doe ik ook voor de eigenschap 'to'.

Ook de eigenschappen van de keyframe-animatie heb ik achter elkaar aan geplaatst.

Voor het animeren van de afbeelding en de kop h.

Heb ik de aparte schrijfwijzes gebruikt, 'animation-name', animation-duration' etecetera.

Maar je kunt hier ook de shorthand-notation van maken en dat is in dit geval een stuk handiger.

Je moet dan wel zorgen dat je de juiste volgorde aanhoudt.

Daarom laat ik nog even een overzicht zien van alle animation eigenschappen en de juiste volgorde hiervan.

je begint met de 'name', dan de 'duration', de 'animation-timing-function', de 'delay', de 'iteration-count' en de 'direction'.

En dit alles met een spatie gescheiden achter elkaar.

Als één van deze eigenschappen niet gebruikt wordt dan voldoet het om deze simpelweg over te slaan.

Dus ik wijzig de eerste animation eigenschap, 'animation-name' in 'animation'. Dat is de shorthand-notation'.

Allereerst de naam 'bounce', de tijd, seconde.

En ik kopieer even de 'timing-function', die plak ik hier achter.

Dan 'infinte' en al laatste 'alternate'.

Dan kan ik vervolgens al deze aparte stijlregels verwijderen.

En heb ik nu alles samen gepakt in een shorthand-notation.

En dit zelfde doe ik ook voor de kop.

Ik maak een kopie van de animatie '@keyframes bounce'.

En die plak ik eronder. Het schrijven van de prefixes is als volgt.

In plaats van '@keyframes' typ je '@-webkit-keyframes'.

Vervolgens bekijk je binnen deze animatie of je ook gebruik maakt van een eigenschap,

die css is. En dat is in dit geval alleen de 'transform'.

Die hadden we opgezocht en hiervoor gold dat je ook een 'webkit' prefix moest schrijven.

Ik kan deze nu even kopiëren, dan kan ik hem wat makkelijker herhalen in mijn document.

Want ook bij 'to' wordt er een transform-opdracht gegeven.

Dus ook hier moet -webkit- voor komen te staan.

Vervolgens kopieer en plak ik de volgende animatie, genaamd 'change'.

Ook hier moet na het @-teken de prefix -webkit- komen te staan.

En ook hierin maak ik gebruik van de transform-eigenschappen.

Deze moeten allemaal de prefix -webkit- krijgen.

Nu zijn alle geschreven animaties voorzien van prefixes.

Maar bij het toepassen van de animatie, maken we gebruik van de css-eigenschap 'animation'.

En ook voor 'animation' gold dat de meeste browsers hiervoor de prefix -webkit- moesten hebben.

Het voldoet om deze hele regel nu te kopiëren, nogmaals te plakken.

En in plaats van 'animation' schrijf je '-webkit-animation'.

En dat zelfde doe ik ook voor deze toegepaste animatie. Daar moet ook een prefix voor geschreven worden.

-webkit-

Als ik deze pagina nu ga bekijken in bijvoorbeeld Safari, opera en Chrome.

Dan zouden deze animaties met de transform-eigenschappen gewoon moeten gaan werken.

En ik zie dat al wel de afbeelding geanimeerd wordt, maar niet de tekst.

En dat komt omdat ik hier vergeten ben om hier 'name' weg te halen.

Want dat is een aparte eigenschap en zonder deze wordt het een shorthand-notation.

Dus ik ga hem opnieuw bewaren.

En bekijk opnieuw het resultaat in de browser. En nu werkt ook de animatie op de tekst.

Dan controleer ik deze pagina nog een keer in Chrome.

En in Safari.

Met deze prefixes hebben we ervoor gezorgd dat deze pagina werkt in Opera, Chrome, Firefox en Safari.

Het schrijven van prefixes is hoe dan ook altijd extra werk

En vroeger was het zelfs een enorme klus.

Immers elke browser vroeg om een browser-specifieke prefix.

Voor Firefox, was dat -moz-.

Safari en Chrome werkten al samen met -webkit-.

Internet Explorer heeft een -ms- prefix. En Opera de -o- prefix.

Maar sinds begin accepteert Firefox, bijvoorbeeld ook de -webkit- prefix.

Spoedig volgde Opera hierin mee.

Dit betekent dat de grote browsers, op dit moment

voldoen met de -webkit- prefix.

Alleen Internet Explorer vraagt nog specifiek om een -ms- prefix.