CSS, c’est pas de la science-fiction !

Microsoft experiences'16

Vincent De Oliveira · @iamvdo

Hello, c’est @iamvdo

Amélioration progressive

Progressive enhancement

Compatibilité minimale

  • Se mettre dans la pire situation
  • Penser à la majorité des cas
  • Device utilisé, rendu navigateur, support CSS/JS, accessibilité, rapidité réseau, etc.

Enrichi ensuite

  • Effets visuels avancés
  • Chargement asynchrone (JS, images, contenus, etc.)
  • Stratégie offline, cache
  • etc.

Quelles solutions ?

Back to basics

CSS

  • Ne rien faire / fallback CSS
.el {
  /* ne rien faire */
  backdrop-filter: blur(5px)
}
.el {
  /* fallback */
  display: flex;
  display: hologram;
}

CSS

  • La règle @supports
  • Feature Queries
@supports (backdrop-filter: blur(5px)) {
  .el {
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
  }
}
@supports (clip-path: circle()) { … }
@supports not (display: hologram) { … }

CSS can do this!

JavaScript

  • Feature detection aussi
  • Ne pas se fier au User-agent
// Vanilla JS
if (CSS.supports('backdrop-filter', 'blur(5px)')) { … }

JavaScript

  • Modernizr
  • Pas uniquement CSS : API JS, SVG, WebGL, etc.
  • Configurable
/* CSS */
.no-geolocation .box { … }
.geolocation .box { … }
// JavaScript
if (Modernizr.geolocation) { … }

@supports/CSS.supports

Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

Layout CSS

C’est compliqué !

Mais ça c’était avant !

Flexbox FTW

  • Affichage en bloc ou en ligne
  • Flexibilité des boites
  • Réorganisation des éléments
  • Alignements verticaux et horizontaux
  • Responsive design facilité

Flexbox FTW

.el {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: gray;
}
.item {
  flex: 0 1 auto;
  width: 100px;
  height: 50px;
}
//
.item:nth-child(2) {
  order: 1;
  background: deeppink;
}
1
2
3
4
5

Flexbox : sticky footer

Flexbox : sticky footer

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.Site-content {
  flex: 1;
}

vw, vh : relatif au viewport, % : relatif au containing block

Flexbox : formulaires

Flexbox : formulaires

.Field {
  display: flex
}
.Field input {
  flex: 1
}
.Field label {
  width: 100px
}

Flexbox : centrage vertical

Flexbox : centrage vertical

.Site {
  display: flex
}
.Box {
  margin: auto
}
.Site {
  display: flex;
  justify-content: center;
  align-items: center
}

Flexbox

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Flexibility (Polyfill IE9-)

Mieux que Flexbox ?

Grid Layout

Grid Layout

  • Layout de colonnes/lignes (virtuelles)
  • Positionnement «anarchique» des éléments
  • Alignements verticaux et horizontaux
  • Layout hyper simplifié
  • Relancé par IE10 (pour Windows 8)
  • Mais les specs ont changé

Grid

.el {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

.item:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  background: deeppink;
}
.item:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  background: greenyellow;
}
.item:nth-child(4) {
  grid-column: 1 / span 2;
  grid-row: 3;
}
1
2
3
4

Grid: «ASCII» layout

Idée de layout par Wes Bos

Grid: «ASCII» layout

.Site {
  display: grid;
  grid-template-columns: repeat(7);
  grid-template-rows: repeat(7);
  grid-template-areas:
    ". a . . . . ."
    "g a f f f f ."
    "g a f f f f ."
    "g d d e e e e"
    "g d d b b c ."
    "h d d b b c ."
    ". d d . . c .";
}
.item1 { grid-area: a }
.item2 { grid-area: b }
.item3 { grid-area: c }
.item4 { grid-area: d }
.item5 { grid-area: e }
.item6 { grid-area: f }
.item7 { grid-area: g }
.item8 { grid-area: h }

Grid

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Firefox et Chrome/Opera : supporté par un flag

Ça va arriver très vite !

Animations

Transitions / Animations

  • Transition : Animer une propriété d'une valeur A à une valeur B
  • Animation : Animer plusieurs états
  • Méthodes d’interpolation
    • Simples : linear, ease, ease-in, ease-out, ease-in-out
    • Avancé : cubic-bezier()

.transition {
  transition: margin-left 2s;
}
.transition-parent:hover .transition {
  margin-left: 150px;
}
.animation-parent:hover .animation {
  animation: demo-anim 2s infinite alternate;
}
@keyframes demo-anim {
  0% {
    margin-left: 0;
    background: deeppink;
  }
  100% {
    margin-left: 150px;
    background: deepskyblue;
  }
}

Dans la vraie vie

  • Les inconvénients :
    • Méthodes d’accélération limitées
    • Keyframes (animations) en % = synchro pas évidente
    • Déclenchements limités
  • Ce que l’on voudrait :
    • Méthodes d’accélération complexes (rebonds, elastiques, etc.)
    • Synchronisation précise
    • Déclenchements avancés

La solution : JavaScript !

Objectif : des animations JS aussi performantes que des animations CSS

requestAnimationFrame

requestAnimationFrame

  • Regroupe les animations en début de frame
  • Juste avant le rafraichissement de l’écran
function animate() {
  // Animations !
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
  • Les animations inactives (autres onglets, masquées, etc.) sont stoppées

La plupart des librairies d’animations JS utilisent requestAnimationFrame

So…

Web Animations API

var elem = document.querySelector('div');
elem.animate({
    opacity: [0.5, 1],
    transform: ['scale(0.5)', 'scale(1)'],
}, {
    direction: 'alternate',
    duration: 500,
    iterations: Infinity,
});
Hello

Web Animations API

Can I Use web-animation? Data on support for the web-animation feature across the major browsers from caniuse.com.

Polyfill

Animateplus

animate({
  el: "div",
  translateY: 100,
  scale: 1.4,
  duration: 500,
  delay: 1000,
  easing: "easeOutElastic",
  loop: true,
  direction: "alternate",
  begin: () => {},
  complete: () => {}
});
Hello

Greensock (GSAP)

Mise en place propre

  • Pensez amélioration progressive !
  • Que se passe t’il si JS est désactivé ?
  • Ou si en cours de chargement/exécution ?
  • Si pas d’animations, l’état initial et l’état final doivent être «OK»

Mise en place raisonnée

  • Est-ce que l’animation est utile (nécessaire) ?
  • Apporte t’elle du sens à l’interface ?
  • Aide t’elle la compréhension de l’utilisateur ?
  • Ne pas surcharger inutilement

Bon

Moins bon

Transformations

Transformations

  • Transformation 2D
    • Rotation, translation, échelle, inclinaison, matrice
  • Transformation 3D
    • Idem mais fonctions 3D
    • Notion de perspective

Transformations + Animations = Full Power!

.transform {
  transform: rotate(0deg);
  transition: transform 1s;
}

C’est pas juste un gadget

Hardware Accelerated

= bon pour les perfs d’affichage

Objectif : 60 FPS

Layout - Paint - Composite

  • Layout (reflow) : positionnement des éléments (display, flexbox, table, grid, margin, etc.)
  • Paint (repaint): styles visuels (background, border, color, box-shadow, etc.)
  • Composite : calque séparé, envoyé au GPU, traité, puis réappliqué dans la page

COMPOSITE FTW!

CSSTriggers.com

Composite = transform, opacity

  • top/left/right/bottom/margin
    • = translate()
  • width/height
    • = scale()
  • display/visibilité
    • = opacity
  • box-shadow
    • = opacity/transform
  • etc.

Benchmarkez

Et pas que votre super PC/Mac

Votre mobile aussi !

FLIP

  • Technique mise au point par @aerotwist
  • Utilisez au maximum les transformations CSS, et de manière optimale
  • Via JavaScript
    • Animations en JS : requestAnimationFrame
    • Animations en CSS : transition/animation
  • FLIP
    • First : récupérer état initial
    • Last : déplacer/récupérer état final (sans animation)
    • Invert : remettre en position initiale sans animation
    • Play : animer entre le départ et l’arrivée

FLIP

FlipJS

Icones

Ecran faible densité vs. écran haute densité

1px CSS != 1px écran

Icones vectorielles

Icon-font

  • Police de caractères
  • Rendu possible grâce à @font-face
@font-face {
  font-family: myIcons; src: url(myIcons.woff);
}
.element { font-family: myIcons; }

SVG

  • Format d'image vectoriel
  • C'est du XML
  • Utilisable en format image, ou intégré dans le HTML
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="yellow" />
  <rect width="50" height="50" x="50" y="50" fill="blue" />
</svg>

Icon-font vs. SVG

Icon-font SVG
Création
Intégration
Support
Fallback
Sprites

Pour aller plus loin : icon-font vs. SVG

Sprites

  • Technique héritée des jeux vidéos
  • C’est de l’amélioration progressive

Icon-font vs. SVG

Icon-font SVG
CSS, Positionnement
Interactions/animations
JavaScript
RWD
Accessibilité

Pour aller plus loin : icon-font vs. SVG

SVG everywhere!

SVG

http://slides.iamvdo.me/kiwiparty16

Remettez en cause tout ce que je viens de vous montrer

Soyez critique. Toujours. Tout le temps.

@iamvdo
slides.iamvdo.me/experiences16

@iamvdo
http://slides.iamvdo.me/experiences16