CSS3 en browserverschillen oplossen met prefix

uit de cursus Vormgeven met CSS

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

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.

In deze video leg ik de verschillen uit tussen de meest gebruikte huidige browsers,

en hoe e toch gebruik kunt maken van de nieuwe technieken voor oudere browsers.

Browsers zijn software programma's die de broncode van webpagina's vertalen naar een weergave op het scherm.

Onder broncode verstaan we dan html, de css, afbeeldingen etcetera.

De engine van de browser is belangrijk bij de vertaling van de broncode.

Safari en Chrome zijn beide gebaseerd op de engine 'webkit'.

En de overige browsers maken gebruik van een eigen engine.

Dit verklaart waarom webpagina's op verschillende browsers er verschillend uit kunnen zien.

Browsers worden door verschillende bedrijven ontwikkeld.

En sommigen zijn volledig in beheer van de ontwikkelaar. Dit noemen we zogeheten 'Closed-Source'.

Dit is bijvoorbeeld het geval bij Internet Explorer en Opera.

Je hebt ook 'Open-Source' webbrowsers zoals Firefox, Safari en Chrome.

Hieraan werken meerdere partijen. Zoals je bijvoorbeeld ziet bij Webkit.

Waar behoorlijk grote namen als Google, Apple en Adobe verantwoordelijk zijn voor de ontwikkeling ervan.

Bijna alle browsers worden geschreven voor de meest gebruikte operating systemen.

Als Microsoft, Linux en Apple.

Behalve Internet Explorer. Deze kan alleen geïnstalleerd worden op Microsoft Computers.

Als webontwerper is het natuurlijk wel handig om dan ook beschikking te hebben over een windows-machine.

Zodat je de webpagina's kunt testen en bekijken.

Het is logisch dat oudere browsers bepaalde css-eigenschappen niet kunnen uitvoeren.

Simpelweg omdat deze nog niet bestonden toen de browser uitkwamen.

Om bezoekers met een oudere browser toch de toepassing van nieuwe technieken en ontwikkelingen te kunnen laten tonen.

Moet je een speciale prefix schrijven voor deze css-eigenschappen.

Deze prefix is voor elke browser apart.

Dit resulteert er dan ook in dat je per browser, dezelfde stijlregel, nog een keer moet schrijven. Met de juiste prefix ervoor.

En dit ziet er bijvoorbeeld als volgt uit.

Zoals je ziet staan hier niet alleen prefixes voor alle browsers.

Maar ook nog voor browser-versies. Zo zijn er twee prefixes geschreven voor webkit.

Eén voor de browser-versie vanaf Chrome en alle hoger dan Safari-.

En dit wordt aangegeven met een +. Safari+

En nogmaals een aparte stijlopdracht voor browsers vanaf en hoger dan Chrome en Safari..

Helemaal onderaan staat de stijlregel voor alle Internet Explorer browsers tussen de versies en .

En dit wordt aangegeven door de getallen te scheiden met een min-teken.

Dan heb je natuurlijk ook nog oudere browsers waar helemaal geen prefix meer voor geschreven kan worden.

Deze stijlopdracht staat helemaal bovenaan. Die wordt dan als eerste ingelezen.

Een oudere browser zal de daarop volgende stijlopdrachten toch niet begrijpen.

En dus deze eerste uitvoeren. En in dit geval een effen achtergrondkleur tonen.

Nieuwere browsers begrijpen de later geschreven stijlen wel en voeren deze dus uit.

Het is belangrijk dat je weet dat je deze prefixes moet schrijven. Als je gebruik maakt van nieuwe css technieken.

Maar gelukkig zijn er online een heleboel zogeheten css-generators te vinden.

En die doen dit voor jou. In de komende video's maken we veel gebruik van deze online generators.