Mengapa Kawasan Grid Dinamakan CSS Tidak Memerlukan Petikan dalam `kawasan-grid`?

Mengapa Kawasan Grid Dinamakan CSS Tidak Diselitkan dalam Petikan

Menurut spesifikasi Grid CSS, nilai kawasan grid dikelaskan sebagai garis grid, yang seterusnya menggunakan custom-ident. Dokumentasi MDN menekankan bahawa ID tidak boleh disertakan dalam petikan, kerana ini akan mengubahnya menjadi rentetan. Walau bagaimanapun, apabila menggabungkan konsep ini, menjadi jelas bahawa kawasan grid yang dinamakan harus diakses melalui ID tanpa petikan.

Contoh di bawah menggambarkan perbezaan ini:

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

.foo {
    grid-area: b;
}

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

Semasa memberikan nilai " b" ke kawasan grid berfungsi seperti yang diharapkan, melampirkan nama kawasan dalam petikan (cth., "c") menghasilkan pengecaman yang salah. Tingkah laku ini mungkin kelihatan tidak intuitif, kerana nama kawasan grid biasanya dikelilingi oleh petikan apabila ditakrifkan (cth., grid: "kawasan1 kawasan2" / 1fr 1fr;). Walau bagaimanapun, dalam konteks ini, mereka dianggap sebagai pengecam, serupa dengan nama pembolehubah.

Rasional Reka Bentuk

Pembangun di sebalik spesifikasi Grid CSS memilih pengecam berbanding rentetan untuk kawasan grid yang dinamakan, terutamanya disebabkan untuk konsisten dengan rangka kerja CSS yang lebih luas. Sebilangan besar sifat CSS menggunakan pengecam, bukan rentetan, untuk nilainya. Pengecualian ketara termasuk kawasan fon-family, kandungan dan grid-template-area, yang membenarkan kedua-duanya.

Dalam perbincangan 2013, penulis spesifikasi menekankan faedah berikut menggunakan pengecam:

• Penjajaran dengan konvensyen CSS lazim
• Kosongkan kumpulan visual nama yang mengenal pasti nama yang sama lokasi
• Keserasian antara sintaks templat kawasan grid yang dinamakan (yang menggunakan rentetan) dan baris yang dinamakan dalam trengkas templat grid

Butiran Pelaksanaan

Grid CSS mentakrifkan nama kawasan grid menggunakan sifat kawasan grid, yang boleh dirujuk dalam kawasan templat grid. Pertimbangkan contoh berikut:

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

Contoh lain menggunakan sifat grid trengkas pada bekas:

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

.foo {
    grid-area: b;
}

Dalam contoh kedua ini, notasi trengkas diterjemahkan kepada:

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

Dalam kawasan templat grid, kawasan grid yang dinamakan dikapsulkan dalam rentetan. Sebaliknya, kawasan grid menetapkannya sebagai pengecam ().

Pengecam dan Rentetan dalam CSS

Spesifikasi Modul Nilai dan Unit CSS mentakrifkan pengecam sebagai:

"...urutan watak yang mematuhi Pengecam tidak boleh dipetik jika tidak, ia akan ditafsirkan sebagai rentetan sifat CSS menerima dua kelas pengecam: kata kunci yang telah ditetapkan dan pengecam yang ditentukan oleh pengarang. , rentetan diwakili oleh dan terdiri daripada aksara yang disertakan dalam petikan berganda atau tunggal.

Rasional untuk Penggunaan Pengecam dalam kawasan grid

Menurut penulis spesifikasi, keputusan untuk menggunakan pengecam dan bukannya rentetan dalam nilai kawasan grid adalah berdasarkan keinginan untuk konsisten. Pengecam ialah jenis nilai utama dalam CSS, dan kawasan grid hanya akan mengikutinya.

Atas ialah kandungan terperinci Mengapa Kawasan Grid Dinamakan CSS Tidak Memerlukan Petikan dalam `kawasan-grid`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!