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

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

Selon la spécification CSS Grid, les valeurs de zone de grille sont classées comme lignes de grille, ce qui à leur tour utilise l'identification personnalisée. La documentation MDN souligne que les identifiants ne peuvent pas être inclus entre guillemets, car cela les transformerait en chaînes. Cependant, en combinant ces concepts, il devient évident que les zones de grille nommées doivent être accessibles via un identifiant sans guillemets.

L'exemple ci-dessous illustre cette distinction :

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

.foo {
    grid-area: b;
}

.bar {
    grid-area: "c";
}

Lors de l'attribution de la valeur " b" vers la zone de grille fonctionne comme prévu, mettre le nom de la zone entre guillemets (par exemple, "c") entraîne une reconnaissance incorrecte. Ce comportement peut sembler peu intuitif, car les noms de zones de grille sont généralement entourés de guillemets lorsqu'ils sont définis (par exemple, grille : "area1 area2" / 1fr 1fr;). Cependant, dans ce contexte, ils sont traités comme des identifiants, semblables à des noms de variables.

Justification de la conception

Les développeurs derrière la spécification CSS Grid ont opté pour des identifiants plutôt que des chaînes pour les zones de grille nommées, principalement en raison pour être cohérent avec le cadre CSS plus large. La grande majorité des propriétés CSS utilisent des identifiants, et non des chaînes, pour leurs valeurs. Les exceptions notables incluent les zones de famille de polices, de contenu et de modèle de grille, qui autorisent les deux.

Dans une discussion en 2013, les rédacteurs des spécifications ont souligné les avantages suivants de l'utilisation des identifiants :

• Alignement avec la convention CSS en vigueur
• Regroupement visuel clair des noms identifiant le même emplacement
• Compatibilité entre la syntaxe du modèle de zones de grille nommées (qui utilise des chaînes) et les lignes nommées dans le raccourci du modèle de grille

Détails d'implémentation

La grille CSS définit les zones de grille nommées à l'aide de la propriété grid-area , qui peut être référencé dans les zones de modèle de grille. Prenons l'exemple suivant :

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

.logo  { grid-area: logo;    }
nav    { grid-area: nav;     }
main   { grid-area: content; }
footer { grid-area: footer;  }

Un autre exemple utilisant la propriété sténographique de grille sur le conteneur :

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

.foo {
    grid-area: b;
}

Dans ce deuxième exemple, la notation abrégée se traduit par :

grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b"
                     "c d";

Dans les zones de modèle de grille, les zones de grille nommées sont encapsulées dans des chaînes. En revanche, la zone de grille les attribue comme identifiants ().

Identifiants et chaînes en CSS

La spécification du module de valeurs et d'unités CSS définit les identifiants comme :

"...une séquence de caractères conforme à la grammaire . Les identifiants ne peuvent pas être cités ; sinon ils seraient interprétés comme des chaînes. Les propriétés CSS acceptent deux classes d'identifiants : des mots-clés prédéfinis et des identifiants définis par l'auteur."

D'autre part, les chaînes sont représentées par et se composent de caractères entourés de guillemets doubles ou simples.

Justification de l'utilisation des identifiants dans la zone de grille

Selon les rédacteurs des spécifications, la décision d'utiliser des identifiants au lieu de chaînes dans les valeurs de la zone de grille était basée sur le désir de cohérence. Les identifiants sont le type de valeur prédominant en CSS, et la zone de grille suivrait simplement le mouvement.

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!