Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ

先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ

[coliss]

Facebookの新しいUIデザインで見つけた、CSSの興味深いテクニックのまとめ。

[inazuma2073]

テクニックというより苦肉の策ばっかりな気がしないでもない。「ドロップシャドウなんか使ってんじゃねえよ！」って罵倒されてそう。

[yoshi-na]

空のdiv要素をいろいろと使ってるんだな

[mohri]

是々非々ありそう

[d4-1977]

色々、なんで？なところもありつつ、なるほどな事も書いてあります

[hirorock]

へー CSSの知識として SVG box-shadowなどの話 パフォーマンス

[ustam]

なんか気持ち悪い部分も散見されるけど、後でちゃんと読んで参考にしよう。あと投稿フォーム周りのJavaScriptがバグバグなの、早く直せや。

[boxshiitake]

うわあCSS難しい