ホーム » QooQ »

オンラインツールでcss_bundle_v2.cssから必要な（必要だと思われる）CSSを抽出してみました。

2022年02月13日更新

2020年10月01日公開

当サイトはアフィリエイト広告を使用しています

今回試してみたオンラインツールは、PurifyCSS OnlineとUnCSS Online!です。css_bundle_v2.cssからの抽出はPurifyCSS Onlineのほうが楽でした。（UnCSS Online!はそのままだとcss_bundle_v2.cssが解析できず、前処理が必要でした。2020/10/01）これらのツールも要素が多いページで抽出するのがベターだと思っています。（コメント、コメントフォームなどがあるページ）セレクタの数などはPurifyCSS OnlineのほうがUnCSS Online!より多く抽出されました。また、UnCSS Online!はchrome拡張CSS Usedと同じくらいの量でした。（多ければいいというわけではないと思いますが、どうなんでしょう。）トップページ（ホームページ）と投稿（ページなど）をそれぞれ抽出して比較。必要に応じて統合やコピペをする。（オンラインでやるならばここなど）いずれにせよ、最後は目視での確認が必要になる。という理解でいます。PurifyCSS Online対象のwebページのURLを入力する方法と、ＨTMLと該当CSS（今回はcss_bundle_v2.css）をコピペして解析する方法がありますが、試してみましたところ同じCSSが生成されました。対象のwebページのURLを入力、Clean up CSSをクリック。

show clean css codeをクリック。

抽出されたCSSが表示されます。

UnCSS Online!ちょっと面倒です。Your HTMLは対象のwebページでCtrl +U（または右クリック - ページのソースを表示など）で表示されたソースコードをコピペ。Your CSSはcss_bundle_v2.cssのリンク先をそのままをコピペ、UNCSS MY STYLESをクリックするとエラーがでます。