28111 sujets

CSS et mise en forme, CSS3

[Résolu] Précisons sur notations classes dans html

Bonjour

<figure class="[ full-bleed ] [ promo ]">

J'aimerai avoir une précision sur ce genre de notation que je viens de trouver dans un exemple de code par rapport à celle que j'envisageais

<figure class="full-bleed promo">

Merci
Modifié par cpalo (06 Apr 2022 - 11:05)
Modérateur
Salut,

Les crochets n'ont rien a faire ici. Je ne pense pas que ce soit valide et dans le meilleur des cas cela sera interprété comme le second code et les crochets ignorés.

C'est peut être lié a un framework mais ca ne me dit rien. Où as-tu vu ce code ?
Modifié par _laurent (06 Apr 2022 - 12:03)
Modérateur
Bonjour,

Les crochets, si ils ils ne sont pas accolés à une autre chaine, peuvent être vu comme un nom de class par le navigateur. Pour s'en servir de sélecteur, il suffit de les "échappés" dans la feuille de style : ex: .\[ {color:red;}.
On peut imaginer ici , qu'il s'agit simplement d'une façon de noter/faire remarquer visuellement l'usage des class utilisées comme exemple ou qu'elle sert à un script.

Les crochets , ne modifieront pas les sélecteurs CSS, ils en ajoutent.
 .full-bleed{/* CSS RULES */}

sera appliquable de la même maniere au travers de l'attribut class ecrit:
* class="full-bleed"
* class="[ full-bleed" (selecteur supplémentaire accessible via la feuille de style : .\[ {/* CSS RULE*/} )
* class=" autres classes full-bleed" (selecteur supplémentaire accessible via la feuille de style : .autres, .classes {/* CSS RULE*/} )

Démo en ligne pour jouer avec https://codepen.io/gc-nomade/pen/eYyVoWB

Cdt


edit source complémentaire : (anglophone)
https://mathiasbynens.be/notes/css-escapes
Bon en gros, à moins de vraiment pas pouvoir faire autrement, autant en rester avec les lettres de a à z Smiley cligne
Modifié par gcyrillus (06 Apr 2022 - 14:32)
_laurent a écrit :
Les crochets n'ont rien a faire ici. Je ne pense pas que ce soit valide et dans le meilleur des cas cela sera interprété comme le second code et les crochets ignorés.

Tout à fait d'accord. Les classes sont reconnues dans la mesure où elles sont séparées des crochets par des espaces, il en serait tout autrement sinon. J'ai regardé le CodePen, il n'y a pas de JS ou de framework rattaché, les crochets semblent donc superflus.
Modérateur
En fait, cette notation semble tout à fait valide

Passer au validateur https://validator.w3.org/#validate_by_input 
<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>  HTML5 </title>
  <meta name="description" content=" HTML5 ">
  <meta name="author" content="MyPc">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
  <script src="js/scripts.js"></script>
<figure class="[ full-bleed ] [ promo ]">
</figure>
</body>
</html>


Il y a une discussion à ce propos ici https://github.com/w3c/csswg-drafts/issues/7129

;)
Modérateur
Ah j'aurais pas imaginé ça valide tiens.

Quoi qu'il en soit, je ne vois pas l'intérêt d'avoir des crochet ici @cpalo... surtout si tu ne sais pas pourquoi il y en a...
Me voilà plus éclairé..
Et laisser de côté cette notation qui de toute façon ne réglait pas un petit bug de flottant.
Cordialement
Oui, et puis cette notation était trompeuse : elle laissait penser à des valeurs en tableau (pour JS par exemple) alors qu'il n'en est rien.
Sujet clos
Aller à