最近見た CSS 関連の記事
スマホでアニメーションつきリンクをクリックしたときに(アニメーションが起きず)何も反応がないように見えるけど、will-change はこういうのも解決してくれるのかな。
textarea 要素みたいに伸縮可能な入力欄をつくりたいときに、resize プロパティは役立ちそう。
object-fit は昨日知ったけど oeject-position は知らなかった。どっちも神プロパティだな。
記事にはテキストまわりのプロパティも書かれている。
[CSS]便利なのが登場!normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize | コリス
使ってみないことにはなんとも。font-family の指定はちょっと邪魔そうに思った。どうせユーザーが定義するんだから、と。
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法 | Rriver
最高。グリッドをつくるのに親要素で指定が完結してるのがいい。さらにつくったレイアウトはウィンドウサイズに対して柔軟ときたもんだから、今後 Grid Layout を使わない手はない。
最高のモックアップツールかもしれないBootstrap Studio | Qiita
すでにあるリソース(Bootstrap)を使っている点がうまいなと思った。
paper.cssを使ってブラウザだけで名刺を印刷する | Qiita
これも記事だけではなんとも計りかねるんだけど、名刺とかを CSS だけでつくれると便利。エディターから離れないでいられるから、作業を切り替えるときに余計な時間やストレスがなくていい。paper.css みたいなのがでできた背景には、CSS3 から mm や cm が使えるようになった点が大きいみたい。
CSS Grid Layoutを採用しているサイトをコレクションしている「Grid Examples」 | NxWorld
Grid Layout ってまだまだ活用事例が少ない気がするけど、ここにまとめられているものは参考になる。
MDNのCSSリファレンスをAからZまで読んで得た知見まとめ | Qiita
CSS の細かいけれど気になるところ。font-weight: 600 を指定したけどファミリーには 400 と 700 しかない!ってときどうなるか、とか。