เรียนรู้การใช้เทคโนโลยี CSS ใหม่ตามความเหมาะสม

การสนับสนุนเบราว์เซอร์สำหรับ CSS ยังล้าหลังการพัฒนา CSS Internet Explorer ซึ่งมีส่วนแบ่งการตลาดที่แน่นอนได้เสร็จสิ้นการสนับสนุน CSS 2.1 อย่างเต็มรูปแบบจนกระทั่งเวอร์ชันที่ 8 เปิดตัวไม่นานมานี้ ความคืบหน้าล่าสุดใน CSS คือการพัฒนา CSS 3 สเปคสำเร็จไปเกินครึ่งแล้ว แต่นี่ไม่ได้ขัดขวางเราไม่ให้ใช้เทคโนโลยีใหม่ใน CSS แม้ว่าเราจะไม่สามารถนำไปใช้ตามที่เราต้องการโดยใช้เทคนิคทั่วไปใน CSS แต่เราสามารถสร้างเอฟเฟกต์ที่ชัดเจนยิ่งขึ้นในเบราว์เซอร์เฉพาะได้ การใช้เทคโนโลยีใหม่เหล่านี้ในตำแหน่งที่เหมาะสมจะไม่เพียงช่วยให้คุณยืนอยู่แถวหน้าของเทคโนโลยี CSS เท่านั้น แต่ยังทำให้งานของคุณรู้สึกสดชื่นอีกด้วย

เทคโนโลยี CSS ใหม่: อย่าคาดหวังว่าเบราว์เซอร์ทั้งหมดจะรองรับ
Microsoft ได้ประกาศการสนับสนุน CSS ในเบราว์เซอร์เวอร์ชันต่างๆ ของ Internet Explorer 5.5 ถึง 8.0 ในรายการนี้ เราจะเห็นว่าการสนับสนุน CSS 2.1 อย่างเต็มรูปแบบยังไม่เสร็จสมบูรณ์จนกว่า Internet Explorer 8.0 และสามารถใช้ได้ใน Internet Explorer 7.0 เท่านั้น ตัวเลือกแอตทริบิวต์ใน CSS 2.1 แม้ว่าเทคโนโลยี CSS นี้จะมีประโยชน์มากก็ตาม ซึ่งหมายความว่าคุณต้องเลิกใช้เทคโนโลยีนี้โดยไม่คำนึงถึงผู้ใช้ Internet Explorer 6.x ที่ยังคงมีสัดส่วนมากกว่า 40% ของตลาด ตัวอย่างเช่น:
[ค่า] { ความสูง:25px}
[href=http://www.dudo.org/] {color:red;}

ในบรรทัดที่ 1 เราสามารถกำหนดความสูงของทุกรูปแบบที่มีค่าแอตทริบิวต์เป็น 25px โดยให้ลิงก์ไปยังเว็บไซต์ใดเว็บไซต์หนึ่งแสดงเป็นข้อความสีแดง แต่การทำเช่นนี้ใน Internet Explorer 6 จะไม่มีผลใดๆ เลย เนื่องจากไม่รองรับ "เทคโนโลยี CSS ใหม่" นี้
ใน CSS 3 ตัวเลือกแอตทริบิวต์มีฟังก์ชันที่มีประสิทธิภาพมากกว่า นอกจากนี้ CSS 3 ยังเพิ่มเอฟเฟกต์ เช่น มุมโค้งมน เงาของข้อความ และเส้นขอบสามมิติ อาจกล่าวได้ว่าเทคโนโลยี CSS ใหม่เหล่านี้ได้สร้างปัญหาที่ซับซ้อนแบบเดิมใน CSS 2 ง่ายกว่า มันง่ายมาก ตัวอย่างเช่น ใน CSS 3 คุณเพียงต้องใช้โค้ดต่อไปนี้เพื่อให้ได้ลักษณะที่โค้งมน:
<div style="radiu:5px">นี่คือมุมโค้งมน</div>

อย่างไรก็ตาม เทคโนโลยีใหม่นี้ไม่รองรับแม้แต่ Internet Explorer 8 ก็ตาม ขณะนี้รองรับเฉพาะ Firefox, Safari และ Chrome เท่านั้น และการสนับสนุนนี้ ไม่รองรับ ให้ใช้ -moz-radius ใน Firefox และ -wekit-radius ใน Safari และ Chrome
นี่เป็นเทคโนโลยีใหม่ใน CSS ที่เบราว์เซอร์ทั้งหมดไม่สามารถตีความได้อย่างสมบูรณ์ในเวลาเดียวกัน
เทคโนโลยี CSS ใหม่ไม่ใช่การแฮ็ก CSS
CSS แฮ็คคืออะไร? CSS Hack เป็นวิธีการที่ใช้ข้อบกพร่องบางประการในการใช้ CSS ในเบราว์เซอร์เพื่อใช้กฎ CSS ที่แตกต่างกัน ตัวอย่างเช่น _property สามารถใช้เพื่อแยกแยะ IE7, 8 และเวอร์ชันอื่นๆ ของ IE, *property สามารถใช้เพื่อแยก IE ออกจากเบราว์เซอร์ที่ไม่ใช่ IE เป็นต้น อย่างไรก็ตาม สิ่งที่ชี้ให้เห็นที่นี่คือ CSS Hacks เหล่านี้เป็นข้อกำหนด CSS ที่ไม่ได้มาตรฐาน และไม่สามารถผ่านการตรวจสอบ W3C ได้ กล่าวคือ ทั้งหมดนี้เป็นกฎ CSS ที่ไม่ถูกต้อง แต่เทคโนโลยี CSS ใหม่นั้นแตกต่างออกไป ซึ่งเป็นข้อกำหนดมาตรฐานของ CSS แต่บางเบราว์เซอร์ไม่รองรับ
นอกจากนี้ เทคโนโลยี CSS ใหม่ไม่สามารถแก้ไขได้ด้วยการแฮ็ก สำหรับความไม่สอดคล้องกันในการตีความโมเดลกล่องในเบราว์เซอร์ต่างๆ เราสามารถแก้ไขได้ด้วยการแฮ็ก CSS อย่างไรก็ตาม ปัญหาของ Internet Explorer ที่ไม่รองรับสี่เหลี่ยมมุมมนไม่สามารถแก้ไขได้ด้วยเทคโนโลยีการแฮ็ก CSS ใดๆ ภาพพื้นหลัง
ดังนั้นเทคโนโลยี CSS ใหม่จึงไม่ใช่ประเภทของการแฮ็ก CSS แต่เป็นข้อกำหนด CSS ดั้งเดิม
การใช้เทคโนโลยี CSS ใหม่อย่างเหมาะสม
แม้ว่าเราจะกล่าวไว้ก่อนหน้านี้ว่าเทคโนโลยี CSS ใหม่ไม่สามารถรองรับได้ในเบราว์เซอร์ทั้งหมด และไม่สามารถบรรลุผลแบบเดียวกันในเบราว์เซอร์ที่แตกต่างกัน เช่น การใช้เทคโนโลยี CSS Hack อย่างไรก็ตาม สิ่งนี้ไม่ได้ขัดขวางเราไม่ให้ใช้มัน ลองนึกภาพว่าหากสามารถเพิ่มเพจธรรมดา ๆ เข้าไปเพื่อเพิ่มความสะดวกในการใช้งานในเบราว์เซอร์ได้โดยไม่กระทบต่อการใช้งาน มันจะไม่น่าดึงดูดกว่านี้หรือ? และเราได้รับผลนี้โดยไม่ต้องเพิ่มกฎ CSS ที่ไม่ปกติ เช่น CSS Hack ดังนั้นการใช้เทคโนโลยี CSS อย่างเหมาะสมในเวลาที่เหมาะสมสามารถทำให้เกิดเอฟเฟกต์เค้กและทำให้หน้าเว็บของคุณใช้งานได้ง่ายขึ้น