J'adore le CSS :-D.Pour deux raisons :
- les possibilités sont énormes ;
- personne n'en exploite plus de 20% des solutions.
Saviez vous qu'on pouvait laisser le système d'exploitation choisir lui même des couleurs ? Ou bien inverser le sens du texte ?
Voici quelques propriétés CSS qui en plus d'être utiles, peuvent donner une touche de finesse à votre style graphique et remplacer du JavaScript.
Word-wrap
Qui n'a jamais eu un soucis de ligne de code ou d'url trop longue et dépassant de son petit cadre ? Ça arrive quand une chaîne de caractères est trop longue sans contenir d'espaces. Avec ceci, c'est fini ! word-wrap permet justement de forcer la coupure des chaînes trop longues (exemple ici).word-wrap: break-word;
Empty-cells
Vous avez un tableau HTML. Certaines cellules sont vides, et vous voulez les masquer. Rien de plus simple, appliquez sur votre tableau :empty-cells: hide;Démonstration sur le calendrier sur le cote de la page (dont le code PHP est disponible ici, à tout hasard).
Counter
Couplée à la pseudo classe « :before » et à « content »,count permet de compter en CSS. Exemple là, où les titres sont numérotés en CSS et dynamiquement (c'est à dire que supprimer un paragraphe au milieu ne brisera pas la suite des titres : virer le §2 ne vous fera pas passer du §1 au §3, mais renommera le §3 en §2).
h1:before {
counter-increment: count0;
content: counter(count0,upper-roman)" - ";
}
Il est possible d'utiliser plusieurs compteurs, de les coupler et de choisir leurs type : chiffres romains, chiffres arabes, lettres grecs, latins, arméniens, minuscules/majuscules…Dans mes tutoriels (exemple), les sommaires et les titres sont numérotés avec ça. Mon code CSS dédié à ça est là
(Note : je n'ai pas encore trouvé comment récupérer les valeurs des compteurs en JS. Je pense que c'est impossible, ou alors que personne n'a été assez tordu pour vouloir le faire : je ne trouve rien à ce sujet.)
Du CSS ciblé suivant la taille de l'écran
Sans PHP, ni JavaScript.Les CSS permettent d'indiquer si un effet doit être appliqué lors de l'affichage, de l'impression, de la projection sur un écran de TV, etc. Ce qu'on sait moins (du moins je pense car la doc est limitée parmi les blogs) c'est qu'on peut cibler aussi sur la taille de l'écran. C'est facile à coder :
@media only screen and (min-device-width: 480px) {
// CSS a ne pas appliquer aux petits écrans
}
@media only screen and (max-device-width: 480px) {
// CSS a appliquer sur les petits écrans (inférieur à 480px de large) ici
}
// CSS normal, ou CSS commun à tous les écrans ici
Mon site s'affichant sur un smartphone voit apparaître un bouton « version mobile » du site. Il est toujours présent, mais juste masqué sur les grands écrans avec cette solution. (Ensuite, c'est un cookie qui gère l'utilisation du thème mobile ou pas.)Vous voyez donc que le CSS ne se limite pas simplement au padding, margin et border, mais permet d'autres choses. Allez, ceci est cadeau, même si ce n'est pas moi qui ait fait le PDF.
Ah, et également un lien à propos des poids CSS : suivant qu'on cible une classe d'un élément, un ID ou un ID dans un ID, le CSS correspondant sera plus ou moins prioritaire. Je pense que ça résoudra pas mal de casses têtes, j'étais pas au courant de tout ça.
.jpg?uselang=fr){kind=link}