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

Microsoft experiences'16

Vincent De Oliveira · @iamvdo

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.

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) { … }

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) { … }

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;
}

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
}

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;
}

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 }

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

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

So…

• Standard : Web Animations API
• Pour les cas simples :
  • Animateplus
  • Anime.js
• Pour les cas complexes :
  • Greensock (GSAP)
• Outils design graphique :
  • Adobe After Effects, AnimateCC, etc.

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,
});

Animateplus

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

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

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

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

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 = transform, opacity

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

Benchmarkez

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

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

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

Pour aller plus loin : icon-font vs. SVG

SVG

http://slides.iamvdo.me/kiwiparty16

@iamvdo
slides.iamvdo.me/experiences16