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

Pourquoi les zones de grille nommées en CSS ne sont pas entre guillemets

Dans CSS Grid, les zones de grille nommées sont accessibles via des ID sans guillemets. Cela peut sembler étrange puisque les zones de grille nommées sont spécifiées avec des guillemets dans la grille : "area1 area2" / 1fr 1fr;.

Raison de l'utilisation de l'identifiant

Les développeurs de CSS Grid ont choisi utiliser des identifiants au lieu de chaînes pour des raisons de cohérence avec le reste du CSS. La majorité des propriétés CSS utilisent des identifiants pour la spécification des valeurs, notamment l'affichage, le poids de la police et le contenu justifié. En utilisant des identifiants pour les zones de grille nommées, la spécification CSS maintient l'uniformité.

Identifiants vs chaînes

Les identifiants sont des séquences de caractères définies par l'auteur qui ne sont pas interprétées à tort comme des mots-clés. Ils sont sensibles à la casse et ne doivent pas être mis entre guillemets.

Les chaînes, quant à elles, sont des séquences de caractères délimitées par des guillemets (simples ou doubles). Ils correspondent au production dans le module de syntaxe CSS.

Exemple

Dans l'exemple suivant, la zone de grille de .logo attribue le nom de zone "logo" comme identifiant au lieu d'une chaîne :

.grid {
  display: grid;
  grid-template-areas: "logo  nav  nav"
                        "content  content  content"
                        "footer footer  footer";
}

.logo {
  grid-area: logo;
}

Conclusion

Pendant L'utilisation d'identifiants pour les zones de grille nommées peut sembler contre-intuitive au premier abord, elle a été choisie par les développeurs de spécifications CSS Grid dans un souci de cohérence avec la grande majorité des propriétés CSS. Cette décision maintient une syntaxe uniforme, garantissant une courbe d'apprentissage plus fluide pour les développeurs.

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!