ตัวเลือกคลาส 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()

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

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

ทุกอย่างที่ :is() สามารถทำได้เกี่ยวกับการจัดกลุ่ม จะ :where() ด้วยเช่นกัน ซึ่งรวมถึงการใช้ที่ใดก็ได้ในตัวเลือก การฝัง และการซ้อนรายการเหล่านี้ ความยืดหยุ่นของ 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;
}

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

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

หากต้องการทบทวนเกี่ยวกับตัวเลือก โปรดดูโมดูลตัวเลือกใน "เรียนรู้ 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() จะแตกต่างกันอย่างมาก หากต้องการทบทวนความจำเพาะเจาะจง โปรดดูโมดูลความจำเพาะใน "เรียนรู้ 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