こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0(意欲的) Stage1(実験) Stage2(許容) Stage3(包含) Stage4(標準化) 新機能のNesting CSS Moduleを使ってみる Nesting CSS Moduleのルール 直接入れ子にする場合 @nestを使う場合 プラグインでの挙
![postcss-preset-envで少し未来のCSSを予習する - 弁護士ドットコム株式会社 Creators’ blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/32fbe640747e7f2cbd684078bc9bee1e7318f2c6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fs%2Fshellme%2F20220330%2F20220330093753.png)