ขุดลงไปในคุณสมบัติการแสดงผล: การสร้างกล่อง

นี่เป็นบทความที่สองในชุดบทความสั้นๆ เกี่ยวกับคุณสมบัติการ display ใน CSS คุณสามารถอ่านบทความเริ่มต้นในซีรีส์ได้ที่ “The Two Values ​​Of Display” ข้อมูลจำเพาะในการ display เป็นข้อมูลจำเพาะที่มีประโยชน์มากในการทำความเข้าใจ เนื่องจากเป็นรากฐานของวิธีการจัดวางต่างๆ ทั้งหมดที่เรามี

แม้ว่าค่าต่างๆ ของการ display จะมีข้อกำหนดเฉพาะของตัวเอง แต่ก็มีข้อกำหนดและแนวคิดมากมายใน display ซึ่งหมายความว่าการทำความเข้าใจข้อกำหนดนี้จะช่วยให้คุณเข้าใจข้อกำหนดเฉพาะซึ่งให้รายละเอียดค่าของการ display เป็นหลัก ในบทความนี้ ผมจะดูค่าการสร้างกล่องของ display — none และ contents

ทุกอย่างคือกล่อง

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

การควบคุมการสร้างกล่อง

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

• ป้องกันการสร้างกล่องและลูกทั้งหมด
• ป้องกันการสร้างกล่องแต่ยังแสดงลูกๆ

เราสามารถดูสถานการณ์แต่ละสถานการณ์เหล่านี้ได้

จอแสดงผล: none

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

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

ถ้าฉันเพิ่ม display: none ใน ul มันจะหายไปจากการแสดงภาพ โดยนำลูกของ ul บวกพื้นหลังและเส้นขอบไปด้วย

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

มีบางสถานการณ์ที่คุณอาจต้องการเพิ่มข้อมูลเพิ่มเติมสำหรับผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ แต่ซ่อนไว้สำหรับผู้ใช้รายอื่น ในกรณีเช่นนี้ คุณต้องใช้เทคนิคอื่น Scott O 'Hara ให้คำแนะนำที่ยอดเยี่ยมในบทความเรื่อง "Inclusively Hidden"

การใช้ display: none ค่อนข้างตรงไปตรงมา ใช้ในสถานการณ์ที่คุณต้องการให้กล่องและเนื้อหาหายไปจากการแสดงผล จากโครงสร้างกล่อง และจากโครงสร้างการช่วยสำหรับการเข้าถึง (ราวกับว่ามันไม่เคยมีมาก่อน)

แสดง: เนื้อหา

สำหรับสถานการณ์ที่สอง เราต้องพิจารณามูลค่าการแสดงผลที่ใหม่กว่ามาก การ display: contents จะลบกล่องที่ใช้กับโครงสร้างกล่องในลักษณะเดียวกับที่ display: none แต่ปล่อยให้ลูกอยู่กับที่ สิ่งนี้ทำให้เกิดพฤติกรรมที่เป็นประโยชน์ในแง่ของสิ่งที่เราสามารถทำได้ในเลย์เอาต์ของเรา ลองดูตัวอย่างง่ายๆ แล้วสำรวจเพิ่มเติม

ฉันใช้ตัวอย่างเดียวกันกับเมื่อก่อน แต่คราวนี้ฉันใช้ display: contents on the ul ขณะนี้รายการต่างๆ สามารถมองเห็นได้ อย่างไรก็ตาม ไม่มีพื้นหลังและเส้นขอบ และทำหน้าที่เสมือนว่าคุณได้เพิ่มองค์ประกอบ li ลงในหน้าโดยไม่มีการปิดบัง ul

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

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

ถ้าเรานำตัวอย่างนี้และเพิ่ม display: contents ไปยัง ul กล่องจะถูกลบออกจากการแสดงผลด้วยภาพ และตอนนี้ เด็ก ๆ จะเข้าร่วมในเลย์เอาต์แบบยืดหยุ่น คุณจะเห็นว่าพวกเขาไม่ได้เป็นลูกโดยตรง พวกเขาไม่ได้ถูกเลือกโดยตัวเลือกสากลลูกโดยตรง ( .wrapper > * ) ในลักษณะที่เป็นองค์ประกอบ div และ ul และพวกเขายังคงพื้นหลังที่มอบให้ ทั้งหมดที่เกิดขึ้นคือกล่องของ ul ที่บรรจุอยู่นั้นถูกถอดออกแล้ว ทุกสิ่งทุกอย่างดำเนินไปตามปกติ

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

นี่ไม่ใช่ "รีเซ็ต" ของ CSS

คุณอาจสังเกตเห็นว่าผลข้างเคียงของการใช้ display: contents คือการที่ระยะขอบและช่องว่างภายในองค์ประกอบถูกลบออก เนื่องจากเกี่ยวข้องกับกล่อง ซึ่งเป็นส่วนหนึ่งของ CSS Box Model นี่อาจทำให้คุณคิดว่า display: contents เป็นวิธีที่ดีในการกำจัดช่องว่างภายในและระยะขอบขององค์ประกอบอย่างรวดเร็ว

นี่คือการใช้งานที่ Adrian Roselli พบในป่า; เขากังวลมากพอที่จะเขียนโพสต์โดยละเอียดเพื่ออธิบายปัญหาในการทำเช่นนั้น – “ display: contents is not a CSS reset” ปัญหาบางอย่างที่เขาแจ้งเกิดจากปัญหาการช่วยสำหรับการเข้าถึงที่โชคร้ายในเบราว์เซอร์ที่มีการแสดงผลในปัจจุบัน: เนื้อหาที่เราจะพูดถึงด้านล่าง อย่างไรก็ตาม แม้เมื่อปัญหาเหล่านั้นได้รับการแก้ไขแล้ว การนำองค์ประกอบออกจากแผนผังกล่องเพียงเพื่อกำจัดขอบและช่องว่างภายในเองก็ค่อนข้างจะรุนแรง

หากไม่เป็นเช่นนั้น อาจเป็นปัญหาสำหรับการบำรุงรักษาเว็บไซต์ในอนาคต นักพัฒนาในอนาคตอาจสงสัยว่าทำไมพวกเขาจึงดูเหมือนจะใช้อะไรไม่ได้กับกล่องลึกลับนี้ ขาดความจริงที่ว่ามันถูกลบไปแล้ว! หากคุณต้องการให้ระยะขอบและช่องว่างภายในเป็น 0 ให้ช่วยเหลือตัวเองในอนาคตและตั้งค่าให้เป็น 0 ตามเวลาที่มีเกียรติ การใช้ display: contents สำหรับกรณีพิเศษที่คุณต้องการนำกล่องออกจริงๆ

นอกจากนี้ยังควรสังเกตความแตกต่างระหว่าง display: contents และ CSS Grid Layout subgrid Where display: contents จะลบกล่อง พื้นหลัง และเส้นขอบออกจากจอแสดงผลโดยสิ้นเชิง ทำให้รายการกริดเป็น sub-grid จะคงรูปแบบกล่องบนรายการนั้นไว้ และเพียงผ่านการกำหนดขนาดของแทร็กเพื่อให้รายการที่ซ้อนกันสามารถใช้กริดเดียวกันได้ ค้นหาข้อมูลเพิ่มเติมในบทความของฉัน "CSS Grid Level 2: Here Comes Subgrid"

ปัญหาการเข้าถึงและการแสดงผล: เนื้อหา

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

องค์ประกอบ ul ของรายการของเราในการ display: contents CodePen เป็นตัวอย่างที่สมบูรณ์แบบ คุณ สามารถ ได้ผลลัพธ์ภาพแบบเดียวกันโดยทำให้มาร์กอัปเรียบและไม่ใช้รายการเลย อย่างไรก็ตาม หากเนื้อหาเป็นรายการทางความหมาย ควรให้โปรแกรมอ่านหน้าจอเข้าใจและอ่านเป็นรายการได้ดีที่สุด เนื้อหานั้นควรทำเครื่องหมายเป็นรายการเดียว

หากคุณต้องการให้องค์ประกอบย่อยเป็นส่วนหนึ่งของเลย์เอาต์ flex หรือ grid เหมือนกับว่าไม่มีกล่อง ul อยู่ คุณควรจะสามารถใช้ display: contents เพื่อกำจัดกล่องและทำให้เป็นอย่างนั้น — ทิ้ง ความหมายในสถานที่ สเปคบอกว่าน่าจะเป็นแบบนี้

“คุณสมบัติการ display ไม่มีผลกับความหมายขององค์ประกอบ: สิ่งเหล่านี้ถูกกำหนดโดยภาษาของเอกสารและไม่ได้รับผลกระทบจาก CSS นอกเหนือจากค่า none ซึ่งส่งผลต่อเอาต์พุตของเสียง/คำพูดและการโต้ตอบขององค์ประกอบและลูกหลานของมัน คุณสมบัติการ display จะมีผลกับเลย์เอาต์ภาพเท่านั้น: จุดประสงค์คือเพื่อให้นักออกแบบมีอิสระในการเปลี่ยนพฤติกรรมการจัดวางขององค์ประกอบโดยไม่กระทบต่อองค์ประกอบที่อยู่เบื้องล่าง ความหมายของเอกสาร”

ดังที่เราได้กล่าวไปแล้ว ค่า none ที่ซ่อนองค์ประกอบจากโปรแกรมอ่านหน้าจอ อย่างไรก็ตาม ค่าอื่นๆ ของการ display นั้นอยู่ที่นั่นอย่างหมดจดเพื่อให้เราเปลี่ยนวิธีการแสดงสิ่งต่าง ๆ ด้วยสายตา พวกเขาไม่ควรสัมผัสความหมายของเอกสาร

ด้วยเหตุผลนี้ พวกเราหลายคนต้องแปลกใจเมื่อรู้ว่า display: contents เป็นการเอาองค์ประกอบออกจากโครงสร้างการช่วยสำหรับการเข้าถึงในเบราว์เซอร์ทั้งสอง (Chrome และ Firefox) ที่ติดตั้งใช้งาน ดังนั้นการเปลี่ยนความหมายของเอกสารทำให้โปรแกรมอ่านหน้าจอไม่ทราบว่ารายการนั้นเป็นรายการเมื่อ ul ถูกลบออกโดยใช้ display: contents นี่เป็นข้อบกพร่องของเบราว์เซอร์ - และเป็นปัญหาร้ายแรง

ปีที่แล้ว Hidde de Vries เขียนปัญหานี้ในโพสต์ของเขา “มาร์กอัปที่เข้าถึงได้มากขึ้นด้วย display:contents ” และได้ยกประเด็นปัญหากับเบราว์เซอร์ต่างๆ ขึ้นมาอย่างเป็นประโยชน์ เพื่อปลุกจิตสำนึกและให้พวกเขาดำเนินการแก้ไข Firefox ได้แก้ไขปัญหาบางส่วนแล้ว แม้ว่าปัญหายังคงมีอยู่ในองค์ประกอบบางอย่าง เช่น ปุ่ม ปัญหานี้กำลังได้รับการแก้ไขอย่างแข็งขันใน Chrome นอกจากนี้ยังมีปัญหาสำหรับ WebKit เราขอแนะนำให้คุณติดดาวข้อบกพร่องเหล่านี้ หากคุณมีกรณีใช้งานสำหรับการแสดงผล: เนื้อหาที่จะได้รับผลกระทบจากปัญหาดังกล่าว

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

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

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

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

ห่อ

บทความนี้ได้พิจารณาถึงค่าการสร้างกล่องของคุณสมบัติการ display ฉันหวังว่าคุณคงเข้าใจพฤติกรรมต่างๆ ของการ display: none - ซึ่งลบกล่องและลูกทั้งหมดออกทั้งหมด และ display: contents ที่ลบเฉพาะตัวกล่องเอง คุณควรเข้าใจปัญหาที่อาจเกิดขึ้นของการใช้วิธีการเหล่านี้ในส่วนที่เกี่ยวข้องกับการช่วยสำหรับการเข้าถึง