Pour bien comprendre comment fonctionne le CSS, et pour découvrir certaines de ses pépites.

Comprendre le CSS

Pseudo-classe, pseudo-élément

Pseudo-class = : = classe virtuelle; Pseudo-élément = :: = tag HTML virtuel (voir l’article du MDN)

La spécificité des sélecteurs CSS

Si deux sélecteurs CSS matchent un même élément HTMl (virtuel ou non), alors le sélecteur de plus forte spécificité sera utilisé (cf l’article du MDN). Cela explique l’éventuel doublage d’une classe dans un sélecteur, comme .classe.classe { color: red; } (même si cela peut souvent être évité).

Des sélecteurs CSS performants et descendants

Le dernier filtre d’un sélecteur CSS doit donc être le plus ciblé possible: évitez

.classe *
et préférez
.classe .x
, mais ne ruinez pas votre CSS à cause de cela (on parle de même pas quelques ms, et encore).

Bien utiliser le CSS

Séparer vraiment le HTML et le CSS

Ne faites pas des classes CSS qui représente une mise en forme (

.green
), ni un rôle trop précis dans la page HTML (
.hud-for-life-points
), mais plutôt un rôle général, similaire à une interface de POO (
hud lifepoints good
).

Ne pas parler de l’apparence dans le contenu textuel

N’introduisez pas de notion de forme (apparence) dans le sens même des textes (comme Cliquez sur le lien en vert) car si le CSS change, le texte sera invalide. Privilégiez un texte indépendant de la forme (comme Cliquez sur le lien ou Cliquer sur le lien mis en exergue).

Un CSS pour les imprimantes?

Rendez vos pages web imprimables, surtout pour les blogs (les articles seront peut-être “imprimés” en PDF). Dans un jeu, cela peut permettre de générer un PDF récapitulant les informations de votre personnage, et de le partager. Généralement, il suffit de masquer tous les éléments de navigation, d’uniformiser la couleur, et éventuellement d’expliciter les adresses URL des liens (

a::before { content: attr('href'); }
).

Des astuces CSS

Un système d’onglet en CSS

:target voire :focus peuvent servir à faire un système d’onglet, de même qu’un input type=radio/checkbox associé à la pseudo-classe :checked. Cela évite les lourdeurs d’un Javascript.

Embarquer certaines images dans le CSS

Vous pouvez embarquer les petites sprites dans votre CSS via une data-URI

data:[{{MIME-type}}][;charset={{encodage}}][;base64],{{data}}
(dont le MDN vous fournira le détail) pour limiter les échanges client-serveur.

Propriétés CSS exotiques

@page
::call string-set @top-left
Pour la mise en page des versions imprimablesDétail du WHATWG
--my-var: ... et var(---my-var)Les variables CSS sont en fait des propriétés customs, dont on peut récupérer la valeur. Elles permettent d’implémenter des compteurs, ou de réutiliser une couleur ailleurs (pas de support IE)Les variables en CSS
:valid et :not(:valid)Stylisent un input HTML (ou toute autre entrée de formulaire) valide, ou invalideDétail sur le MDN
perspectivePour créer des effets de 3DExemple de code à télécharger
border-imageBordures personnalisées, qui ne nécessitent donc plus de mettre des
div
partout
Démo animée (par Alucard)
resizeAutorise l’utilisateur a redimensionner l’élément HTML sans un brin de javascript
object-fitA voir comme un moyen de redimensionner un <img ... /> comme un background CSS (cover, contain, etc)Détail
@counter-stylePermet de customiser intégralement les “points” des listes à points (ul et ol)Détail et Démo

position: sticky

Permet de faire un “menu” qui s’accrochera au bord de l’écran lors du défilement (scroll) de celui-ci.

Scollez et je m’accrocherai en haut de cette figure/div grâce à position: sticky; top: 0;
Exemple d’utilisation de “sticky”

Les pièges du CSS

Si votre CSS n’est pas appliqué…

  • Les propriétés CSS sont-elles valides?
  • Les sélecteurs sont-ils valides? Un seul sélecteur mal écrit invalide la totalité de la règle CSS
  • Le(s) sélecteur(s) porte(nt) bien sur le(s) élément(s) que vous visualisez?
  • Le CSS est bien chargé (panneau « réseau » de la console du navigateur)?
  • La Content-Security-Policy bloque-t-elle le fichier (la console du navigateur l’indique)?
  • Les propriétés CSS sont-elles surchargées (écrasées) par d’autres sélecteurs plus spécifiques? Augmentez alors la précédente de votre règle CSS.
  • Le namespace est-il le bon entre le HTML/XML et le CSS? Ce problème est très récurrent quand on applique du CSS sur un noeud SVG.
  • Les propriétés CSS sont-elles vraiment pas appliquées? Vous ne voyez peut-être juste pas la différence

Le lissage

Prenez garde au lissage des polices customs, car une même police de caractères peut avoir des rendus très différents d’un terminal à l’autre (d’un PC à l’autre, ou du PC au mobile) à cause du lissage utilisé (“Clear Text”, “Skia” ou “Cairo” par exemple). Le choix du lissage est à la discrétion de l’utilisateur. Si votre police n’est pas adapté, l’accessibilité du jeu/site sera compromise.

Liens utiles