พื้นที่ :has()
เทียมคลาส คือคุณสมบัติ CSS ใหม่ที่ฉันโปรดปราน ฉันรู้ว่าสำหรับพวกคุณหลายคนเช่นกัน อย่างน้อยที่สุด พวกคุณที่ทำแบบสำรวจ State of CSS. ความสามารถในการเขียนตัวเลือกกลับหัวทำให้เรามีพลังพิเศษมากขึ้นอย่างที่ฉันไม่เคยคิดว่าจะเป็นไปได้
ฉันพูดว่า "มหาอำนาจมากขึ้น" เพราะมีแนวคิดที่ชาญฉลาดที่น่าทึ่งมากมายที่เผยแพร่โดยกลุ่มคนที่ฉลาดล้ำเช่น:
บทความนี้ไม่ใช่คำแนะนำขั้นสุดท้าย :has()
. มันไม่ได้มาที่นี่เพื่อสำรอกสิ่งที่พูดไปแล้ว ฉันเอง (สวัสดี 👋) กระโดดเข้าร่วมวงเพื่อแบ่งปันวิธีที่ฉันน่าจะใช้มากที่สุด :has()
ในการทำงานประจำวันของฉัน… นั่นคือเมื่อ Firefox รองรับอย่างเป็นทางการแล้ว ซึ่งจวนเจียนจะมาถึง.
เมื่อสิ่งนั้นเกิดขึ้น คุณสามารถพนันได้เลยว่าฉันจะเริ่มใช้ :has()
ทั่วทุกสถานที่. ต่อไปนี้คือตัวอย่างในโลกแห่งความเป็นจริงของสิ่งต่างๆ ที่ฉันเพิ่งสร้างขึ้นเมื่อเร็วๆ นี้ และคิดกับตัวเองว่า "เดี๋ยวก่อน มันจะดีขึ้นกว่านี้อีกมาก :has()
ได้รับการสนับสนุนอย่างเต็มที่”
หลีกเลี่ยงการเข้าถึงภายนอกส่วนประกอบ JavaScript ของคุณ
คุณเคยสร้างคอมโพเนนต์แบบอินเทอร์แอคทีฟที่บางครั้งต้องส่งผลต่อสไตล์ที่อื่นในหน้าหรือไม่ ยกตัวอย่างต่อไปนี้ โดยที่ <nav>
คือ เมนูเด่นและการเปิดจะเปลี่ยนสีของ <header>
เนื้อหาข้างต้น
ฉันรู้สึกว่าฉันต้องทำสิ่งนี้ ตลอดเวลา.
ตัวอย่างนี้เป็นส่วนประกอบ React ที่ฉันสร้างสำหรับไซต์ ฉันต้อง "ออกไปนอก" ส่วน React ของหน้าด้วย document.querySelector(...)
และสลับชั้นเรียนบน <body>
, <header>
หรือส่วนประกอบอื่นๆ นั่นไม่ใช่จุดจบของโลก แต่แน่นอนว่ามันรู้สึกแย่ไปหน่อย แม้แต่ในไซต์ React เต็มรูปแบบ (เช่นไซต์ Next.js) ฉันก็ต้องเลือกระหว่างการจัดการ a menuIsOpen
ระบุวิธีที่สูงกว่าในแผนผังองค์ประกอบหรือทำการเลือกองค์ประกอบ DOM เดียวกัน — ซึ่งไม่ใช่ React-y มากนัก
กับ :has()
ปัญหาจะหมดไป:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
ไม่ต้องเล่นซอกับส่วนอื่นๆ ของ DOM ในคอมโพเนนต์ JavaScript ของฉันอีกต่อไป!
UX การสตริปตารางที่ดีขึ้น
การเพิ่ม "แถบ" แถวอื่นลงในตารางของคุณอาจเป็นการปรับปรุง UX ที่ดี ช่วยให้สายตาของคุณติดตามได้ว่าคุณอยู่แถวไหนขณะที่คุณสแกนตาราง
แต่จากประสบการณ์ของฉัน วิธีนี้ใช้ไม่ได้ผลกับตารางที่มีเพียงสองหรือสามแถว ตัวอย่างเช่น ถ้าคุณมีตารางที่มีสามแถวใน <tbody>
และคุณกำลัง "ตัดแถบ" ทุกแถว "คู่" คุณอาจจบลงด้วยแถบเดียว นั่นไม่คุ้มค่ากับรูปแบบและอาจทำให้ผู้ใช้สงสัยว่ามีอะไรพิเศษเกี่ยวกับแถวที่ไฮไลต์นั้น
ใช้เทคนิคนี้ที่ไหน บรามูสใช้ :has()
เพื่อใช้รูปแบบตามจำนวนลูกเราสามารถใช้แถบตารางเมื่อมีมากกว่าสามแถว:
สิ่งที่จะได้รับนักเล่น? นอกจากนี้ คุณยังตัดสินใจทำเช่นนี้ได้หากตารางมีจำนวนคอลัมน์อย่างน้อยจำนวนหนึ่งด้วยเช่นกัน:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
ลบตรรกะคลาสเงื่อนไขออกจากแม่แบบ
ฉันมักจะต้องเปลี่ยนเค้าโครงหน้าโดยขึ้นอยู่กับว่ามีอะไรอยู่ในหน้านั้นบ้าง ใช้เค้าโครงกริดต่อไปนี้ ซึ่งตำแหน่งของเนื้อหาหลักจะเปลี่ยนพื้นที่กริด ขึ้นอยู่กับว่ามีแถบด้านข้างอยู่หรือไม่
นั่นเป็นสิ่งที่อาจขึ้นอยู่กับว่ามีการตั้งค่าหน้ารองใน CMS หรือไม่ ปกติฉันจะทำสิ่งนี้ด้วยตรรกะเทมเพลตเพื่อเพิ่มแบบมีเงื่อนไข คลาสตัวดัดแปลง BEM ไปยัง wrapper ของเลย์เอาต์เพื่อพิจารณาทั้งสองเลย์เอาต์ CSS นั้นอาจมีลักษณะดังนี้ (กฎการตอบสนองและสิ่งอื่น ๆ ถูกละไว้เพื่อความกระชับ):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
แน่นอนว่า CSS นี้ใช้ได้ดีทีเดียว แต่มันทำให้โค้ดเทมเพลตยุ่งเหยิงเล็กน้อย ขึ้นอยู่กับภาษาเทมเพลตของคุณ การเพิ่มคลาสแบบมีเงื่อนไขอาจดูน่าเกลียดมาก โดยเฉพาะอย่างยิ่งถ้าคุณต้องทำสิ่งนี้กับองค์ประกอบลูกจำนวนมากด้วย
ตรงกันข้ามกับ :has()
วิธีการตาม:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
จริงๆแล้วนั่นไม่ใช่ CSS-wise ที่ดีกว่ามากนัก แต่การลบคลาสตัวแก้ไขเงื่อนไขออกจากเทมเพลต HTML นั้นเป็นชัยชนะที่ดีถ้าคุณถามฉัน
เป็นเรื่องง่ายที่จะนึกถึงการตัดสินใจในการออกแบบไมโคร :has()
- เหมือนการ์ดเมื่อมีภาพอยู่ในนั้น — แต่ฉันคิดว่ามันจะมีประโยชน์มากสำหรับการเปลี่ยนแปลงเค้าโครงมาโครเหล่านี้ด้วย
การจัดการความเฉพาะเจาะจงที่ดีขึ้น
ถ้าคุณอ่าน บทความสุดท้ายของฉันคุณจะรู้ว่าฉันเป็นคนยึดติดกับความเฉพาะเจาะจง หากคุณไม่ต้องการให้คะแนนความเฉพาะเจาะจงเหมือนฉันเมื่อทำการเพิ่ม :has()
และ :not()
ในทุกสไตล์ของคุณ อย่าลืมใช้ :where()
.
นั่นเป็นเพราะลักษณะเฉพาะของ :has()
ขึ้นอยู่กับ องค์ประกอบที่เฉพาะเจาะจงที่สุดในรายการอาร์กิวเมนต์. ดังนั้นหากคุณมีบางอย่างเช่น ID อยู่ในนั้น ตัวเลือกของคุณจะยากต่อการแทนที่ในการเรียงซ้อน
บนมืออื่น ๆ , ความเฉพาะเจาะจงของ :where()
เป็นศูนย์เสมอไม่เคยเพิ่มคะแนนความจำเพาะ
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
อนาคตสดใส
นี่เป็นเพียงไม่กี่สิ่งที่ฉันแทบรอไม่ไหวที่จะใช้ในการผลิต CSS-Tricks Almanac มีตัวอย่างมากมายเช่นกัน สิ่งที่คุณรอคอยที่จะทำกับ :has()
? คุณพบตัวอย่างในโลกแห่งความเป็นจริงประเภทใด :has()
จะเป็นทางออกที่สมบูรณ์แบบหรือไม่?
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- ความสามารถ
- สามารถ
- เกี่ยวกับเรา
- ข้างบน
- ลงชื่อเข้าใช้
- มีผลต่อ
- ทั้งหมด
- แล้ว
- เสมอ
- น่าอัศจรรย์
- และ
- อื่น
- ใช้
- เข้าใกล้
- พื้นที่
- อาร์กิวเมนต์
- บทความ
- ตาม
- เพราะ
- เดิมพัน
- ดีกว่า
- ระหว่าง
- บิต
- พัด
- สร้าง
- พวง
- สามารถรับ
- บัตร
- น้ำตก
- บาง
- เปลี่ยนแปลง
- การเปลี่ยนแปลง
- เด็ก
- Choose
- ชั้น
- ชั้นเรียน
- ซม
- รหัส
- คอลัมน์
- ส่วนประกอบ
- มี
- เนื้อหา
- ได้
- คอร์ส
- CSS
- การตัดสินใจ
- แตกหัก
- ทั้งนี้ขึ้นอยู่กับ
- ออกแบบ
- ไม่
- การทำ
- DOM
- Dont
- ลง
- องค์ประกอบ
- โดยเฉพาะอย่างยิ่ง
- ฯลฯ
- แม้
- เคย
- ทุกๆ
- ตัวอย่าง
- ตัวอย่าง
- ประสบการณ์
- Eyes
- ที่ชื่นชอบ
- ลักษณะ
- สองสาม
- ปลาย
- Firefox
- ดังต่อไปนี้
- ข้างหน้า
- ราคาเริ่มต้นที่
- อย่างเต็มที่
- ได้รับ
- จะช่วยให้
- ไป
- ไป
- ยิ่งใหญ่
- ตะแกรง
- ตารางแม่แบบพื้นที่
- ให้คำแนะนำ
- เกิดขึ้น
- มี
- ช่วย
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- hi
- สูงกว่า
- ไฮไลต์
- HTML
- HTTPS
- ฉันเป็น
- ความคิด
- ภาพ
- การปรับปรุง
- in
- การโต้ตอบ
- IT
- JavaScript
- แค่หนึ่ง
- เก็บ
- ชนิด
- ทราบ
- ภาษา
- ชื่อสกุล
- แบบ
- น่าจะ
- น้อย
- ดู
- ที่ต้องการหา
- Lot
- แมโคร
- ทำ
- หลัก
- ทำ
- การจัดการ
- หลาย
- อาจ
- ขณะ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- Mozilla
- จำเป็นต้อง
- ความต้องการ
- ใหม่
- ถัดไป
- เน็กซ์.เจส
- ปกติ
- จำนวน
- อย่างเป็นทางการ
- ONE
- การเปิด
- อื่นๆ
- ด้านนอก
- ส่วนหนึ่ง
- ในสิ่งที่สนใจ
- ส่วน
- แบบแผน
- คน
- สมบูรณ์
- สถานที่
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- เป็นไปได้
- นำเสนอ
- สวย
- ปัญหา
- การผลิต
- การตีพิมพ์
- มาถึง
- เกิดปฏิกิริยา
- อ่าน
- โลกแห่งความจริง
- เมื่อเร็ว ๆ นี้
- ลบ
- การตอบสนอง
- แถว
- กฎระเบียบ
- วิ่ง
- กล่าวว่า
- เดียวกัน
- การสแกน
- การเลือก
- ชุด
- Share
- เว็บไซต์
- สมาร์ท
- So
- ทางออก
- บาง
- บางสิ่งบางอย่าง
- บางแห่ง
- พิเศษ
- โดยเฉพาะ
- ความจำเพาะ
- เริ่มต้น
- สถานะ
- ริ้ว
- ลายเส้น
- สไตล์
- ยิ่งใหญ่
- ที่สนับสนุน
- ตาราง
- เอา
- TD
- เทมเพลต
- พื้นที่
- รัฐ
- โลก
- สิ่ง
- สิ่ง
- คิดว่า
- สาม
- ตลอด
- ไปยัง
- ต้น
- เกินไป
- โดยสิ้นเชิง
- ลู่
- จริง
- กลับหัวกลับหาง
- us
- ใช้
- ผู้ใช้
- ux
- รอ
- วิธี
- อะไร
- ว่า
- ที่
- WHO
- ชนะ
- สงสัย
- งาน
- โลก
- คุ้มค่า
- จะ
- เขียน
- คุณ
- ของคุณ
- ลมทะเล