Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Game Changer? :has() の到来 🛸
Search
TK
January 13, 2023
Technology
0
53
Game Changer? :has() の到来 🛸
1/27日に行われた、WebフロントエンドなんでもLT 会 #7にて発表したスライド。:has() について。
https://ncdc-dev.connpass.com/event/265595/
TK
January 13, 2023
Tweet
Share
More Decks by TK
See All by TK
Chromatic VRT 戦略:効果を保ちつつ、コストを抑える方法
takuyakikuchi
0
580
bulletproof-react 写経してみた
takuyakikuchi
0
1.1k
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
360
Other Decks in Technology
See All in Technology
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
480
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
950
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
110
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
870
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
640
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
690
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
260
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
One engineer company with Ruby on Rails
rstankov
2
320
require(ESM)とECMAScript仕様
uhyo
4
870
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
How GitHub (no longer) Works
holman
304
140k
Atom: Resistance is Futile
akmur
259
25k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Practical Orchestrator
shlominoach
182
9.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Automating Front-end Workflow
addyosmani
1356
200k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Agile that works and the tools we love
rasmusluckow
325
20k
Producing Creativity
orderedlist
PRO
337
39k
Transcript
Game Changer? :has() の到来 🛸
TKです 👋 _takuyakikuchi
https://survey.devographics.com/survey/state-of-css/2022
None
CSS キャッチアップせねば 🔥
• Subgrid • @container • :has() • :where() • Cascade
• Layers(@layer)
:has() 🎊
https://developer.chrome.com/blog/has-m105/
:has() is 何? 🤔
:has() は Parent Selector! いやFamily Selector だ 👪
CSSの指定は横方向、下方向へと進む /* special クラスをもっている <li> 要素へ焦点を当てる時 */ li.special { …
} /* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */ article p span { ... } /* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */ h1 + ul + p { ... } Before :has()
上方向に親要素を選択可能に 🙌 /* 子・孫要素の条件を指定して、親要素を選択する */ <target>:has(<condition>) { <styles> } After
:has()
<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()
<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()
✌
いつ使うの? 🤔
Cards Card の中身に合わせて、 Grid レイアウトを変更する
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; }
思考プロセスの転換が必要! クラス名や、要素を足すことによるスタイリング指定からの脱却! HTML, CSS の構造はスッキリ ✨
Forms フォームの入力値の状態に合わせて、異なるスタイリングを適用
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; }
:has() + 擬似クラスで JavaScript いらず!
Content
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; }
直感的 「figure が figcaption 持っていたら...」と書ける/読めるので分かりやすい 🐥
Reacting to State マークアップの状態に応じて、スタイルを反応させる
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; }
既成概念にとらわれない発想 CSSゲーム👾 CSSアート
https://codepen.io/web-dot-dev/pen/rNdwzwK
CSS 魔法のハードルが下がった 🧙 + や ~ などの結合子 => :has() でよりシンプルに
まとめ
:has() で親要素を選択可能に 🙌 /* 子・孫要素の条件を指定して、親要素を選択する */ <target>:has(<condition>) { <styles> }
クラス名の苦悩(タイポ・命名)から抜け出せる コードがスッキリ 🧹✨
:has() のユースケースはかなり幅広そう✨
:has() が新たな発想を生み出す(!?) 🤯 対JS肥大化、ゲームチェンジャー
🚧
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
Zenn でも書きました https://zenn.dev/takuyakikuchi/articles/1d5a3f3ec6fbdc
ありがとうございました 👋