rryuのブックマーク - はてなブックマーク

rryu id:rryu

ブックマーク / qiita.com/degudegu2510 (2)

【CSS】displayプロパティに2つ値が入るってマジ！？どゆこと！？ - Qiita
はじめにみなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年１月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。背景まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。最近displayプロパティに
rryu 2023/01/20
今は自身の振る舞いと子要素の振る舞いを掛け合わせた inline-flex みたいな値を用意して凌いでいるが、種類が増えると掛け合わせが爆発するので今のうちに別々に指定できる様にしたということなのか。

css
リンク
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめにあなたは "擬似クラス" 何個言えますか？擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまでたくさん種類があるのは、ご存知ではないでしょうか？でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、何種類あるか、どんな擬似クラスがあるかをまとめました。知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。擬似クラス擬似クラスとは？擬似クラスとは、セレクタのあとにつけることで、指定した要素の状態に応じて
rryu 2022/08/21
いきなりis()から始まるのはなかなか厳しい感じがする。:indeterminateのサンプルが効いてないように見えるのはSafariが未対応だからっぽい。

css
リンク
1