音声書き起こし
1. OP/ゲスト紹介
@potato4d
こんにちは、UITのpotato4dです。
@potato4d
ユーザーインターフェースとテクノロジーを愛する開発者のためのウィークリーポッドキャスト、UIT INSIDE、今回もやっていきたいと思います。
@a_t
よろしくお願いいたします
@a_t
よろしくお願いします
@potato4d
ではまずはじめに富田さん、軽く自己紹介をお願いしてもよろしいでしょうか。
@a_t
アクセシビリティチームというところでリーダーをしている富田といいます。
アクセシビリティチームは社内でアクセシビリティの推進とか啓蒙をしているチームになっています。
それとは別にもともと10年ぐらいHTMLとCSSを各部署でずっとフロントエンドの特にHTMLとかCSS分の各部分を担当していたというようなところから、
今紹介いただいた社内の勉強会などでHTMLとかCSSの新技術の紹介とかというのをしたりしています。
@potato4d
本日はよろしくお願いいたします
@a_t
よろしくお願いします
@potato4d
結構普段のアクセシビリティとかの業務でHTML、CSSに触れ合うことも多いので、これまでの経歴も含めて今回は調べてみたって感じですね。
@a_t
はい、そうですね
@potato4d
では早速聞いていきたいと思うんですけど、結構CSS周りというとキャッチアップする中でドラスティックな変更があるものとかはなんとなく情報をみんなキャッチアップはしつつも、
いつ使えるんだっけみたいに悩む人も多いかなとは思うんで、今回ちょっと発表の中でいろいろ触れられていた中で、
もう今すぐ書き方変わるよとか今すぐ使えるよみたいな、ちょっと実践的なやつがあったらまずお伺いできればなと思うんですけど、何かあったりしますでしょうか。
2. コンポーネント単位のスタイル制御
@a_t
はい、そういう意味で言うと今そろそろ使えそうになってきているというところがコンテナサイズクエリと言われるものになります。
こちらはコンポーネント単位でスタイルを制御するものになっていて、近いものとしては今まで使っていたメディアクエリに非常に似ています。
メディアクエリが端末や表示しているメディアのサイズや特性（ランドスケープ、ポートレートなど）に合わせてスタイルを切り替えていたのに対し、
コンテナサイズクエリは特定の要素を指定して、その下の要素がその指定したコンテナのサイズに応じてスタイルを変えることができます。
なので今までメディアクエリで広い範囲でしかできなかったものが、特定のモジュールに限定して使えるようになった形です。
@a_t
こちらが対応しているブラウザのバージョンが結構広く整ってきていまして、
Safariだと16.0から使えるようになっていたり、Chrome、Edge、Firefoxもモダンなブラウザで実装が整ってきたので、
そろそろ使っても問題ないかなという状況になってきています。
@potato4d
なるほど、ありがとうございます。
結構コンテナサイズクエリって発表された頃から注目はありつつも、使えるのはまだ先かなという感じが続いていた技術でもあるかなと思いますが、
もう今は全ブラウザで安心して使えるようになった感じですね。
@a_t
はい、そうですね。
そこのところは実際のサービスのアクセスログを確認して使えるかどうか判断していただく必要がありますが、
基本的にはモダンブラウザで対応が進んでいるので、そろそろ検討に入れてもいいかなという案内になっているかと思います。
@potato4d
なるほど、ありがとうございます。
Latest to Browsersみたいなのを適用しているプロダクトも多いかなと思いますが、その辺りだとかなり安心して使えそうなので、どんどん実践投入していきたいですね。
@a_t
はい、そうですね。ありがとうございます。
@potato4d
じゃあちょっともう早速次も聞いていこうかなと思うんですけど、
発表いただいた中だと、まだ一部のブラウザだと使えるけど、まだまだ少し時間がかかるかなみたいな技術もいろいろあったかなと思います。
その中でも物によってすぐ実践投入しても良さそうなものもあれば、ちょっとこれは危ないかもみたいなものもあったかなと思うんで、
ぜひ良かったら実践投入してみてもいいかもみたいな塩梅のものがあったら、それもお伺いしたいんですけど、どの辺りがありますかね。
3. プログレッシブ・エンハンスメントで今から始めるテキスト描画の改善
@a_t
あまり影響の大きいものを使ってしまうと、特定の関係で崩れてしまって見えなくなることがあるので、
そういう意味ではテキストの描画を改善する周りの対応をプログレッシブエンハンスメント的に導入してみるのが考えられるかと思います。
@a_t
その中でも新しめのプロパティとしては、テキストスペーシングトリムで段落の一番最初または最後にある役物（鍵カッコなど）を入れた場合に、
今までは全角の記号だと少しスペースが空いて揃わない問題がありましたが、その余白を取ってくれるプロパティです。
指定しても対応していないブラウザは今まで通り表示され、対応しているブラウザではより綺麗に見えるので、積極的に使っていくことが可能だと思います。
@potato4d
これまで厳密なカーニングや調整が難しかった部分が自動でできるのは神秘性にもプラスですね。
@a_t
そうですね。今まで全角で空白が入るから半角の鍵カッコを使ったり、テキストインデントで調整したりと苦肉の策を使っていましたが、
このあたりが楽になるのは非常に良いと思っています。
@a_t
同様にテキストの描画を改善するものとしては、テキストオートスペースというプロパティがあります。
全角と半角が混ざったテキストの境界に自動でスペースを挿入するものや、日本語で単語中の改行を制限してくれるワードブレイクの値「auto-phrase」なども検討されています。
@potato4d
読みやすくなりそうですね。auto-phraseは英語でいうワードブレイクのような、単語単位で改行してくれるようになるものですか？
@a_t
そうですね、そのような機能です。
ただし、広範囲に適用するとパフォーマンスに影響が出る場合もあるので、
全要素に入れるのは避けて、要素を見ながら使うのが良いと思います。
@potato4d
頑張ればハックでできたことが、ブラウザのレイヤーで解決されるのはありがたいですね。
@a_t
そうですね。現状ではまだ動作が完璧でないことも多いですが、今後に期待しています。
@potato4d
テキスト描画まわりはWebKitフォントスムージングなどもそうですが、対応ブラウザでは積極的に使っていきたいですね。
@a_t
そうですね。ありがとうございます。
@potato4d
これらを踏まえて、最後にもう一つ、未来的な機能や今後変わりそうな技術についても教えてもらえますか？
4. これから変わるスタンダード①（余白調整）
@a_t
はい。調べていく中で一番気になったのは余白の調整です。
特にテキストボックスというプロパティ以外にも新しい実装が始まっていて、
これはテキストの上下や段落の上下に入る余白を消してくれるものです。
行の最初と最後の余白をなくして、テキストの際から始めることができるようになります。
@a_t
似たようなものにMargin Trimというプロパティもあり、これはコンテナ要素内の最初と最後の要素のマージンを自動で除去するものです。
今まではハック的なCSSを書いていた部分が、直感的な指定で対応できるようになります。
@potato4d
ギャッププロパティのような感覚で使えそうですね。
@a_t
そうですね。ギャップの考え方がスタンダードになってきているので、同じような感覚で使えるのは良いと思います。
5. これから変わるスタンダード②（スタイル制御など）
@potato4d
コンテナサイズクエリとは別軸で、スタイル制御の部分でも新しい標準が出てきています。
例えばコンテナスタイルクエリや、CSSルールセットの中でif文の形で指定できるものなどです。
@a_t
コンテナスタイルクエリはまだSafariとChromeのみ対応、if文の方も現状ChromeのみでSafariやFirefoxは未対応です。
どちらもまだエクスペリメンタルな段階ですが、今から使い方を学んでおくと良いと思います。
@potato4d
CSSにifが来ることを知りませんでした。条件には何が入れられるんですか？
@a_t
ifの中にはstyle関数を指定し、カスタムプロパティなどの値を条件にできます。
現時点ではカスタムプロパティのみ対応していますが、今後拡張される見込みです。
@potato4d
このあたりが広がっていくのも楽しみですね。
@a_t
そうですね。表現の幅が広がるのが楽しみです。
@potato4d
今回はコンテナスタイルクエリや今後のCSSのアップデートについて見てきました。
今日話した内容はshow notesに概要を貼っておきますので、気になったプロパティがあれば調べたり、プロダクトで使ってみてください。
@potato4d
というわけで今回は富田さんとともに新しめのCSSについて話していきました。
LINEヤフーのフロントエンドコミュニティUITでは、社内勉強会やプロダクトで得た知見を外部に発信しています。
今後もぜひお聞きください。
ポッドキャストへのご意見ご感想は #UIT_INSIDE でお待ちしています。
というわけで今回は新しめのCSSについて話していきました。ありがとうございました。
6. クロージング
@a_t
ありがとうございました
