Heim > Web-Frontend > CSS-Tutorial > Warum erfordern CSS-benannte Rasterbereiche keine Anführungszeichen?

Warum erfordern CSS-benannte Rasterbereiche keine Anführungszeichen?

Mary-Kate Olsen
Freigeben: 2024-12-06 00:04:10
Original
1015 Leute haben es durchsucht

Why Don't CSS Named Grid Areas Require Quotes?

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

Gemäß der CSS-Grid-Spezifikation wird der Wert für „grid-area“ als Rasterlinie definiert, die verwendet den Typ „custom-ident“. Der MDN-Dokumentation zufolge können Bezeichner jedoch nicht in Anführungszeichen gesetzt werden, da dies stattdessen zu einem Zeichenfolgenwert führen würde. Dies wirft die Frage auf, warum auf benannte Rasterbereiche mit einer ID ohne Anführungszeichen zugegriffen werden muss.

Um das Problem zu veranschaulichen, betrachten Sie das folgende Beispiel:

.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";
}
Nach dem Login kopieren
<div class="grid">
  <span class="foo">foo</span>
  <span class="bar">bar</span>
  <span class="hello">hello</span>
</div>
Nach dem Login kopieren

In diesem Beispiel Das foo-Element wird dem b-Bereich mithilfe des nicht zitierten Grid-Bereichs zugewiesen: b. Wenn jedoch versucht wird, bar mithilfe des in Anführungszeichens „c“ angegebenen Rasterbereichs dem c-Bereich zuzuordnen, wird die korrekte Auflösung fehlgeschlagen.

Dieses scheinbar kontraintuitive Verhalten ergibt sich aus der Entscheidung, benutzerdefinierte Bezeichner anstelle von Zeichenfolgen zu verwenden – zur Darstellung benannter Rasterbereiche. In der Regel verwenden CSS-Eigenschaften Bezeichner für ihre Werte, mit Ausnahmen wie Schriftartenfamilie, Inhalt und Rastervorlagenbereiche, die Zeichenfolgen in Anführungszeichen verwenden.

Der Grund für die Wahl

Das CSS-Raster Spezifikationsentwickler entschieden sich für Bezeichner anstelle von Zeichenfolgen für benannte Rasterbereiche, hauptsächlich aus Gründen der Konsistenz mit dem Rest der CSS-Spezifikation. Aus einer Diskussion unter Spezifikationsschreibern aus dem Jahr 2013:

[Die Verwendung von Bezeichnern] hat den Vorteil:

  • Die Verwendung von Bezeichnern im Einklang mit dem Rest von CSS
  • Bereitstellung einer visuellen Gruppierung von Namen, die denselben Ort identifizieren
  • Ermöglichen der Vorlagensyntax für benannte Rasterbereiche (die verwendet Zeichenfolgen), um mit benannten Zeilen in der Grid-Template-Kurzschrift koexistieren zu können.

Außerdem, wie eine andere Diskussion aus dem Jahr 2013 hervorhebt:

Überblick über den Strom Syntax zum Deklarieren benannter Rasterlinien in Rasterdefinitionszeilen/-spalten sind wir zu dem Schluss gekommen, dass die aktuelle Syntax lautet schrecklich:

  • Wir verwenden Strings, um eine Benutzer-ID darzustellen, was mit allem anderen in CSS nicht konsistent ist.

Fazit

Obwohl es möglicherweise keine überzeugenden technischen Gründe für die Bevorzugung von Bezeichnern speziell für benannte Rasterbereiche gibt, strebten die Autoren der Spezifikation eine Konsistenz mit dem allgemeinen Ansatz in CSS an. Durch die Verwendung von Bezeichnern stimmen benannte Rasterbereiche mit den meisten CSS-Eigenschaften überein und sorgen für ein kohärentes Benutzererlebnis.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage