Tout est dans le titre (via http://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-15 )
L'auteur déconseille fortement d'utiliser la propriété CSS will-change, car celle-ci pourrait aussi changer le contexte d'empilement ou créer des blocs conteneurs par elle même...
Cette propriété permet d'indiquer au navigateur que tel élément est susceptible de "changer" sous peu. C'est très utile pour améliorer le rendu des animations mais l'auteur insiste, avec raison, sur la nécessité de l'utiliser avec parcimonie.
Une technique de Sprite intéressante... actuellement supportée seulement par Chrome mais j'espère que les autres navigateurs l'implémenteront
Tout est dans le titre, et c'est bluffant ! (via inpixelwetrust)
La ligne magique : img { object-fit: cover; } (via Maxlab via le Warrior du dimanche)
Plein de bonnes idées :
- du parallaxe avec plein de maths :-) en CSS
- un menu responsive uniquement en CSS
- un scroll animé en CSS
- des optimisations d'images, sprites, etc.
Tout est dans le titre, et c'est vraiment très sympa (belle démonstration des possibilités CSS3)
Tout est dans le titre (via inpixelwetrust)
Les media queries pour cibler les différentes versions de l'iPhone... c'est vraiment pénible qu'Apple considère que la barre d'URL et la barre de navigation font partie du viewport. Impossible d'utiliser une règle comme body { min-height: 100vh; } sans casser quelque chose... alors que ça marche parfaitement avec un Samsung Galaxy S3 par exemple :/
Au menu : media queries et em, flexbox (avec des pistes pour les navigateurs ne la supportant pas tout ou partie), transition, et une propriété CSS sur le scroll
Une démonstration impressionnante de l'utilisation des sélecteurs :nth-child et dérivés... La galerie de photo est juste bluffante
Un tuto impressionnant : créer une grille responsive avec le minimum de classes CSS...
Présentation des avantages / inconvénients des animations via les transitions CSS3, animations CSS3, jQuery, et Velocity (via inpixelwetrust)
Tout est dans le titre (via inpixelwetrust)
Tout est dans le titre
Des exemples pratiques d'utilisation de Flexbox :
- grilles
- medias
- formulaires
- pieds de page qui restent en bas de page si pas assez de contenu et qui se décalent automatiquement sinon
- le "holy grail"
- centrage vertical
Une introduction à Flexbox
En résumé, l'auteur explique que pour faire des animations "simples", CSS3 peut suffire, mais passé un certain stade de complexité, mieux vaut JavaScript (et éviter jQuery pour faire ça)