Personnalisation avancée du CSS

Importer ses propres polices

Nous avons précédemment vu comment définir, sur un texte, une police de caractère, parmi celles proposées par le navigateur.

Mais vous pouvez utiliser vos propres polices, que vous stockerez dans votre arborescence de projet. Ainsi, vous êtes sûr que la police utilisée sera toujours la même, quel que soit le navigateur ou l’OS utilisé par le visiteur.

Vous devez au préalable ranger vos polices dans votre projet : nous ferons un répertoire « fonts » à la racine, et nous y placerons un fichier « corbel.ttf » par exemple. Nous prendrons donc l’exemple d’un fichier TrueType, mais cela fonctionne aussi avec d’autres types de polices.

Nous allons ensuite rajouter ce code dans notre CSS :

@font-face {
    font-family: "Corbel";
    src: url("../fonts/corbel.ttf") format("truetype");
}

Avec :

• @font-face {} : définit une police personnalisée.
• font-family : définit le nom (au choix) de notre police. Ici, nous l’appelons « Corbel ».
• src : indique le fichier à utiliser.
  • url : indique le chemin relatif.
  • format : indique le format de fichier.

Il ne vous reste plus qu’à appeler votre police où vous le souhaitez :

p {
    font-family: "Corbel";
}

Note : veillez bien à importer votre police avant de l’utiliser dans la feuille de style (une feuille de style s’exécute du haut vers le bas).

Modifier le pointeur de la souris

Il est possible de modifier le pointeur de souris (mettre une croix ou une main à la place du curseur de base) et importer ses propres pointeurs.

ATTENTION : le fonctionnement du pointeur par défaut respecte des normes d’accessibilité et suis une sémantique cohérente, il est donc dangereux en termes de sémantique de le modifier n’importe comment !

On utilisera la propriété « cursor » afin de définir le pointeur lorsque celui-ci survole un élément :

img {
    cursor: wait;
}

Ici, le pointeur prendra la forme d’un sablier (wait) lorsqu’il survolera n’importe quelle image (img).

On peut aussi indiquer un fichier image importé soi-même avec des dimensions :

img {
    cursor: url(sablieren55.jpg) 5 5 url(sablieren1010.jpg) 10 10 wait;
}

Le navigateur va tenter d’abord d’importer la première image en taille 5×5. S’il n’y parvient pas, il tentera d’importer la deuxième en 10×10. La ligne doit se finir obligatoirement par une valeur standard, non-URL.

Utiliser des variables

Même si le CSS n’est PAS un langage de programmation, on peut quand même utiliser des variables !

Dans l’exemple suivant, je vais déclarer mes variables dans la pseudo-classe :root, car c’est la convention pour déclarer des variables globales, utilisable sur tout le document.

:root {
    --color-title1: rgb(0, 0, 255);
    --color-aside: rgb(119, 181, 254);
}

On retrouve à gauche des « : » le nom de notre variable, et à droite sa valeur. Par convention, les noms de variable commencent par « — ».

Il ne nous reste plus qu’à se servir de nos variables, en utilisant la fonction var() :

nav {
    background-color: var(--color-aside);
}

Mise en pratique

Réalisez une page avec des titres, des paragraphes et un ou des tableaux, avec une couleur d’arrière-plan pour chaque paragraphe.

Vous devrez utiliser des polices de caractère que vous aurez importé vous-même (police au choix). Le curseur doit passer en forme croix lorsque la souris passe sur un tableau. Les couleurs seront exprimées sous forme hexadécimale. Les codes hexadécimaux seront enregistrés dans des variables.