css
Safariでもっさり描画になっていたのを、cssのwill-changeプロパティを指定して改善した話
Safari(Mac,iOS)だけ妙にサイトの描画が重く、まともに表示もされない症状になって、リリース間際にちょっと焦った話。
結論から言うと下記のサイトの通りで全く同じ症状であることがわかり、JavaScriptの方のコンパイラが原因と思い込んでいたが、cssを1行加えるだけで改善された。
iOS SafariはCSSのfilterプロパティの処理を何故かGPUを使用せずにCPUで行います。...
ウェブティ株式
【備忘録】アニメーション系js(lib)のまとめ
アニメーション系JS 7種 + α
CSS Transition、WebGL、Canvas、SVG... jsで実装するアニメーションライブラリをさらっと見てみる。
紙媒体ライクなテキストコンテンツのレイアウト実装をスタイルで実装してみる
Webブラウザ上のテキストコンテンツのレイアウトでは、横書きや四角いブロック要素で考えることが長い間一般的とされていると思います。
そこで紙媒体のようなテキスト要素のレイアウトを、現段階で実装可能な機能を紹介します。
ブラウザによって制限がある機能を幾つか取り上げますが、環境によっては現実的に運用も可能な機能もありますので、参考にしていただければと思います。
縦書き（+おまけ）
雑誌・新聞、書籍など日本では馴染みのある表記方法。
既に現実的にサイト運用できるレベルのであり、ブラウザも最新
カラムレイアウト（段組み）で便利なスタイル
BootstrapやFoundation等のCSSフレームワークでスタイルまかせてWeb開発するのは確かに楽なんですが、オリジナルスタイルを作成する場合、今時はデバイスごとの横幅に関しては（決まりごともありますが）ちょっと意識して考えないといけない事柄だと思います。
スクリーンがいくらワイドになってきても
ちょっと使えるテキスト装飾 css小技
テキストコンテンツで、覚えておくと便利なスタイルを集めました、覚書。 掲載時から対応ブラウザに変更がある可能性があるので、使用時には随時確認が必要。
オーバーフロー制限
長いタイトルを一行に収めたい時など、自動で省略（…）をつける。
コンテナ要素からはみ出たコンテンツをtext-overflow: clip;で符号を付けずに省略、text-overflow: ellipsis;で符号(…)に付けて省略。