Le Hollandais Volant

Merci Daniel.

C’est grosso-modo ce que je disais ici, en plus complet.

La définition d'un style associé à un sélecteur peut être redéfinie ailleurs

Oui, c’est le principe d’une variable (un concept partagé dans tous les langages de prog également…).

C’est pour ça qu’on l’appelle CSS et pas SS.

La spécificité d'un sélecteur va définir la priorité d'application d'un style.

C’est pour ça qu’on l’appelle CSS et pas SS.
On peut le voir comme des variables privées, publiques, d’une certaine façon…

(etc.)

Pour la suite, je vois pas trop le problème non plus.

Si tu aimes pas le CSS, ben fait comme tu dis à la fin de l’article : utilise JS pour appliquer du style.
Perso je trouve ça idiot, mais ce n’est que mon avis et ça reste légal quand même (je pleure pour le pauvre navigateur, par contre).

CSS n’est pas parfait, il y a des combinaisons parfois difficiles à cerner (des floats dans des flex, avec des marges et des calc(), quelqu’un ?), mais il y a très peu de règles de base et une fois qu’on les maîtrise il n’y a pas de problèmes.
Mais pour ça, oui, il faut apprendre à s’en servir.

(qui a dit que le CSS c’était pour les n00bs et pas un vrai langage ?)

Interface parfaite… je ne sais pas (leur sélecteur de couleur me semble un peu inapproprié, presque grossier quand on voit le reste), mais le moins qu’on puisse dire est que c’est réussi, oui.

Ensuite, à quel prix : en regardant le code source (le DOM), on constate que ce n’est pas du HTML5 de base : ils ont pratiquement tout refait avec des div et des éléments faits maison. C’est légal, en HTML5 on peut tout à fait faire ça, mais bon, il y a plus « satisfaisant intellectuellement » que de faire sauter toutes les limites.

Quoi qu’il en soit, j’aime énormément le Material Design, et j’ai hâte de voir ce que Google et ses artistes nous réservent pour plus tard.

Pour les animations CSS, utilisez plutôt "transform: translate();" que "top/left". C’est beaucoup plus rapide et moins gourmand en ressources.

On parle d’environ 25% de temps CPU en moins dans le navigateur.

La raison à ça est que les top/left provoquent un reflow (recalcule de toutes les positions des éléments de la page) + un repaint (couleurs, etc.) des éléments.
Transform:translate ne provoque pas de reflow : c’est bien plus rapide.

Si on fait attention à ça, alors non seulement les animations seront plus fluides sur les écrans, et en plus ça consommera moins de batterie. Et ça marchera également mieux sur du matériel peu performant.

Les media-queries verticaux : parfois ajouter des styles en fonction de la hauteur de l’écran est utile. J’approuve particulièrement le second point.

Blog sympa à propos de tout ça ↑

Y a aussi des liens intéressants chaque semaine (voir les la semaine en pixels).

Sur une page, tous les éléments ne sont pas visibles : le haut de la page est plus rapidement visible que le footer.

L’idée est donc de faire deux pages CSS distinctes : une pour le haut et la partie visible et une pour le reste. Le CSS pour les éléments visibles (CSS critique) devra être chargé plus vite, préférentiellement en ligne dans le document HTML.

Ceci dans le but d’avoir un rendu plus rapide de la page.
Le rendu sera plus rapide, mais pas forcément le chargement, il faut donc bien distinguer les deux et peser tout ça.

Cette propriété CSS permet de mettre une liste d’éléments sur plusieurs colonnes (façon float, mais en mieux).

Si on peut évidemment utiliser les media-queries pour spécifier le nombre de colonnes (4 colonnes si > 1200px ; 3 colonnes si > 800, etc ; 2 colonnes si > 400…) on peut aussi directement utiliser column-width.

Comme dit la page MDN, ça permet d’avoir un effet responsive de façon natif : Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px..

(notez que si a une largeur spécifiée de 300px, et qu’on 599px de place, alors la colonne fera 599px de large. Si on passe à 600px de place, alors les deux colonnes feront 300px. Si on passe à 602px de place, les deux colonnes monteront à 301px de place, et ainsi de suite. L’ensemble occupera toujours 100% de la largeur du conteneur.)

Ensuite :
– pour la marge entre les colonnes, c’est column-gap (src)
– si vous voulez qu’un élément ait un effet "col-span" pour le forcer à occuper 100% de la place, c’est column-span: all (src)

Toutes ces propriétés fonctionnent plus ou moins dans les navigateurs, avec les préfixes qui vont bien.

Enfin, une petite astuce pour finir : avec ceci, si votre liste est fait de blocs, alors il se peut que le passage d’une colonne à l’autre se fasse en plein milieu d’un bloc. Pour éviter ça, ajoutez sur les blocs en question : break-inside: avoid-column; (qui ne marche que dans Chrome avec préfixe, mais qui se remplace par page-break-inside: avoid; dans Firefox). Pour IE, voyez ici.

Oh cool ! À ajouter à la liste des lib indispensables, à côté de la lib vanilla.js.

(via Korben, en mode troll :p)

Une bonne bibliothèque d’icônes Material/Flat.

Voir aussi ça : https://github.com/google/material-design-icons
Les icônes Material proposées par Google (en CC-By facultative).

J’ai encore amélioré mon code (d’ici).

Cette fois, pour ne plus subir la bordure grise sur les champs.

On ne peut pas retirer la bordure directement (border: 0) car premièrement ça ne peut pas s’animer et deuxièmement la bordure se trouve sous l’élément, et pas dedans (ça fait un décalage).

Ici je simule une bordure grise avec un second background-image (oui, on peut en mettre autant qu’on veut), qui fait 1px de haut, positionné en bas du input.

Ceci crée un solution esthétiquement, relativement clean, sans JS, passe partout et utilisable sur tous les éléments focusables de la page.

En plus c’est facilement adaptable : pour changer la couleur de la bordure ou pour modifier l’origine de l’apparition de la bordure (centre, gauche, droite ou même n’importe quel endroit du input avec un pourcentage custo).

Que c’est beau : un background sur du texte (à la place du "color" on colle une image). Jusque là je connaissais, mais je n’avais encore jamais pensé à le faire défiler. Et ça ne coûte qu’une ligne de CSS en plus !

Le truc où le texte contient le background ne marche que dans Chrome pour le moment. Pour les autres navigateurs, j’ai des alternatives basées sur SVG et des images :
https://lehollandaisvolant.net/tout/examples/transparency/with-image.html
https://lehollandaisvolant.net/tout/examples/transparency/with-text.html
https://lehollandaisvolant.net/tout/examples/transparency/with-text-svg.html

(Merci à Antoine pour le lien !)

Quelques astuces CSS pour rendre les tableaux responsives.

Il y en a plein, y compris avec flex box. À adapter selon les cas.
Je connaissais la première, qui est vraiment top pour les tableaux à une seule entrée (j’en parle ici).

(via)

C’est bien !

Et ça n’empêchera pas d’utiliser les nouvelles techno, ces dernières seront justes ignorées par les navigateurs ne les supportant pas (suffit de ne pas trop faire dans l’exotisme, mais pour des box-shadow ou text-shadow, ça n’est pas un soucis ; flex/grid un peu plus…).