Mengapa Fungsi `attr()` CSS3 Gagal dalam Pelayar Moden?

Fungsi CSS3 attr() Ralat dalam Pelayar Utama

Walaupun spesifikasi W3C mendakwa sebaliknya, pengguna Firefox mungkin menghadapi ralat semasa cuba menggunakan fungsi attr().

Sintaks Ralat:

CSS berikut:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Akan menjana ralat sintaks dalam Firebug.

Sebab Kegagalan:

Selepas meneliti tatabahasa CSS, nampak jelas bahawa koma antara nama atribut dan unit harus ditinggalkan:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint color);
    box-shadow: inset 0 0 50px attr(data-tint color);
}

Walau bagaimanapun, walaupun dengan sintaks yang betul, ralat berterusan.

Kurang Pelaksanaan:

Malangnya, sebagai pada tahun 2020, tiada pelaksanaan yang diketahui bagi fungsi attr() Tahap 3 dalam mana-mana pelayar utama. Walaupun berisiko, ciri ini kekal dalam draf editor spesifikasi CSS.

Advokasi untuk Pelaksanaan:

Pengguna yang ingin melihat ciri ini dilaksanakan dalam masa depan boleh menyuarakan sokongan mereka melalui saluran maklum balas yang berkaitan. Cadangan semasa termasuk:

• Platform Microsoft Edge: Sedang Dalam Pertimbangan

Nota:

Versi asas Tahap 2.1 attr () disokong secara meluas dan digunakan dengan sifat kandungan untuk kandungan yang dijana.

Atas ialah kandungan terperinci Mengapa Fungsi `attr()` CSS3 Gagal dalam Pelayar Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!