CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数

[coliss]

CSS メディアクエリなしで実装するテクニックのまとめ。

[kijtra]

ここには書いてないけど object-fit とかも個人的には救世主。

[yarumato]

“CSSの実装はデバイスベース（横幅768px以下の機種ならスマホ、以上ならPCのレイアウトにする）からコンテンツベース（小さな箱を横幅が広ければ横に、狭ければ縦に並べる流動的デザイン）に移行しているのが現状”

[rirukarinka]

喜んで飛びついてもブラウザの実装差で使えない事もあり、そう言う不具合を結局踏みたくなくて、一昔前くらいのでやってる…

[mayumayu_nimolove]

楽になればなんでもいい

[sippo_des]

覚えたことがなくなっていくのは、いいことのよーで、さみしーよーな、でもいいことだよきっと、、

[Lhankor_Mhy]

CSS Container Queries の実装が楽しみ

[aiueokkenty]

PCとSPで読み込ませるCSSファイル一緒になるのが一番ありがたい

[nismit]

IEが無くなったら割とCSS周りはガラッと変わりそう。CSS Gridは大体使えるしclamp,min,maxで色々と出来ていくかもしれない

[ryan_aircloset]

サーバー側でHTMLから出し分け→メディアクエリでCSS出し分け→共通ソースとついにここまできたか。

[t_motooka]

便利かつ知らないものが増えてた。これは使いたい。

[cpw]

CSSも知識アップデートしないとそろそろダメそうだな

[tmayuko312]

IEのこと書いてないってことはどれか対応してないのありそうだな…

[inazuma2073]

そのうちレイアウトを可変させる必要なくね？になるんだろうな

[tohokuaiki]

あぁ、calcが出た時「こんなんなんでもいけるやん」とは思った。でも、変数使ったらそれこそスパゲッティsass の出来上がりで軽く死ねるな、とも。

[mohno]

「メディアクエリの定義に関するベストプラクティスはデバイスベースからコンテンツベースに移行しているのが現状」←そうなんだぁ（全然ついていってない）

[tokage3]

また変わるのか。めんどくさい笑

[kuroaka1871]

良い流れ。

[renu]

ダークモードの対応かと思ったらレイアウトの方か

[AzuLitchi]

IE対応を考えなくてよくなったときのためにブクマ