StyleX

 MetaがStyleXという新しいスタイリングシステムを公開したようです。すでにFacebookやらInstagramやらのMetaのサービスで使われているようですね。

最近知ったばかりなので詳しいところはまだ見ていないのですが、これを知った時に思ったことが2つ。

MetaってJSに色々ぶっ込むの好きだね。ReactがHTML in JSならStyleXはCSS in JSみたいな感じ。

イーロンマスクがつけそうな名前だね。というか先に考えてたら絶対つけてたね。

ウェブページデザイン時の忘れがちな注意点

たまにはデザインネタでも。

CSSでページをデザインするときの注意事項を一点。これについて書いてあるサイトはあまりなく、結構いろんなサイトがこの過ちをおかしています。

CSSのbackground-imageでSVG画像を表示し、SVG非対応ブラウザではPNG画像を表示する（CSSだけで実現）

どういうこと？

タイトルが長いですが、要するにこういうことです。

• CSSの background-image プロパティでSVG画像を表示する（背景画像とかCSS spriteとか）
• SVGに対応していない古いブラウザでは、フォールバック（代替）としてPNG画像を表示する
• JavaScriptを使わず、CSSのみで完結！

Retinaのような高精細ディスプレイでもぼやけずに画像（イラスト）を表示するには解像度に依存しないSVGを使うのが一番いいのですが、IE8やAndroid 2.x系などの古いブラウザではSVGを認識できず、背景が驚きの白さになってしまいます。そんなブラウザにはPNGを読ませてあげなければいけません。
そのへんをうまい具合に表示する小技の紹介です。

代替画像は別にGIFとかJPGでもいいんじゃね？と思うかもしれませんが、どちらもベクトル画像の表現力が低いのでPNGを使いましょう。