การใช้ตัวเลือก CSS3 ขั้นสูงใน IE

อย่าเข้าใจฉันผิด IE ไม่รองรับตัวเลือกขั้นสูงของ CSS3 รวมถึง IE8 ล่าสุด (ดูรายละเอียดใน "การรองรับเบราว์เซอร์สำหรับตัวเลือก CSS") แต่ตัวเลือก CSS มีประโยชน์มากจริงๆ ซึ่งช่วยให้งานของเราง่ายขึ้นและปรับปรุงโค้ดของเราได้อย่างมาก ประสิทธิภาพทำให้เราสร้างเพจที่มีการบำรุงรักษาสูงได้ง่าย

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

Keith Clark วิศวกรพัฒนาเว็บไซต์จากสหราชอาณาจักร พัฒนาโซลูชัน JavaScript เพื่อให้ IE สามารถรองรับตัวเลือก CSS3 ได้ สคริปต์นี้รองรับเวอร์ชันต่างๆ ตั้งแต่ IE5 ถึง IE8

การใช้งาน

คุณเพียงแค่ต้องดาวน์โหลดสคริปต์ DOMAssistant ของ Robert Nyman และ ie-css3.js แล้วนำเข้าสคริปต์เหล่านั้นในแท็ก head ของเพจของคุณ เช่นนี้

<หัว>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</หัว>

ตัวเลือกที่รองรับ

• ลูกคนที่ n
• ลูกคนที่ n คนสุดท้าย
• ประเภทที่ n
• ลำดับที่ n สุดท้ายของประเภท
• ลูกคนแรก
• ลูกคนสุดท้าย
• ลูกคนเดียว
• ครั้งแรกของประเภท
• ชนิดสุดท้าย
• เฉพาะประเภทเท่านั้น
• ว่างเปล่า

ข้อจำกัดบางประการของ ie-css3

• ต้องแนะนำสไตล์ชีตผ่านแท็ก <link> สไตล์ชีตระดับเพจหรือสไตล์ชีตแบบอินไลน์จะไม่มีผลใดๆ แต่
• คุณสามารถใช้ @import ในไฟล์สไตล์ภายนอกเพื่อนำเข้าไฟล์สไตล์อื่นๆ
• ไฟล์สไตล์ชีตต้องอยู่ใต้ชื่อโดเมนเดียวกันกับเพจ
• ไฟล์สไตล์ที่ใช้พาธ file:// จะไม่ทำงานเนื่องจากปัญหาด้านความปลอดภัยของเบราว์เซอร์
• :not() ยังไม่รองรับตัวเลือก;
• วิธีการนี้ไม่ใช่แบบไดนามิก การเปลี่ยน DOM หลังจากใช้สไตล์จะไม่ถูกต้อง

มันทำงานอย่างไร?

ie-css3.js ดาวน์โหลดไฟล์สไตล์แต่ละไฟล์สำหรับเพจและแยกวิเคราะห์ตัวเลือกหลอก CSS3 หากพบตัวเลือก จะถูกแทนที่ด้วยคลาส CSS ที่มีชื่อเดียวกัน ตัวอย่างเช่น: div:nth-child(2) จะกลายเป็น div._iecss-nth-child-2 จากนั้น DOMAssistant ของ Robert Nyman จะถูกนำมาใช้เพื่อค้นหาโหนด DOM ที่ตรงกับตัวเลือก CSS3 ขององค์ประกอบ จากนั้นจึงเพิ่มคลาส CSS ที่เกี่ยวข้องลงไป

ในที่สุด สไตล์ชีตขององค์ประกอบจะถูกแทนที่ด้วยเวอร์ชันใหม่ จากนั้นสไตล์ที่เกี่ยวข้องจะถูกเพิ่มลงในองค์ประกอบที่เกี่ยวข้องโดยใช้ตัวเลือก CSS3

หลีกเลี่ยงล่าม CSS ของ IE

ตาม W3C เบราว์เซอร์ควรละเว้นกฎ CSS ที่ไม่รู้จัก สิ่งนี้ทำให้เกิดปัญหา - เราจำเป็นต้องใช้ประโยชน์จากตัวเลือก CSS3 ในไฟล์สไตล์ชีต แต่ IE ละทิ้งตัวเลือกเหล่านั้น

เพื่อหลีกเลี่ยงปัญหานี้ ไฟล์สไตล์แต่ละไฟล์จะถูกดาวน์โหลดผ่าน XMLHttpRequest ซึ่งช่วยให้สคริปต์สามารถข้ามล่าม CSS ในตัวของเบราว์เซอร์และสามารถอ่านไฟล์ CSS แบบดิบได้

• เยี่ยมชมหน้าแรกของโครงการ
• ดาวน์โหลด ie-css3.js
• ดาวน์โหลด DOMAssistant.dll

ทางเลือก

แน่นอนว่านี่ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ สำหรับเว็บไซต์ Ajax โดยทั่วไปแล้วจะไม่สามารถใช้งานได้ เนื่องจากการเปลี่ยน DOM หลังจากใช้สไตล์ชีตที่สร้างขึ้นจะไม่เกิดผล แต่ในความเป็นจริงแล้ว เราสามารถปรับแต่ง ie-css3 เองได้ มันไม่ฉลาดเท่าอันนี้หรอก