CSS3 en browserverschillen oplossen met prefix

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.