CSSの疑似クラス「:focus-within」が素晴らしい理由

CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素

[coliss]

[:focus-within][疑似クラス]:focus-withinを使用すると、子孫要素のフォーカスでスタイルできる。

[ntstn]

もうIEはさよならしようよ（血涙

[spark7]

あったら便利なエフェクトみたいのは非対応なら非対応のままでええやん。

[nmcli]

フォームに対してゴリゴリ書いてたJSが一部いらなくなるなー

[tGsQqV]

ieはお亡くなりに

[poliphilus]

IEは死んだけど動いてるんだ（ゾンビ）

[misarine3]

“IEはすでにお亡くなりになっていると考えると”クライアントはお亡くなりになってると考えないんだよなあ

[gachapining]

"IEはすでにお亡くなりになっていると考えると" 亡くなってないです。ちゃんと息の根を止めてください😠

[buhoho]

IEを使役するネクロマンサーどもを滅ぼすのだ！

[fotus4]

“IEはすでにお亡くなりになっていると考えると” 企業内利用で生き残っているIE11はつまり隔離環境下で生存してしまっているゾンビか

[eartht]

現実はIEがお亡くなりになってないのがつらいところ…

[proverb]

未だにWindows7のIE9みたいな古代人のアクセスある。さすがに稀だけど。まともに見れないサイトも多いだろうによく使い続ける気になるな。

[Wafer]

世界はgoogle chromeの炎に包まれた。だがIEは死滅していなかった（諦）

[yoiIT]

フォーム最適化は人々を幸せにする。IEは人々を苦しめ過ぎた。

[oktnzm]

IEが死んでないなら客を（自主規制）せばいいじゃない！

[kijtra]

俺も ” IEはすでにお亡くなりになっている” なんてことを言える仕事がしたいよ。(まだ10%くらいいる)

[ultimatebreak]

IEはお亡くなりに...なってると思った？残念！現役でした！！どんな気持ち？ねえどんな気持ち？ああああああああああああああああああああああああああ！！！！！！

[suika3417]

使い道ありそう（小並

[otchy210]

ほえー、便利。兄弟セレクタで工夫して書いてたやつがより直感的に書けるようになりそう。フォーカスが当たった時にプレースホルダのテキストがぬるっと避けるやつとか。

[kagehiens]

CSSってたまにしか触らないけど新しめのやつは機能すごいな。こんなんもう制御機構やん。

[sucelie]

客はIE死んでないけど？

[jintrick]

こんなギミックにIEカンケー無いわ

[guru_guru]

フォームはCSSの鬼門だったから…

[fujis_a]

“IEはすでにお亡くなりになっていると考える”

[yoshi-na]

これは使う

[primedesignworks]

著者は知らないだろうけど、そんなに日本の状況は甘くない。

[cl-gaku]

MSが確認するまでは生死不明でしょ

[maritimecolor]

これいいな！

[takeshi]

たしかに素晴らしい。