ทำไมต้องระบุ @charset“ UTF-8” ในไฟล์ CSS ของคุณ?

ฉันได้เห็นคำสั่งนี้เป็นบรรทัดแรกของไฟล์ CSS จำนวนมากที่หันมาหาฉัน:

@charset "UTF-8";

มันทำอะไรและกฎนี้จำเป็นหรือไม่

นอกจากนี้หากฉันรวมเมตาแท็กนี้ไว้ในองค์ประกอบ "หัว" ของฉันนั่นจะช่วยลดความจำเป็นที่จะต้องมีแท็กนี้อยู่ในไฟล์ CSS ของฉันด้วยหรือไม่

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

มันบอกให้เบราว์เซอร์อ่านไฟล์ css เป็น UTF-8 สิ่งนี้มีประโยชน์หาก CSS ของคุณมีอักขระ Unicode และไม่เพียง แต่ ASCII

การใช้ในเมตาแท็กนั้นใช้ได้ แต่เฉพาะกับเพจที่มีเมตาแท็กนั้น

อ่านเกี่ยวกับกฎสำหรับการแก้ปัญหาชุดอักขระของไฟล์ CSS ที่ข้อมูลจำเพาะ w3cสำหรับ CSS 2

สิ่งนี้มีประโยชน์ในบริบทที่การเข้ารหัสไม่ได้บอกต่อส่วนหัว HTTP หรือข้อมูลเมตาอื่น ๆ เช่นระบบไฟล์โลคัล

ลองนึกภาพสไตล์ชีทต่อไปนี้:

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

หากผู้อ่านบันทึกไฟล์ลงในฮาร์ดไดรฟ์และคุณไม่ใช้@charsetกฎเบราว์เซอร์ส่วนใหญ่จะอ่านไฟล์ในการเข้ารหัสตำแหน่งที่ตั้งของระบบปฏิบัติการเช่น Windows-1252 และแทรกâ - แทนที่จะเป็นลูกศร

น่าเสียดายที่คุณไม่สามารถพึ่งพากลไกนี้ได้เนื่องจากการสนับสนุนนั้นค่อนข้างหายาก และจำไว้ว่าในเน็ตส่วนหัว HTTP จะแทนที่@charsetกฎเสมอ

กฎที่ถูกต้องในการกำหนดชุดอักขระของสไตล์ชีทนั้นเป็นไปตามลำดับความสำคัญ:

1. ส่วนหัว HTTP Charset
2. เครื่องหมายคำสั่งซื้อแบบไบต์
3. @charsetกฎข้อแรก
4. UTF-8

กฎข้อสุดท้ายคือจุดอ่อนที่สุดมันจะล้มเหลวในบางเบราว์เซอร์ แอตทริบิวต์ในเป็นล้าสมัยในHTML 5 ระวังความขัดแย้งระหว่างการประกาศที่แตกต่างกัน พวกเขาไม่ใช่เรื่องง่ายที่จะแก้ปัญหา
charset<link rel='stylesheet' charset='utf-8'>

แนะนำให้อ่าน

• Russ Rolfe: ประกาศการเข้ารหัสอักขระใน CSS
• IANA: ชื่อทางการสำหรับชุดตัวอักษร - ไม่อนุญาตให้ใช้ชื่ออื่น ใช้ชื่อที่ต้องการสำหรับ@charsetถ้ามากกว่าหนึ่งชื่อมีการลงทะเบียนสำหรับการเข้ารหัสเดียวกัน
• @charsetMDN: มีตารางการสนับสนุน ฉันไม่เชื่อใจสิ่งนี้ :)
• กรณีทดสอบจาก CSS WG

เหตุผลหนึ่งที่ควรระบุข้อมูลจำเพาะชุดอักขระในทุกหน้าที่มีข้อความคือเพื่อหลีกเลี่ยงช่องโหว่การเขียนสคริปต์ข้ามไซต์ ในกรณีส่วนใหญ่ชุดอักขระ UTF-8 เป็นตัวเลือกที่ดีที่สุดสำหรับข้อความรวมถึงหน้า HTML

หากคุณใส่แท็ก <meta> ในไฟล์ css ของคุณแสดงว่าคุณทำอะไรผิด แท็ก <meta> อยู่ในไฟล์htmlของคุณและบอกเบราว์เซอร์ว่ามีการเข้ารหัส html อย่างไรมันไม่ได้พูดอะไรเกี่ยวกับ css ซึ่งเป็นไฟล์แยกต่างหาก คุณอาจมีการเข้ารหัสที่แตกต่างอย่างสิ้นเชิงสำหรับ html และ css ของคุณแม้ว่าฉันไม่สามารถจินตนาการได้ว่านี่เป็นความคิดที่ดี