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
56
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
870
bulletproof-react 写経してみた
takuyakikuchi
0
1.3k
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
400
Other Decks in Technology
See All in Technology
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
93
5k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Visualization
eitanlees
139
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
GraphQLとの向き合い方2022年版
quramy
36
13k
Why Our Code Smells
bkeepers
PRO
332
56k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Designing the Hi-DPI Web
ddemaree
276
34k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
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
ありがとうございました 👋