CSS :has() เปลี่ยนวิธีเขียน hamburger nav ไปเลย

ก่อนหน้านี้การทำ hamburger nav แบบ CSS-only ต้องอาศัย trick เช่น :checked + <label> ซึ่งต้องวาง element ในลำดับที่ถูกต้อง และ markup ดูแปลกๆ

ด้วย :has() เขียนได้แบบนี้:

/* ซ่อน nav โดยค่าเริ่มต้น */
nav { display: none; }

/* แสดงเมื่อ checkbox ถูก check */
header:has(.nav-toggle:checked) nav {
  display: block;
}

/* Animate hamburger เป็น × */
header:has(.nav-toggle:checked) .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

ไม่ต้อง JavaScript เลย และ markup ก็ natural กว่าเดิมมาก เพราะ header เป็น parent ที่ “รู้” ว่า checkbox ข้างในถูก check อยู่หรือเปล่า

Browser support ตอนนี้ครอบคลุมทุก browser หลักแล้ว (Chrome 105+, Firefox 121+, Safari 15.4+)