การแฮ็ก CSS เป็นวิธีการรักษาที่ใช้เมื่อ CSS มาตรฐานเข้ากันไม่ได้กับเอฟเฟกต์การแสดงผลของเบราว์เซอร์ต่างๆ จนกว่าผู้ผลิตเบราว์เซอร์จะบรรลุข้อตกลงเกี่ยวกับวิธีการแยกวิเคราะห์ CSS เราจะใช้วิธีนี้เพื่อทำงานดังกล่าวให้เสร็จสิ้นเท่านั้น คุณอาจค้นหา CSS Hacks ได้มากมายบนอินเทอร์เน็ต แต่คุณอาจไม่เข้าใจทั้งหมดที่ฉันเผยแพร่ในวันนี้ เนื่องจาก CSS Hacks เหล่านี้กำหนดเป้าหมายไปที่เบราว์เซอร์เดียวเท่านั้น
เพื่อแสดงให้คุณเห็นว่าการแฮ็ก CSS เหล่านี้ได้ผล ฉันได้สร้างแท็ก P ใหม่ขึ้นมาหกแท็ก และให้ ID ที่ไม่ซ้ำกับแท็ก P แต่ละแท็ก นี่จะแสดงการทำงานของ CSS Hack ให้คุณเห็น
| <p id="opera">ฉันมาจาก Opera 7.2 - 9.5</p> <p id="safari">ฉันคือ Safari ที่มีมนต์ขลัง</p> <p id="firefox">ฉันมาจาก Firefox</p> <p id="firefox12">ฉันเป็น FF รุ่นพี่ Firefox 1 - 2 </p> <p id="ie7">ฉันชื่อ 囧IE7</p> <p id="ie6">ฉันเป็น IE 6 ที่เสียหาย</p> |
จากนั้นฉันปล่อยให้แท็ก P เหล่านี้ไม่แสดงตามค่าเริ่มต้น
| <style type="text/css"> ร่างกาย p {จอแสดงผล: ไม่มี;} </สไตล์> |
ใช้ความคิดเห็นแบบมีเงื่อนไขของ IE CSS เพื่อแยกแยะเบราว์เซอร์ IE
วิธีที่ง่ายที่สุดในการแยกแยะเบราว์เซอร์ IE คือการใช้ความคิดเห็นแบบมีเงื่อนไข Microsoft ได้สร้างไวยากรณ์ที่มีประสิทธิภาพซึ่งช่วยให้เราสามารถบรรลุฟังก์ชันการทำงานนี้ได้ ฉันไม่ต้องการแนะนำความคิดเห็นแบบมีเงื่อนไขของ IE โดยละเอียด ฉันคิดว่าคุณสามารถค้นหาคำค้นหาได้นับหมื่นคำในเครื่องมือค้นหา ฉันต้องการเพียงสองคำนี้ที่นี่:
| <!--[ถ้า IE 7]> <style type="text/css"> </สไตล์> <![สิ้นสุด]--> <!--[ถ้า IE 6]> <style type="text/css"> </สไตล์> <![สิ้นสุด]--> |
ใช้ CSS parser Hacks เพื่อแยกแยะ IE
แม้ว่าความคิดเห็นแบบมีเงื่อนไขของ IE จะเรียบง่ายและใช้งานง่ายมาก แต่หากคุณต้องการรวม CSS ทั้งหมดไว้ในไฟล์เดียว คุณจะต้องใช้วิธีการอื่น โปรดทราบว่าการแฮ็ก IE 7 ที่นี่จะใช้ได้กับ IE7 เท่านั้น เนื่องจาก IE6 ไม่รู้จักตัวเลือก > เลย ในเวลาเดียวกัน คุณต้องทราบว่าตัวเลือก > นั้นใช้ไม่ได้กับเบราว์เซอร์อื่นเช่นกัน
| /* IE 7 */ html > เนื้อหา #ie7 {*แสดง: บล็อก;} /* ไออี 6 */ ตัว #ie6 {_display: บล็อก;} |
CSS Hack เพื่อแยกความแตกต่าง Firefox
ครั้งแรกใช้ body:empty เพื่อแยกความแตกต่างระหว่าง Firefox 1 และ 2 แฮ็คที่สองใช้ส่วนขยายที่เป็นกรรมสิทธิ์สำหรับเบราว์เซอร์ Firefox ทั้งหมด - moz -moz ใช้ได้กับ Firefox เท่านั้น คุณไม่ต้องกังวลกับผลกระทบของเบราว์เซอร์อื่นเมื่อใช้แฮ็คนี้
| /* ไฟร์ฟอกซ์ 1 - 2 */ เนื้อหา: ว่างเปล่า #firefox12 {แสดง: บล็อก;} /* ไฟร์ฟอกซ์ */ @-moz-document url-คำนำหน้า () {#firefox { จอแสดงผล: บล็อก }} |
CSS Hack ทำให้ Safari แตกต่าง
แฮ็ค CSS ของ Safari มีลักษณะคล้ายกับแฮ็คของ Firefox มาก โดยจะใช้ส่วนขยายที่เป็นกรรมสิทธิ์ของเบราว์เซอร์ Safari - webkit และมีผลกับเบราว์เซอร์ Safari เท่านั้น
| /* ซาฟารี */ หน้าจอ @media และ (-webkit-min-device-pixel-ratio:0) {#safari { จอแสดงผล: บล็อก }} |
CSS Hack ทำให้ Opera แตกต่าง
| /* โอเปร่า */ @media ทั้งหมด และ (-webkit-min-device-pixel-ratio:10,000) ไม่ใช่ทั้งหมด และ (-webkit-min-device-pixel-ratio:0) {head~body #opera { จอแสดงผล: บล็อก }} |
จากนั้นนำทั้งหมดมารวมกันก็จะกลายเป็น
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="th"> <หัว> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>การแฮ็กเบราว์เซอร์ CSS</title> <style type="text/css"> ร่างกายพี - จอแสดงผล: ไม่มี; - /* โอเปร่า */ html:ลูกคนแรก #opera - จอแสดงผล: บล็อก; - /* IE 7 */ html > เนื้อหา #ie7 - *จอแสดงผล: บล็อก; - /* ไออี 6 */ ตัว #ie6 - _display: บล็อก; - /* ไฟร์ฟอกซ์ 1 - 2 */ เนื้อหา: ว่างเปล่า #firefox12 - จอแสดงผล: บล็อก; - /* ไฟร์ฟอกซ์ */ @-moz-document url-คำนำหน้า () - #firefox { จอแสดงผล: บล็อก } - /* ซาฟารี */ หน้าจอ @media และ (-webkit-min-device-pixel-ratio:0) - #safari { จอแสดงผล: บล็อก } - /* โอเปร่า */ @media ทั้งหมด และ (-webkit-min-device-pixel-ratio:10,000) ไม่ใช่ทั้งหมด และ (-webkit-min-device-pixel-ratio:0) - หัว ~ ร่างกาย #opera { จอแสดงผล: บล็อก } - </สไตล์> </หัว> <ร่างกาย> <p id="opera">ฉันมาจาก Opera 7.2 - 9.5</p> <p id="safari">ฉันคือ Safari ที่มีมนต์ขลัง</p> <p id="firefox">ฉันมาจาก Firefox</p> <p id="firefox12">ฉันเป็น FF รุ่นพี่ Firefox 1 - 2 </p> <p id="ie7">ฉันชื่อ 囧IE7</p> <p id="ie6">ฉันเป็น IE 6 ที่เสียหาย</p></body> </html> |
แม้ว่า CSS Hack จะดีและใช้งานได้สะดวกกับเบราว์เซอร์ต่างๆ แต่ก็ไม่ผ่านการตรวจสอบ W3C ดังนั้นคุณต้องชั่งน้ำหนักว่าจำเป็นหรือไม่ที่จะใช้