Mengapa Fungsi `attr()` CSS3 Tidak Berfungsi Seperti Yang Dijangkakan dalam Pelayar Utama?

Fungsi attr() CSS3 Tidak Disokong dalam Penyemak Imbas Utama

Dalam dokumen HTML:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

Dan dalam fail CSS:

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

Firefox memaparkan ralat CSS dalam Firebug. Menurut spesifikasi W3C, fungsi attr() sepatutnya berfungsi, tetapi tidak berfungsi.

Mengapa Ia Tidak Berfungsi

Tatabahasa yang dinyatakan dalam spesifikasi memerlukan koma antara nama atribut dan unit untuk digunakan untuk digugurkan:

.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 yang betul sintaks, fungsi attr() masih tidak berfungsi. Sehingga 2020, tiada pelaksanaan yang diketahui versi tahap 3 attr() dalam mana-mana penyemak imbas utama.

Tempat Melaporkan Isu

Jika anda ingin melihat ciri ini dilaksanakan, anda boleh mencadangkannya dalam maklum balas yang berkaitan saluran:

• Microsoft Edge Platform (kini Dalam Pertimbangan)

Nota: Versi asas Tahap 2.1 bagi fungsi attr() disokong sepenuhnya merentas versi terkini semua penyemak imbas utama. Walau bagaimanapun, ia digunakan dengan sifat kandungan untuk elemen pseudo :before dan :after untuk kandungan yang dijana.

Atas ialah kandungan terperinci Mengapa Fungsi `attr()` CSS3 Tidak Berfungsi Seperti Yang Dijangkakan dalam Pelayar Utama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!