【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita

はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le

[kako-jun]

フォントサイズを指定する単位remと、商を返す関数rem()とで、remのググラビリティが下がってる……

[otchy210]

フォントをベースとした単位の拡充っぷりに狂気を感じる…と同時に、漢字の事なんかろくすっぽ考えてないくせして、と感じる思いが交錯する。

[nekonyantaro]

実装によって見え方が違ったり最悪、要素同士が重なり合って訳のわからないサイトが出来あがる気しかしない。（悲観論）

[securecat]

CSS以前に、デザインする時にこんな単位脳でやってるだろうか？

[tet00]

符号はsign、正弦はsineなので無問題かなと思います。そう言うことじゃなかったらすみません。

[spark7]

viewport関係は追う気も失せたな。いつか必要になったら泥縄で調べる。

[rochefort]

分かりにくいなぁ。ベストプラクティスどこ

[nilab]

「Dynamic viewport が追加されたり、math 関数が追加されたり」「calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります」

[shingo-sasaki-0529]

比較的新しい中で、これから積極的に使っていくであろう単位はやっぱり dvw/dvh かなぁ。結局ほしいのはコンテンツを描画できる範囲全体のサイズなので。

[mtom029]

“Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと

[kiyo_hiko]

ついていけません！

[Lhankor_Mhy]

ex とか ch は、すでにレベル3にもあった。レベル4で追加されたのは、rex や rch などのルート基準の相対単位の方。/ mix() がちょっと興味深い。CSS variables と組み合わせるのかな。

[glizmo]

reactでページ内リンク作るときに位置がブラウザごとにずれて面倒だったのでdynamic view portは便利そう https://caniuse.com/viewport-unit-variants

[toblog]

lh は便利そうな気がする。

[soratomo]

新しもの好きとしては積極的に取り入れたいけど、制作の仕事ではレガシーな安全パイて済ましてしまうのです。いやはや。

[inazuma2073]

ぶっちゃけついていけてないけど必要か？とも思う。今のところviewportだけでいいかな。フォント関連は日本語じゃ意味ないだろう。

[EzoWolf]

rem と mod に負数を与えた場合、プログラミング言語によっては結果が異なるが、 CSS ではどうなんだろう？

[yoshi-na]

知ってる以上の数あった……精進

[w_bonbon]

100dvwがPCだと相変わらずスクロールバー部分も含んじゃってるのなんとかしてくれぇっ！

[yo_waka]

まとまってる

[tockri]

全然ついていけてなかった！！！

[mochinaga]

まとめありがたい

[d6rkaiz]

カオス度が進んでる・・・

[rogertroutman]

早くhypot()使えるようになってほしいな～！！　Chromium系がpow()もsqrt()もhypot()も未対応なので、今のところ斜辺の長さを導くにはcos(atan2(高さ,底辺))とかやらなきゃいけない。

[deep_one]

ブラウザ対応がばらつきそう…／言いたいことは分かるが関数名「sign」はちょっとひどくないか（笑）読みが「サイン」だぞ。

[terashimaWataru]

ついていけてません

[kemumakii]

“単位 svmax”

[hasiduki]

ほーん！！！！！

[nekoline]

これは一番まとまってる情報