Warum erfordern CSS-benannte Rasterbereiche keine Anführungszeichen in „grid-area'?

Warum CSS-benannte Rasterbereiche nicht in Anführungszeichen gesetzt werden

Gemäß der CSS-Grid-Spezifikation werden Rasterbereichswerte als Rasterlinien klassifiziert, die wiederum nutzt benutzerdefinierte Identität. In der MDN-Dokumentation wird betont, dass IDs nicht in Anführungszeichen eingeschlossen werden dürfen, da sie dadurch in Zeichenfolgen umgewandelt würden. Bei der Kombination dieser Konzepte wird jedoch deutlich, dass auf benannte Rasterbereiche über eine ID ohne Anführungszeichen zugegriffen werden sollte.

Das folgende Beispiel verdeutlicht diese Unterscheidung:

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

.foo {
    grid-area: b;
}

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

Bei der Zuweisung des Wertes „ b“ in „grid-area“ funktioniert wie erwartet, das Einschließen des Bereichsnamens in Anführungszeichen (z. B. „c“) führt zu einer falschen Erkennung. Dieses Verhalten mag unintuitiv erscheinen, da Rasterbereichsnamen bei der Definition normalerweise in Anführungszeichen gesetzt werden (z. B. Raster: „Bereich1 Bereich2“ / 1fr 1fr;). In diesem Zusammenhang werden sie jedoch als Bezeichner behandelt, ähnlich wie Variablennamen.

Begründung des Designs

Die Entwickler hinter der CSS-Grid-Spezifikation haben sich vor allem aufgrund von Bezeichnern anstelle von Zeichenfolgen für benannte Rasterbereiche entschieden auf Konsistenz mit dem breiteren CSS-Framework. Die überwiegende Mehrheit der CSS-Eigenschaften verwendet Bezeichner und keine Zeichenfolgen für ihre Werte. Bemerkenswerte Ausnahmen umfassen Schriftfamilien-, Inhalts- und Rastervorlagenbereiche, die beides ermöglichen.

In einer Diskussion im Jahr 2013 betonten Spezifikationsautoren die folgenden Vorteile der Verwendung von Bezeichnern:

• Anpassung an die vorherrschende CSS-Konvention
• Klare visuelle Gruppierung von Namen, die dasselbe identifizieren Standort
• Kompatibilität zwischen der Syntax der Vorlage für benannte Rasterbereiche (die Zeichenfolgen verwendet) und benannten Zeilen in der Kurzschrift „grid-template“

Implementierungsdetails

CSS Grid definiert benannt Rasterbereiche mithilfe der Eigenschaft „grid-area“, auf die innerhalb von „grid-template-areas“ verwiesen werden kann. Betrachten Sie das folgende Beispiel:

.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;  }

Ein weiteres Beispiel, bei dem die Kurzschrift-Grid-Eigenschaft für den Container verwendet wird:

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

.foo {
    grid-area: b;
}

In diesem zweiten Beispiel wird die Kurzschrift-Notation wie folgt übersetzt:

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

In Grid-Template-Areas werden benannte Grid-Bereiche in Strings gekapselt. Im Gegensatz dazu weist Grid-Area sie als Bezeichner zu ().

Bezeichner und Zeichenfolgen in CSS

Die Spezifikation des CSS-Moduls „Werte und Einheiten“ definiert Bezeichner als:

"...eine Folge von Zeichen, die der -Grammatik entsprechen. Bezeichner können nicht in Anführungszeichen gesetzt werden, sonst würden sie es tun werden als Zeichenfolgen interpretiert. CSS-Eigenschaften akzeptieren zwei Klassen von Bezeichnern: vordefinierte Schlüsselwörter und vom Autor definierte Bezeichner. und bestehen aus Zeichen, die in doppelte oder einfache Anführungszeichen eingeschlossen sind.

Begründung für die Verwendung von Bezeichnern im Rasterbereich

Den Spezifikationsschreibern zufolge basierte die Entscheidung, Bezeichner anstelle von Zeichenfolgen in Rasterbereichswerten zu verwenden, auf dem Wunsch nach Konsistenz. Bezeichner sind der vorherrschende Werttyp in CSS, und „grid-area“ würde diesem Beispiel einfach folgen.

Das obige ist der detaillierte Inhalt vonWarum erfordern CSS-benannte Rasterbereiche keine Anführungszeichen in „grid-area'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!