00:06
はい、2月18日土曜日ですね。 時刻は、朝9時7分になりました。
今日もまた、いい天気ですね。 気温もちょっとずつ上がりつつあるので、
まあ春が見えてきたなって感じですね。
はい、おはようございます。耳の大きい坂田くわはかです。
では、本日も朝活を始めていきたいと思います。
すいません、昨日は個人通行でスキップしてしまいまして、おとといはスキップというか、
完全に寝坊したって感じですね。
はい、なので今日は2日ぶりですが、やっていきたいと思いますが、
タイトルにあります、The State of CSS 2022ですね。
はい、こちらを読み始めたところですね。前回は、
なんだっけ、
レイアウトのところに入って、
ライティングモード、えー、なんだっけ、
サブグリッド、アスペクトレイティをまで見たような気がしますね。
なので今日は、コンテンツビジビリティーか、まで見たので、今日は
Flexbox Gap から入っていきたいと思います。
はい、では早速見ていきましょう。Flexbox Gapですね。
こちらはサーベイ2021からですね、はい、前回、前々回かな、こんなところですね。
まあ、機能としてそんなに、えーと、
熟成しきっているわけではなく、結構まだ浅いというか、歴史の浅い機能ですね。
になっています。一応ですね、Can I use を見る限りですと、まあ、i11以外は基本的には全ブラウザですね。
まあまあ、ブラウザフォーアンドロイド、UCブラウザフォーアンドロイドとか、オペラミニは対応しないですけど、まあ、ほぼほぼ
エッジケースということなので、まあ、基本的には全ブラウザ使えると言って過言ではないですね。
はい、で、まあ、Flexbox Gapですけど、
全く知らないとか、何なのかわからないが8.4%、知っているが11.4%、で、使ったことがある
か、今も使っているが80.4%ということで、まあ、実に
過半数とか、ほぼほぼみなさん、使ったことがある、もしくは使っているというところですね。
まあ、これはその通りだと思います。まあ、Flexbox Gap、普通に使いますよね、CSS書く上でっていうのは。
まあ、あのグリッドがちゃんと使えるようになった、iがめでたく、あの
引退されたというところで、
まあ、Gapを使うっていう、Gapというか、グリッドを使うところで
Gapを使うかもしれないですけど、なんだかんだFlexboxはFlexboxで、便利ではありますのでね。
で、Flexbox使うんであれば、Gapはまあほぼ使うでしょうみたいなところが
まあありますので、これ事実上Flexboxも使っているよっていうのと
他ならないんじゃないかなと、僕はちょっと過大評価をしていたりしますけど、
そんな感じです。
で、一応2021の比較をすると、2021だと知らないが20.8%、知っている22.4%で使ったが55%
だったので、飛躍的に伸びましたねってところです。
まあ、これほぼほぼもうみなさんデファクトで使うんだろうなっていうような感じかなと思います。
では続いて、次はAddContainerですね。
はい、コンテナー機能なんですけど、こちらもちょっとCan I Use先に見てみましょうか。
AddContainerですけど、こちらもですね、基本的にはもうほぼ全ブラウザ対応していると言ってもいいと思いますね。
なんか、サムスインターネットとかいわゆる
その他諸々のブラウザ、もしくは
03:01
スマホの方ですね。
個別のブラウザではなんか対応しきれていない感じはありますけど、基本的にWebのPC版のブラウザですかね。
はい。
では、全部有名どころは基本対応しているので、まあ使えると言ってもいいんじゃないかと思いますね。
で、こっちのサーベイは2021からスタートですけども、
データいきますと、2022の結果としては29.4%が全く知りませんと。
で、58.2%が知っている。で、使ったことがあるが12.8%、6%というところで、
まあ、みなさんも認知は全然されているけど、まだ利用はしてませんよっていう感じですね。
これは、前回の2021年の結果が全く知らない40.5%から29.4%まで減ったので、
だいぶみなさんは認知はしているということだそうですね。
で、使ったことがあるも5.4%から12.6%まで伸びているので、
ちょっとずつ使い始めたってところですね。はい、まあいいが、
れたく、
引退されたっていうところもやっぱり大きいんじゃないかなと思いますね。
で、コメントも50件とかありますけど、ちょっとコメントを見てみますか。
コメントですけども、アットコンテナ、
ウェイティングファイアフォックスとか、はは、ファイアフォックスは対応しないのか、はは、とか、
やったり、Again, is it supported on IEQ? IEQは対応しないでしょうね、もう、はい。
Aとこですね。で、ウェイティングフォーサポート、なんか、
結局いろんなところのブラウザサポートを待っているっていうふうに書いてますけど、さっきキャナユーズ見た感じ、基本、
モダンブラウザーであれば対応していると思うので、使えるんじゃないかと思いますね。まあとにかくIEを
使わなければ、全然問題ないと思いますけどね。
Not using it, since Firefox didn't develop a stable version of it. あ、そうなんですね。
ファイアフォックス意外と使えないというふうに言っているのか、アットコンテナ。
キャナユーズでは使えると言っているけど、これあれか、全部ですね、
アットコンテナ機能のすべてを使えるというわけではないのかな、もしかしたら。
でも、緑色なので、全部対応しているとは思いますけどね。なので、ファイアフォックスも実は、
最新バージョンだと言えるんじゃないかなと思ったりしました。
はい、なのでこれ今年もまだ伸びてくるんじゃないかなと思いますね。アットコンテナ機能でした。
続いて、オブジェクトビューボックスですね。
はい、ごめんなさい、これは僕も全く知りませんでしたね。
で、これサーベイも2022、今回からスタートですので、
本当にまだまだ若いっていうか、出たばっかりの機能なんじゃないかなと思います。
数値としても全く知らないが85.2%、
知っているが12.1%、使ったことがあるが、
残り刻んだ人、
見えないですね、見切れちゃってますけど、12.7%、97.3%なので、
2.7%の人が使ったことがあるみたいなことですね。ほぼほぼみなさん知らないっていう機能なので、
今後どういう風になっていくかという感じがします。
今年も少しずつみなさんが使い始めるんじゃないかなと思いますね。
まだキャナユーズのグラフも出てこなかったので、
06:00
自分で勝手に見てみますかね。キャナユーズ、
オブジェクトビューボックスという機能ですね。
いや、本当に知らなかったな。
オブジェクトビューボックスは、
Chrome最新、Edge最新ならば対応しています。Chromiumは対応してそう。だからOperaも対応している。
Safari、Firefoxは全滅と。
なので、まだまだ使えるブラウザが絞られているというところで、
導入事例は少ないのかもしれないですね。まあでもちょっとずつ伸びると思いますけど、というものでした。
続いて同じような機能として、
Viewport、
パーセンテージレングスユニットという機能ですね。
これも知りませんでした。これも機能として、サーベイは2022からスタートですので、
全く知らない方でも58.8%なので、でも半分近くの人は実は知ってはいるということですね。
知っているが使ったことないという人が29.6%。
実は3割ぐらい。残り11.8%の方も使ったこともありますよと。
本当に新しい機能をバンバンに使っている方も結構いらっしゃるのはすごいですね。
キャナユーズを見てみますか。
あ、これか。Viewportユニットってあれですね。VWVHとかVBVMAXか。ああ、はいはいはい。それですね。
まあ知っている人は全然いると思うんですけど、たぶん新しい単位ですよね。
みなさんが知っているか、もしくは使ったことがあるかというやつだと思いますけど、
単純にVWVHっていうのはたぶんみなさん全然使っていると思いますね。
はい、なんですけど、確か新しいタイプってなんだっけ。
えーと、忘れましたけど、でも今のところキャナユーズに出てきているそのLinuxユニットですね。
ViewportパーセンテージのLinuxユニットっていうのは基本全部ラウザ対応していると言っていいと思いますね。
まあIEは全然対応していないのでもちろんそうですけど、まあいい対応。
そもそもみなさんのウェブサイトとかアプリケーションでIEを使わないのであれば全然問題ないと思うので、
そういう意味でいくと実は全然知らないっていうふうにみんな言っているけど、
たぶんこういう名前で知らないだけでそれぞれのプロパティとか単位は知っているんじゃないかなと思ったりするんですけどね。
はい、で一応コメントがバーっと21件来ますけど、
Is it support on IE7? というけど、まあIE7は対応しないとも言います。
Waiting for browser support? っていうので、なんかブラウザサポート知っていると思いますね。
なんかでもSafariが言っているなんか新しいViewport単位が確かあったと思って、
それは他のブラウザもまだ対応しないと思う気がしますけど、
ごめんなさい僕はちゃんと追ってないですね。もしかしたらもう対応始まっているかもしれないです。
はいはい、とかWaiting for full browser support? っていうので、
結局全部ブラウザで対応を待っていると言ってますね。
VMとVHとか、いやでも使えるんじゃないかなと思いますけどね。
でもまあこれNiceQLって言ったりする方もいらっしゃるので、
まあまあこれ素晴らしいよってのは言ってますね。
ただもうサーベイ的に2022からスタートっていうので、これちょっとどういうことだろうな。
まあ今まで機能としては昔からあったんですけど、
こうやってわざわざサーベイの一つのカテゴリーとしてやってなかったっていうだけかもしれないですね。
はいでは続いて、次はMedia Query Range Contextってやつですね。
こちらはまたCan I use?からできますが、
Media Query's Range Contextで調べるとCan I use?的にはないよって言われてました。
09:09
てことは、そういう名前がついてなかっただけかもしれないですね。
Media Queryのレンジシンタックスっていうのはありますけど、
レンジコンテキストっていうのはCan I use?ではまだカテゴライズがなさそうですね。
はいそんな感じですね。だからかもしれない。
で一応全く知らないっていう人、データ的には全く知らないが42.8%、
知っているも42.8%、使ったことあるが14.6%ってことでした。
Media Queryのレンジコンテキストだから、
なんか知ってる気がしますね。
皆さんがこういう名前をついてないだけで、機能自体を皆さんはご存知かもしれないですねこれは。
というところですけど、サーベイ自体も2022っていう今回からスタートなので、
単純に調査自体は今からだっていうところなんですけど、
実態としては皆さんは実は使ったことあるようなものは気が敷いています。
はいというところで、コメントも25件あるんでちょっとコメントを見てみますか。
えーとまぁだいたい皆さん同じこと言ってますね。
Waiting for more support、ブラウザのサポートをちょっと待ってますとか、
Using it since 2019, Thanks to PostCSL、
なるほどねっていうので、2019年から使っている方もいらっしゃいますし、
via PostCSS Media MinMaxっていう別のライブラリーがあって、
それに依存しているという人もいますし、大変ですね。
I have never seen this until now. そんなもの知らんかった。
When will this be supported on IE5?
IE5はサポートしないと思いますし、そもそもIE5を使っている案件とか、
サイトってまだ生きてるんですかこれ。すごい話してますね。
世界ではそういうレガシーな環境下で動いているサイトってまだまだあるんですねこれ。
へー、なるほどです。
コメントでうどんと言うので、今後も使うことはあんまないかもねみたいな方もいらっしゃって、
結構まちまちなんですねっていうところでした。
はい、ではまずはレイアウトの機能については今ので以上になりますが、
全然知らなかった機能も出てきましたし、
こういう新しく名前をついてカテゴライズを分けているっていうものもあったりするので、
これ今後もどうなっていくのか結構楽しみですね。
個人的にオブジェクトビューボックスとか、
その辺の機能がどうなっていくのか気になってますね。
はい、では続いていきましょう。
続いては、シェイプ&グラフィックスですね。
要素の形状とか表示そのものを制御するCSSの機能についての調査になります。
はい、これ今日も全然CSSフレームワークまでいかなそうな感じがしますね。
では行きましょう。一つ目はブレンドモードです。
はい、ブレンドモードもまたCan I Useを見ていきましょうか。
Can I Useを見ますとブレンドモードっていうカテゴライズはなさそうですね。
ブレンディングオブ何たらかんたらみたいなのが一応あったりはしますけど、
もしかしたらCSSのバックグラウンドブレンドモードっていうのもあったりしますが、
キャンバスもありますね。
ただブレンドモードそのものについてのカテゴライズはなさそうなので、
12:00
これは何かこのサーベルの新しいカテゴライズな気がしますけど、
でも調査自体は2019から始まっているので、
何だろうなこれ。ちょっと分かんないですけど。
MDNで見てみますかね。
あ、MDNで見るとブレンドモードか。
というやつですね。CSSデータタイプのやつですけど。
バックグラウンドブレンドモードも入っているし、
ミックスブレンドモードってやつもあったりするので、
であればそれであっているのであれば、
バックグラウンドブレンドモードはもちろん全部ラウザー対応しています。
Iを除きます。
キャンバスも対応していますし、
ミックスブレンドモードってやつですね。
ミックスブレンドモードちょっとキャナユーズ見ますと、
ミックスiPhoneブレンドモードも、あ、そうですね。
IE以外は基本対応しているので、まあまあ皆さん使えているやつですね。
というとこでした。
で、じゃあデータも見ますけど、
全く知らないが35.7%、
知っているが使ったことがないが26.2%、
38.2%がもちろん使ったことがありますよってことです。
僕実はブレンドモード、CSS多分書いたことない気がしますけど、
まあまだそんだけ皆さん使っているものなんですね。
はい、そういうものでした。
で、まあ例年のデータを見ますと、
まあ大体3割ちょっと結構前後してます。
あの全く知らないっていう人は3割前後ずっと前後、
データ動いてるんですけど、
前回21年の時は31.1%だったんですけど、
20年で38.6%なので、
なんか結構揺れるっぽいですねこれは。
はい、だから知っているっていう数字はちょっとずつちょっとずつ減っていって、
使っているがちょっとずつ伸びてますね。
まあ前回より今回の方が若干0.7%下がりましたけど、
まあなんか使ったことある、もしくは使っている人は増えつつあるような気がしますので。
はい、まあこれは今後もそういう感じだと思います。
まあ必要にあれば使うんでしょうねっていうところだと思います。
はい、では続いて、
フィルターズ&エフェクツっていうところですね。
はい、こちらもまずCan I Useから入ります。
CSSフィルターエフェクツってやつですけど、
これはまあ基本IE以外は基本対応しているので、
全部ラウザーで、まあ使えるし皆さんも使ったことあると思いますね。
調査自体、サーベイ自体も2019から始まってますが、
数字からいきますと、
全く知らないって人が8.4%、
知っているが使ったことがないが19.4%、
使ったことがある、もしくは使っているって方が72.4%なので、
まあ3、4分の3近くの人がフィルター&エフェクツの機能を全然使ってますよということですね。
はい、まあ知っているっていう人もどんどん数字減ってきているので、
これはもうだんだん市民権というよりも、
デファクトに近いところがあるんだなと思いました。
では続いて、バックドロップフィルターってやつですね。
ちょっとまあこれも見たいんですけど、
じゃあいきます、バックドロップフィルターですけど、
Can I Useをまず見てみますと、
バックドロップフィルターをまあ基本IE以外は対応しているというところなので、
まあ皆さん使えるでしょうと。
サーベイ自体はでも2020からスタートなので、
ちょっと若い機能かもしれないですね。
とはいえ、まあもう3年使われているというので、
全然もう素晴らしく皆さん使っているんじゃないかと思ってたんですけど、
15:01
数字を見ますと、
知らないもしくは何なのか分からないが31.7%。
意外にまだ3割ぐらいの人は知らないと。
で、19.8%が知っているが使ったことはないと。
で、残り48.6%が使ったことがあると。
なので半分ぐらいの人が使っていますというところでした。
で、これも完全に見方上がりで使ったことがある人が増えつつありますね、3年間で。
当初、2020当初は50%の人が全く知らないだったんですけど、
今31.7%まで減っているというところなので、
まあちょっとずつ伸びてきているという感じですね。
で、僕もバックドロップフィルターは使ったことがないので、
どんなもんなんて感じはしますけどね。
はい、これちょっと僕は単純にCSSに慣れていないだけなので、
今後もしっかり勉強していきたいかなと思ったりしていますが、
はい、というわけで、すいませんがちょっとこちらの都合で、
ちょっと早くって申し訳ないですけど、
今日の朝からここで一旦区切らせていただきたいと思います。
次回もですね、明日もまた続いてこのシェイプ&グラフィックスのガード行って、
明日はインタラクションタイプグラフィーまで行けたらいいかなと思っておりますので、
はい、また皆さんと一緒にいろいろ勉強していけたらなと思ったりしております。
今回はですね、プテラノドさんとコウヘイさんですね、ご参加いただき大変にありがとうございました。
はい、また明日は日曜日を緩く読んでいきますので、興味があれば参加してみてください。
では土曜日ですね、ゆっくり休んでいただければなと思います。
それでは終了したいと思います。お疲れ様でした。
