Browserlandschap

@Work 1

Welke browsers zijn er?

Het browserlandschap

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Wat nog? 😱

Hoeveel verschillende browsers moet je minimaal tellen om aan 98% te geraken van globaal gebruik?

Hoeveel browsers zijn er?

17 verschillende!

 

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Veel verschillende browsers 😱
  3. Wat nog? 😱  

Hoeveel verschillende versies zijn er in gebruik van een browser?

Welke browsers zijn er?

Er zijn ontelbaar veel versies momenteel in gebruik! 

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Veel verschillende browsers 😱
  3. Met elk nog veel verschillende versies 😱
  4. Wat nog? 😱

Verborgen browsers

Er zijn heel veel applicaties die met browsertechnologie gebouwd zijn!

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Veel verschillende browsers 😱
  3. Met elk nog veel verschillende versies 😱
  4. En nog verschillende applicaties ook? 😱

Welke browsers zijn er

Het web is dus niet een statisch iets waar naar gekeken moet worden.

Het web wordt via een ecosysteem van browsers toegankelijk gemaakt.

Het is onze taak om rekening te houden in dit ecosysteem.

Welke browsers zijn er

Een eerste stap om in dit ecosysteem te kunnen werken is om eerst een kijkje te nemen onder de moterkap.

Layout-engines

Het browserlandschap

Layout-engines

Layout-engines zijn het mechanisme die web technologie interpreteren, niet de browser!

Browsers zijn hiervan de meest evidente toepassing van layout-engines.

Maar eigenlijk is een browser niets meer dan een omhulsel van de layout-engine

 

 

Layout-engines

Layout-engines

Layout-engines

Is het ook mogelijk om layout-engines te gaan gebruiken zonder browser?

Layout-engines

Layout-engines

Hoeveel verschillende layout-engines zijn er?

Layout-engines

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Veel verschillende browsers 😱
    => Slechts testen op 3 verschillende!     💪
  3. Met elk nog veel verschillende versies 😱
  4. En nog verschillende applicaties ook? 😱=> Slechts 3 layout engines! 💪

Waarom is dit relevant?

Merk je bij het testen op meerdere browsers, verschillen op tussen browsers?

 

Dan is de eerste vraag dat je je moet stellen bij welke categorie het hoort:

 - Niet-relevante browserverschillen

 - Relevante browserverschillen

Minder relevante browserverschillen

Het browserlandschap

Minder relevante browserverschillen

Bepaalde formulier-elementen gaan er anders gaan uitzien als je browsers met elkaar vergelijkt. (Native form elementen overzicht)

 

En dat is perfect ok!

Niet-relevante browserverschillen

Minder relevante browserverschillen

Een scrollbar zal er ook anders gaan uitzien op Firefox dan op Chrome.

 

En dat is perfect ok!

Minder relevante browserverschillen

Indien er budget voor is, dan kan je dit zeker gaan bekijken hoe exact je deze browserverschillen wilt uniform maken voor je website.

 

 

Minder relevante browserverschillen

De prioriteit blijft eerst de relevante browserverschillen gaan wegwerken en alle courante browsers te ondersteunen!

 

👎

Resetting browser defaults

Het browserlandschap

Resetting browser defaults

Sommige browserdefaults verschillen in hele kleine mate.

 

Deze kan je resetten door een CSS file te gaan toevoegen die al deze verschillen ongedaan maken.

Resetting browser defaults

Onze suggestie is momenteel A modern CSS Reset. Deze past momenteel het beste op jullie kennis.

 

 

Resetting browser defaults

  <head>
    ...
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    ...
  </head>

Resetting browser defaults

Resetting browser defaults heeft al een interessante geschiedenis.

 

Er is een hele selectie aan resetting CSS files daar tussen te kiezen waar je veel uit kunt leren!

Browsersupport

Het browserlandschap

Browsersupport

(Lees: Layout-engine-support)

Iedere nieuwe versie van een browser ondersteunt andere features binnen HTML, CSS en JS.

 

Bijvoorbeeld: het <footer> element werd voor de eerste keer geïmplementeerd op 25 mei 2010. (Reference)

Browsersupport

Maar die evolutie is nog volop aan de gang binnen de wereld van frontend.

 

CSS voorbeeldje: Neem nu bijvoorbeeld de :dir(ltr) CSS Pseudo class.

Die is super nieuw en kan je nog niet echt op bouwen.

Browsersupport

Browsersupport

De tekst hieronder zal enkel groen zijn voor mensen die Firefox gebruiken.

Browsersupport

Met andere woorden, er is een evoluerend landschap van browsers en een evoluerend landschap van HTML, CSS en JS specificaties. 



Browsersupport

Relevantie zelf opzoeken op CanIUse.com

 

 

 

Mik op minimaal 95% support of Bepaal welke browsers je niet langer meer ondersteund (IE, Opera MIni, oude versies van ...)

Ecosysteem van browsers

  1. Verschillende schermbreedtes 😱
    => Responsive design! 💪
  2. Veel verschillende browsers 😱
    => Slechts testen op 3 verschillende!     💪
  3. Met elk nog veel verschillende versies 😱
    => Support opzoeken op CanIuse!     💪
  4. En nog verschillende applicaties ook? 😱=> Slechts 3 layout engines! 💪

Vervolg?

Het browserlandschap

Vervolg?

Licht meer geavanceerd (maar geen verplichting om te volgen, als je liever aan je project werkt)

Beheersing over de huidige en toekomstige ecosysteem van browsers waarin je gaat werken.

 

Vervolg

De volgende 50 slides leggen uit hoe HTML, CSS en JS zullen veranderen in de komende 10 jaar, en hoe je hier nu mee om kan gaan.

 

Als je wilt volgen, blijf je in de call zitten.

Als je wilt werken aan je project, gelieve wel de call te verlaten.

Fouttolerantie

Het browserlandschap

Fouttolerantie

Fouttolerantie

Vergevingsgezindheid kan je interpreteren als het toelaten van fouten in code.

Wat zal een browser doen?

<p>Dit is mijn paragraaf</p>
<a>Dit is mijn link
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>
<p>Dit is mijn paragraaf</p>

Fouttolerantie

Het is onmogelijk om HTML te schrijven die niet gerenderd kan worden.

Wat zal een browser doen?

Dit is een eerste zin
<div
  Dit is een tweede zin
</div>
Dit is een derde zin

Fouttolerantie

Het is onmogelijk om HTML te schrijven die niet gerenderd kan worden.

Dit is een eerste zin
<div
  Dit is een tweede zin
</div>
Dit is een derde zin

Fouttolerantie

Fouttolerantie is eigenlijk gewoon een ander woord voor vergevingsgezindheid.

Wat je ook schrijft in HTML, een browser vergeeft zoveel mogelijk fouten en probeert tot een zo goed mogelijk resultaat te komen.

Wat zal een browser doen?

.my-class {
    margin: 1rem
    position: absolute;
    display: block;
}

Fouttolerantie

CSS is ook heel vergevingsgezind, maar heeft zijn limieten.

Wat zal een browser doen?

.my-class {
  position: absolute;
  position: blue;
}

Fouttolerantie

Wanneer een property value niet bestaat, dan slaat de browser deze regel in CSS gewoon over.

Wat zal een browser doen?

constt abc = "test";
console.log("log");

Fouttolerantie

Error + verdere code wordt niet uitgevoerd!

JavaScript is helemaal niet vergevingsgezind

Conclusie

Wanneer je iets maakt, probeer dit altijd te maken in de taal met de meeste vergevingsgezindheid.

Eerst in HTML, dan pas CSS, dan pas JS.

 

Vergevingsgezindheid geeft ook de mogelijkheid tot Progressive enhancement!

Progressive enhancement

Het browserlandschap

Progressive enhancement

MDN: Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

Progressive enhancement

(nl) Progressive enhancement is een design filosofie waarbij je de essentie doet voor iedereen, en pracht oplevert voor gebruikers met modernere browsers.

Progressive enhancement

Voorbeeld: de ddpx resolution unit

 

Dit is een nieuwe unit in CSS waarmee je de schermresolutie waarmee de layout-engine kan werken op kunt filteren:

@media(min-resolution: 2dppx) {
  // Do something onlny for high density screens
}

Progressive enhancement

Voorbeeld: (ref: CanIUse)

 

Progressive enhancement

Progressive enhancement

Ik zal de ddpx-unit pas gebruiken wanneer bijna alle browsers dit zullen ondersteunen.

 

Ik gebruik de ddpx-unit, maar enkel de browsers die dit ondersteunen gaan mijn optimalisatie kunnen zien.

 

👎

👍

Progressive enhancement

Dit heeft als effect dat je altijd de laatst

uitgevonden CSS/HTML kan schrijven!

Een design die exact hetzelfde is cross-browser hoef je dus nooit te doen.

 

Een klant weet dit niet, het is jouw taak om hen hier in te onderwijzen.

Progressive enhancement

Als je met progressive enhancement voorlopig 2% van je gebruikers kan een nog betere ervaring geven: is dat al meer dan genoeg.

Progressive enhancement

Een klant contacteerde me 2 jaar nadat ik het project opgeleverd had:

 

Mathieu, heb je nog wat gesleuteld aan het design? Het ziet er plots super modern uit.

~ Klant die net nieuwe pc gekocht had...

Progressive enhancement

Sterk gekoppeld aan vergevingsgezindheid van HTML en CSS: Want zonder die vergevingsgezindheid kan je niet aan progressive rendering gaan doen.

 

Binnen JS lukt dit dus niet op deze manier. 

Progressive enhancement

Het omgekeerde van progressive enhancement is "Graceful degradation".

 

Dit is geen goeie practise, omdat dit enkel maar meer werk oplevert.

Hier ga je dus verouderde CSS schrijven, specifiek en enkel maar voor oudere browsers.

Gracefull Degradation

Gracefull degradation

Wanneer gebruik je dit?

 

Wanneer je aan een browsersupport wilt geraken van minimaal 95% voor CSS die essentieel is voor de integriteit van je design.

Gracefull degradation

Feature detection

Het browserlandschap

Feature detection

(2020) Er zijn wel limitaties aan de approach van Progressive Enhancement. Je kan dit enkel toepassen op niet-essentiële zaken.

Voorbeeld: the CSS "gap"-property:

.my-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
 }

Feature detection

.my-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.my-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
 }

Feature detection

Op safari zal dit er dus zo gaan uitzien:

.my-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Feature detection

Zo'n design is niet ok om te lanceren, en uit te leggen aan je klant: "In de toekomst gaat het er beter uitzien"

Feature detection

Kunnen we dan niet de nieuwste properties schrijven?

 

O, jawel!

Feature detection

@support () {...}

De CSS feature query! 

 

Feature detection

1. Schrijf de CSS die de beste ondersteuning krijgt cross-browser:

.my-container {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
  border: 1px solid pink;
}

.my-item {
  margin: 0 0.5rem 1rem;
}
<div class="my-container">
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
</div>
.my-container {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
  border: 1px solid pink;
}

.my-item {
  margin: 0 0.5rem 1rem;
}
<div class="my-container">
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
  <div class="my-item"></div>
</div>

2. Schrijf de cutting-edge CSS in een support media query.

.my-container {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
  border: 1px solid pink;
}
@supports (gap: 1rem) {
  .my-container {
    margin-left: 0;
    width: 100%;
    gap: 1rem;
  }
}


.my-item {
  margin: 0 0.5rem 1rem;
}
@supports (gap: 1rem) {
  .my-item {
    margin: 0;
  }
}

3. Wacht enkele jaren en versimpel je eigen CSS door een hoop regels te verwijderen indien je nog altijd op hetzelfde project werkt.

.my-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border: 1px solid pink;
}

Feature detection

Feature detection

Let op: De CSS feature query is ook relatief nieuw!

 

Feature detection

Impact: je kan de @support pas gebruiken wanneer de feature dat je wilt toepassen een slechtere ondersteuning heeft dan de @support query.

Feature detection

Ok, maar als de gap-property nieuw is, wat is er dan nog nieuw?

Feature detection

Maar weet dat dit principes ook bestaan binnen HTML:

 

 

<script>
  document.write("Hello World!")
</script>

<noscript>
  Your browser does not support JavaScript!
</noscript>

Feature detection

Ook binnen JS worden er regelmatig nieuwe methodes / features toegevoegd.
Bv. Array.map()


Oudere browsers kennen echter de map() methode niet op een array. Die zullen daarom een error geven.

 

Feature detection

We kunnen daarom in code eerst controleren of een feature bestaat

var numbers = [1, 2, 3]
if ("map" in numbers) {
  numbers.map((n) => n * 2);
} else {
  // map does not exist
}

Feature detection

Nog een voorbeeld:

navigator.geolocation om de gebruiker zijn/haar locatie op te vragen

 

if ("geolocation" in navigator) {
  // geolocation beschikbaar
  navigator.geolocation.getCurrentPosition(function(position) {
    // huidige locatie 
  });
} else {
  // browser ondersteunt geen geolocation
}

Feature detection

Doordat JS niet vergevingsgezind is, is dit heel belangrijk! Zonder de check zal geolocation undefined zijn => error

navigator.geolocation.getCurrentPosition(function(position) {
  
}
// error indien geolocation niet bestaat! (niet ondersteund is)

Feature detection

PS: dit is al een iets ouder voorbeeld...

New CSS Specifications

Het browserlandschap

Hoeveel dagen geleden werd de laatste CSS specificatie uitgevonden?

New CSS specifications

Geen idee eigenlijk, daarvoor moet je een kijkje nemen op www.w3.org/Style/CSS/current-work.en.html

New CSS specifications

Er wordt gigantisch goed doorgewerkt aan een hele hoop specificaties met een groot team experts die zowel uit de webcommunity komt als vanuit developers die in dienst zijn in de teams van Chrome, Firefox, etc...

New CSS specifications

Zij werken allemaal ideetjes uit, en ieder idee volgt het volgende proces:

New CSS specifications

Wanneer dit in recommendation is of soms eerder, kiezen browsers ervoor om dit te gaan implementeren in nieuwere versies.

 

Hoe? Stapjesgewijs proberen ze nieuwe specs uit

Browser-prefixes and flags

Het browserlandschap

Browser-prefixes

Binnen CSS is het ook goed mogelijk dat sommige browsers bepaalde features voorzichtig beschikbaar maken voor developers.

 

Zeg maar experimenteel releasen van features. (Meer info)

 

Browser-prefixes

Vroeger werd dit gedaan aan de hand van browser-prefixes

 

Bijvoorbeeld bij de transition property

(ref: CanIuse)

Browser-prefixes

Op die manier konden developers experimentele properties reeds uittesten op websites.

 

.my-container {
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -ms-transition: all 4s ease;
  -o-transition: all 4s ease;
  transition: all 4s ease; 
}

Flags

Het principe van browser-prefixes is echter aan het afzwakken, en browsers kiezen er nu vaker voor om met features behind flags te gaan werken.

 

 

Verantwoordelijkheid ligt nu bij webgebruikers ipv bij webdevelopers!

Flags

Het principe van browser-prefixes is echter aan het afzwakken, en browsers kiezen er nu vaker voor om met features behind flags te gaan werken.


Bv: Cascade Layers: CanIuse

Flags kan je in Chrome aan en uit zetten

Flags

Remember de :dir CSS pseudo selector?

Flags

Die kunnen we in Chrome gaan enablen met de flag! op de url: chrome://flags/

Polyfills en build tools

Het browserlandschap

Polyfills

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Polyfills

Stel: je wil een nieuwe JS feature gebruiken, maar deze is nog niet overal beschikbaar is.
Hiervoor kan je een polyfill gebruiken

 

Bv. String.includes()

Polyfills

Een polyfill is dus een stukje code dat de nieuwe feature nabootst gebruikmakend van methodes die wel ondersteund worden door oudere browsers.

Je kan dit stukje daarom toevoegen aan je code, waardoor het wel werkt in oudere browsers

Polyfills

Uiteraard bestaat er niet voor elke nieuwe feature een polyfill


Bv. navigator.geolocation kan je niet nabootsen indien de browser geen toegang/support heeft om een locatie op te halen

Polyfills

Enkele voorbeelden van features die werden/worden ge-polyfilled:

Build tools

Meestal zullen we deze polyfills echter niet (altijd) manueel toevoegen.

Wanneer je code zal schrijven in de toekomst zal je vaak gebruik maken van een build tool (bundler) zoals Webpack, Parcel, ...

Build tools

Een build tool zal oa. volgende zaken regelen:

  • Je code minifyen (alle spaties, ... weg)
  • Image optimization
  • Tree-shaking (zie later)
  • Code transpilen​
  • ...

Transpilen

Dit wil zeggen dat de build tool automatisch jouw code zal omvormen (in een aparte file) naar JS code die compatibel is met de laagst ingestelde vereiste qua browser.

Simpel voorbeeld: alle "let" naar "var" wijzigen

Even samenvatten

Het browserlandschap

Even samenvatten

Het mobile-first principe

Voor een ontelbaar aantal verschillende schermbreedtes

Even samenvatten

Layout engines

De motors van browsers en andere applicaties

Even samenvatten

Relevantie van browserverschillen

Niet alle browserverschillen moet je gaan oplossen, maar kan je wel.

Even samenvatten

Browsersupport

Welke browsers wens je te ondersteunen

Even samenvatten

Progressive enhancement

Dmv fouttolerantie kan je reeds pracht opleveren voor een klein gedeelte van de bezoekers voor niet-essentiele verbeteringen.

Even samenvatten

Gracefull degradation

Dmv fouttolerantie kan je ook oudere browsers meekrijgen om iets essentieels te ondersteunen voor je bezoekers.

Even samenvatten

Feature detection

Een principe om met code te bepalen met welke support de browser van de gebruiker heeft.

Even samenvatten

CSS specification recommentation

Wanneer de community iets aanbeveelt om te gaan gebruiken als webtechnologie.

Even samenvatten

Browser-prefixes

Een toepassing van progressive enhancement of gracefull degradation CSS schrijft dat browsers overheen hun cycli van implementatie van die CSS kunnen verstaan.

Even samenvatten

"Behind-a-flag" principe

Het principe waarbij ontwikkelaars van layout-engines de nieuwe CSS al geïmplementeerd hebben maar die nog aan het testen zijn vooraleer die standaard wordt ingeschakeld.

Even samenvatten

Sommige principes bestaan ook binnen JS:

  • Polyfills

 

Made with Slides.com