1人CSS Advent Calendar 2022
ryokatsu- その日の思いつきで適当にCSSのことを簡単に紹介するアドベントカレンダーです。
- CSSに関することであれば何でもOK
ryokatsu12/1 フクロウセレクタ
-
*（ユニバーサルセレクタ）と次の兄弟要素を指定することができる+を組み合わせて* + *と記述するセレクタをフクロウセレクタと言います（フクロウの目の形に似ているので）
Every LayoutにStackという考え方があります。
例えば以下のコードがあります。
p {
margin-bottom: 1.5rem;
}
他の要素が続く場合は特に問題なさそうですが、:last-childなどがあると余計なmarginができてしまいます。親要素にpaddingが指定してある時も余計なmarginが入り二重に間隔が空いてしまいます。
突然ですが、マージンについては、超有名な僕も大好きな記事を貼ります
ここで言うとおり「マージンをつけるな！」はその通りですね。
話を戻すとフクロウセレクタがこの問題を解決してくれます。フクロウセレクタは、記述通り2番目以降の要素を指定することができます。言い換えると最初以外の要素とも言えるでしょう。
.stack > * + * {
margin-top: 1.5rem;
}
これで余計なマージンを回避できます。
違う方法で:not()もありますが、フクロウセレクタの方が好みです。
ryokatsu12/2 text-decoration-skip-ink
文字の上線や下線がアセンダー、ディセンダーを超えるときに線をどのように引くかを決めるプロパティです。つまりtext-decoration: underlineがある前提です。
よくあるのがpやgなどの文字でtext-decoration: underlineを指定すると下線をはみ出してしまいます。
参照：MDN
これを解決してくれます。text-decoration-skip-ink: none;に指定してあげると、文字が下線を超えないようになります。（線が文字を超えるところで中断される）
参照：MDN
注意点としては、グリフに表意文字が含まれていると影響があり望ましくない結果になるかもしれません。
ちなみに、メモアプリで有名なNotionでは、文字の下線をtext-decoration: underlineではなく、border-bottomを使用しています。意外とこの方法はありかもしれませんね。
border-bottom: 0.05em solid;
ryokatsu12/3 @document
ネタを探していたら面白い仕様を発見しました。ただこの仕様は現在非推奨（CSS Conditional Rules Module Level 3 にはあったがLevel4では延期になっている）なので、使えません。
アットルールを使ってurl内含まれるスタイルを記述できるようです。
@document url("https://www.example.com/") {
h1 {
color: green;
}
}
url()関数以外にもサブドメインを含むドメインに一致する時だけ適用するdomain()だったり、面白いのがregexp()で正規表現でURLマッチしたものだけに適用することができるらしいです。
使えそうなユースケースとしては、ある特定のクエリパラメータが含まれる時だけCSSを適用させたいというケースでは@documentを使うとJavaScriptでクエリパラメータを取得しなくてもCSSだけで完結しそうです。
ただちょっと気になるのがインジェクションが起こりそうなのでそのあたりが心配にはなります。
MDNには
メモ: このプロパティの -moz 接頭辞がついたバージョン @-moz-document があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました (バグ 1035091 を参照)。
となっているので、今にもインジェクションが起こりそうな気がしてしまいます。
ryokatsu12/4 @when/@else
(今日と明日は諸事情で家にあまりいないので軽めで)
個人的にちょっと面白いなと思ってた仕様です。CSSで条件分岐を書けるようにするというものです。
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
} @else {
/* C */
}
まだどのブラウザにも実装されていない、@elseの部分は省略可能なのかなど、気になることはありますが、ブラウザで実装されたらCSSのシンタックスがガラリと変わりそうな予感もしています。
ただこのレイヤーで条件分岐する方法は、今まで通り@mediaだったり頑張ればできそうなので、需要があるのか微妙な所です。（若干読みにくいし）（もう少し低いレイヤーだと:has()とかも入ってきたし）条件が複数ある時にまとめられるのがメリットでしょうか。
ryokatsu12/5 HSL Colors
今日も軽めで。色を指定する時によく使うのは16進数での指定かrgb()かと思います。
/* 16進数 */
.primary {
color: #dc143c
}
/* rgba() aは透明度を表す */
.primary {
color: rgba(220,20,60, 0.6)
}
しかしこのコードは少し人間に分かりにくいものだと思います。（慣れていしまえばそうでもないですが）
これをHSL色空間で表現することで多少わかりやすくなると感じています。
HSLでは、色相（hue）、彩度（saturation）、明度（luminance） を使って色を定義していきます。
MDNの表が分かりやすいです。HSLは最終的に16進数として解釈されます。
.primary {
color: hls(4 , 83% , 60%)
}
これの何がいいかと言うと、「落ち着いた感じ」とか「色を強くしたい」などを調整するのが値を上げ下げするだけで調整できます。慣れると結構いい感じにできます。
結構Figmaなどで色は決まっているケースは多いのでコーディングする機会はないかもですが、実はデザイントークンなどを作る時に威力を発揮しそうです。どれか一つの値を固定にして（色相がほとんどかも）カスタムプロパティを使えば固定した色から明るくしたり、グレースケールを作ったりの取り回しがいい感じにできそうです。
ryokatsu12/6 Masonry Layout
また時間がなかったので小ネタ
いつものようにMDNでネタを探していたら知らないものがありました。
CSSで組積的なレイアウトを実現できるもの。ブロックなどを積み上げて組み上げていく工法でレンガのようなレイアウトを実現できます。
Masonryレイアウトはその昔jQueryのプラグインを使って実装した経験があるのですが、CSSでできるようになるのは良いことだ。
ryokatsu12/7 pico.css
最近知ったCSSのライブラリですが、軽量かつミニマムなので、モック作成などに役立ちそう
- よく使いそうなUIコンポーネントを作れる
- ReactとかNext.jsなどにも使える
- レスポンシブもいい感じに作れる
- 設定をいじるのも簡単
ryokatsu12/8 CSS設計ってどうなの？
ちょっとサボってしまったこともあるのでポエムを。。
最近よく耳にするのは、「最近CSSってscopedで書くのが一般的だからBEMとかそういうCSS設計っていらなくない？」みたいな話です。
通常のWEB制作で直でHTML書いたり生CSSの場合の場合は絶対必要な気がするが、アプリケーション開発では確かに必ずしも必要はなさそうと思っている。 現にコンポーネントを開発している最中にCSS設計を意識して書くことはほとんどなく、そもそも必要になった場合はコンポーネントの単位を小さくしたり分割したりすれば良いという考え。CSS設計には命名の話も絡んでいるので、そこは考えることもあるが、基本的には以下の考えに同意したいです。
CSS Modulesではない場合のstyledComponentやEmotionなどの場合はルールさえ決めればいい話でその時CSS設計（BEMとか）は考えなくて良いはず。（というか後はお好きにどうぞと思っている）
Tailwindはその分この命名の呪縛から逃れることができるので快適だが、デメリットもあるのでそのあたりは、ちゃんと吟味する必要がありそう
マイクロフロントエンドとかだと命名のバッティングが起こるのでCSS設計は、必要そうです。
結論：自分の関わっているプロダクトがまずどういう構造かを考えたうえでCSS設計を考えたい（身も蓋もない）
ryokatsu12/9 ::target-text
まだ全ブラウザに対応していないがですが、面白いCSSを発見しました。
Scroll To Text Fragment
アンカーリンクなどでスクロール遷移する時にid属性を付与すると思いますが、更に拡張を加えた機能です。
以下のような感じで遷移すると特定の文字をターゲットすることができます
https://example.com#hogehoge:~:text=hogehoge
::target-textの疑似要素では、Scroll To Text Fragmentの文字にCSSで強調を行うものです。
ユースケースとしては、何かインフォメーションとしてこの文章だけは、読んでほしいみたいな時に強調しておくなどが考えられそうです。
ただMDNにあるリンクを、踏んで遷移したあとリロードするとCSSは反映されなかった。これはスクロールイベントとかで連動させる必要があるのかしら
ryokatsu12/10 @counter-style
リストの表示を自由に表現できるものです。（ただしsafariは未対応）
ol { list-style: number-counter;}
@counter-style number-counter {
system: numeric;
symbols: "\1D7D8" "\1D7D9" "\1D7DA" "\1D7DB" "\1D7DC" "\1D7DD" "\1D7DE" "\1D7DF" "\1D7E0" "\1D7E1";
suffix: "\003A\0020";
}
表現は様々で、面白いので言うとSVGなんかも対応している
ただ何度も言うがsafariは対応していない。。
ryokatsu12/11 State of CSS 2022を見た感想
使われているプロパティ
- Flexboxとgapが多く使われている
- これは自分も良く使うしわかる
- カスタムプロパティが多く使われている
- これも分かる
- aspect-ratio
- これも分かる
- scroll-behavior
- まだ使う場面に遭遇していないけどめちゃくちゃ便利なのは分かるし使うはず
他にも色々あるが、今年のCSSは去年に引き続き進化しているinteropの活動が大きいなという感想
フレームワーク
- Tailwind CSSがトップでついでPureCSS
- これは分かる。日本でも導入例が多くなってきている印象だし、よく耳にする
- 残りは割と混戦しているが、中には落ちてきているものもある
- Primerというのは知りなかったので調べたい
CSS in JS
-
CSS Modulesが周囲に返り咲く
- Emotion今後どうなるんだろう。個人的にはどちらでも良いが、EmotionはStyleタグの中で書く書き方が一番好き。書き方色々あるのがちょっと扱いが難しい印象があったりするんだろうか。
- 後はこの記事の影響はあったりするだろうか。
- Stitchesとかvanilla-extractなどもまだ触っていないのでどういうものかは試さないと
-
SASSは未だ健在なんだな
-
テスト環境は、SPよりPCの方が若干多い。
- 10%ほどPCの方が多いけどコロナになってから、SPで閲覧より家でPCから閲覧するユーザーとか多くなったのかな
- レスポンシブは、当たり前のはずなのでこのあたり気になる
-
CSSが独学が圧倒的に多い
- その学習方法は気になる所だが、割と場数を踏むことが大事だからなー
-
Flexboxとgapが一番採用されている
- 人類はまだGridレイアウトをするのがはやいのか
- ただsubgridも同様に、コメントが多く寄せられているし、入れ子にしたときのレイアウトが強力になっていることもあり来年以降伸びそう
いやーCSSの最近の動きは素晴らしい！！今年はIE11のない世界線を突入したことによりもっと活発になることが予想される。safariのリリースサイクルも短くなり来年も楽しみだ！
ryokatsu12/12 caption-side
tableのキャプションの位置を、上下に移動できるCSS
なんでこれを紹介したかというと、ネタです。完全に。というか今まで長年コーディングしていましたが、このプロパティは知りませんでした。。
ryokatsu12/13 empty-cells
table系のCSS続きます。
tdの中身が、なかった時に周りのborderを消してくれるもの。border-collapse: separate;が指定してある時のみ効いてくれる。
これもcaption-side同様に知らないプロパティだった。
ryokatsu12/14 ic
使用するフォントの水(U+6C34)の文字の送り幅を基準に1icと定義した相対単位になります。
贈り幅とは、文字の開始位置から次の文字の開始位置までの長さのことです。icは、親要素の文字の大きさによって変わります。
文章のバランスを調整できるので、読みやすいコンテンツが必須な場合は使えるかも知れません。
ryokatsu12/15 image-set
指定した画像フォーマットから適切なものを、選択することができます。
.box {
background-image: url("large-balloons.jpg");
background-image: image-set(
url("large-balloons.avif") type("image/avif"),
url("large-balloons.jpg") type("image/jpeg"));
}
上記の通りでサポートされている最初のフォーマットに一致したものを表示してくれます。
画像最適化まではいかないかもですが、cssで切り替えることができるのはとてもありがたい限りです。
※avifフォーマットがはやく全モダンブラウザにサポートされてほしい
ryokatsu12/16 inset要素
top right bottom leftを一括することができるプロパティです。
モーダルなどで中央配置する時に0などをそれぞれ指定していたものが一括で指定できます。
/* insetを使わない */
.modal{
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%)
translateY(-50%);
}
/* insetを使った指定 */
.modal{
position: fixed;
inset: 0;
margin: auto;
}
言ってしまえばショートハンドなので、便利ですが細かいmarginなどを指定する時に少し扱いにくいプロパティではあるので用途によって使い分けたい所です。
ryokatsu12/17 scroll-margin-top
これは過去のマークアップを経験していない人には当たり前なプロパティですね。昔は例えばヘッダーなどを固定にした際に、アンカーリンク移動するとヘッダー分の要素ズレるという問題がありました。これを解消するためにヘッダーの高さ分ネガティブマージンを与えてかつヘッダーにも高さを指定してあげる必要がありました。
これを解決したのが、ページ内リンクの表示位置を調整できるscroll-margin-topです。ターゲット要素にちゃんとスクロールできます。
:target {
scroll-margin-top: 80px;
}
12/18 写真をめくるようなUI
ネタがない！ということで外部の記事に頼ります。
以下最近みた中で凄いと思ったので共有です。
解説が丁寧なので手順を踏みながら実装できます。アニメーションのお勉強におすすめです。
ここで使われているanimation-delayを使いこなさせるとCSSアニメーション力が高まると思います！
ryokatsu12/19 @supports
あまり使われないかもですが、たまに便利になるプロパティです。そのCSSから利用可能かどうかはJavaScriptのwindow.CSS.supports()から確認できます。これをCSSだけで確認できるのが@supportsです。
以下は、grid要素がブラウザでサポートしていたら適用されるCSSです。not（否定）も使えます。サポートの条件に合致しない場合は、フォールバックも返せます。
@supports (display: grid) {
div {
display: grid;
}
}
12/20 accent-color
もう一般的になってきているので今更感はあるのですが、改めて紹介。
以下の4つのHTML要素の色を変更できるCSSです。
<input type="checkbox"><input type="radio"><input type="range"><progress>
accent-color: red;
いやー本当に便利になりましたよね。accent-colorがない時代はどうしていたかと言うと一度チェックボックスなどのスタイルを全て初期化してゼロから作り直し必要がありました。スタイルの再構築をするCSSがネット上に溢れていましたが、品質に良し悪しもあってかなりモヤモヤしながらコーディングしていましたね。
スタイルの再構築することでアクセシビリティ的にも問題があったことを考えると、このCSSの功績はかなり大きいじゃないでしょうか。