En CSS3, les valeurs et unités pour les propriétés css sont définies dans la bien nommée spécification Valeurs et unités en CSS, à l’exception de celles en relation avec la couleur et les mots-clés spécifiques pré-definis pour chaque propriétés.

Cette spécification nous fourni pour jouer :

  • 1 nouveau mot-clé  qui concerne toutes les propriétés CSS (le mot-clé initial)
  • 5 nouveaux mots-clés relatifs aux unités de longueur
  • 5 nouvelles fonctionnalités de notations et différents type et unité pour supporter les nouveaux modules en CSS3 comme Grid et Flexbox layout, transition et transforms.

Le mot-clé générique initial

Les CSS2.1 ont ajouté le premier mot-clé générique avec inherit. CSS3 ajoute au lot le mot-clé initial. Quand vous renseigné une propriété CSS avec la valeur initial, elle sera re-initialisée conformément à la valeur définie par les spécification des CSS3, un genre de reset. Notez bien que parfois, mais pas toujours, cela peut être équivalent à la valeur par défaut définie dans le user-agent stylesheet. Par exemple, la valeur initiale de margin et padding est 0, mais la valeur par défaut définie par le user-agent stylesheet dépend de l’élément auquel elles s’appliquent.

Le mot-clé initial peut être pratique si un élément hérite de propriétés non désirées et que le style original est voulu. Ce ne sera peut être pas la propriété la plus usitée, mais ce sera un outil très utile parfois. Ceci n’est pour le moment que supporté par Webkit et Firefox (mettre le préfix : -moz-initial pour ce dernier).

Jeter un oeil à la Démo du mot-clé initial que l’auteur original de cet article a préparer pour nous. Ceci ne fonctionne pour le moment qu’avec un navigateur Gecko ou Webkit.

Unités relatives de taille de police

L’unité rem

L’unité rem est peut être ma nouveauté préférée des valeurs des CSS3. Elle s’appuie sur la valeur original en em (en anglais dans le texte : root em), si vous saisissez déjà comment fonctionne em (je présuppose la plupart d’entre vous?) vous vous sentirez comme à la maison. Ces deux propriétés CSS  ne sont que très subtilement différentes mais elles nous rendront la vie plus facile…

Le mot-clé root se réfère à la valeur par défaut de l’élément, ou à la balise html en HTML, ou encore l’élément initial svg en SVG. Avec la valeur en em la taille de 1em est équivalente à la valeur de l’élément courant ou la valeur de l’élément parent quand il est utilisé avec la propriété font-size elle même. Du coup la taille de police varie d’élément en élément, donc la taille de cet em n’est pas consistante dans l’intégralité du document. Ceci requiert beaucoup de calcul lorsqu’on essaie d’avoir quelque chose d’homogène.

La valeur rem reste tout au long du document une valeur constante, par exemple, 1rem reste toujours de la même taille que la valeur de font-size de l’élément html (ou root en fonction du langage que vous utilisez).
Si vous souhaitez que la propriété margin soit d’une certaine taille, vous n’avez besoin de la définir qu’une seule fois pour chaque élément. Si vous souhaitez avoir des calculs de taille de police simple et efficaces, il suffit de caler la propriété font-size de l’élément html à 10px (ou un autre multiple de 10), et ensuite caler l’élément body par exemple à font-size: 1.2rem pour avoir du 12px. Maintenant je pense que vous entrevoyez la facilité à laquelle vous allez pouvoir faire usage de em tout au long de votre document.

Le seul soucis reste encore et toujours le support des navigateurs. Il est correctement supporté par IE9, Firefox 3.6+, Safari 5+, et Chrome. Il sera supporté également par Opéra 12, qui devrait être disponible sous peu. Comme les utilisateurs d’Opéra mettent à jour rapidement, et que Firefox root à 10px, vous pouvez donc fixé la taille en rem à son équivalent en px. 2rem deviendront 20px, 1.7rem 17px, et ainsi de suite. Mais cela aura un coup en poids de page.

L’auteur original nous a préparé un exemple de mise en place rythme vertical à l’aide de cette unité. rem unit demo.

L’unité ch

L’unité ch est équivalente à la largeur du glyph 0 dans la police utilisée par l’élément courant. Cette unité est utile lors de l’usage de police de type monospace ou tous les glyphes ont la même largeur. Par exemple si vous utilisez un élément pre et que vous souhaitez un retour à la ligne automatique après 55 caractères, vous pouvez utiliser la ligne suivante :  width: 55ch;

Cette unité n’est pour le moment seulement supporté que par IE9 et Firefox.

Les longueur relative de Viewport

Il a trois longueur relative de Viewport : vh, vs et vm. Ces longueurs sont relative a la taille de l’élément initial conteneur, autrement dis le Viewport. Si vous redéfinissez la taille du Viewport, comme par exemple la taille de la fenêtre du navigateur, et bien les éléments spécifié par cette unité vont être modifié.

L’unité vw

L’unité vw est relative à la longueur du Viewport. Une unité vw est un 100ème de la longueur du Viewport. Donc si le Viewport est de 1000 pixels de large alors 10vw correspondront à 100px.

L’unité vh

L’unité vh fonctionne de la même manière que l’unité vw, mais est relative à la hauteur du Viewport.

L’unité vm

Cette dernière unité, vm, correspond à l’unité la plus petit entre la hauteur et la largeur (width ou height). Il y a des discussion pour l’abandon de cette unité car ceci peut être accompli par l’utilisation de la notation fonctionnel min().
Toutes ces nouvelles unités seront très utile si vous souhaitez un design plus large que le Viewport. L’auteur n’en a eu pour le moment qu’un seul usage, la mise en place d’un design multi-colonné. En général l’auteur ne souhaites pas que le texte soit plus haut que que la taille de l’écran, sinon l’utilisateur devra en permanence faire usage de sa molette de scroll. Avec l’unité vh vous pouvez utilisé par exemple height: 95vh; ceci qui devrais faire 95% de la hauteur du Viewport peut importe sa taille. Vous pouvez ainsi explorer les possibilités offertent pour les players vidéo, les diaporamas et les smartphones.

Vous vous dites que ces unités ont l’air géniales, mais malheureusement elles ne fonctionne que dans le navigateur IE9 et plus, donc de l’eau passera sous les ponts avant qu’on puisse s’en servir.

Le reste

Voici donc les unités pour les angles (deg, grad, rad et turn), les unités pour le temps (s, ms). Elles sont utilisés lors des transformations en CSS 2D/3D et transitions css respectivement. Il y a aussi de nouvelles unités pour les fréquences (Hz, kHz). Elles sont utilisées par le module de diction en CSS3.

De nouvelles unités spécifique layout : les fractions défini par l’unité fr et gris défini par l’unité gr.

L’auteur nous dit aussi que couvrir toutes ces nouveautés n’a pas vraiment de sens sans couvrir aussi toutes les spec pour lesquelles elles sont mises en place, il laisse donc cela pour un article ultérieur. Il y a aussi 5 notations fonctionnels qui réclame une explication plus approfondie, l’auteur nous préserve qu’elles feront l’objet d’un article à part entière dans un futur proche. Elle sont des expressions mathématique (calc(), min() et max()), des valeurs de boucle (cycle()), et des références d’attribut (attr()).

L’auteur et moi espérons que vous trouverez des usages intelligent des ces nouvelles unités et valeurs avec nous pouvons à présent jouer.

Traduction de l’article en anglais disponible sur le site