style: use sibling selector instead of :has

julhoang · julhoang · commit bf2153b93e7e · 2026-04-21T12:35:10.000-07:00
diff --git a/static/css/v3/header.css b/static/css/v3/header.css
@@ -101,7 +101,7 @@
   background: var(--color-surface-strong);
 }
 
-.header__search-bar:has(:focus-visible) {
+.header__search-bar:focus-within {
   outline: 2px solid var(--color-stroke-link-accent);
 }
 
@@ -391,7 +391,7 @@ html.dark .header__icon--theme-moon {
 
 /* ==========================================================================
    Mobile drawer
-   CSS-only toggle via hidden checkbox + :has() selector.
+   CSS-only toggle via hidden checkbox + sibling combinator.
    ========================================================================== */
 
 .header__menu-toggle {
@@ -411,16 +411,16 @@ html.dark .header__icon--theme-moon {
   display: none;
 }
 
-.header:has(.header__menu-toggle:checked) .header__menu-icon--open {
+.header__menu-toggle:checked ~ .header__menu-btn .header__menu-icon--open {
   display: none;
 }
 
-.header:has(.header__menu-toggle:checked) .header__menu-icon--close {
+.header__menu-toggle:checked ~ .header__menu-btn .header__menu-icon--close {
   display: inline-flex;
 }
 
 @media (max-width: 990px) {
-  .header:has(.header__menu-toggle:checked) .header__drawer {
+  .header__menu-toggle:checked ~ .header__drawer {
     display: flex;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@`
`101`	`101`	`background: var(--color-surface-strong);`
`102`	`102`	`}`
`103`	`103`
`104`		`-.header__search-bar:has(:focus-visible) {`
	`104`	`+.header__search-bar:focus-within {`
`105`	`105`	`outline: 2px solid var(--color-stroke-link-accent);`
`106`	`106`	`}`
`107`	`107`
`@@ -391,7 +391,7 @@ html.dark .header__icon--theme-moon {`
`391`	`391`
`392`	`392`	`/* ==========================================================================`
`393`	`393`	`Mobile drawer`
`394`		`- CSS-only toggle via hidden checkbox + :has() selector.`
	`394`	`+ CSS-only toggle via hidden checkbox + sibling combinator.`
`395`	`395`	`========================================================================== */`
`396`	`396`
`397`	`397`	`.header__menu-toggle {`
`@@ -411,16 +411,16 @@ html.dark .header__icon--theme-moon {`
`411`	`411`	`display: none;`
`412`	`412`	`}`
`413`	`413`
`414`		`-.header:has(.header__menu-toggle:checked) .header__menu-icon--open {`
	`414`	`+.header__menu-toggle:checked ~ .header__menu-btn .header__menu-icon--open {`
`415`	`415`	`display: none;`
`416`	`416`	`}`
`417`	`417`
`418`		`-.header:has(.header__menu-toggle:checked) .header__menu-icon--close {`
	`418`	`+.header__menu-toggle:checked ~ .header__menu-btn .header__menu-icon--close {`
`419`	`419`	`display: inline-flex;`
`420`	`420`	`}`
`421`	`421`
`422`	`422`	`@media (max-width: 990px) {`
`423`		`- .header:has(.header__menu-toggle:checked) .header__drawer {`
	`423`	`+ .header__menu-toggle:checked ~ .header__drawer {`
`424`	`424`	`display: flex;`
`425`	`425`	`}`
`426`	`426`	`}`