สวัสดี นักพัฒนาที่ยอดเยี่ยมทุกคน! ในโพสต์นี้เราจะมาสำรวจการใช้งานของ :has() ในโครงการเว็บถัดไปของคุณ :has() ค่อนข้างใหม่ แต่ได้รับความนิยมในชุมชนส่วนหน้าด้วยการควบคุมองค์ประกอบต่างๆ ใน ​​UI ของคุณ เรามาดูกันว่า pseudo class คืออะไร และเราจะนำไปใช้ประโยชน์ได้อย่างไร

วากยสัมพันธ์

พื้นที่ :has() คลาสหลอก CSS ช่วยจัดรูปแบบองค์ประกอบหากพบและพิจารณาสิ่งที่เรากำลังค้นหาภายในองค์ประกอบนั้น มันเหมือนกับการพูดว่า “หากมีอะไรที่เฉพาะเจาะจงอยู่ในกล่องนี้ ให้จัดรูปแบบกล่องด้วยวิธีนี้และด้วยวิธีนี้เท่านั้น”

:has(<direct-selector>) {
  /* ... */
}

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

เพื่อคำอธิบายที่ชัดเจนยิ่งขึ้น MDN ทำมันได้อย่างสมบูรณ์แบบ

ปัญหาการจัดแต่งทรงผม

ในปีที่ผ่านมา เราไม่มีทางจัดสไตล์องค์ประกอบหลักโดยอิงจากองค์ประกอบย่อยโดยตรงขององค์ประกอบหลักนั้นด้วย CSS หรือองค์ประกอบตามองค์ประกอบอื่น ในโอกาสที่เราต้องทำอย่างนั้น เราจะต้องใช้ JavaScript บางตัวและสลับเปิด/ปิดคลาสตามโครงสร้างของ HTML :has() แก้ไขปัญหานั้นแล้ว

สมมติว่าคุณมีองค์ประกอบส่วนหัวระดับ 1 (h1) นั่นคือชื่อของโพสต์หรือบางสิ่งในลักษณะนั้นในหน้ารายการบล็อก จากนั้นคุณมีส่วนหัวระดับ 2 (h2) ที่ตามมาโดยตรง h2 นี้อาจเป็นหัวข้อย่อยของโพสต์ ถ้าอย่างนั้น h2 มีอยู่ สำคัญ และอยู่หลัง h1, คุณอาจต้องการทำให้ h1 นั้นโดดเด่น ก่อนที่คุณจะต้องเขียนฟังก์ชัน JS

วิถีโรงเรียนเก่า – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

ฟังก์ชัน JS นี้กำลังมองหา h1 ทั้งหมดที่มี h2 ดำเนินการต่อและใช้คลาสของเนื้อหาไฮไลท์เพื่อสร้าง h1 โดดเด่นเป็นบทความสำคัญ

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

วิถีแห่งโรงเรียนใหม่ – CSS

h1:has(+ h2) {
    color: blue;
}

โยน :has() ลงไปบ้าง!

ตอนนี้คุณสามารถใช้ :has() เพื่อให้ได้สิ่งเดียวกันกับที่ฟังก์ชัน JS ทำ CSS นี้กำลังตรวจสอบ h1 ใด ๆ และใช้ ผู้รวมพี่น้อง ตรวจหา h2 ที่ตามมาทันที และเพิ่มสีน้ำเงินให้กับข้อความ ด้านล่างนี้คือตัวอย่างการใช้งานเมื่อใด :has() สามารถใช้งานได้สะดวก

:มีตัวเลือกตัวอย่างที่ 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:มีตัวเลือกตัวอย่างที่ 2

หลายครั้งที่เราในฐานะพนักงานบนเว็บกำลังจัดการหรือทำงานกับรูปภาพ เราอาจใช้เครื่องมือนั้น Cloudinary จัดให้มีการใช้การแปลงต่างๆ บนรูปภาพของเรา แต่โดยปกติแล้วเราต้องการเพิ่มเงาตกกระทบ รัศมีเส้นขอบ และคำอธิบายภาพ (เพื่อไม่ให้สับสนกับข้อความแสดงแทนในแอตทริบิวต์ alt)

ตัวอย่างด้านล่างกำลังใช้ :has() เพื่อดูว่ารูปภาพหรือรูปภาพมีองค์ประกอบ figcaption หรือไม่ และหากมี องค์ประกอบจะใช้พื้นหลังและรัศมีเส้นขอบเพื่อทำให้รูปภาพโดดเด่น

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

ให้ฉัน :has() ที่?

คุณจะเห็นว่า :has() มีการสนับสนุนที่ยอดเยี่ยมในเบราว์เซอร์สมัยใหม่

:has() ในสังคม!

ฉันติดต่อเครือข่ายของฉันบน Twitter เพื่อดูว่าเพื่อนๆ ใช้งานอย่างไร :has() ในการทำงานในแต่ละวันของพวกเขา และนี่คือสิ่งที่พวกเขาจะพูดเกี่ยวกับเรื่องนี้

“ตัวอย่างหนึ่งที่ฉันมีคือการจัดสไตล์ SVG เฉพาะจากแพ็คเกจของบุคคลที่สาม @ซอสเปิด เพราะฉันไม่สามารถจัดสไตล์ได้โดยตรง”

นี่คืออะไร นิคเทย์เลอร์ ราคาเริ่มต้นที่ เปิดซอส ต้องพูดถึงการใช้ :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

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

แอบบีย์เปรินี ราคาเริ่มต้นที่ Nexcor Food Safety Technologies, Inc.

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

สิ่งที่ควรทราบ

มีประเด็นสำคัญบางประการที่ควรคำนึงถึงเมื่อใช้งาน :has() สัญลักษณ์แสดงหัวข้อย่อยอ้างอิงจาก เอ็มดีเอ็น.

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

สรุป

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

ลิงค์:

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• PlatoData.Network Vertical Generative Ai เพิ่มพลังให้กับตัวเอง เข้าถึงได้ที่นี่.
• เพลโตไอสตรีม. Web3 อัจฉริยะ ขยายความรู้ เข้าถึงได้ที่นี่.
• เพลโตESG. คาร์บอน, คลีนเทค, พลังงาน, สิ่งแวดล้อม แสงอาทิตย์, การจัดการของเสีย. เข้าถึงได้ที่นี่.
• เพลโตสุขภาพ เทคโนโลยีชีวภาพและข่าวกรองการทดลองทางคลินิก เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/the-power-of-has-in-css/