Le futur du CSS et ses nouvelles fonctionnalités

Le CSS est un langage en perpetuelle évolution, dernièrement le CSS3 et ses nouvelles fonctionnalités ont grandement étendu les possibilités offertes par ce langage. A l’heure où les principaux navigateurs sont compatibles avec à peu près l’essentiel de ce qu’offre CSS3, voilà que CSS4 commence à pointer le bout de son nez.

Pour savoir si les features présentées dans cette article sont d’ores et déjà supportées par votre navigateur, rendez-vous sur css4-selectors, un site qui vous permettra d’en faire le test.

Voilà donc quelques nouveautés qui permettront donc aux développeurs Front-end de laisser exprimer leur créativité sans avoir recours à du code Javascript un peu douteux, à de lourdes bibliothèques ou à des images pesant une tonne.

Les modes de fusion

De même qu’avec Photoshop, il va bientôt être possible de définir un mode de fusion pour des background, voire même pour du texte.

Fonctions de calcul et variables

Selon moi, une des raisons qui pousse les développeurs à se tourner vers des pré-processeurs CSS comme compass ou less est le manque de fonctions pourtant apparemment “basiques” dans le langage CSS comme par exemple les calculs ou les variables. La prochaine mouture du CSS intègrera (enfin) cela.

.exemple {
background-image: url(lostdoge.png);
background-position: calc(100% – 30px) calc(100% – 30px);
}

Ce code permettra par exemple de placer un fond en déduisant 30px à la largeur ou la hauteur maximale d’un bloc.

/* Déclaration des variables dans :root */
:root {
–main-color: #06c;
–accent-color: #006;
}

/* Utilisation de celles-ci dans le code */
#foo h1 {
color: var(–main-color);
}

Formes

Il sera également possible de définir des formes directement en CSS pour faciliter par exemple le positionnement d’un texte autour d’une div qui aurait une forme ronde. “shape-outside” est une nouvelle propriété qui sera disponible pour les éléments flottants. Il est possible de créer des polygones avec cette propriété, ce qui laisse présager des mises en forme très sympathiques sans avoir à trop se casser la tête.

.left {
shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;

}

.right {
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
float: right;

}

Des sélecteurs de niveau 4

Toujours plus ! Vous trouvez que les sélecteurs CSS3 sont une bénédiction et qu’ils vous permettent déjà de tout faire ? Hé bien des sélecteurs de niveau 4 vont venir compléter la large palette dont nous disposons déjà.

p:not(.intro) { font-weight: normal; }
p:not(.intro, blockquote) { font-weight: normal; }
a:has( > img ) { border: 1px solid #000; }
li:not(:has(p)) { padding-bottom: 1em; }

:not et :has peuvent s’associer l’un à l’autre et acceptent plusieurs éléments séparés par une virgule.

En conclusion

L’avenir du CSS semble brillant ne serait-ce que pour l’intégration des variables et des calculs qui inciteront peut-être certains à arrêter d’utiliser un pré-processeur. En tout cas, les designers et développeurs Front auront bientôt de nouvelles armes à leur disposition pour continuer à créer un web toujours plus esthétique et ergonomique. 2015 sera une bien belle année pour ce langage, il n’y a plus qu’à espérer que les navigateurs ne traineront pas trop à assurer la compatibilité de tout ça !