Mengapa menentukan @charset "UTF-8"; dalam file CSS Anda?

173

Saya telah melihat instruksi ini sebagai baris pertama dari banyak file CSS yang telah diserahkan kepada saya:

@charset "UTF-8";

Apa fungsinya, dan apakah aturan ini diperlukan?

Juga, jika saya memasukkan meta tag ini ke elemen "head" saya, apakah itu menghilangkan keharusan untuk memilikinya juga ada dalam file CSS saya?

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

css character-encoding

— rsturim
sumber

123

Ini memberitahu browser untuk membaca file css sebagai UTF-8. Ini berguna jika CSS Anda berisi karakter unicode dan bukan hanya ASCII.

Menggunakannya di tag meta baik-baik saja, tetapi hanya untuk halaman yang menyertakan tag meta itu.

Baca tentang aturan untuk resolusi set karakter file CSS di spec w3c untuk CSS 2.

— Oded
sumber

7

Penting juga jika Anda menautkan file-file tersebut dari non-UTF-8-situs, seperti, katakanlah: situs web Jepang yang disandikan sebagai UTF-16 yang mencoba memuat CSS dari CDN akan mendapatkan konten yang tidak dapat dibaca jika file CSS tidak menyatakannya. encoding.

— Paracetamol

147

Ini berguna dalam konteks di mana pengkodean tidak diceritakan per header HTTP atau data meta lainnya, misalnya sistem file lokal.

Bayangkan stylesheet berikut:

[rel="external"]::after
{
    content: ' ↗';
}

Jika pembaca menyimpan file ke hard drive dan Anda mengabaikan @charsetaturan, sebagian besar browser akan membacanya di pengkodean lokal OS ', misalnya Windows-1252, dan masukkan â † - bukan panah.

Sayangnya, Anda tidak dapat mengandalkan mekanisme ini karena dukungannya agak ... jarang. Dan ingat bahwa di internet header HTTP akan selalu menimpa @charsetaturan.

Aturan yang benar untuk menentukan rangkaian karakter stylesheet berada dalam urutan prioritas:

Header HTTP Charset.
Tanda Pesanan Byte.
@charsetAturan pertama .
UTF-8.

Aturan terakhir adalah yang terlemah, akan gagal di beberapa browser.
The charsetatribut dalam <link rel='stylesheet' charset='utf-8'>usang di HTML 5 .
Waspadai konflik antara deklarasi yang berbeda. Mereka tidak mudah di-debug.

Bacaan yang disarankan

Russ Rolfe: Mendeklarasikan pengkodean karakter dalam CSS
IANA: Nama resmi untuk rangkaian karakter - nama lain tidak diizinkan; gunakan nama yang disukai untuk @charsetjika lebih dari satu nama terdaftar untuk pengkodean yang sama.
MDN: @charset. Ada tabel dukungan. Saya tidak percaya ini. :)
Uji kasus dari WG CSS.

— fuxia
sumber

Apakah maksud Anda file css harus disajikan dengan content-type:text/css;charset=utf-8tajuk?

— Pacerier

1

@Pacerier Ya, jika itu adalah penyandian file HTML (seharusnya).

— fuxia

Maksud saya bukankah itu sudah tersirat bahwa tanpa charset, charset dari file css harus ditafsirkan sama dengan file HTML embedding?

— Pacerier

1

@ Peracer Saya mengamati ini tidak selalu terjadi.

— MatTheCat

3

Salah satu alasan untuk selalu menyertakan spesifikasi rangkaian karakter pada setiap halaman yang berisi teks adalah untuk menghindari kerentanan skrip lintas situs. Dalam kebanyakan kasus, rangkaian karakter UTF-8 adalah pilihan terbaik untuk teks, termasuk halaman HTML.

— tony
sumber

2

Jika Anda meletakkan tag <meta> di file css Anda, Anda melakukan sesuatu yang salah. Tag <meta> termasuk dalam file html Anda , dan memberi tahu browser bagaimana html dikodekan, ia tidak mengatakan apa pun tentang css, yang merupakan file terpisah. Anda dapat memiliki penyandian yang sangat berbeda untuk html dan css Anda, meskipun saya tidak bisa membayangkan ini akan menjadi ide yang bagus.

— WJS
sumber