Pourquoi les zones de grille nommées CSS ne nécessitent-elles pas de guillemets ?

Pourquoi les zones de grille nommées CSS ne sont-elles pas entre guillemets ?

Conformément à la spécification CSS Grid, la valeur de la zone de grille est définie comme une ligne de grille, qui utilise le type d'identification personnalisé. Cependant, selon la documentation MDN, les identifiants ne peuvent pas être cités, car cela entraînerait plutôt une valeur de chaîne. Cela soulève la question de savoir pourquoi les zones de grille nommées doivent être accessibles à l'aide d'un identifiant sans guillemets.

Pour illustrer le problème, considérons l'exemple suivant :

.grid {
  display: grid;
  grid: "a b" 1fr "c d" 1fr / 1fr 1fr;
}

.foo {
  /* This works as expected, assigning the element to area 'b' in the upper right corner */
  grid-area: b;
}

.bar {
  /* Quoting the area name fails to resolve correctly */
  grid-area: "c";
}

<div class="grid">
  <span class="foo">foo</span>
  <span class="bar">bar</span>
  <span class="hello">hello</span>
</div>

Dans cet exemple, l'élément foo est affecté à la zone b en utilisant la zone de grille non citée : b. Cependant, lorsque vous tentez d'attribuer une barre à la zone c à l'aide de la zone de grille citée : "c", la résolution ne parvient pas à se résoudre correctement.

Ce comportement apparemment contre-intuitif découle de la décision d'utiliser des identifiants personnalisés - plutôt que des chaînes. – pour représenter les zones de grille nommées. Généralement, les propriétés CSS utilisent des identifiants pour leurs valeurs, avec des exceptions telles que font-family, content et grid-template-areas utilisant des chaînes entre guillemets.

Le raisonnement derrière le choix

La grille CSS les développeurs de spécifications ont opté pour des identifiants plutôt que des chaînes pour les zones de grille nommées, principalement pour des raisons de cohérence avec le reste de la spécification CSS. Extrait d'une discussion de 2013 entre les rédacteurs de spécifications :

[L'utilisation d'identifiants] présente l'avantage de :

• Utiliser des identifiants, cohérents avec le reste du CSS
• Fournir un regroupement visuel de noms identifiant le même emplacement
• Autoriser la syntaxe du modèle de zones de grille nommées (qui utilise chaînes) pour coexister avec les lignes nommées dans le raccourci du modèle de grille.

De plus, comme le souligne une autre discussion de 2013 :

Regard sur le courant syntaxe pour déclarer les lignes de grille nommées dans les lignes/colonnes de définition de grille, nous sommes arrivés à la conclusion que la syntaxe actuelle est terrible :

• Nous utilisons des chaînes pour représenter un identifiant d'utilisateur, ce qui est incohérent avec tout le reste en CSS.

Conclusion

Bien qu'il n'y ait peut-être pas de justification technique solide pour préférer les identifiants spécifiquement pour les zones de grille nommées, les auteurs des spécifications ont recherché la cohérence avec l'approche générale du CSS. En utilisant des identifiants, les zones de grille nommées s'alignent sur la majorité des propriétés CSS et offrent une expérience utilisateur cohérente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!