คู่มือการรองรับ CSS ในเบราว์เซอร์

เราจะไม่อยู่ในโลกที่ทุกคนที่ดูไซต์ของเรามีเบราว์เซอร์และเวอร์ชันเบราว์เซอร์เหมือนกัน เช่นเดียวกับที่เราจะไม่อยู่ในโลกที่ทุกคนมีหน้าจอขนาดและความละเอียดเท่ากัน ซึ่งหมายความว่าการจัดการกับเบราว์เซอร์เก่า — หรือเบราว์เซอร์ที่ไม่สนับสนุนสิ่งที่เราต้องการใช้ — เป็นส่วนหนึ่งของงานของนักพัฒนาเว็บ ที่กล่าวว่าตอนนี้สิ่งต่างๆ ดีขึ้นกว่าเมื่อก่อนมาก และในบทความนี้ ฉันจะมาดูปัญหาการสนับสนุนเบราว์เซอร์ประเภทต่างๆ ที่เราอาจพบ ผมจะแสดงให้คุณเห็นถึงวิธีจัดการกับมัน และดูสิ่งต่าง ๆ ที่อาจช่วยได้ในเร็วๆ นี้

ทำไมเราถึงมีความแตกต่างเหล่านี้?

แม้ในโลกที่เบราว์เซอร์ส่วนใหญ่ใช้ Chromium เบราว์เซอร์เหล่านั้นไม่ได้ใช้งาน Chromium เวอร์ชันเดียวกันกับ Google Chrome ทั้งหมด ซึ่งหมายความว่าเบราว์เซอร์ที่ใช้ Chromium เช่น Vivaldi อาจเป็นรุ่นหลัง Google Chrome บางรุ่น

และแน่นอนว่า ผู้ใช้ไม่ได้อัปเดตเบราว์เซอร์ของตนอย่างรวดเร็วเสมอไป แม้ว่าสถานการณ์ดังกล่าวจะดีขึ้นในช่วงไม่กี่ปีที่ผ่านมาโดยเบราว์เซอร์ส่วนใหญ่อัปเกรดตัวเองอย่างเงียบๆ

นอกจากนี้ยังมีลักษณะที่คุณสมบัติใหม่เข้าสู่เบราว์เซอร์ตั้งแต่แรก ไม่ใช่กรณีที่คุณสมบัติใหม่สำหรับ CSS ได้รับการออกแบบโดย CSS Working Group และข้อมูลจำเพาะที่สมบูรณ์ส่งไปยังผู้ขายเบราว์เซอร์พร้อมคำแนะนำในการใช้งาน บ่อยครั้งจะเกิดขึ้นก็ต่อเมื่อมีการใช้งานแบบทดลองเท่านั้นที่รายละเอียดปลีกย่อยทั้งหมดของข้อมูลจำเพาะสามารถทำงานได้ ดังนั้น การพัฒนาคุณลักษณะจึงเป็นกระบวนการที่ทำซ้ำๆ และต้องการให้เบราว์เซอร์นำข้อกำหนดเหล่านี้ไปใช้ในการพัฒนา แม้ว่าการใช้งานจะเกิดขึ้นในทุกวันนี้โดยส่วนใหญ่จะอยู่หลังแฟล็กในเบราว์เซอร์ หรือมีเฉพาะใน Nightly หรือเวอร์ชันแสดงตัวอย่างเท่านั้น เมื่อเบราว์เซอร์มีคุณสมบัติครบถ้วนแล้ว ก็มักจะเปิดให้ทุกคนใช้งานได้แม้ว่าจะยังไม่มีเบราว์เซอร์อื่นที่รองรับก็ตาม

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

ข้อบกพร่องกับการขาดการสนับสนุน

มีสามประเด็นที่เราเผชิญเกี่ยวกับการสนับสนุนเบราว์เซอร์:

1. ไม่รองรับคุณสมบัติ
   ปัญหาแรก (และง่ายที่สุดในการจัดการ) คือเมื่อเบราว์เซอร์ไม่สนับสนุนคุณลักษณะนี้เลย
2. การจัดการกับ "บั๊ก" ของเบราว์เซอร์
   ประการที่สองคือเมื่อเบราว์เซอร์อ้างว่าสนับสนุนคุณลักษณะนี้ แต่ดำเนินการในลักษณะที่แตกต่างจากที่เบราว์เซอร์อื่นสนับสนุนคุณลักษณะนี้ ปัญหาดังกล่าวคือสิ่งที่เรามักจะเรียกว่า "บั๊กของเบราว์เซอร์" เพราะผลลัพธ์ที่ได้คือพฤติกรรมที่ไม่สอดคล้องกัน
3. การสนับสนุนบางส่วนของคุณสมบัติ CSS
   สิ่งนี้กำลังกลายเป็นเรื่องธรรมดามากขึ้น สถานการณ์ที่เบราว์เซอร์รองรับคุณสมบัติ — แต่อยู่ในบริบทเดียวเท่านั้น

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

1. ไม่รองรับคุณสมบัติ

หากคุณใช้คุณสมบัติ CSS หรือค่าที่เบราว์เซอร์ไม่เข้าใจ เบราว์เซอร์จะละเว้น สิ่งนี้จะเหมือนกันไม่ว่าคุณจะใช้คุณสมบัติที่ไม่ได้รับการสนับสนุน หรือสร้างคุณสมบัติขึ้นมาแล้วลองใช้มัน หากเบราว์เซอร์ไม่เข้าใจบรรทัดของ CSS นั้น ก็ข้ามไปและดำเนินการในสิ่งต่อไปที่เข้าใจ

หลักการออกแบบ CSS นี้หมายความว่าคุณสามารถใช้คุณลักษณะใหม่ได้อย่างสนุกสนาน โดยรู้ว่าจะไม่มีอะไรเลวร้ายเกิดขึ้นกับเบราว์เซอร์ที่ไม่ได้รับการสนับสนุน สำหรับ CSS บางตัว ใช้เพื่อเพิ่มประสิทธิภาพเท่านั้น นั่นคือทั้งหมดที่คุณต้องทำ ใช้คุณสมบัตินี้ ตรวจสอบให้แน่ใจว่าเมื่อคุณสมบัตินั้นไม่พร้อมใช้งาน ประสบการณ์นั้นยังคงดีอยู่ และนั่นคือทั้งหมด แนวทางนี้เป็นแนวคิดพื้นฐานที่อยู่เบื้องหลังการเพิ่มประสิทธิภาพแบบก้าวหน้า โดยใช้คุณลักษณะนี้ของแพลตฟอร์มซึ่งทำให้สามารถใช้สิ่งใหม่ๆ ในเบราว์เซอร์ที่ไม่เข้าใจสิ่งเหล่านั้นได้อย่างปลอดภัย

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

CSS ใหม่เข้าใจ CSS แบบเก่า

เนื่องจากมีการพัฒนาคุณลักษณะ CSS ใหม่ จึงต้องคำนึงถึงวิธีที่คุณลักษณะเหล่านี้โต้ตอบกับ CSS ที่มีอยู่ ตัวอย่างเช่น ในข้อกำหนด Grid และ Flexbox มีรายละเอียดในแง่ของวิธีการ display: grid และ display: flex จัดการกับสถานการณ์ต่างๆ เช่น เมื่อรายการ floated กลายเป็นรายการกริด หรือคอนเทนเนอร์ multicol ถูกเปลี่ยนเป็นกริด ซึ่งหมายความว่าระบบจะละเว้นการทำงานบางอย่าง ช่วยให้คุณเขียนทับ CSS สำหรับเบราว์เซอร์ที่ไม่สนับสนุนได้ง่ายๆ การแทนที่เหล่านี้มีรายละเอียดอยู่ในหน้าสำหรับการปรับปรุงแบบก้าวหน้าและเค้าโครงกริดบน MDN

การตรวจจับการสนับสนุนด้วยการสืบค้นข้อมูลคุณสมบัติ

วิธีการข้างต้นใช้ได้ก็ต่อเมื่อ CSS ที่คุณต้องการใช้ไม่ต้องการคุณสมบัติอื่นร่วมด้วย คุณอาจต้องเพิ่มคุณสมบัติเพิ่มเติมให้กับ CSS สำหรับเบราว์เซอร์รุ่นเก่า ซึ่งจะถูกตีความโดยเบราว์เซอร์ที่รองรับคุณสมบัตินี้ด้วย

ตัวอย่างที่ดีของสิ่งนี้สามารถพบได้เมื่อใช้ Grid Layout แม้ว่ารายการแบบลอยตัวซึ่งกลายเป็นรายการกริดจะสูญเสียลักษณะการทำงานแบบลอยตัวทั้งหมด แต่มีแนวโน้มว่าหากคุณพยายามสร้างทางเลือกสำรองสำหรับเลย์เอาต์กริดด้วยทุ่น คุณจะเพิ่มความกว้างเป็นเปอร์เซ็นต์และอาจเป็นระยะขอบของรายการ

 .grid > .item { width: 23%; margin: 0 1%; } 

ความกว้างและระยะขอบเหล่านี้จะยังคงใช้เมื่อรายการที่ลอยเป็นรายการกริด ความกว้างจะกลายเป็นเปอร์เซ็นต์ของแทร็กกริดแทนที่จะเป็นความกว้างเต็มของคอนเทนเนอร์ มาร์จิ้นใด ๆ จะถูกนำไปใช้รวมถึงช่องว่างที่คุณอาจระบุไว้

 .grid > .item { width: 23%; margin: 0 1%; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } 

โชคดีที่มีคุณสมบัติใน CSS และนำไปใช้กับเบราว์เซอร์สมัยใหม่ ซึ่งช่วยให้เราจัดการกับสถานการณ์นี้ได้ การสืบค้นข้อมูลคุณสมบัติช่วยให้เราถามเบราว์เซอร์ได้โดยตรงว่าพวกเขาสนับสนุนอะไร จากนั้นจึงดำเนินการตอบกลับ เช่นเดียวกับ Media Query ซึ่งทดสอบคุณสมบัติบางอย่างของอุปกรณ์หรือหน้าจอ — Feature Queries จะทดสอบการสนับสนุนคุณสมบัติและค่า CSS

ทดสอบการสนับสนุน

การทดสอบการสนับสนุนเป็นกรณีที่ง่ายที่สุด เราใช้ @supports จากนั้นทดสอบคุณสมบัติและค่า CSS เนื้อหาภายในการสืบค้นข้อมูลคุณลักษณะจะทำงานก็ต่อเมื่อเบราว์เซอร์ตอบสนองด้วยความจริงเท่านั้น กล่าวคือ สนับสนุนคุณลักษณะดังกล่าว

ทดสอบโดยไม่มีการสนับสนุน

คุณสามารถถามเบราว์เซอร์ว่าไม่รองรับคุณสมบัติหรือไม่ ในกรณีนี้ โค้ดในคิวรี่คุณลักษณะจะทำงานก็ต่อเมื่อเบราว์เซอร์ระบุว่าไม่มีการสนับสนุน

 @supports not (display: grid) { .item { /* CSS from browsers which do not support grid layout */ } }

ทดสอบหลายสิ่ง

หากคุณต้องการสนับสนุนคุณสมบัติมากกว่าหนึ่งรายการ ให้ใช้ and

 @supports (display: grid) and (shape-outside: circle()){ .item { /* CSS from browsers which support grid and CSS shapes */ } }

หากคุณต้องการการสนับสนุนจากพร็อพเพอร์ตี้อย่างใดอย่างหนึ่ง ให้ใช้ or

 @supports (display: grid) or (display: flex){ .item { /* CSS from browsers which support grid or flexbox */ } }

การเลือกทรัพย์สินและมูลค่าเพื่อทดสอบ

คุณไม่จำเป็นต้องทดสอบพร็อพเพอร์ตี้ทุกแห่งที่คุณต้องการใช้ เป็นเพียงบางอย่างที่จะบ่งชี้ถึงการรองรับฟีเจอร์ที่คุณวางแผนจะใช้ ดังนั้น หากคุณต้องการใช้ Grid Layout คุณอาจทดสอบ display: grid ในอนาคต (และเมื่อ sub-grid รองรับในเบราว์เซอร์) คุณอาจต้องเจาะจงมากขึ้นและทดสอบฟังก์ชัน sub-grid ในกรณีนั้น คุณจะต้องทดสอบ grid-template-columns: subgrid เพื่อรับการตอบสนองที่แท้จริงจากเบราว์เซอร์เหล่านั้นเท่านั้นที่มีการสนับสนุน sub-grid

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

 .grid > .item { width: 23%; margin: 0 1%; } @supports(display: grid) { .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 1%; } .grid > .item { width: auto; margin: 0; } } 

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

โอบกอดน้ำตก

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

ก่อนอื่น คุณต้องเขียน CSS สำหรับเบราว์เซอร์ที่ไม่สนับสนุนคุณลักษณะนี้ จากนั้นทดสอบการสนับสนุนของพร็อพเพอร์ตี้ที่คุณต้องการใช้ หากเบราว์เซอร์ยืนยันว่าสนับสนุนให้เขียนทับโค้ดสำรองด้วยโค้ดใหม่ของคุณ

นี่เป็นขั้นตอนเดียวกับที่คุณอาจใช้เมื่อใช้คิวรีสื่อสำหรับการออกแบบที่ตอบสนองตามแนวทางที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก ในแนวทางนั้น คุณเริ่มต้นด้วยการจัดวางสำหรับหน้าจอขนาดเล็ก จากนั้นเพิ่มหรือเขียนทับสิ่งต่าง ๆ สำหรับหน้าจอที่ใหญ่ขึ้นเมื่อคุณเลื่อนขึ้นผ่านเบรกพอยต์ของคุณ

ฉันสามารถใช้แบบสอบถามคุณลักษณะ CSS ได้หรือไม่ ข้อมูลเกี่ยวกับการรองรับ CSS Feature Queries ในเบราว์เซอร์หลักๆ จาก caniuse.com

วิธีการทำงานข้างต้นหมายความว่าคุณไม่จำเป็นต้องกังวลเกี่ยวกับเบราว์เซอร์ที่ไม่สนับสนุนการสืบค้นข้อมูลคุณลักษณะ ดังที่คุณเห็นจาก Can I Use การค้นหาฟีเจอร์ได้รับการสนับสนุนที่ยอดเยี่ยมจริงๆ เบราว์เซอร์ที่โดดเด่นที่ไม่สนับสนุนให้เป็น Internet Explorer เวอร์ชันใดๆ

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

1. เบราว์เซอร์ที่รองรับการสืบค้นข้อมูลคุณสมบัติจะคืนค่าเป็นจริงหากมีการรองรับ ดังนั้นรหัสภายในแบบสอบถามจะถูกใช้ แทนที่รหัสสำหรับเบราว์เซอร์รุ่นเก่า
2. หากเบราว์เซอร์รองรับการสืบค้นข้อมูลฟีเจอร์แต่ไม่รองรับฟีเจอร์ที่กำลังทดสอบ ระบบจะคืนค่าเป็นเท็จ รหัสภายในแบบสอบถามคุณลักษณะจะถูกละเว้น
3. หากเบราว์เซอร์ไม่รองรับการสืบค้นข้อมูลคุณลักษณะ ทุกอย่างภายในบล็อกการสืบค้นคุณลักษณะจะถูกละเว้น ซึ่งหมายความว่าเบราว์เซอร์เช่น IE11 จะใช้รหัสเบราว์เซอร์เก่าของคุณ ซึ่งมีแนวโน้มว่าจะเป็นสิ่งที่คุณต้องการอย่างแน่นอน!

2. การจัดการกับบราวเซอร์ “บั๊ก”

โชคดีที่ปัญหาการสนับสนุนเบราว์เซอร์ที่สองกำลังเป็นที่นิยมน้อยลง หากคุณอ่าน “สิ่งที่เราปรารถนา” (เผยแพร่เมื่อปลายปีที่แล้ว) คุณจะได้ทัวร์ชมข้อบกพร่องของเบราว์เซอร์ที่ทำให้งงในอดีตเล็กน้อย ที่กล่าวว่าซอฟต์แวร์ใดๆ อาจมีข้อบกพร่อง เบราว์เซอร์ก็ไม่มีข้อยกเว้น และหากเราเพิ่มความจริงที่ว่าเนื่องจากลักษณะการใช้งานแบบวงกลมของการใช้งานข้อกำหนด บางครั้งเบราว์เซอร์ได้ใช้งานบางอย่างและข้อมูลจำเพาะก็เปลี่ยนไป ดังนั้นพวกเขาจึงต้องออกการอัปเดต จนกว่าจะมีการอัปเดตดังกล่าว เราอาจอยู่ในสถานการณ์ที่เบราว์เซอร์ทำสิ่งที่แตกต่างออกไป

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

หากคุณคิดว่าคุณเห็นข้อผิดพลาด สิ่งแรกที่ต้องทำคือยืนยันสิ่งนั้น บางครั้ง เมื่อเราคิดว่าเราเห็นพฤติกรรมบั๊ก และเบราว์เซอร์ทำสิ่งต่าง ๆ ความผิดก็อยู่ที่เรา บางทีเราอาจใช้ไวยากรณ์ที่ไม่ถูกต้อง หรือกำลังพยายามจัดรูปแบบ HTML ที่มีรูปแบบไม่ถูกต้อง ในกรณีดังกล่าว เบราว์เซอร์จะพยายามทำบางสิ่ง อย่างไรก็ตาม เนื่องจากคุณไม่ได้ใช้ภาษาตามที่ออกแบบไว้ แต่ละเบราว์เซอร์จึงอาจใช้งานได้แตกต่างกัน การตรวจสอบอย่างรวดเร็วว่า HTML และ CSS ของคุณถูกต้องเป็นขั้นตอนแรกที่ยอดเยี่ยม

เมื่อถึงจุดนั้น ฉันอาจจะทำการค้นหาอย่างรวดเร็วและดูว่าปัญหาของฉันเป็นที่เข้าใจในวงกว้างแล้วหรือไม่ มี repos ของปัญหาที่ทราบ เช่น Flexbugs และ Gridbugs อย่างไรก็ตาม แม้แต่คำหลักที่เลือกสรรมาอย่างดีเพียงไม่กี่คำก็สามารถเปิดโพสต์หรือบทความเกี่ยวกับ Stack Overflow ที่ครอบคลุมหัวข้อนี้และอาจให้วิธีแก้ปัญหาแก่คุณ

แต่สมมติว่าคุณไม่ทราบจริงๆ ว่าอะไรเป็นสาเหตุของจุดบกพร่อง ซึ่งทำให้ยากต่อการค้นหาวิธีแก้ไข ดังนั้น ขั้นตอนต่อไปคือการสร้างกรณีทดสอบที่ลดลงสำหรับปัญหาของคุณ กล่าวคือ ขจัดสิ่งที่ไม่เกี่ยวข้องออกเพื่อช่วยให้คุณระบุได้อย่างชัดเจนว่าอะไรเป็นสาเหตุของจุดบกพร่อง หากคุณคิดว่าคุณมีข้อบกพร่องของ CSS คุณสามารถลบ JavaScript หรือสร้างสไตล์เดียวกันนอกกรอบงานได้หรือไม่ ฉันมักจะใช้ CodePen เพื่อรวบรวมกรณีทดสอบที่ลดลงของสิ่งที่ฉันเห็น สิ่งนี้มีประโยชน์เพิ่มเติมในการให้รหัสแก่ฉันในลักษณะที่ฉันสามารถแบ่งปันกับคนอื่นได้อย่างง่ายดายหากฉันต้องการถามเกี่ยวกับมัน

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

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

ตรวจสอบโพสต์นี้จาก Lea Verou เกี่ยวกับการรายงานปัญหาดังกล่าว “ช่วยเหลือชุมชน! รายงานบั๊กของเบราว์เซอร์!” บทความนี้ยังมีเคล็ดลับดีๆ ในการสร้างกรณีทดสอบที่ลดลงอีกด้วย

3. การสนับสนุนบางส่วนของคุณสมบัติ CSS

ปัญหาประเภทที่สามกลายเป็นเรื่องธรรมดามากขึ้นเนื่องจากวิธีการออกแบบข้อกำหนด CSS ที่ทันสมัย หากเรานึกถึง Grid Layout และ Flexbox ข้อมูลจำเพาะเหล่านี้จะใช้คุณสมบัติและค่าในการจัดตำแหน่งกล่องระดับ 3 เพื่อจัดตำแหน่ง ดังนั้น คุณสมบัติ เช่น align-items , justify-content และ column-gap ถูกระบุเพื่อใช้ทั้งใน Grid และ Flexbox เช่นเดียวกับวิธีการจัดวางอื่นๆ

ในขณะที่เขียน คุณสมบัติ gap ทำงานใน Grid Layout ในเบราว์เซอร์ที่รองรับกริดทั้งหมด และ column-gap ทำงานใน Multicol; อย่างไรก็ตาม มีเพียง Firefox เท่านั้นที่ใช้คุณสมบัติเหล่านี้สำหรับ Flexbox

ถ้าฉันจะใช้ระยะขอบเพื่อสร้างทางเลือกสำรองสำหรับ Flexbox จากนั้นทดสอบ column-gap และลบระยะขอบ กล่องของฉันจะไม่มีช่องว่างระหว่างกล่องเหล่านั้นในเบราว์เซอร์ที่รองรับ column-gap ใน Grid หรือ multicol ดังนั้นการเว้นวรรคทางเลือกของฉันจะเป็น ลบออก.

 @supports(column-gap: 20px) { .flex { margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */ } }

นี่เป็นข้อจำกัดปัจจุบันของการสืบค้นข้อมูลคุณลักษณะ เราไม่มีวิธีทดสอบการสนับสนุนคุณลักษณะในคุณลักษณะอื่น ในสถานการณ์ข้างต้น สิ่งที่ฉันต้องการถามเบราว์เซอร์คือ "คุณมีการสนับสนุนสำหรับช่องว่างคอลัมน์ใน Flexbox หรือไม่" ด้วยวิธีนี้ ฉันจะได้รับการตอบสนองเชิงลบเพื่อใช้ทางเลือกของฉัน

มีปัญหาที่คล้ายกันกับคุณสมบัติการกระจายตัวของ CSS break-before , break-after และ break-inside เนื่องจากสิ่งเหล่านี้ได้รับการสนับสนุนที่ดีกว่าเมื่อพิมพ์หน้า เบราว์เซอร์มักจะเรียกร้องการสนับสนุน อย่างไรก็ตาม หากคุณกำลังทดสอบการสนับสนุนใน multicol คุณจะได้รับสิ่งที่ดูเหมือนจะเป็นผลบวกปลอม ฉันได้หยิบยกปัญหาขึ้นที่ CSS Working Group สำหรับปัญหานี้แล้ว อย่างไรก็ตาม มันไม่ใช่ปัญหาตรงไปตรงมาที่จะแก้ไข หากคุณมีความคิดโปรดเพิ่มพวกเขาที่นั่น

การทดสอบสำหรับตัวเลือกการสนับสนุน

ปัจจุบันการสืบค้นข้อมูลคุณลักษณะสามารถทดสอบได้เฉพาะคุณสมบัติ CSS และค่าเท่านั้น อีกสิ่งหนึ่งที่เราอาจต้องการทดสอบคือการรองรับตัวเลือกที่ใหม่กว่า เช่น ตัวเลือกในระดับ 4 ของข้อกำหนดตัวเลือก มีหมายเหตุอธิบายและการใช้งานเบื้องหลังการตั้งค่าสถานะใน Firefox Nightly ของคุณลักษณะใหม่สำหรับการค้นหาคุณลักษณะซึ่งจะบรรลุเป้าหมายนี้

หากคุณไปที่ about:config ใน Firefox และเปิดใช้งานแฟ layout.css.supports-selector.enabled คุณสามารถทดสอบเพื่อดูว่าตัวเลือกต่างๆ รองรับหรือไม่ ไวยากรณ์ในปัจจุบันตรงไปตรงมามาก ตัวอย่างเช่น เพื่อทดสอบ :has ตัวเลือก:

 @supports selector(:has){ .item { /* CSS for support of :has */ } }

นี่คือข้อกำหนดในการพัฒนา อย่างไรก็ตาม คุณสามารถดูวิธีที่ฟีเจอร์ต่างๆ ที่จะช่วยเราจัดการปัญหาที่เคยมีมาของการสนับสนุนเบราว์เซอร์กำลังถูกเพิ่มเข้ามาในขณะที่เราพูด

อ่านเพิ่มเติม

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

• “การใช้ CSS Grid: รองรับเบราว์เซอร์ที่ไม่มีกริด” ตัวเลือกสำหรับการจัดการกับเบราว์เซอร์รุ่นเก่าและ CSS Grid
• หน้าอ้างอิง MDN “การสืบค้นคุณลักษณะ” สำหรับการสืบค้นคุณลักษณะ
• คู่มือ MDN “CSS Grid และ Progressive Enhancement” สำหรับการเพิ่มประสิทธิภาพกริดแบบก้าวหน้า
• คู่มือ MDN “ความเข้ากันได้ย้อนหลังของ Flexbox” สำหรับการสนับสนุน Flexbox รวมถึงรายละเอียดของการใช้งานที่นำหน้ารุ่นเก่า
• “Patern Library First” วิธีจัดการรหัสทางเลือกโดยใช้ไลบรารีรูปแบบ