本セッションの登壇者
セッション動画
皆さん、こんばんは。今日はTechFeed Experts Night CSS特集ということで、私のほうからお話しさせていただきます。
まず、自己紹介です。よしこと言います。株式会社ナレッジワークという会社で、フロントエンドエンジニアをやっています。
Webフロントエンド開発で頻出するパターンの中で、今まではそのパターンを実現するための仕様がなかったために、既存の仕様をがんばって組み合わせて実現していたようなケースがありました。ですが、仕様は日々新しく提案/実装されていくので、「そのパターンを実現するための仕様がモダンブラウザに実装された」というものの中から、利用したくなる機会も多そうなものについてbefore/afterのコードを軸にご紹介します。
:focus-visible - 出てほしいときだけにあたってくれるユーザフレンドリなセレクタ
では、最初ですが、focus-visibleというセレクタです。Webアプリケーションをキーボードで操作するときに、今どこにフォーカスがあるかを示すために、見た目に差をつけるほうがいいのですが、beforeのコードのように:focusでそれをしてしまうと、マウスみたいなポインティングデバイスではクリックした後にそれが当たってしまって、逆に操作のノイズになってしまうという問題がありました。
この「こういうときはアウトラインが出てほしいんだけど、こういうときは出てほしくない」みたいなニーズに応えたのがこの:focus-visibleで、「こういうときに出てほしい」というときにだけ当たってくれる、すごくユーザフレンドリかつ開発者フレンドリなセレクタになっています。
overscroll-behavior - スクロールが連鎖する挙動を防ぐプロパティ
次がoverscroll-behaviorというCSSプロパティです。こちらはスマホでサイトを見ているとき、スクロールできる長いページの中でモーダルを上に開いて、そのモーダルもスクロールがあるというときに、上にあるモーダルを最後までスクロールすると、後ろのページのスクロールも一緒に動いてしまうみたいな挙動がありました。
そういったスクロールが連鎖する挙動を防ぐには、今まではモーダルを開いたときに後ろのbodyにoverflow: hiddenを付けるみたいなハックもあったのですが、そちらだと副作用が出てしまったりするので、このプロパティを使えるとそういうこともなく、解消できると思います。
accent-color - 標準UIのままちょっとだけ色を変更できるプロパティ
次がaccent-colorです。こちらはブラウザ標準のフォームのUIの色を変えてくれるプロパティになります。機能的にはブラウザ標準UIを使いたいんだけど、ちょっと色がウチのサイトのテーマと合わないんだよな…みたいなときに、わざわざ別で実装しなくても色を変えられるようになったので、標準UIを使って実装ができます。標準UIの出番が増えるんじゃないかなと思っています。
transformプロパティの関数が値からCSSプロパティに
次がtranslate、scale、 rotateと書いていますが、こちらはtransformプロパティの値の関数です。今まではtransformプロパティの値の部分に関数を並べてbeforeのように書いてたのですが、これだと1個だけ追加とか上書きとかができない問題がありました。これからは、値ではなくてプロパティとして独立したので、ばらばらに宣言したり上書きしたりすることができるようになります。
L/S/D Viewport Units - URLバーなどのサイズをより柔軟に指定できるプレフィックス
次がViewport Unitsという新しいCSSの単位です。スマートフォンをスクロールしたときに「ブラウザのURLバーの高さなどが動的に変わってしまう」「WebページのViewportの高さが操作の中で変わってしまう」という特徴があるのですが、それに対して既存の単位だと、表示が一番大きいときの高さしか設定できなかったので、URLバーが大きく画面領域が小さいときに100vhだと下にはみ出てしまうといった問題がありました。
それに対して、vhとかvwとかの既存の単位にプレフィックスとしてl(large) / s(small) / d(dynamic)を付けることで、画面が一番小さいとき/大きいとき、また、ダイナミックに今どういうサイズなのかを表すことができるようになりました。たとえば常に画面の高さいっぱいにしたいなら、100dvhを指定することでそれが実現できるようになっています。
@layer - CSSカスケードの新しい概念
次が**@layer**というもので、これは新しい概念です。CSSは重ね掛けで上書きができたりするのですが、今までは記述順序を後ろに書くとか詳細度を高くして勝たせるみたいなやり方をしていました。ただ、これがけっこう管理が難しくて、工夫する必要がありました。
これに対して、記述順序とか詳細度よりも強い概念として@layerが入りました。beforeではカスタマイズしたい内容があったときに、.itemのカスタマイズ定義を後ろに書くことで上書きできるようにしているのですが、下のafterではまずframework、customという2つの@layerを定義しておいて、customを後に書くことで「customのほうが上書きさせたいものです」ということを示しています。先にこの定義をすることで、あとはどんな記述順序でも詳細度でもframeworkに入れたものよりもcustomに入れたものの方が勝つことになります。かなりシンプルに重ねがけ(レイヤ)を表現したCSSの進歩だと思います。
range syntax 比較演算子で記述できるメディアクエリ
次がこれ、先月めでたくSafariにも入って全ブラウザ対応になったんですけど、メディアクエリのrange syntaxというものです。これは今までmin-widthやmax-widthとかでメディアクエリを使っていたと思うんですけど、「どっちがどっちだっけ？」みたいに私もいまだに混乱したり、未満とか超過という指定ができないので、未満にしたかったら1ピクセル引く…といったことをやらなきゃいけなかったんですね。
それに対して、range syntaxだと比較演算子、不等号などで書くことができるので見た感じもわかりやすくなるし、300ピクセル未満というのも「＝」を省いて不等号で書くことで未満を表現できるといったように、わかりやすく書けるようになります。
最後に、こちらも先月めでたく全ブラウザ対応になったcontainerクエリですが、こちらはこの後のセッションで詳しくお話がありますので、そちらでぜひ聞いていただければなと思います。
最後に私がいるナレッジワークという会社なんですが、フロントエンドエンジニアを募集しております。私のDMを開放していますので、お気軽にお声掛けいただけたら嬉しいです。
本日は以上となります。ありがとうございました。
