Sous la pression d'un Consortium issu des principaux frameworks tels que Bootstrap, Foundation et Angular, le W3C s'est récemment penché sur la célèbre fonction CSS !important
et propose dorénavant deux innovations qui en étendent l'efficacité et qui vont se révéler bien pratiques : !veryimportant
et !notveryimportant
.
!important : c'est moi qui gagne !
Déjà présent lors de la préhistoire de CSS, le mot-clé !important
figure aujourd'hui dans la spécification W3C traitant de la Cascade. Cette fonctionnalité, parfois contestée, demeure fréquemment employée sur de très nombreux sites web, et plus particulièrement lorsque des frameworks CSS sont à l'oeuvre. Elle dispose du super-pouvoir de passer outre les poids et spécificités des sélecteurs pour imposer le sien.
Du nouveau en CSS4
Les nouveautés fraichement introduites dans les spécifications CSS4 (encore en brouillon, comme on peut s'en douter) sont donc les suivantes :
!veryimportant
: niveau de spécificité supérieur à!important
et!notveryimportant
!notveryimportant
: niveau de spécificité inférieur à!important
et à!veryimportant
Concrètement la gestion du poids des priorités CSS s'en trouvera facilitée à l'avenir :
p { color: pink !important }
p { color: hotpink !veryimportant }
p { color: tomato !notveryimportant }
/* la couleur finale sera "hotpink" */
Autre exemple :
p { color: pink !important }
p { color: tomato !notveryimportant }
/* la couleur finale sera "pink" */
Tenir compte de l'internationalisation ?
Suite à la parution des premiers brouillons de cette spécification, plusieurs pays ont manifesté l'intention de "traduire" ces deux mots-clés dans leur langue afin de ne pas se limiter aux seuls usagers anglophones.
Un groupe de travail sur l'internationalisation de !veryimportant
, le BUG (Babylonians User Group), vient de se constituer et planche déjà sur des variantes par langues dont les premières émergentes sont :
!überimportant
(pour les germanophones)!muchoimportant
(pour les hispanophones)
Suivons de très près ces travaux conjoints du W3C et du BUG, car leurs fruits risquent certainement d'avoir des conséquences primordiales dans nos intégrations HTML et CSS de demain.
Et vous, qu'en pensez-vous ? Attendiez-vous également ce genre de fonctionnalité avec impatience ?
Commentaires
Absolument.
Supermegarchimportant.
Reste à connaître les règles de priorités entre !überimportant et !muchoimportant
Je fais parti de ces intégrateurs qui crachent sur le !important alors j'ai un peu du mal à suivre la démarche du W3C.
En toute logique lorsque le code est correct, et donc la priorité des sélecteurs aussi, on ne devrait pas avoir à forcer une valeur ....
#veryNimporteQuoi {
Poisson : avril ! vraimentimportant;
Contradictions : dansArticle;
Internationalisation : lol;
GG
:-) :-) :-) :-) :-)
Pas de lien direct sur le draft du W3C, juste un imprim écran avec un subtile : "also, you know, this is a fake text."
Humour en cascade ;)
Plutôt moyen comme poisson d'avril... dès le premier paragraphe et à la première lecture ça apparaît immédiatement comme une évidence.
JE trouve que les meilleurs poissons sont ceux qui sont les plus subtils; ceux qu'on a une chance de croire plusieurs heures ou plusieurs jours avant que la blague ne soit révélée.
Dommage ! Mais bien essayé quand même.
@QuentinC : Bah tout le monde n'a pas été aussi perspicace que toi semble-t-il : https://twitter.com/_dsigned/status/848836997984727040 ;)
Si tu as des idées à nous soumettre pour l'an prochain, on est preneurs !
@QuentinC :
Moi je le trouve bien ce poisson
J'aurais envie de répondre !veryabsurd et !veryuseless !
La pondération des sélecteurs remplies déjà le rôle de hiérarchisation des styles.
Le seul bénéfice du !important est de surclasser le style usuel pour les besoins d'un composant embarqué (embed), par exemple.
Il faut donc s'attendre à ce que les éditeurs de tels composants remplace le !important par le !veryimportant , ce qui rendra de fait inutile la réforme.
@erwan21a : je corrige après coup puisque les commentaire ne peuvent être édités :
- j'aurAI
- remplaceNT
@erwan21a :
- commentaireS
^^
Slt j'ai un soucis d'un fait que je ne parvient pas a utilisé le code css pour faire défiler mes images . aide svp
Moi la seule fonctionnalité du genre que j'attends vraiment avec impatience est la possibilité de scoper le css sur une portion du html. Possible en théorie, mais en pratique on attend toujours le support par les navigateurs...
https://developer.mozilla.org/fr/docs/Web/CSS/:scope
..........<°)))><..........
Bien joué les gas !-)
)))))))))))))
Bien joué !
J’ai failli y croire, mais quand j’ai vu que pour la première fois dans l’histoire de l’informatique, les anglophones se seraient souciés des langues étrangères... avec en plus l’introduction du tout premier caractère accentué dans le CSS, c’était grillé ! :-)
Bien joué en tout cas !
@Olivier C : Une fonctionnalité qui me semble essentielle : le sélecteur d’ascendant ! Quelque chose du genre serait bien pratique :
section /nav a:hover {
style appliqué au nav lorsqu’un de ses liens descendants est survolé
}
J’étais assez mécontent de ne pas pouvoir utiliser une méthode de ce genre étant donné que ça fait assez longtemps que certains organismes tablent dessus....
(PS: désolé pour le message en double !)
@Duchampignon : le sélecteur ascendant existe (mais n'est pas encore implémenté), il s'agit par exemple de "ul:has(li)".
Very Bizarre, déjà quand j'utilise !important je me dis que j'ai dû mal codé quelques part, mais là le very Important, d'accord avec R4ch3lle_972 c'est un peu curieux non, après si ça permet de gagner des ligne de codes.
Heu le CSS 4 il sort quand, il y a des dates prévues ?
J'ai failli m'y laisser prendre aussi.. Vous devriez préciser qu'il s'agit d'un poisson d'avril maintenant que la date est passée !