PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
JavaScriptをやっているとnpm/yarn/gulp/grunt/webpackなど、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめた - Qiita
JavaScriptをやっているとnpm/yarn/gulp/grunt/webpackなど、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめたJavaScriptnpmgulpwebpackYARN はじめに JavaScriptをやっているとたくさんのツールに出くわしますね。各ツールをググると詳細な使い方などが出てくるのですが、それぞれのツールのざっくりとした役割と違いが分からないので、どのツールとどのツールを組み合わせて使うことが正しいのか がいまいち分かりませんでした。 本記事では、各ツールのざっくりとした役割と違いについてまとめてみました。 3つの役割で分類 各ツールについて調べてみると、以下のような役割を1つ以上持っているのではないかと考えました。 パッケージ管理 タスクランナー ビルドヘルパー 実際に分類してみると以下のようになるでしょうか。 パッ
2018-01-02のJS: npmのパッケージ名のルール変更、gulp 4.0.0プレリリース、Babel 7の変更予定
JSer.info #364 - The npm Blog — New Package Moniker rulesという記事では、npmが受け付けるパッケージ名のルールが変更されたことについて書かれています。 今までは、パッケージ名の., _, -の違いを区別し、別のパッケージであるものとして受け付けていました。 しかし、これからは., _, -は含められますが、それらの違いを区別しなくなりました たとえば、react-nativeというパッケージが公開されている場合に、次のような名前のパッケージは公開(publish)できなくなります。 reactnative react_native react.native この変更によりパッケージ名に使える名前は減りますが、代わりに現在はScoped module(@user/package)として名前空間を分けることができます。そのためScope
ブクマしとくと役に立つCSS/Saas関連リンク集
ソースコードCSS｜半角英数字の文字列を折り返す方法p { word-break: break-all; } CSS｜「iPhone6 Plus」を判別@media screen and (-webkit-device-pixel-ratio:3) { body { color: #fff; background: #333; } } CSS｜「iPhone6 Plus」の縦向き（portrait）／横向き（landscape）を判別@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) { body { color: #fff; background: #333; } } @media screen and (-webkit-device-pixel-ratio:3) and (orient
リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize
ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。 PostCSS Normalize -GitHub normalize.cssについては、下記を参考に。 Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。 例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようにな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
