先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示(複数行テキストの切り捨て) ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
![Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25964246f85b70879cda55603abd083923555b80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202002%2F2020041901.png)