ตัวเลือกคลาส Pseudo-class ใหม่ของ CSS :is() และ :where()

การเพิ่มเล็กๆ น้อยๆ เหล่านี้ในไวยากรณ์ตัวเลือก CSS จะมีผลอย่างมาก

Adam Argyle

เมื่อเขียน CSS บางครั้งคุณอาจได้รายการเครื่องมือเลือกที่ยาวมากเพื่อกำหนดเป้าหมายองค์ประกอบหลายรายการที่มีกฎสไตล์เดียวกัน ตัวอย่างเช่น หากต้องการปรับสีแท็ก <b> ที่พบภายในองค์ประกอบส่วนหัว คุณอาจเขียนดังนี้

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

แต่คุณอาจใช้ :is() แทนเพื่อปรับปรุงความชัดเจนในการอ่านและหลีกเลี่ยงตัวเลือกที่ยาวเกินไป

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

ความอ่านง่ายและความสะดวกของเครื่องมือเลือกที่สั้นลงเป็นเพียงส่วนหนึ่งของคุณค่าที่ :is() และ :where() นำมาสู่ CSS ในโพสต์นี้ คุณจะได้ดูไวยากรณ์และค่าของตัวเลือกเสมือนที่ทำงานได้ 2 รายการนี้

ความเข้ากันได้กับเบราว์เซอร์

:is()

:where()

พบกับ :is() และ :where()

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

การจัดกลุ่มตัวเลือก

:where() จะทำสิ่งใดก็ได้ที่ :is() ทำได้เกี่ยวกับการจัดกลุ่ม ซึ่งรวมถึงการใช้ที่ใดก็ได้ในตัวเลือก การฝัง และการซ้อน ความยืดหยุ่นของ CSS ที่คุณรู้จักและชื่นชอบอย่างเต็มรูปแบบ ลองดูตัวอย่างต่อไปนี้

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

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

การใช้ตัวเลือกแบบง่ายและแบบซับซ้อนด้วย :is()

หากต้องการทบทวนเกี่ยวกับตัวเลือก โปรดดูโมดูลตัวเลือกใน Learn CSS ตัวอย่างตัวเลือกแบบง่ายและแบบซับซ้อนที่จะช่วยอธิบายความสามารถมีดังนี้

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

จนถึงตอนนี้ :is() และ :where() ใช้แทนกันได้ทางไวยากรณ์ ตอนนี้เรามาพิจารณาความแตกต่างกัน

ความแตกต่างระหว่าง :is() กับ :where()

:is() และ :where() แตกต่างกันอย่างมากในแง่ความเฉพาะเจาะจง หากต้องการทบทวนความเฉพาะเจาะจง โปรดดูโมดูลความเฉพาะเจาะจงใน Learn CSS

สรุปสั้นๆ

• :where() ไม่มีความเฉพาะเจาะจง
  :where() จะรวมความเฉพาะเจาะจงทั้งหมดในรายการตัวเลือกที่ส่งผ่านเป็นพารามิเตอร์ฟังก์ชัน ฟีเจอร์ตัวเลือกนี้เป็นฟีเจอร์ตัวเลือกแบบแรก
• :is() ใช้ความเฉพาะเจาะจงของตัวเลือกที่เฉพาะเจาะจงที่สุด
  :is(a,div,#id) มีคะแนนความเฉพาะเจาะจงของรหัส 100 คะแนน

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

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

สำหรับ :where() เราหวังว่าจะเห็นไลบรารีเสนอเวอร์ชันที่ไม่เจาะจง การแข่งขันที่เฉพาะเจาะจงระหว่างสไตล์ของผู้แต่งกับสไตล์ของคลังอาจสิ้นสุดลง จะไม่มีความเฉพาะเจาะจงที่จะแข่งขันกันเมื่อเขียน CSS CSS พัฒนาฟีเจอร์การจัดกลุ่มแบบนี้มาเป็นเวลานานแล้ว ฟีเจอร์นี้พร้อมใช้งานแล้ว แต่ยังคงเป็นพื้นที่ที่เรายังไม่รู้จักมากนัก สนุกกับการสร้างสไตล์ชีตที่เล็กลงและนำคอมมาออก

รูปภาพโดย Markus Winkler ใน Unsplash