Browserondersteuning van CSS Controleren op Can I Use

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

Volgende video: Cheetsheet gebruiken

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.

Ik raad je aan om in eerste instantie de animaties en de css eigenschappen,

inde officiële schrijfwijze te schrijven.

Firefox kun je dan gebruiken als testbrowser.

Want deze ondersteunt al de meesten van deze officiële schrijfwijzes.

Maak dan gebruik van de website www.caniuse.com

Om te achterhalen welke css-eigenschappen wel of niet ondersteund worden door de browsers.

Of dat je hier nog een speciale prefix voor moet schrijven.

We maken in dit document gebruik van de 'transform'.

En de 'animation' eigenschappen.

Dit zijn allebij css-eigenschappen.

Alle overige eigenschappen die we gebruiken behoren nog tot de css versie.

En deze worden ondertussen door alle recente browsers ondersteund.

Dus kijk ik op de website 'caniuse.com' naar de ondersteuning van 'animation'.

Ik zoek deze op in de lijst van css. Dus ik ben op zoek naar 'animation'.

En die vind ik hier. En als ik daarop klik, dan krijg ik een lijst van veel gebruikte browsers.

En van elke browser ook meerdere versies.

Lichtgroen betekent dat de browser de eigenschappen ondersteunt.

Maar in het lichtgroen staat soms ook een prefix geschreven.

Dus ja, hij wordt ondersteunt, mits je deze prefix gebruikt.

Rood betekent dat deze niet ondersteund wordt.

Dus Internet Explorer & ondersteunt niet de 'animation'.

En ook Opera-mini niet.

De donkergroene kleur geeft aan dat deze browser gedeeltelijk de eigenschap ondersteunt.

Dit geldt dus voor de android-browsers.

Maar ook voor deze browsers moet je dan dus sowieso de prefix 'webkit' gebruiken.

Dan zoek ik nog naar de eigenschap 'transform' in de lijst van css en die vind ik hier.

En dan zie ik dat ook nu de meeste browsers deze alleen ondersteunen,

mits je de prefix 'webkit' gebruikt.

Alleen Firefox ondersteunt al wel de officiële css schrijfwijze.

Daarom werkte de animatie met de transform-eigenschappen al wel in Firefox.

De conclusie is dus dat we voor alle transform- en animation-eigenschappen...

een extra 'webkit' prefix moeten schrijven.

En als je de transform-eigenschap ook goed wil laten afspelen in IE.

Dan moet je hiervoor de -ms- prefix schrijven.

Opera-mini ondersteunt deze css-eigenschappen eigenlijk het minst.

Opera-mini is een gratis webbrowser die men op de meeste smartphones kan installeren.

Deze browser biedt een aantal voordelen ten opzichte van de andere browsers.

Zoals bijvoorbeeld de mogelijkheid tot rss-feeds.

Maar de belangrijkste reden waarom men deze browser installeert op hun smartphone.

Is dat de server van Opera websites die ontworpen zijn voor grote beeldschermen, verkleind en comprimeert.

Waardoor je veel sneller met een smartphone kunt surfen en ook minder data-verkeer gebruikt.

Jammer wel dat ze wat achterlopen bij de ondersteuning van nieuwe vormgevings mogelijkheden in css.