Game Changer? :has() の到来 🛸

1/27日に行われた、WebフロントエンドなんでもLT 会 #7にて発表したスライド。:has() について。

https://ncdc-dev.connpass.com/event/265595/

Transcript

1. Game Changer? :has() の到来 🛸
2. TKです 👋 _takuyakikuchi
3. https://survey.devographics.com/survey/state-of-css/2022
5. CSS キャッチアップせねば 🔥
6. • Subgrid
 • @container
 • :has()
 • :where()
 • Cascade • Layers(@layer)
7. :has() 🎊
8. https://developer.chrome.com/blog/has-m105/
9. :has() is 何? 🤔
10. :has() は Parent Selector! いやFamily Selector だ 👪　
11. CSSの指定は横方向、下方向へと進む /* special クラスをもっている <li> 要素へ焦点を当てる時 */ li.special { … } /* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */ article p span { ... } /* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */ h1 + ul + p { ... } Before :has()
12. 上方向に親要素を選択可能に 🙌 /* 子・孫要素の条件を指定して、親要素を選択する */ <target>:has(<condition>) { <styles> } After :has()
13. <div class="everybody"> <div> <div class="a-good-time"></div> </div> </div> <div class="everybody"></div> .everybody:first-of-type { animation: party 21600s forwards; } 🤔 Before :has()
14. <div class="everybody"> <div> <div class="a-good-time"></div> </div> </div> <div class="everybody"></div> .everybody:has(.a-good-time) { animation: party 21600s forwards; } After :has()
15. ✌
16. いつ使うの？ 🤔
17. Cards Card の中身に合わせて、 Grid レイアウトを変更する
18. https://codepen.io/web-dot-dev/pen/JjLJyWx <ul> <li class="card"> ... </li> <li class="card"> ... </li> <li class="card"> ... </li> <li class="card"> ... </li> <li class="card"> ... </li> </ul> /* バナーは Grid の横幅いっぱいの大きさ */ .card:has(.card__banner) { grid-row: 1; grid-column: 1 / -1; } /* 写真ありの時の Grid レイアウトの指定 */ .card:has(.card__media) { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); } .card__media { grid-column: 2; grid-row: 1 / -1; }
19. 思考プロセスの転換が必要! クラス名や、要素を足すことによるスタイリング指定からの脱却！ HTML, CSS の構造はスッキリ ✨
20. Forms フォームの入力値の状態に合わせて、異なるスタイリングを適用
21. https://codepen.io/web-dot-dev/pen/ZExyJKx <form action=""> <div class="form-group"> <label for="email" class="form-label"> <span class="sr-only">Email</span> </label> <div class="form-group__input"> <input required type="email" id="email" class="form-input" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="Enter valid email address" placeholder="Enter valid email address"/> <div class="form-group__error">Enter a valid email address</div> </div> </div> </form> /* invalid なフォームのカラーを変える */ .form-group:has(:invalid) { --color: var(--invalid); } /* フォーカスが外れているかつ、プレースホールダーが表示さ れていない、エラーメッセージを表示する */ .form-group:has(:invalid:not(:focus):not(:placeholder-shown )) .form-group__error { display: block; }
22. :has() + 擬似クラスで JavaScript いらず!
23. Content
24. https://codepen.io/web-dot-dev/pen/abYwyWQ <main> <article> <h1>Some Awesome Article</h1> <p> ... </p> <figure> <img alt="" width="200" height="200" src="https://assets.codepen.io/605876/team-awesome.png" /> </figure> <p> ... </p> <figure> <img alt="" width="200" height="200" src="https://assets.codepen.io/605876/team-awesome.png" /> <figcaption>Shot of the CSS, UI, and DevTools Chrome Dev</figcaption> </figure> <p> ... </p> </article> </main> figure:not(:has(figcaption)) { float: left; margin: 2rem 2rem 2rem 0; }
25. 直感的 「figure が figcaption 持っていたら...」と書ける/読めるので分かりやすい 🐥
26. Reacting to State マークアップの状態に応じて、スタイルを反応させる
27. https://codepen.io/web-dot-dev/pen/YzaQxQK const NAV_CONTROL = document.querySelector('.nav-control') const CONTROL_NAV = () => { NAV_CONTROL.setAttribute('aria-expanded', NAV_CONTROL.matches('[aria-expanded="false"]') ? true : false) NAV_CONTROL.setAttribute('aria-pressed', NAV_CONTROL.matches('[aria-expanded="false"]') ? true : false) } NAV_CONTROL.addEventListener('click', CONTROL_NAV) body { transform: translateX(calc(var(--open) * -200px)); } :root:has([aria-expanded="true"]) { --open: 1; }
28. 既成概念にとらわれない発想 CSSゲーム👾 CSSアート󰥤
29. https://codepen.io/web-dot-dev/pen/rNdwzwK
30. CSS 魔法のハードルが下がった 🧙 + や ~ などの結合子 => :has() でよりシンプルに
31. まとめ
32. :has() で親要素を選択可能に 🙌 /* 子・孫要素の条件を指定して、親要素を選択する */ <target>:has(<condition>) { <styles> }
33. クラス名の苦悩(タイポ・命名)から抜け出せる コードがスッキリ 🧹✨
34. :has() のユースケースはかなり幅広そう✨
35. :has() が新たな発想を生み出す(!?) 🤯 対JS肥大化、ゲームチェンジャー
36. 🚧
37. https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
38. Zenn でも書きました https://zenn.dev/takuyakikuchi/articles/1d5a3f3ec6fbdc
39. ありがとうございました 👋