TechFeed Experts Night#14まとめ

TechFeed Experts Night#14 〜絶対役立つ！最先端のCSS総ざらい

techfeed.io 久々にCSSを触らなきゃいけなくなったんだけど、CSSを自分が触らなくなって5年近く経っていて界隈なにか変わったのかなーと思っていたところで、ちょうどいいイベントがあったのでオンラインで参加してみた。

記事投稿時点ではまだのようだが、配信アーカイブが公開される予定とのこと。
見つけられた公開資料についてはリンクを記載しているのでぜひご覧ください。

以下、各セッションコメント

今までああ書いてたアレ、これからはこう書けそう @yoshiko_pg

諸事情によりビデオセッションとなったとのこと
記事投稿現在資料見当たらず

新しいcssプロパティや書き方の紹介。
個人的にはメディアクエリの @media(max-width: xxxpx) が @media(width <= xxxpx) みたいな式で書けるようになったのは使うかも、と思った。
フロントエンドエンジニアだと慣れてて気にならないのかもしれないが、使うたびにminとmaxどっちだっけ、ってなってた。

他にも実用的なものをたくさん紹介されていたので、セッションのアーカイブ公開が待たれる。

Custom propertiesのセレクタの省略と詳細度の分離 @kojika17

#techfeed_experts_night で登壇したスライドです。https://t.co/3rdn9KkA5P
— 久保知己 (@kojika17) 2023年3月1日

twitter.com

Custom propertiesを使うと記述が減るよ、という話。
みんなが気になったのは既存のscssをCSS変数化するときはChatGPTを使ってたところだと思われるｗ
テンプレートを与えて特定の文書を別な文書に書き換えるみたいなことはChatGPTが得意で、今後はAIに任せるのが主流になるだろうとのこと
自分はエクセルにcsv貼ったらよかれに列分割して可視化するとこまでやってくれるみたいなイメージ湧いた。今後マーケターの仕事は"考えること"に注力されていきそう。
話を戻すと、セッションで紹介されていた通り、!import祭りを回避できるのは非常に有用だなと思った。

更にどうでもいい話しちゃうとプレゼンに使っているライブラリ？これいいなぁと思った。

全ブラウザ対応したcontainer queryは何がスゴイのか？@tonkotsuboy_com

TechFeed Experts Night#14 で発表したスライドを公開しました💐

全ブラウザ対応したコンテナクエリの使い方、割合サイズのcqwを、デモを交えて紹介。

→ 全ブラウザ対応した container queryは何がスゴイのか？https://t.co/pFQmIK9QDn #techfeed_experts_night #CSS #脱IE時代のモダンCSS
— 鹿野壮 Takeshi Kano (@tonkotsuboy_com) 2023年3月1日

twitter.com

新しく追加されたcontainer queryについて。
従来のmediaクエリは画面全体（ウィンドウサイズ）を基準点としていたが、任意の要素（コンテナー）を基準にmediaクエリのようなものを書ける機能。
従来のmediaクエリだけだと簡潔なクエリで記述できないときに使える。
直近FIrefoxでサポートされて全ブラウザで使えるようになったとのこと。
正直デモと記事をみないと何を言っているのかわからないと思うので資料を見て欲しい 🤣
より詳細な解説がzennの記事にもなっているので、そちらも合わせて参照されたし。

昨今のコンポーネント単位で管理していく指向にも合致していて大々的に使われるようになっていきそうと思った。

State of CSS 2022に見るアクセシビリティ関連機能 @kazuhito

遅くなりましたがスライド公開しました https://t.co/R74xuIVzX9
— Kazuhito Kidachi (@kazuhito) 2023年3月3日

twitter.com アクセシビリティを考慮するプロパティがこんなにあることに驚いた。
が、ここまで考慮したサイトを最初から作るってかなり特殊なケースだろうし、実際あまり知られていないのよな。
ダークモードに関するもの以外はまだしばらくは使うことはないだろうなと思った。

CSS Animation パフォーマンスを考える原理 @tetracalibers

※記事投稿現在資料見当たらず

CSS Animationタグの描画処理方法を元にどういう風に書くと重くなってしまうかといった解説とその対処法の発表。
自分はサーバーサイドのエンジニアなので、読み込みパフォーマンスの観点はあっても、描画パフォーマンスの観点でcssを考えたことがなかったので非常に勉強になった。