ไม่ว่าเทคโนโลยีเว็บจะล้ำยุคแค่ไหน ศัตรูและมิตรแท้ตลอดกาลของ Web designer และ Web developer อย่างพวกเรา ก็คงไม่พ้น IE ในตำนาน หรือเจ้า Internet Explorer ประจำเครื่อง Windows ที่มีหลากหลาย และรุ่นเก่าๆ ก็ยังมีใช้กันอยู่ในปัจจุบัน
ในเรื่องของการสร้าง Responsive layout บน web ของเราก็โดนคำสาป IE เข้าไปด้วย นั่นคือ IE 6, 7, และ 8 จะแผลงฤทธิ์เมื่อเจอกับ CSS Media Queries ของเราครับ แต่เมื่อมีปัญหา มนุษย์ก็จะมีทางแก้ ผมขอแนะนำทางแก้หนึ่งก็คือการใช้ Respond.js ครับ
Respond.js อะไรนะ?
Respond.js เป็น JavaScript framework ตัวหนึ่งของคุณ Scott Jehl ครับ มันสามารถช่วยให้เราแก้ปัญหากับ Website ที่เราทำ Responsive layout ด้วย CSS Media Queries แต่ดันไปตายใน IE 6/ IE 7/ IE 8 เพราะมันไม่สามารถเข้าใจ CSS ตัวใหม่ตัวนี้ได้ ผลก็คือหน้าเว็บเราเละเป็นโจ๊ก (เพื่อนผมบางคนบอกเหมือนไข่ลวก ฮา)
Respond.js จะแก้ปัญหาได้อย่างไร?
ก่อนอื่นต้องดูต้นเหตุของปัญหา ว่า IE รุ่นก่อนหน้า IE 9 มีปัญหากับ CSS Media queries อย่างไร
- โดยทั่วไปแล้ว IE6/IE7/IE8 ไม่สามารถอ่าน CSS ที่เขียนไว้ใน Media queries ได้
- ดังนั้น CSS ที่อยู๋ใน Media queries จะไม่ทำงาน ส่งผลให้ IE แสดงหน้าตาของ web ที่ไม่พึงประสงค์ออกมา
Respond.js จะเข้ามาช่วยในส่วนนี้ครับ โดย Respond.js จะมีหน้าที่ดังนี้
- Respond.js จะใช้เทคโนโลยี Ajax เพื่อทำการอ่าน CSS Media Queries ตัวจริงทั้งหมด และเอาไปเพิ่มไว้ในส่วน head ของ web page เรา แทนที่จะให้ IE เป็นคนอ่านเองทั้งหมด
- ผลที่ได้คือ IE ที่เคยมีปัญหากับ CSS Media Queries จะสามารถอ่าน CSS ที่เราเขียนเอาไว้ได้ครับ
ดังนั้น ถ้าพร้อมแล้ว คลิกที่นี่เพื่อไปเอา Respond.js จาก Github ของคุณ Scott Jehl มาใช้กันเลย
[sb name=”Bottom-Post-Ads”]