Progressive Enhancement

Broad version: start with a baseline of functionality, enhance upwards based on capabilities.

Narrow version: start with HTML, then add CSS, then add JavaScript.

Basupplevelse för så många som möjligt

Omöjligt att inkludera alla: opinionated

Ett förhållningssätt, en metod för att arbeta.

"Vi har använt Progressive Enhancement" går inte att säga

Om vi fortsätter att skapa webbsidor som inkluderar typ IE6 låter vi denna skitwebbläsare leva kvar

Konkret kopplat till betygskriteriet VG

• På egen hand kunskap i att implementera Progressive Enhancement.
• God förståelse att anpassa en HTML- och CSS-mall att fungera väl i olika enheter (Responsive web).

Ska fungera i de flesta nyare browsers

Validering

https://validator.w3.org/

Fixa stora errors, utvärdera om ni behöver fixa warnings

Cross Browser & Cross Device

Cross Device

Tänk på hur vi lägger upp vårt innehåll

Tänk på vilket innehåll som är viktigast

@media queries

Mobile first

Ursprungsläget är mobilen

(min-width: 40em)

Maxa alla bredd!

@media

@media (min-width: 40em){
  .container {
    width: 70%;
  }
}

Cross Browser

Vendor prefixes

beta-implementationen av en viss egenskap

• -webkit-: Google & Apple
• -moz-: Mozilla Firefox
• -o-: Opera
• -ms-: Micorosoft

Vendor prefixes

Används sällan av nyare browsers

Men det finns knappt någon nackdel med att använda det

Order!

Ordningen som prefixen kommer i är viktig

W3C Spec sist

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;

Ska man skriva alla?

Exemplet transition

  -webkit-transition: all 1s ease;
  transition: all 1s ease;

Autoprefixer

Lägger automatiskt till prefixes på de egenskaper som behövs

Använder can i use-databaser

Autoprefixer

@supports

feature detection

@supports (display: flex) {
  .box{
    display: flex;
  }

Vi kollar egenskap och värde

@supports not(display: flex) {
  .box{
    display: block;
  }

Källor

Den heliga skriften

caniuse.com

Should I Prefix

HTML5 Please

Specifika lösningar

Prefix löser långt från allt

Lösa t.ex. flex-specifika buggar: Flexbugs