คุณสมบัติ CSS ที่ใช้งานได้จริงสิบประการที่ไม่สนับสนุน

1. โครงร่าง
เมื่อทำการดีบักปัญหา CSS ฉันมักจะเพิ่มเส้นขอบให้กับองค์ประกอบที่ระบุเพื่อดูว่าเกิดอะไรขึ้นกับองค์ประกอบและช่วยกำหนดแหล่งที่มาของปัญหา สิ่งนี้มักจะมีประสิทธิภาพเพราะมันทำให้ฉันมีทัศนวิสัยที่เฉพาะเจาะจงมากขึ้นในรูปแบบ แต่ถ้ามันเป็นองค์ประกอบระดับบล็อกสิ่งนี้อาจทำให้เกิดข้อผิดพลาดบางอย่าง-การเพิ่มเส้นขอบ 1px ลงในองค์ประกอบระดับบล็อกใด ๆ ส่วนใหญ่จะส่งผลกระทบต่อเลย์เอาต์ซึ่งจะเพิ่ม 2px พิเศษลงในความกว้างขององค์ประกอบนี้
คุณสมบัติโครงร่างเป็นทางเลือกที่สมบูรณ์แบบเพราะมันทำให้วัตถุโดยไม่ส่งผลกระทบต่อการไหลของเอกสาร อย่างไรก็ตาม IE6 และ IE7 ไม่รองรับแอตทริบิวต์โครงร่างดังนั้นจึงไม่สามารถใช้สำหรับการดีบักในเบราว์เซอร์ทั้งสอง
2. สืบทอด (ค่า)
มีตัวอย่างมากมายในการพัฒนา CSS: "สืบทอด" คุณสมบัติที่เพิ่มเข้ามาทั้งหมดขององค์ประกอบหลักโดยการตั้งค่าสไตล์บางอย่างในองค์ประกอบเฉพาะดังนั้นคุณสามารถหลีกเลี่ยงการป้อนข้อมูลคีย์บอร์ดได้ค่อนข้างมาก
สิ่งนี้สามารถทำได้อย่างง่ายดายโดยการตั้งค่ามรดก สิ่งนี้มีประโยชน์ ตัวอย่างเช่นเมื่อเขียนแอตทริบิวต์พื้นหลังใหม่มักจะมีข้อความมากมายในแอตทริบิวต์ (สีที่อยู่ URL ตำแหน่ง ฯลฯ ) ดังนั้นแทนที่จะเขียนค่าเหล่านี้ใหม่คุณอาจต้องการพิจารณาว่าองค์ประกอบในกระบวนการมีคุณสมบัติพื้นหลังเหมือนกับองค์ประกอบหลักของพวกเขาค่าสืบทอดสามารถทำทุกอย่าง - ซึ่งช่วยประหยัดคีย์บอร์ดได้อย่างชัดเจน
น่าเสียดายที่ไม่ได้รับการสนับสนุนค่ามรดกใน IE6 และ IE7 (ยกเว้นทิศทาง (การวางแนวข้อความ) และคุณสมบัติการมองเห็น)
3. เซลล์ว่างเปล่า
คุณสมบัตินี้ใช้สำหรับองค์ประกอบที่มีตารางหรือ "แสดง" คุณสมบัติถูกตั้งค่าเป็น "ตารางเซลล์" หากคุณเพิ่มเนื้อหาลงในตารางแบบไดนามิกคุณอาจพบเนื้อหาที่ว่างเปล่าของเซลล์และจากนั้นคุณไม่ต้องการให้เซลล์เปล่าซ่อนอยู่
การใช้ "เซลล์ว่าง: ซ่อน" สามารถแก้ปัญหานี้ได้ซึ่งจะซ่อนเซลล์ที่อาจเกิดขึ้นได้อย่างสมบูรณ์
Internet Explorer ไม่รองรับแอตทริบิวต์เซลล์ว่าง
4. คำบรรยายด้านข้าง
เมื่อพูดถึงแอตทริบิวต์ของตารางคุณลักษณะนี้ใช้เพื่อประกาศชื่อตารางที่แสดงในแถบด้านข้างของตาราง มันยอมรับค่าสี่ค่า: ด้านบน, ล่างซ้ายและขวา Internet Exporer ไม่รองรับคุณสมบัตินี้ชื่อของตารางจะปรากฏที่ด้านบนของตารางใน IE6 และ IE7 เสมอ
5. การตอบโต้ / เคาน์เตอร์รีเซ็ต
รายการที่สั่งซื้อ (<ol>) สะดวกมากเพราะช่วยให้คุณประหยัดความยุ่งยากในการเพิ่มตัวเลขที่เพิ่มขึ้นด้วยตนเองและช่วยให้คุณเปลี่ยนลำดับของรายการโดยไม่ต้องเปลี่ยนตัวเลข
CSS มีคุณสมบัติการตอบโต้และตัวนับรีเซ็ตซึ่งช่วยให้คุณสามารถสร้างตัวเลขที่เพิ่มขึ้นได้โดยอัตโนมัติไปยังองค์ประกอบ HTML เกือบทั้งหมดเช่นเดียวกับผลกระทบของรายการที่สั่งซื้อ
แต่ IE6, IE7 และแม้แต่ Safari (จนถึงเวอร์ชัน 3.x) ไม่สนับสนุนคุณสมบัติเหล่านี้ แน่นอนว่า IE6 ไม่สนับสนุน: ก่อนองค์ประกอบหลอก
6. ความสูงต่ำสุด
บางครั้งการออกแบบหรือเค้าโครงของเว็บไซต์ต้องใช้พื้นที่เนื้อหาที่มีความสูงคงที่มิฉะนั้นเอฟเฟกต์ภาพเฉพาะจะหายไป นี่อาจเป็นเพราะพื้นหลังการไล่ระดับสีรายการดรอปดาวน์ที่ไม่ซ้ำกันหรืออาจเป็นเพราะเอฟเฟกต์เรืองแสงเย็นจาก PS แต่บางครั้งมีเนื้อหาจำนวนมากในหน้า แต่หน้าไม่สามารถขยายได้ตามที่คาดไว้
ในเวลานี้คุณต้องใช้แอตทริบิวต์ความสูงขั้นต่ำเพราะสามารถบอกได้ว่าเบราว์เซอร์ให้ความสูงต่ำสุดในองค์ประกอบระดับบล็อกเฉพาะโดยไม่คำนึงว่าความสูงที่แท้จริงของเนื้อหาถึงความสูงต่ำสุดนี้หรือไม่ จากนั้นหากเนื้อหาเกินความสูงขั้นต่ำองค์ประกอบจะขยายตัวปานกลาง
สิ่งเดียวที่ควรทราบด้วยความสูงขั้นต่ำคือมันไม่ได้รับการสนับสนุนใน IE6 เราทุกคนรู้ว่า IE6 กำลังออกจากเวทีประวัติศาสตร์ (ช้า) แต่ลูกค้าบางคนอาจขอให้เว็บไซต์ของพวกเขาสนับสนุนเบราว์เซอร์แช่งนี้
แต่มันก็ดีที่ IE6 ให้คุณค่าของความสูงในลักษณะเดียวกับเบราว์เซอร์อื่น ๆ ที่ให้ "ความสูงต่ำ" ดังนั้นคุณต้องแฮ็คหรือสไตล์ชีทอิสระสำหรับ IE6 เพื่อเพิ่มสไตล์ชีทเฉพาะให้กับองค์ประกอบนั้น
IE6 ยังเพิกเฉยต่อความกว้างขั้นต่ำความสูงสูงสุดและความกว้างสูงสุด แต่วิธีการข้างต้นก็เป็นไปได้ในคุณสมบัติเหล่านี้
7.: โฮเวอร์
ในทางเทคนิค: โฮเวอร์เป็นเพียงระดับหลอก แต่ไม่ได้รับการสนับสนุนใน IE6 (สนับสนุนโดย IE7 และ IE8) : Hover Pseudo-Class ช่วยให้คุณสามารถเพิ่มสไตล์เมาส์ใด ๆ ลงในองค์ประกอบ สิ่งนี้มีประโยชน์มากและสามารถหลีกเลี่ยงได้ (อย่างน้อยก็ในระดับหนึ่ง) โดยใช้ JavaScript
อย่างไรก็ตามหากเว็บไซต์ของคุณต้องการสนับสนุน IE6 อย่างเต็มที่โดยเฉพาะอย่างยิ่งในประเทศจีนที่ IE6 เต็มไปด้วยพลังคุณต้องพิจารณายกเลิกการใช้งาน Pseudo-Class นี้เว้นแต่แท็กที่เกี่ยวข้องมีแอตทริบิวต์ "href" เช่นแท็ก <a> . และหากผลกระทบนี้เกิดขึ้นได้อาจจำเป็นต้องใช้ JavaScript และสไตล์เพิ่มเติม
8. แสดง
การแสดงผลมักจะตั้งค่าเป็นหนึ่งในสามค่านี้: บล็อก, อินไลน์และไม่มี "ต้องขอบคุณ IE ค่าแสดงอื่น ๆ ที่ไม่ค่อยได้ใช้ ค่าเหล่านี้รวมถึง Inline-Block, Table, Inline-Table และ Table-Cell
ดังนั้นแม้ว่า IE จะสนับสนุนคุณสมบัติพื้นฐานทั้งสามนี้ของการแสดงผล แต่โดยทั่วไปไม่รองรับคุณสมบัติอื่น ๆ
อันที่จริงการสนับสนุนคุณสมบัติของ IE8 สำหรับการแสดงผลค่อนข้างสมบูรณ์ อย่างไรก็ตามสำหรับแอตทริบิวต์อินไลน์บล็อก IE6/7 รองรับองค์ประกอบที่เป็นอินไลน์เท่านั้น
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสนับสนุนของ Display ในเบราว์เซอร์ต่างๆโปรดดูที่สิ่งนี้ - Shenfei Note
9. คลิป
นี่เป็นคุณลักษณะ CSS ที่น่าสนใจที่มีประโยชน์ในกรณีพิเศษ มันอาจจะรวมกับเนื้อหาที่คาดเดาไม่ได้และสร้างขึ้นแบบไดนามิก เพียงแค่ใส่คุณสมบัตินี้ช่วยให้คุณระบุพื้นที่ที่ซ่อนอยู่ในองค์ประกอบเฉพาะ - มันสามารถเข้าใจได้ว่าในองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนพื้นที่แสดงผลขององค์ประกอบจะถูกตัดตามการตั้งค่าบางอย่างและเนื้อหาที่อยู่นอกเหนือพื้นที่นั้นจะ ถูกซ่อนไว้
ในทางเทคนิคการพูดแอตทริบิวต์คลิปได้รับการสนับสนุนโดย IE แต่รองรับไวยากรณ์ที่ปราศจากเครื่องหมายจุลภาคเช่น
div.clipped {
ช่องว่าง: 20px;
ความกว้าง: 400px;
ความสูง: 400px;
คลิป: rect (20px 300px 200px 100px);
ตำแหน่ง: สัมบูรณ์;
-

สไตล์ข้างต้น (คุณสมบัติในวงเล็บหลังจากที่ไม่มีการคั่นด้วยเครื่องหมายจุลภาค) สามารถเรียกใช้ในเบราว์เซอร์ส่วนใหญ่ แต่อาจไม่ผ่านการตรวจสอบ CSS เนื่องจากคำสั่งไม่ได้คั่นด้วยเครื่องหมายจุลภาค
10.: โฟกัส
นี่เป็นอีกระดับหลอกที่ต้องกล่าวถึงที่นี่เพราะเบราว์เซอร์ที่ไม่ใช่ทั้งหมดสนับสนุนคุณสมบัตินี้ : โฟกัส Pseudo-Class ช่วยให้คุณสามารถประกาศสไตล์พิเศษได้ สิ่งนี้มีประโยชน์มากในองค์ประกอบแบบฟอร์มเพราะคุณสามารถเพิ่มเส้นขอบในกล่องอินพุตเมื่อเลือก