CSS - Devblog de Xenos

Séparer vraiment le HTML et le CSS

Ne faites pas des classes CSS qui représentent une mise en forme (.green), ni un emplacement 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).

Une class n'est pas un concept du CSS, mais un concept du HTML permettant de dire "cet element (tag) HTML a tel comportement (custom) / est de tel type", un peu comme une interface en PHP. D'où le terme de "class(e)"!

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 alors invalide. Privilégiez un texte indépendant de la forme (comme Cliquez sur le lien) et appliquez le styling (vert) sur cet élément.

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'); }).

Un système d'onglet en CSS

Les pseudo-classes :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.

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}} pour limiter les échanges client-serveur. Le MDN vous fournira le détail de cette syntaxe , applicable aussi aux SVG. Elle doit rester marginale, car elle alourdit le CSS qui peut changer: il faudra alors le re-télécharger, avec l'image embarquée dedans.

Propriétés CSS exotiques

@page:first
@page:nth(3n+1)
@footnote
@area
@inside
@layout
::call
string-set
@top-left
perspective()
border-image
resize
object-fit
@counter-style
position: sticky
position: running(...)

Propriétés et sélecteurs CSS peu connus, mais utiles.
Voir la doc complète du MDN.

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ée, l'accessibilité du jeu/site sera compromise.

Liens utiles

⇇ Astuces de codeur