CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！

複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1

[coliss]

CSSの新しい疑似クラスがブラウザで利用できるようなりました。複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()

[tmayuko312]

”SafariとFirefoxで”…あっ便利だと思ってガンガン使ってみたら他のブラウザで崩れてるやつや……”Chromeのサポートは未”解散

[yaboot]

なんかややこしくなってきた、、、

[ultimate-ez]

ほー。プリプロセッサでやってたようなことをcssで出来るようになる感じか！それならブラウザがscssを直接理解しててくれるようになる方が嬉しい気もするけど…。

[kuippa]

isもwhereもなんか他の言語のそれと違うからいやんな感じだな。isを[|]代わりとかwhereを下にぶら下がる順位調整につかうとか

[syukit]

Whereは便利かも

[mizdra]

where 便利すぎる

[daizo1117]

“ライブラリやベースのスタイルシートは、属性セレクタを:where()でラップすることで、セレクタ全体の詳細度を低く保つことができ、この問題を回避できます。 CSS /* sanitize.css */ svg:where(:not([fill])) { fill: currentColor; } /* author

[htenakh]

こういうのＩＥが完全に使われなくなるか、サポートしてるかで教えてくれ

[teramako]

:isは旧:-moz-anyとか-webkit-anyですね。当初:anyで提案されてたはずなんだが…どうしてisになったんだろう？

[kno]

IE…はもうどうでもいいけど、Chromeが対応したら起こして

[yamadar]

これは便利かも？

[gachapining]

詳細度を直接変更する :where() はここぞというときに限定しないと、カオスなことになりそうだ

[primedesignworks]

is() はぱっと見で「sass でええやん」ってなってる

[RATCHO]

scssかよ

[kathew]

軽く検索した感じだとまだpolyfillは見つからず。将来的に使いたいけど、今使うには用途が限られるか。chromeも対応していないので、単にレガシーブラウザを対象外にすればいいというものでもなさそう

[hiduki001]

機能はいいんだけど、名前と合致してなくて使いにくいですね…

[spark7]

タイトル盛りすぎだろ

[ultimatebreak]

isはscss使ってるなら特に意識しなくていい。whereはフーレムワークやライブラリでは必須かな。なおIE

[carl_s]

:where()のお世話になる頻度高そう。olやul、h要素みたいに外観デザインでも使うし記事本文でも使うタグやらclassの管理が楽になる。

[makou]

古いCSSを自動的に対応させてくれる仕組みがほしいな。

[laptice]

CSSの新しい疑似クラス、詳細度で困ってた人の助けになるかな？リセット系に使って欲しい。

[kvx]

whereいいな。

[inazuma2073]

whereはどっかにあるはずのこのへんをこうしろって使い方？