สำหรับนักออกแบบเลย์เอาต์ที่ดีทุกคน ในบางช่วงเวลาจะมีคำถามเกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์เกิดขึ้น ความเข้ากันได้ข้ามเบราว์เซอร์คืออะไร? คุณสมบัติของไซต์หรือการออกแบบไซต์นี้จะแสดงเหมือนกันในเบราว์เซอร์ที่แตกต่างกัน ความจริงก็คือเมื่อสร้างเบราว์เซอร์นักพัฒนาไม่ได้คิดมากเกี่ยวกับมาตรฐานซึ่งทำให้เกิดการนำเสนอที่แตกต่างกันของไซต์เดียวกันในผลิตภัณฑ์ของตน การสร้างเค้าโครง/ไซต์ข้ามเบราว์เซอร์ช่วยให้คุณสามารถเอาชนะความแตกต่างนี้ได้
เพื่อจุดประสงค์นี้สิ่งที่เรียกว่าแฮ็ก (กลโกง) ได้รับการประดิษฐ์ขึ้นในภาษา CSS ซึ่งอนุญาตให้คุณใช้กลุ่มคุณสมบัติกับเบราว์เซอร์เดียวหรือหลายตัวเท่านั้น เช่น เฉพาะ Opera หรือ Chrome/Safari เท่านั้น
บทความนี้นำเสนอตัวเลือกการทำงานที่เป็นไปได้สำหรับเบราว์เซอร์เวอร์ชันล่าสุด แฮ็กทั้งหมดได้รับการทดสอบแล้ว เวอร์ชันล่าสุดณ วันที่ 10 พฤษภาคม 2558 หากบทความนี้ช่วยคุณหรือคุณยังมีคำถาม ถามในความคิดเห็นและให้คะแนน สิ่งนี้อาจกระตุ้นให้เราขยายจำนวนแฮ็กสำหรับ เบราว์เซอร์ที่แตกต่างกันพร้อมทั้งเพิ่มตัวอย่างการใช้งานแต่ละรายการ
หากแฮ็กถูกเขียนลงในตารางโดยตรง หากต้องการใช้คุณจะต้องคัดลอกมันไปยังไฟล์ .CSS และปรับให้เข้ากับสไตล์ของคุณ มิฉะนั้นจะมีลิงค์แทนชื่อ คำอธิบายโดยละเอียดเกี่ยวกับวิธีการแฮ็ค
| + | - | - | - | - | |
| - | + | - | - | - | |
| - | - | + | - | - | |
|
_::-moz-svg-เนื้อหาต่างประเทศ :root .class () |
- | - | - | + | - |
|
html/**/body .class, x:-moz-any-link, x:default (สี: #F00 ;) |
- | - | - | - | + |
| - | + | + | + | - | |
|
@supports (-webkit-appearance:none) ( /* นี่คือสไตล์ของคุณในรูปแบบปกติ */ ) |
- | + | + | - | - |
ตัวเลือกที่ง่ายและมีประสิทธิภาพที่สุดคือการสร้างไฟล์ .css แยกต่างหากสำหรับ IE ทุกเวอร์ชันและเชื่อมต่อกับไฟล์หลัก แต่ด้วยวิธีพิเศษ
ความคิดเห็นแบบมีเงื่อนไขใช้ได้เฉพาะใน IE บน Windows เท่านั้น สำหรับเบราว์เซอร์อื่นๆ นี่เป็นความคิดเห็นปกติ ดังนั้นจึงสามารถใช้งานได้อย่างไม่ลำบาก ไวยากรณ์เป็นดังนี้ (ในไฟล์ .php หรือ .html ที่เราเชื่อมต่อไฟล์สไตล์ ให้เพิ่มบรรทัดต่อไปนี้):
โดยที่ styles.css เป็นไฟล์ที่จะรับผิดชอบสไตล์สำหรับ IE เท่านั้น
อันเดียวเท่านั้นที่รู้จัก. ในขณะนี้วิธีเขียนสไตล์สำหรับ Google Chrome เท่านั้นโดยใช้ JavaScript คุณไม่จำเป็นต้องรู้จัก JS เพียงใช้ตัวอย่างจากที่นี่และปรับให้เข้ากับความต้องการของคุณ
สิ่งที่สำคัญที่สุดคือเราตรวจสอบว่าผู้เยี่ยมชมเว็บไซต์ใช้เบราว์เซอร์ใดและหากเป็น Google Chrome จากนั้นเราจะเชื่อมต่อให้เขา ไฟล์เพิ่มเติมสไตล์ ซึ่งคุณสมบัติที่จำเป็นซึ่งอาจทับซ้อนกันในไฟล์สไตล์หลัก ให้เลือก !important
ส่วน ให้เพิ่มบรรทัดต่อไปนี้ภายในแท็ก):
var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //path ไปยังสไตล์ชีตสำหรับ Chrome เท่านั้น link.media = "all" )
วิธีเดียวที่ทราบในปัจจุบันในการเขียนสไตล์ Opera-only โดยใช้ JavaScript คุณไม่จำเป็นต้องรู้จัก JS เพียงใช้ตัวอย่างจากที่นี่และปรับให้เข้ากับความต้องการของคุณ
สิ่งที่สำคัญที่สุดคือเราตรวจสอบว่าผู้เยี่ยมชมเว็บไซต์ใช้เบราว์เซอร์ใด และหากเป็น Opera เราจะเชื่อมต่อไฟล์สไตล์เพิ่มเติมสำหรับมัน ซึ่งคุณสมบัติที่จำเป็นที่อาจทับซ้อนกันในไฟล์สไตล์หลัก เราเลือก !สำคัญ
ไวยากรณ์เป็นดังนี้ (ในไฟล์ .php หรือ .html ที่เรารวมไฟล์สไตล์ กล่าวคือ ในส่วน ให้เพิ่มบรรทัดต่อไปนี้ภายในแท็ก):
var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //path ไปยังไฟล์สไตล์สำหรับ Opera เท่านั้น link.media = "all" )
สิ่งเดียวที่คุณต้องเปลี่ยนคือในบรรทัดที่ 10 เส้นทางไปยังไฟล์สไตล์ของคุณ
ขอขอบคุณทุกท่านที่ให้ความสนใจ เรายินดีที่จะพยายามเพื่อคุณ เราขอย้ำอีกครั้งว่าเรายินดีรับฟังความคิดเห็น ข้อเสนอแนะเพื่อการปรับปรุง ฯลฯ ของคุณ
จากผู้เขียน: หากคุณอยู่ในการพัฒนาส่วนหน้ามาอย่างน้อยสองสามปี คุณน่าจะเคยใช้แฮ็ก CSS อยู่แล้ว อย่างไรก็ตาม หากคุณยังใหม่อยู่ คุณอาจเคยได้ยินมาแล้ว เทอมนี้แต่ยังไม่เข้าใจความหมายของมันอย่างถ่องแท้ ในบทความนี้ ฉันจะอธิบายว่าแฮ็ค CSS คืออะไรและใช้งานอย่างไร แต่ก่อนอื่นฉันจะอธิบายว่าทำไมฉันถึงตัดสินใจเขียนบทความนี้
นักพัฒนาเข้าใจผิดความหมายของคำนี้หลายๆ คนคงเคยได้ยินมาแล้วว่า SitePoint เพิ่งเผยแพร่ผลการสำรวจ CSS ขนาดใหญ่ และฉันได้สรุปไว้ในบทความแยกต่างหาก หนึ่งในคำถามคือ: เบราว์เซอร์ Microsoft ตัวใดต่อไปนี้ที่คุณเขียนแฮ็ก CSS
เมื่อฉันประมวลผลผลการสำรวจครั้งแรก ฉันพลาดคำตอบที่คลาดเคลื่อนเล็กน้อย แต่ David Storey วิศวกรของ Microsoft ที่ช่วยสร้างเบราว์เซอร์ใหม่สังเกตเห็นสิ่งนี้ มีผู้ลงคะแนนเสียงจำนวน 1,418 คน และมีผลดังนี้
ผลลัพธ์น่าผิดหวัง: เป็นเรื่องแย่ที่นักพัฒนามากกว่า 60% เขียนแฮ็ก CSS สำหรับ IE9 และ IE10 แต่ Edge ได้ 45%? มีแฮ็กบางส่วนที่เผยแพร่สำหรับ Edge แต่ยังไม่มีอยู่ในไซต์ Browserhacks เป็นเรื่องผิดปกติอย่างมากที่ผู้คนจำนวนมากใช้แฮ็กสำหรับเบราว์เซอร์นี้ คำถามที่ใหญ่กว่าคือ: นักพัฒนา Edge ประสบปัญหาการเรนเดอร์ CSS ประเภทใดที่ทำให้พวกเขาต้องใช้วิธีแฮ็ก
ตอนแรกฉันคิดว่าผู้คนสับสนกับการแฮ็กกับการตรวจจับเบราว์เซอร์ แต่ถึงอย่างนั้นก็ไม่ได้อธิบายตัวเลขที่สูงของ Edge
จากนั้นฉันก็ตระหนักว่าผู้คนต้องไม่เข้าใจคำถามนี้อย่างถ่องแท้ ผู้คนคิดว่า "การแฮ็ก CSS สำหรับเบราว์เซอร์ X" นั้นเหมือนกับ "การรองรับเบราว์เซอร์ X" ไม่มีคำอธิบายเชิงตรรกะอื่นใด โดยเฉพาะอย่างยิ่งเมื่อพิจารณาถึงเปอร์เซ็นต์ขนาดใหญ่ของเบราว์เซอร์อื่นๆ ที่ไม่ต้องการการแฮ็ก
มาให้ทุกคนที่กำลังสับสนในแนวคิด คำจำกัดความที่แม่นยำแฮ็คคืออะไร?
แฮ็ค CSS คืออะไร?การแฮ็กคือโค้ดชนิดหนึ่งที่เข้ามา ไฟล์ซีเอสเอสซึ่งสไตล์จะใช้กับเท่านั้น เบราว์เซอร์ที่ระบุและถูกคนอื่นละเลย ลองดูตัวอย่าง นี่คือการแฮ็ก CSS:
* html .sidebar ( ขอบซ้าย: 5px; )
*html. แถบด้านข้าง( ระยะขอบ - ซ้าย : 5px ; |
โค้ด CSS ด้านบน (หรือที่เรียกว่าแฮ็ก "*-html") จะใช้กับ IE6 และต่ำกว่าเท่านั้น นักพัฒนาส่วนใหญ่ที่รองรับ IE 6 ไม่สนใจอีกต่อไป รุ่นแรกๆดังนั้นเราจึงสรุปได้ว่าแฮ็คนี้มีไว้สำหรับ IE6 เท่านั้น
ตรงนี้แฮ็คคือเครื่องหมายดอกจันก่อน "html" มันเป็นการรวมกัน ตัวเลือกสากลและตัวเลือกประเภท มีคนค้นพบว่าตัวเลือกทั้งสองนี้ร่วมกันสร้างเพื่อให้ตัวเลือกที่กำหนดใช้งานได้เท่านั้น บางเวอร์ชัน IE และเบราว์เซอร์อื่นจะละเว้น เหล่านั้น. ขอบซ้ายของ .sidebar ในตัวอย่างด้านบนจะอยู่ใน IE6 และต่ำกว่าเท่านั้น เขียนโค้ด CSS อย่างถูกต้อง และคุณจะไม่เห็นข้อความแสดงข้อผิดพลาดหรือคำเตือนใดๆ (รายละเอียดเพิ่มเติมด้านล่าง) นี่เป็นอีกตัวอย่างหนึ่งจาก Browserhacks คราวนี้สำหรับ IE11:
_:-ms-fullscreen, :root .selector ( ขอบซ้าย: 5px; )
_ : - ms - เต็มจอ , : รูท ตัวเลือก ( ระยะขอบ - ซ้าย : 5px ; |
ฉันจะไม่ลงรายละเอียดและอธิบายว่าเหตุใดโค้ดด้านบนจึงเป็นแฮ็ก (ส่วนหนึ่งเป็นเพราะฉันไม่แน่ใจว่าฉันเข้าใจถูกต้องทั้งหมด) แต่โค้ดด้านบนใช้งานได้ใน IE11 เท่านั้น อันที่จริง Browserhacks บอกว่า "IE11 ขึ้นไป" ดังนั้นเราจึงสรุปได้ว่าใช้งานได้ใน Edge เช่นกัน แต่ฉันไม่ได้ตรวจสอบสิ่งนี้ สิ่งสำคัญไม่ใช่ว่าเบราว์เซอร์ใดที่แฮ็กเขียนขึ้น แต่ขึ้นอยู่กับว่าเราเข้าใจถูกต้องหรือไม่ว่ามันคืออะไร
การแฮ็ก CSS ทำให้โค้ดไม่ถูกต้องหรือไม่หากคุณถูกแฮ็กในโค้ดของคุณ คุณอาจได้รับคำเตือนและ/หรือข้อผิดพลาดหากคุณเรียกใช้ไฟล์ผ่านเครื่องมือตรวจสอบความถูกต้องของ W3C CSS บริการนี้จะไม่บอกคุณ 100% ว่าโค้ดของคุณมีการแฮ็กหรือไม่
มีหลายครั้งที่มีการแฮ็กโค้ด CSS แต่ไม่มีข้อผิดพลาดหรือคำเตือน ตัวอย่างเช่น หากคุณใช้แฮ็ก *-html สำหรับ IE6 เท่านั้น รหัสของคุณจะผ่านการตรวจสอบความถูกต้องได้อย่างง่ายดาย
นอกจากนี้ การแฮ็กบางอย่าง (เช่น การแฮ็ก IE11 ที่ฉันกล่าวถึงข้างต้น) ใช้คำนำหน้าผู้ขาย (เช่น :-ms-fullscreen) ในกรณีนี้ หากคุณไม่เปลี่ยนการตั้งค่าในตัวตรวจสอบ ไฟล์นั้น จะถูกทดสอบและบริการจะแสดงข้อความ:
แต่ถ้าคุณเลื่อนไปจนถึงหน้าจอตรวจสอบความถูกต้อง จะมีคำเตือน:
ใน ในกรณีนี้ฉันเตือนว่า: -ms-fullscreen คือ "คลาสหลอกที่ไม่รู้จักพร้อมคำนำหน้าผู้ขาย" หากคุณถือว่าคำเตือนประเภทนี้เป็นข้อผิดพลาด ในตัวตรวจสอบ คุณสามารถเปิดแท็บ "ตัวเลือกเพิ่มเติม" และทำให้คำเตือนเหล่านี้รับรู้ว่าเป็นข้อผิดพลาด:
ในส่วน "ส่วนขยายของผู้ให้บริการ" เลือก "ข้อผิดพลาด" ในรายการแบบเลื่อนลง จากนั้นในระหว่างการตรวจสอบไฟล์ของคุณจะไม่ผ่านการตรวจสอบหากมีคำนำหน้าของผู้ขายหรือรหัสอื่นใดสำหรับเบราว์เซอร์บางตัว (ไม่จำเป็นต้องแฮ็ก) ในทางกลับกัน คุณสามารถเขียนได้ดังนี้:
ตัวอย่าง ( ขอบซ้าย: 5px\9; )
ตัวอย่าง ( ระยะขอบ - ซ้าย : 5px \ 9 ; |
รหัสนี้ใช้งานได้ใน IE8 และต่ำกว่า นี่คือแฮ็ค แบ็กสแลชและเก้า (\9) ในเบราว์เซอร์ส่วนใหญ่ บรรทัดทั้งหมดจะถูกละเว้นเนื่องจาก \9 แต่ด้วยเหตุผลที่ไม่ทราบสาเหตุ ใน IE8 และต่ำกว่า รายการดังกล่าวทำงานได้ค่อนข้างปกติ ในตัวอย่างนี้ ไม่ว่าการตั้งค่าเครื่องมือตรวจสอบจะเป็นอย่างไร ข้อผิดพลาดจะปรากฏขึ้นและสไตล์จะไม่ผ่านการตรวจสอบ:
วิธีการและเทคนิคด้านล่างอาจไม่จำเป็นต้องเป็นการแฮ็ก CSS:
!สิ่งสำคัญไม่ใช่การแฮ็กสตริง CSS with!important ในตอนท้ายไม่เกี่ยวข้องกับหัวข้อนี้เลย นี่เป็นรายการ CSS ที่ถูกต้องและไม่ได้ตั้งใจให้ทำงานในเบราว์เซอร์ใดโดยเฉพาะ นี่ไม่ใช่การแฮ็ก แต่ถือได้ว่าเป็นสไตล์ CSS ที่ไม่ดี
คำนำหน้าผู้ขายไม่ใช่การแฮ็กเสมอไปคำนำหน้าผู้ขายกำหนดเป้าหมายเบราว์เซอร์เฉพาะ แต่โดยทั่วไปไม่เรียกว่าแฮ็ก ในกรณีส่วนใหญ่ เมื่อใช้คำนำหน้าผู้ขาย จะมีการเขียนโค้ดมาตรฐานด้วย นี่ไม่ใช่การแฮ็ก ใน ในบางกรณีรหัสที่มีคำนำหน้าผู้ขายถือได้ว่าเป็นการแฮ็ก ตัวอย่างจะเป็นโค้ดด้านบน _:-ms-fullscreen อีกตัวอย่างหนึ่งคือการรวม การเร่งความเร็วด้วยฮาร์ดแวร์ในเบราว์เซอร์ WebKit แต่ถึงกระนั้น โดยส่วนใหญ่ คำนำหน้าผู้ขายยังเป็นหัวข้อที่แยกต่างหาก มีเอกสารประกอบบนเว็บไซต์ W3C สำหรับโค้ดที่มีคำนำหน้าผู้ขาย ซึ่งสนับสนุนแนวคิดที่ว่าโค้ดดังกล่าวไม่ควรถือเป็นการแฮ็ก
ตัวเลือกที่มีความเฉพาะเจาะจงสูงไม่ใช่การแฮ็กหากคุณเพิ่มความเฉพาะเจาะจงของตัวเลือกเพื่อเขียนทับสไตล์บางสไตล์ สิ่งนี้จะเรียกว่าแฮ็กไม่ได้ (เช่น body .content #sidebar p) นี่มันแย่นะ สไตล์ CSSแต่ไม่ใช่การแฮ็ก
ไวยากรณ์แบบเก่าก็ไม่ใช่แฮ็คเช่นกันตัวอย่างที่ดี– รหัส Flexbox ที่ซับซ้อนเพื่อรองรับเบราว์เซอร์รุ่นเก่า นอกจากความจริงที่ว่าโค้ดดังกล่าวไม่เกี่ยวข้องในปัจจุบัน ฉันจะไม่เรียกมันว่าแฮ็ก ในขณะที่เบราว์เซอร์รองรับ โพสต์เก่าตัวเลือก รหัสถูกต้องสมบูรณ์ ผลกระทบของโค้ดนี้เหมือนกับการแฮ็กทุกประการ แต่ฉันไม่คิดว่ามันจะเหมือนกัน
ความคิดเห็นแบบมีเงื่อนไขถือเป็นการแฮ็กหรือไม่ความคิดเห็นแบบมีเงื่อนไขซึ่งอนุญาตให้คุณเขียน CSS หรือแม้แต่โค้ด HTML สำหรับ IE เวอร์ชันเฉพาะนั้นมีตำแหน่งที่ไม่แน่นอน โค้ด HTML ที่เขียนด้วยวิธีใดวิธีหนึ่งนั้นถูกต้องโดยสมบูรณ์ แต่ตัวรายการเองก็สามารถจัดว่าเป็นแฮ็กได้
ในปี 2008 Paul Irish เผยแพร่สิ่งที่เราเรียกว่าคลาสแบบมีเงื่อนไข ซึ่งฉันแน่ใจว่าพวกเราหลายคนคงเคยใช้ คลาสแบบมีเงื่อนไขระบุไว้ในความคิดเห็นแบบมีเงื่อนไขและใช้ได้เฉพาะใน IE บางเวอร์ชันเท่านั้น เช่น สามารถใช้โค้ด CSS ที่ถูกต้องใน IE บางเวอร์ชันได้
ความคิดเห็นแบบมีเงื่อนไขเป็นการแฮ็ก CSS หรือไม่ ฉันจะตอบว่าใช่ แม้เพียงเพราะพวกเขาทำงานเหมือนกับการแฮ็ก CSS ทั่วไปก็ตาม
คุณควรใช้แฮ็ก CSS หรือไม่เช่นเดียวกับคำถามอื่นๆ ในด้านการพัฒนาเว็บ ไม่มีคำตอบที่แน่ชัด มันจะถูกต้องมากกว่าที่จะพูดขึ้นอยู่กับกรณี ผู้เสนอความบริสุทธิ์ของโค้ดจะบอกว่าเป็นการดีกว่าที่จะไม่ใช้แฮ็ก แต่บ่อยครั้งสิ่งต่าง ๆ ก็ไม่ง่ายนัก ฉันแนะนำ:
พยายามทุกวิถีทางในการเขียนโค้ด CSS ข้ามเบราว์เซอร์ที่ถูกต้อง เป็นมาตรฐาน โดยไม่มีการแฮ็ก ภายในงบประมาณและเวลาที่จัดสรรไว้สำหรับโปรเจ็กต์
หากคุณได้ลองทุกอย่างแล้ว ตัวเลือกที่เป็นไปได้หรือคุณไม่มีเวลาหรืองบประมาณในการแก้ไขโค้ดให้ถูกต้อง ให้ใช้แฮ็ก
เมื่อเขียนแฮ็ก ให้ใช้คำแนะนำของ Harry Roberts เพื่อว่าเมื่อคุณมีเวลาหรือเงิน คุณสามารถทิ้งหรือปรับโครงสร้างโค้ดได้อย่างง่ายดาย
แสดงความคิดเห็นเกี่ยวกับแฮ็กและโค้ดรีแฟคเตอร์ทุกครั้งที่เป็นไปได้
ในที่สุดหากคุณจำอะไรไม่ได้จากบทความนี้ ให้จำเพียงประโยคเดียว: การแฮ็ก CSS ใช้โค้ดกับเบราว์เซอร์หนึ่งเวอร์ชันขึ้นไป เบราว์เซอร์อื่นจะถูกละเว้น นี่คือคำจำกัดความง่ายๆ ของการแฮ็ก CSS เพียงเพราะคุณรองรับ Microsoft Edge ใน CSS ไม่ได้หมายความว่าคุณต้องเขียนแฮ็กถึงจะทำเช่นนั้นได้ การสนับสนุนเป็นหัวข้อที่แตกต่างไปจากเดิมอย่างสิ้นเชิง
คุณอาจไม่เห็นด้วยกับข้อความบางส่วนในบทความนี้ แต่ฉันเชื่อว่านักพัฒนาส่วนใหญ่ที่เข้าใจว่าแฮ็กคืออะไรจะเห็นด้วยกับลักษณะทั่วไปข้างต้น
ใน Internet Explorer 7 (IE7) กับ รุ่นก่อนหน้าได้รับการแก้ไขแล้ว จำนวนมากข้อผิดพลาด อย่างไรก็ตาม มีข้อผิดพลาดใหม่ปรากฏขึ้นซึ่งจำเป็นต้องเขียนด้วย รหัสแยกต่างหากสำหรับเบราว์เซอร์เวอร์ชันนี้ ต่อไปนี้เป็นเคล็ดลับสำหรับเบราว์เซอร์ Internet Explorer เวอร์ชันที่ 7
การใช้! กล่าวคือในเวอร์ชันที่ 7 ข้อผิดพลาด !important ได้รับการแก้ไขแล้ว แต่มีอันใหม่ปรากฏขึ้น หากเพิ่มหลังคุณสมบัติโดยคั่นด้วยช่องว่าง เครื่องหมายอัศเจรีย์และชุดอักขระใดๆ คุณสมบัติ style จะได้รับการยอมรับอย่างถูกต้องแทนที่จะละเลย โดยปกติแล้วจะใช้สัญลักษณ์ !ie และเบราว์เซอร์ทั้งหมดยกเว้น IE6 และ IE7 จะข้ามรูปแบบนี้ โปรดทราบว่าการแฮ็กส่งผลให้โค้ด CSS ไม่ถูกต้อง
Khaki .hack ( พื้นหลัง: orange; /* สีส้ม */ พื้นหลัง: green !ie; /* Green color */ padding: 10px; color: #fff; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod ไม่แน่ใจ
ใน ในตัวอย่างนี้ IE6 และ IE7 จะแสดงสีพื้นหลังของบล็อกเป็นสีเขียว ส่วนเบราว์เซอร์อื่นจะแสดงสีส้ม
การใช้งาน!!สำคัญปัญหาอีกประการหนึ่งของ !important ก็คือ IE7 อนุญาตให้ใช้อักขระที่ผิดกฎหมายในรายการได้ เบราว์เซอร์ทั้งหมดจะเพิกเฉยต่อ !!โครงสร้างที่สำคัญ แต่ IE6 และ IE7 มองว่าถูกต้อง การใช้รายการดังกล่าวส่งผลให้ CSS ไม่ถูกต้อง
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Khaki .hack ( พื้นหลัง: orange; /* Orange color */ พื้นหลัง: green !!important; /* Green color */ color: #fff; padding: 10px; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy Nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
ในตัวอย่างนี้ ใน IE6 และ IE7 สีพื้นหลังของบล็อกจะเป็นสีเขียว ในเบราว์เซอร์อื่นจะเป็นสีส้ม
เครื่องหมายดอกจันหน้าชื่อตัวเลือกการเพิ่มเครื่องหมายดอกจัน (*) หน้าชื่อคุณสมบัติสไตล์ขัดต่อข้อกำหนด CSS แต่ Internet Explorer สามารถใช้งานได้จนถึงเวอร์ชัน 7.0 ดังนั้น คุณสมบัติที่มีเครื่องหมายดอกจันอยู่ข้างหน้าจะใช้ได้กับเบราว์เซอร์ตระกูลนี้เท่านั้น
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Khaki .hack ( พื้นหลัง: orange; /* สีส้ม (สำหรับเบราว์เซอร์ทั้งหมด) */ *พื้นหลัง: สีเขียว; /* สีเขียว (สำหรับ IE7 และเบราว์เซอร์ที่ต่ำกว่า) */ color: #fff; padding: 10px; ) Lorem ipsum dolor นั่งตรง...
ในตัวอย่างนี้ สีเขียวพื้นหลังของบล็อกจะถูกตั้งค่าสำหรับอินเทอร์เน็ตเบราว์เซอร์เท่านั้น เวอร์ชันนักสำรวจ 7.0 และต่ำกว่า ในเบราว์เซอร์อื่น สีพื้นหลังจะเป็นสีส้ม
โครงสร้าง *:ลูกคนแรก+htmlโครงสร้าง *:first-child+html ที่เพิ่มก่อนชื่อตัวเลือกใช้งานได้กับ Internet Explorer 7 เท่านั้น ข้อดีคือ เป็นไปตามข้อกำหนด CSS
XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx
Khaki *:first-child+html .hack ( พื้นหลัง: green; /* Green color */ ) .hack ( พื้นหลัง: orange; /* Orange color */ color: #fff; padding: 10px; ) Lorem ipsum dolor sit amet ...
ในตัวอย่างนี้ สีพื้นหลังของบล็อกจะถูกตั้งค่าเป็นสีเขียวสำหรับ IE7 เท่านั้น ในเบราว์เซอร์อื่น สีพื้นหลังจะเป็นสีส้ม
เมื่อใช้เลย์เอาต์เชิงความหมาย นักพัฒนาทุกคนจะประสบปัญหาความเข้ากันได้ข้ามเบราว์เซอร์อย่างแน่นอน ซึ่งในกรณีส่วนใหญ่จำเป็นต้องใช้สิ่งที่เรียกว่า "แฮ็ก" โดยทั่วไป คำนี้หมายถึงวิธีพิเศษในการเขียนตัวเลือกหรือกฎที่เบราว์เซอร์เฉพาะเท่านั้นที่เข้าใจได้ อย่างไรก็ตาม ความเข้ากันได้ของ CSS ในเบราว์เซอร์ส่วนใหญ่ถึงจุดที่ควรจำกัดการใช้แฮ็กแล้ว
ตามกฎแล้ว Internet Explorer เป็นสาเหตุหลักของปัญหา ข้อผิดพลาดต่างๆ ในการใช้งาน CSS เบราว์เซอร์ไมโครซอฟต์สร้างความประหลาดใจให้กับนักออกแบบเลย์เอาต์ที่มีประสบการณ์มากที่สุด ด้วยเหตุนี้ สถานการณ์จึงเกิดขึ้นเมื่อจำเป็นต้องใช้กฎเพิ่มเติมหรือกฎทางเลือกสำหรับ IE ในกรณีเช่นนี้ขอแนะนำให้ใช้แฮ็ก หากคุณต้องการกฎทางเลือกอย่างกะทันหัน เช่น เฉพาะ Firefox เท่านั้น ขอแนะนำให้ตรวจสอบโค้ดของคุณ และใน 99% ของกรณี คุณจะพบวิธีแก้ปัญหาที่หรูหรากว่านี้
แฮ็คที่ได้รับความนิยมมากที่สุดในปัจจุบันยังคงเป็นสิ่งที่เรียกว่า "แฮ็ค html แบบดาว":
#element ( ตำแหน่ง:relative; /* กฎพื้นฐานสำหรับเบราว์เซอร์ทั้งหมด */ ) * HTML #element ( ตำแหน่ง:static; /* กำหนดกฎใหม่สำหรับ IE ที่เก่ากว่าเวอร์ชันที่เจ็ด */ )
ในเอกสาร HTML และ XHMTL ที่ถูกต้อง ตัวเลือก HTML จะมีบทบาทเป็นองค์ประกอบรากเสมอ และ BODY จะเป็นระดับย่อยระดับแรก แต่ไม่ใช่ระดับที่สองขึ้นไป ระดับสูง- ดังนั้น ตามทฤษฎีแล้ว ตัวเลือก "*HTML" ไม่ควรนำไปใช้กับองค์ประกอบใดๆ แต่ในทางปฏิบัติ IE เวอร์ชันห้าและหกเนื่องจากข้อผิดพลาดใน เครื่องยนต์ของตัวเองตีความตัวเลือกที่กำหนดเป็น HTML และใช้กฎที่ระบุ เพราะที่เหลือ. เบราว์เซอร์ที่ทันสมัยตัวเลือก "*HTML" จะถูกละเว้น เทคนิคนี้สามารถนำไปใช้ได้ เพื่อจุดประสงค์ที่เห็นแก่ตัว- สิ่งนี้มีประโยชน์ แต่ถูกต้องหรือไม่
แม้ว่าแฮ็คนี้จะถูกต้องจากมุมมองของมาตรฐาน CSS แต่ก็มีความแตกต่างเชิงลบหลายประการ
จะทำให้เชื่อง Internet Explorer โดยไม่ต้องใช้แฮ็กได้อย่างไร
ทางออกทางเลือกมีวิธีแก้ไขปัญหาที่ดีกว่าในส่วนลึกของ Microsoft Developer Network - . เทคโนโลยีนี้ได้รับการสนับสนุนใน Internet Explorer ตั้งแต่เวอร์ชันที่ 5 เป็นต้นไป จึงครอบคลุมเบราว์เซอร์ทั้งหมดที่เราสนใจ ต่อไปนี้เป็นตัวอย่างของการใช้ความคิดเห็นแบบมีเงื่อนไขที่หรูหรา:
การเชื่อมต่อปกติอย่างไรก็ตาม ไฟล์ CSS จะมีเฉพาะเบราว์เซอร์ตระกูล Internet Explorer เท่านั้นที่จะเห็นบรรทัดที่สอง ดังนั้นจึงจะโหลดไฟล์ CSS สิ่งนี้เกิดขึ้นเนื่องจากเงื่อนไขที่ฝังอยู่ในความคิดเห็นแบบมีเงื่อนไข - หาก IE สภาพนี้หมายถึง “ถ้า Internet Explorer” และ Explorers เวอร์ชันห้าขึ้นไป (รวมถึงเวอร์ชันที่เจ็ดล่าสุด) อ่านโค้ดภายในความคิดเห็นและตีความ
ดังนั้นแฮ็กทั้งหมดของเราจึงสามารถวางไว้ในไฟล์แยกต่างหากได้:
สไตล์.css:
#element ( position:relative; /* กฎพื้นฐานสำหรับเบราว์เซอร์ทั้งหมด */ )
#element ( ตำแหน่ง:คงที่; /* การเอาชนะกฎสำหรับ IE ทุกเวอร์ชัน */ )
ตอนนี้เราไม่ได้ใช้แฮ็กในสไตล์ชีตหลัก ทำให้มั่นใจว่ามีการใช้กฎทางเลือกกับนักสำรวจทุกคน รวมถึงกฎข้อที่เจ็ดด้วย และยังบันทึกผู้ใช้อีกด้วย เบราว์เซอร์สำรองจากการโหลดโค้ดที่ไม่จำเป็น ในเวลาเดียวกัน เรายังคงรักษา (X)HTML และ CSS ของเราให้ใช้งานได้นับตั้งแต่นี้ ความคิดเห็นแบบมีเงื่อนไขไม่ได้รับการยอมรับจากบุคคลอื่นที่ไม่ใช่ IE รวมถึงแม้แต่เครื่องมือตรวจสอบความถูกต้องของ W3C
ความคิดเห็นแบบมีเงื่อนไขมีความยืดหยุ่นมากกว่าตัวอย่างหนึ่งที่แนะนำ คุณสามารถครอบคลุมไม่เพียงแต่นักสำรวจทุกคนเท่านั้น แต่ยังรวมถึงเวอร์ชันที่ต่ำกว่าหรือสูงกว่าเวอร์ชันใดเวอร์ชันหนึ่งหรือเฉพาะเจาะจงด้วย และยังโหลดโค้ดที่เบราว์เซอร์ทั้งหมดจะตีความ ยกเว้น Internet Explorer น่าเสียดายที่นี่เป็นหัวข้อสำหรับบทความแยกต่างหากและผู้อ่านควรทำความคุ้นเคยกับความเป็นไปได้เหล่านี้ด้วยตนเอง
ตำแหน่ง: ญาติ
- ข้อผิดพลาดพื้นหลังรายการ IE/Win ที่หายไป
- IE6 ความวุ่นวายชายแดน
กฎข้อนี้มักใช้กับบล็อกที่หายไปเองตามธรรมชาติ ไม่ล้มหรือแสดงไม่ถูกต้องแต่หายไป Internet Explorer 5.0 มีความผิดในเรื่องนี้เป็นพิเศษ
ส่วนสูง: 1%
- Jog ข้อความสามพิกเซล IE6
- ข้อผิดพลาด IE Escape Floats
- IE และตัวเอียง (ระวัง 5.0 ใช้ Escape)
- IE/Win ข้อผิดพลาดเนื้อหาที่ไม่สามารถเลื่อนได้
- IE/ชนะข้อผิดพลาดกิโยติน
ยังใช้สำหรับล้างองค์ประกอบ ตั้งเป็นภาชนะที่มีทุ่นลอย
จอแสดงผล: อินไลน์
- โฟลต ระยะขอบ และ IE
- ข้อผิดพลาด Float-Margin ของ IE สองเท่า
จอแสดงผล: อินไลน์บล็อก
- เปอร์เซ็นต์ที่แปลกประหลาดในโมเดลการจัดรูปแบบภาพของ IE6
- ความสูงแบบอะนาล็อก: 1% สำหรับ IE 7
และเคล็ดลับเพิ่มเติมอีกสองสามข้อ:
ขั้นแรก ให้ใช้กฎเหล่านี้กับ IE หากเป็นไปได้เท่านั้น และสำหรับ รุ่นที่แตกต่างกันวิธีแก้ไขอาจแตกต่างกันไป (มักใช้กับความสูง: 1% และการซูม: 1)
ประการที่สอง เมื่อต้องเผชิญกับพฤติกรรมที่ไม่พึงประสงค์ของ Explorer ซึ่งไม่มีคำอธิบายเป็นเอกสาร (หรือคุณขี้เกียจเกินไปที่จะค้นหา) ให้ลองใช้กฎทั้งหมดที่ส่งผลต่อคุณสมบัติ hasLayout กับองค์ประกอบที่มีปัญหาตามลำดับ วิธีค้นหาตามลำดับมักใช้ในอาชีพของเรา
ในโพสต์นี้ ฉันพยายามรวบรวมแฮ็ก CSS ทั้งหมดที่ฉันรู้จัก หลายคนอาจสงสัยว่าพวกเขาต้องการเบราว์เซอร์สมัยใหม่ทั่วไปเนื่องจากแฮ็กส่วนใหญ่มักจะใช้กับ IE เท่านั้น แต่โพสต์นี้เหมาะสำหรับผู้ที่อยากรู้อยากเห็นมากกว่า :) โดยทั่วไปแล้วจะเป็นการดีกว่าที่จะไม่ใช้แฮ็กในเลย์เอาต์ แต่ไม่ทางใดก็ทางหนึ่ง เนื่องจากมีสิ่งเหล่านี้อยู่ การไม่รู้เกี่ยวกับพวกมันจึงเป็นบาป
ต่างจากแฮ็กจำนวนมากสำหรับ Opera เดียวกันซึ่ง Safari จะดำเนินการเช่นกัน ฉันเปลี่ยนโค้ดเล็กน้อยและ Opera 9.2, Opera 9.5 และ Safari 3 จะเห็น css แต่ละตัว
ฉันสร้างไฟล์ css ที่จะแสดงหรือซ่อน div ในเนื้อความของเอกสารที่สอดคล้องกับเบราว์เซอร์ เพื่อให้คุณสามารถติดตามได้อย่างง่ายดายว่าทุกอย่างโอเคกับการแฮ็กหรือไม่
เบราว์เซอร์ ( ตำแหน่ง: สัมบูรณ์; บน: px; ขวา: px; z-index: 2; padding: 10px ) .browser div ( จอแสดงผล: none ) /* เบราว์เซอร์ที่มีสติทั้งหมด */ *:lang(ru) #lightMOD ( จอแสดงผล: block ) /* ตัวเลือกที่ยุ่งยาก - เบราว์เซอร์สมัยใหม่ทั้งหมด - ไม่ใช่ IE6 หรือ IE7 */ html>/**/body #lightMOD ( display: block ) /* ความคิดเห็นที่ฝังไว้ - เบราว์เซอร์สมัยใหม่ทั้งหมด - ไม่ใช่ IE6 หรือ IE7 */ /* IE * /* html #lightIE6 ( display: block ) /* การแยกวิเคราะห์ความภักดี - จะทำงานใน IE6 และในโหมดแปลก ๆ ใน IE7 */ *+html #lightIE7 ( display: block ) body div.stopper ( width: 100%; max-width : 1100px; min-width: 900px; *width: expression(document.body.clientWidth > 1100? "1100px": document.body.clientWidth< 900? «900px»: «100%»); /* оверрайд одного свойства - в данном случае это эмуляция min- и max-width */ } /* FireFox */ @-moz-document url-prefix() { /* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */ #lightFF, x:-moz-any-link { display: block } /* главное - ошибиться в регистре, работает только для ID */ #lightFF2 { display: block } /* Firefox 3 имеет новый селектор:default. Алярм, без обрамления IE поймет эту конструкцию */ #lightFF3, x:-moz-any-link, x:default { display: block } } /* Opera 9.5 */ /* not после @media не обрабатывается ничем, кроме Opera 9.5 - видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */ @media not all and (-webkit-min-device-pixel-ratio) { #lightO95 { display: block } } /* Opera 9.2 */ /* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает - тоже рекомендуется быть внимательным */ @media all and (scan: progressive) { #lightO92 { display: block } } /* Safari */ /* Первая конструкция - против Opera 9.5, которая понимает вторую, а вторая - против Opera 9.2, которая понимает первую. Верх извратства 🙂 Вобщем-то การออกแบบที่ปลอดภัย, เพราะ 9.2 จะไม่พัฒนาอีกต่อไปและเห็นได้ชัดว่าจะไม่สามารถจัดการได้: เป็นรุ่นแรกและ -webkit- เป็นทรัพย์สินที่เป็นกรรมสิทธิ์และประมวลผลโดย Opera 9.2 แทนที่จะเป็นความผิดพลาด ซึ่งตามมาจากการไม่มีการสนับสนุนใน 9.5 */ / * Safari เข้าใจทั้งสองอย่าง ดังนั้นแฮ็คจึงใช้งานได้ */ @media all และ (-webkit-min-device-pixel-ratio:0) ( body:first-of-type #lightSF3 ( display: block ) /* แทน:first -of-type คุณยังสามารถใช้:nth- of-type(1) - สำหรับ Safari 3.1 */ )
ฉันได้เน้นโค้ดไม่มากก็น้อย...
ยังไม่มีการแฮ็กสำหรับ IE8 หรือมันจะดีจริงๆ 😉 ซึ่งโดยส่วนตัวแล้วฉันสงสัยว่า... MS กำลังจะแนะนำคุณสมบัติ -ms- (ฉันเคยเห็นหนึ่งในนั้นด้วยซ้ำ -ms-box- แบบจำลองด้วยตาของฉันเอง) โดยทั่วไปเส้นทางนั้นถูกต้อง - "คราด" ดังกล่าวปลอดภัยที่สุด
คุณสามารถดูการทำงานได้ที่ http://test.dis.dj/css/ (ทางด้านขวาจะมีบล็อกที่มีเอาต์พุตที่แฮ็กใช้งานได้)
ตามที่ระบุไว้อย่างถูกต้องในความคิดเห็น เป็นการดีที่จะอธิบายสาระสำคัญของปัญหาเพิ่มเติม ดังนั้นแฮ็กคืออะไรและเหตุใดจึงมีอยู่และผลที่ตามมาของการใช้งานคืออะไร
แฮ็กทั้งหมดสามารถแบ่งออกเป็นหลายประเภท:
การแฮ็กกลุ่มแรกทำให้เกิด CSS ที่ไม่ถูกต้อง และโดยทั่วไปจะใช้งานได้อย่างปลอดภัย ไม่จำเป็นต้องประมวลผลโค้ดที่คดเคี้ยว ดังนั้นเบราว์เซอร์ที่มีสติจึงพลาดสิ่งเหล่านี้และจะยังคงทำเช่นนั้นต่อไป โดย อย่างน้อยเนื่องจาก MS เองไม่ได้ประมวลผลแฮ็กส่วนใหญ่ในโหมดมาตรฐานแม้แต่ IE 7 คุณจึงไม่ต้องกังวลกับอนาคต (แฮ็ก) ของพวกเขา
กลุ่มที่สองอาจจะมากที่สุด ตัวเลือกที่ปลอดภัย- เว้นแต่นักพัฒนาจะตัดสินใจละทิ้งนวัตกรรมของตนเองกะทันหัน
กลุ่มที่สามเป็นจุดร้ายกาจและไม่พึงประสงค์ที่สุด โครงสร้าง CSS Media Query เป็น CSS3 อย่างเป็นทางการที่เบราว์เซอร์ทั้งหมดจะรองรับไม่ช้าก็เร็ว แนะนำให้ใช้ตัวเลือกที่ยุ่งยากหลายอย่างอย่างเป็นทางการ ดังนั้นอาจมีเวลาที่แฮ็กสำหรับเบราว์เซอร์หนึ่งจะถูกผู้อื่นตีความด้วยเช่นกัน ตัวอย่างที่โดดเด่น- โอเปร่าและซาฟารี ทั้งสองได้รับการสนับสนุนบางส่วนและแตกต่างกันในรายละเอียดเล็กน้อย แม้ว่าจะต้องขอบคุณที่ทำให้สามารถแยกกฎสำหรับพวกเขาได้ บางครั้งข้อผิดพลาดหรือไวยากรณ์ที่ไม่ถูกต้องอาจเกิดขึ้นโดยเจตนาในเวอร์ชันกึ่งแฮ็กนี้ (เช่นในกรณีของ Opera 9.5) แน่นอนว่าสิ่งนี้จะปกป้องคุณจากเวอร์ชันใหม่ได้ในระดับหนึ่ง แต่ก็ยังไม่ใช่วิธีที่ดี
รปภ. แฮ็กสำหรับ IE8: /*/ #nav a (position:relative;) /**/
ดีไม่ดี
