HTML5 et API web : les quirks sans quirks‑mode

Le flag !important est normalement déconseillé en CSS. Pourtant il y a une règle parfois utile où je le trouve justifié (et c’est même le seul cas où je le trouve justifié) :



Si on veut changer le modèle d’affichage d’un élément, parce que celui par défaut ne convient pas toujours, par exemple si on fait “ div { display: table; } ” et que dans le HTML on a “ <div hidden>...</div> ”, on a la mauvaise surprise de voir qu’il s’affiche malgré qu’il soit sensé être caché. C’est parce qu’on a “ display: table; ” qui prend le pas sur le “ display: none; ” qui est le style par défaut pour les éléments qui ont l’attribut hidden actif. On peut faire autrement pour malgré tout masquer l’élément quand il doit l’être, par exemple avoir le style “ div:not([hidden]) { display: table; } ”. Mais c’est un peu lourd pour ne pas perturber l’effet d’un attribut que l’on comprend facilement comme prioritaire.

On peut se demander pourquoi le style par défaut défini par le navigateur pose la règle comme simplement “ [hidden] { display: none; } ” au lieu de “ [hidden] { display: none !important; } ”. C’est parce que quand une propriété est marquée comme !important, l’ordre des priorités est inversé et alors ce serait toujours la propriété définie par le navigateur qui aurait la priorité, elle serait impossible à redéfinir dans un style de la page. Alors il faut poser soi‑même “ [hidden] { display: none !important; } ”, mais au moins, on a pas une règle définie par le navigateur qu’on aurait aucune possibilité de redéfinir, ce qui serait pire.