การใช้ CSS แบบมีเงื่อนไข

แนะนำ

ไม่ต้องสงสัยเลยว่านักออกแบบเว็บไซต์หรือนักพัฒนาที่พยายามใช้ CSS จะพบว่าเบราว์เซอร์ที่ต่างกันต้องการการประกาศสไตล์ที่แตกต่างกัน สิ่งที่น่ารำคาญเหล่านี้เกิดจากระดับความสมบูรณ์ในการใช้งาน CSS ที่แตกต่างกันในเบราว์เซอร์และเวอร์ชันต่างๆ CSS แบบมีเงื่อนไขเป็นวิธีแก้ไขปัญหานี้ โดยนำแนวคิดเกี่ยวกับไวยากรณ์ความคิดเห็นแบบมีเงื่อนไขของ Internet Explorer มารวมไว้ในการประกาศ CSS

การใช้งานขั้นพื้นฐาน

CSS แบบมีเงื่อนไขส่วนใหญ่จะใช้เพื่อระบุว่าควรใช้คำสั่ง CSS เฉพาะในเบราว์เซอร์ใดเบราว์เซอร์หนึ่งหรือไม่ แน่นอนว่าคุณไม่ต้องการทำเช่นนี้บ่อยนัก แต่จะมีประโยชน์มากเมื่อคุณต้องการกำหนดเป้าหมายเบราว์เซอร์ คุณสามารถดูในรายการสนับสนุน U4EA ที่เบราว์เซอร์ส่วนใหญ่รองรับวิธีนี้

การประกาศหรือบล็อก CSS ใดๆ สามารถขึ้นต้นด้วยการประกาศแบบมีเงื่อนไข มีสามประเภทพื้นฐานของคำนำหน้า:

[หากเบราว์เซอร์ {!}]

[หากเวอร์ชันเบราว์เซอร์ {!}]

[ถ้า {!} เงื่อนไขเวอร์ชันเบราว์เซอร์]

! - การปฏิเสธคำสั่ง (เช่น NOT) - เป็นทางเลือก

เบราว์เซอร์ - เบราว์เซอร์ที่ทำการประกาศ

'IE' - อินเทอร์เน็ตเอ็กซ์พลอเรอร์

'Gecko' - เบราว์เซอร์ที่ใช้ Gecko (Firefox, Camino ฯลฯ)

'Webkit' - เบราว์เซอร์ที่ใช้ Webkit (Safari, Shiira ฯลฯ)

'SafMob' - Safari บนมือถือ (iPhone / iPod Touch)

'Opera' - เบราว์เซอร์ของ Opera

'IEMac' - Internet Explorer เวอร์ชัน Mac

'Konq' - คองเคอร์เรอร์

'IEmob' - IE สำหรับมือถือ

'PSP' - เพลย์สเตชันแบบพกพา

'NetF' - Net Front (ขออภัยในความไม่รู้ของ Sugar และ Tomatoes ฉันไม่รู้ว่ามันคืออะไร)

version - เวอร์ชันของเบราว์เซอร์ที่จะกำหนดเป้าหมาย

เงื่อนไข - ตัวดำเนินการทางคณิตศาสตร์

lt - น้อยกว่า

lte - น้อยกว่าหรือเท่ากับ

เท่ากับ - เท่ากับ

gte - มากกว่าหรือเท่ากับ

gt - มากกว่า

ตัวอย่างบางส่วนของคำสั่งแบบมีเงื่อนไข:

// ตัวอย่างไวยากรณ์ CSS แบบมีเงื่อนไข

[ถ้า IE] - หากเบราว์เซอร์เป็น IE

[ถ้า ! Opera] - หากเบราว์เซอร์ไม่ใช่ Opera

[ถ้า IE 5] - หากเบราว์เซอร์เป็น IE 5

[ถ้า lte IE 6] - หากเบราว์เซอร์เป็น IE 6 หรือต่ำกว่า (IE 5, IE 4 ฯลฯ)

[ถ้า ! gt IE 6] - เทียบเท่ากับข้อความข้างต้น หากเวอร์ชันของเบราว์เซอร์ไม่สูงกว่า IE 6

เนื่องจากหลายกรณีคิดว่า div เป็นคลาสกล่องที่มีความกว้างและช่องว่างภายใน ดังนั้นจึงควรทำงานได้ดีใน IE 5 ด้วย (ฉันเห็นว่ามีผู้คนจำนวนมากยกเลิกการรองรับ IE 5 แต่นี่เป็นตัวอย่างคลาสสิก) โมเดลกล่องของ IE 5 ไม่ใช่มาตรฐาน ดังนั้นนี่คือวิธีแก้ปัญหาโดยใช้ CSS แบบมีเงื่อนไข:

// ตัวอย่างโมเดลกล่อง CSS แบบมีเงื่อนไข

div.box {

ความกว้าง: 400px;

[ถ้า IE 5] ความกว้าง: 600px;

การขยาย: 0 100px;
-

อย่างที่คุณเห็น CSS แบบมีเงื่อนไขอนุญาตให้คุณรักษาไฟล์ CSS ได้เพียงไฟล์เดียว แทนที่จะเป็นหลายไฟล์ที่ต้องใช้ความคิดเห็นแบบมีเงื่อนไขของ IE สิ่งนี้จะช่วยปรับปรุงการบำรุงรักษาและทำให้โค้ดชัดเจนยิ่งขึ้น

ก้าวไปอีกขั้น คุณสมบัติที่สำคัญของ CSS แบบมีเงื่อนไขก็คือ เมื่อพบการประกาศ @import CSS มันจะเปิดและแทรกไฟล์ที่ต้องการนำเข้าโดยอัตโนมัติ ซึ่งจะช่วยลดเวลาในการโหลดหน้าเว็บเนื่องจากเบราว์เซอร์ต้องการเพียงส่งคำขอ HTTP เดียวสำหรับไฟล์ CSS

แม้ว่า CSS แบบมีเงื่อนไขส่วนใหญ่จะใช้กับเบราว์เซอร์ IE เวอร์ชันต่างๆ แต่ CSS แบบมีเงื่อนไขก็ค่อนข้างมีประโยชน์เมื่อคุณพบข้อบกพร่องในเบราว์เซอร์อื่นๆ ที่แก้ไขได้ยาก (ใช้ Javascript เป็นหลักในการแก้ไข) ตัวอย่างได้แก่ ข้อบกพร่องของภาพพื้นหลังใน Firefox 2 และ Safari 2 ที่ขาดการสนับสนุน 'display: inline-block' จุดบกพร่องเหล่านี้ได้รับการแก้ไขแล้วในเบราว์เซอร์เวอร์ชันล่าสุด แต่เมื่อเบราว์เซอร์เหล่านี้ครอบครองส่วนแบ่งการตลาดในระดับหนึ่ง ความเข้ากันได้แบบย้อนหลังก็มีความสำคัญมาก