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 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é...

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