CSS縮小版の推奨事項はありますか?[閉まっている]


289

CSS縮小版の推奨事項はありますか?

私はGoogleを応援し、いくつか試してみるつもりですが、スマートで熟練していて奇妙にハンサムなStackOverflowコミュニティが、すでにヘビー級の長所と短所を評価しているのではないかと疑っていました。



20
逮捕された。私は「友達を作る方法と人々に影響を与える方法」を読んでいます。しかし、十分に密接ではありません
ポールD.ウェイト

17
君たちはみんな変だ。私たちは賢く、熟練していて、奇妙なことにハンサムです。
Chuck Le Butt

2
次も参照してください:stackoverflow.com/q/65491/85414
mahalie

3
+1は、ここにあるものの「変化する性質」を理解し、このような質問を閉じる理由を理解して説明するためのものです。;)
アンドリューバーバー

回答:


98

YUIコンプレッサーは素晴らしいです。JavaScriptとCSSで動作します。見てみな。


4
これに追加して、YUI Compressorをダウンロードしてファイルをパックし、縮小するMakefileを次に示します。github.com/balupton/jquery-sparkle/blob/...
balupton


@JuniorMayhé「Minifyのみ、シンボルの難読化なし」をチェックしたのに、それを使用して、スタイルが完全にめちゃくちゃになりました。オプション)...残念なことに、私が試すすべての縮小版は常に私のスタイルを壊します。それはオンラインの縮小版がすべてがらくただからなのか?それはそうであってはなりません。
dialex

1
@DiAlex私はそれらの多くがコードを台無しにしていることを理解しています。積極的にリファクタリングするのではなく、常に「保守的な」アプローチを選択して、それらを注意深く使用する必要があります。保守的なのは、不要なスペース、末尾のセミコロン、重複するスタイルなどを削除することだけです。CSSコード内でCSSハックを使用すると、スタイルがこれらの縮小記号によって簡単に破損する可能性があると思います。バックスラッシュと奇妙な記号は、コンプレッサーを狂わせる可能性があります。
ジュニアメイヘ

オンラインサービスzbugs.comを試すことができます-ファイルを縮小するためにyuiコンプレッサーを使用します。
Tamik Soziev 2012年

45

YUI Compressorの.NETポートもあり、次のことができます。

  • 縮小/ファイルをVisual Studioのビルド後イベントに統合する
  • TFSビルド(CIを含む)に統合
  • 独自のコードでDLLを使用したい場合(たとえば、その場での縮小化)。

UPDATE 2011:そして、それはNuGet経由で利用可能になりました :)


私は少し混乱しています。YUI Compressorは非推奨になりUglifyJSデモ)が採用されました。.NETポートで作業するのは理にかなっていますか?
Martin Vseticka 2014年

メイト。私はその移植を2008年頃に始めました。それは6年前のことです。この回答も'09に投稿しました。ですから、ばかげた質問をする前に、日付を確認し、状況を把握してください。さあ、外に出てちょっと遊びます:)
Pure.Krome

Pure.Krome:違いますようお願いします。私はGitHubリポジトリを確認しましたが、数か月前で、コミットは今年のものです。それが私が尋ねた理由です。"メイト"。
Martin Vseticka 2014年

:遅い拍手:よく見つかる!あなたは本当です---おお。待つ。私はcodeiでプロジェクトを開始しました:yuicompressor.codeplex.com。2008年7月7日の最初のコミット(yuicompressor.codeplex.com/SourceControl/changeset/…)。その後、今年は GHに移動しまし。私はそれを長期間移植する作業をしていません。あちこちでいくつかの奇妙なバグ修正がありました。そう。おい。IポートEDそれ。ポートではないINGのそれを。メンテナンスモードです。QED
Pure.Krome 2014年

1
あなたも:)そしてUglifyJSへのリンクを応援します-それは私が仕事でそれを使用できるかどうかを確認するためにチェックするつもりでした-そしてあなたはそれについて私たちに思い出させました!乾杯:)
Pure.Krome 2014年

19

Minifyが好きです。PHPでは、CSSまたはJavaScriptで動作します。


2
Minifyの場合は+1。PHPに慣れている場合は、PHPをインストールするほうが快適です。PHP5が必要です。一度設定すれば、それを忘れることができます。スーパースペースでコメントされたcssファイルまたはjsファイルを必要な数だけ通常どおりに動作させると、minifyはそれらを即座に圧縮します。
マハリー

13

CSSOは現在、最良の縮小/最適化ツールです。


2
Dunnoは「最高」についてですが、一見の価値があります。
ポールD.ウェイト2011年

試してみてください。私が知っているように、この瞬間のその縮小技術の類似物はありません。
無音

1
申し訳ありませんが、30 KBのテストファイルでCSSOとYUI Compressorを比較しました。両方のツールの圧縮出力をgzip圧縮した後、CSSOが勝ち、ファイルをさらに7バイト圧縮しました。もちろん、これは1つのテストファイルにすぎません。
ポールD.ウェイト2011年

CSSOを使用してオンラインでCSSを削減:css.github.io/csso/csso.html
tomByrer

少なくとも、Google PageSpeed Insightsが推奨する2つのうちの1つです。
Alex Vang 2017年

8

あなたは、Pythonを使用している場合は、私がお勧めでしょうスリム早くYUIコンプレッサーが、とは異なりcsscompressor.netとして、それはCSSハックに窒息しないでしょうではありません。

私はスリムに書いたので偏っています。現在、ハッキングの処理方法を確認するためにYUIコンプレッサーを評価しています。よりスリムな動作の例は、crosstips.orgのソースを見るとわかります。



6

オンラインツールをお探しの場合は、https//csscompressor.net/をお試しください。


1
私はこの回答に反対票を投じることができればいいのにと思っています(賛成した後はすでに遅すぎます)。CSSを圧縮しようとすると、問題が発生します。それはまったく良くありません。皆さんへの警告ですが、私が思うに、初期の標準に準拠したCSSがなければ、それはあなたのたわごとを壊すかもしれません!
BT

19
しかし、あなたは手付かずの、標準に準拠したCSS 持っているべきではない でしょうか?
チャックルバット

2
HTML5ボイラープレートを使用している場合は、違います。
SkaveRat 2011

素晴らしいツールです。私はそれをテストしましたがhtml{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}、YUI Compressorよりもうまく機能しました(#testのパディングの重複を排除しませんでした)。それでも、どちらも私を満足させることに失敗しましたhtml,body{width:100%;height:100%}body{padding:0}(私の理解では、両方のセレクターが同じ特異性を持っているため、これは同等です)。
drdaeman

CSSは、くだらないハッキングが許容される場合がある1つのことです。それらのハックのいくつかは、ミニフィクションが破ることができる奇妙なコメントのトリックを使用しています。
ブランドン

4

C#で超高速のCSS縮小機能を記述しました。ただし、アルゴリズムはJavaScriptを処理しません。これをご覧くださいhttp : //www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx


見栄えの良いオプション。ただし、1つのクエリ:「CSS仕様によれば、単一引用符と二重引用符の2種類の文字列がサポートされています。私のアルゴリズムでは、文字列内に空白文字が見つかった場合でも、文字列をそのまま残します...文字列を変更しない方が直感的でプロフェッショナルになると思います。」意味を追加しないスペース文字は削除して、出力ファイルをできるだけ小さくする必要がありますか?それが縮小のポイントではないですか?
ポールD.ウェイト2010

3
まあ、私の意見では、これは確かに一般的なケースでは正しいです。しかし、私は文字列を特別な場合と考えています。文字列から無意味な空白を削除するかどうかは、元のCSSの開発者次第です。私が示しているアルゴリズムは、文字列を変更せずにそのまま仕様に従っています。
ケリド

4

閉鎖スタイルシートを試してください。

横に縮小それはまた、サポートリンティングRTLの反転、およびクラスの名前変更を

また、CSSに変数関数条件ミックスインを追加することもできます

また、これらの機能の一部は、それ自体が非常に強力なClosure Toolsの残りに依存していることにも注意してください。


Windowsでどのように使用しますか?私の無知を許してください
user2513846 '29

3

PHPで何かを探しているなら、ここにリンクがあります:-

無脂肪ミニファイ

PHP Fat-Free Frameworkの一部ですが、スタンドアロンで使用することもできます。


Fat Free FrameworkはGPLなので、コードのこの部分もそうだと思います。頭が上がるだけです。
CodeReaper 2012年

バグがあります:S悪い考え。
brunoais 2012年

3

isnoopのCSS SuperScrubは非常にうまく機能することがわかりました。ただし、CSSへの直接リンクはオンラインでしか処理できません。


試してみまし#test { padding: 1em; width: 10em; } #test { padding: 2em; }たが失敗しました。
drdaeman '06 / 06/13

@drdaemanこれは、特定のセレクターの競合する値や重複する値をどう処理するかわからないためです。私はSuperScrubをメンテナンスしていないので、いつ修正されるのか、またはいつ修正されるのかはわかりません。
John Michel



3

他の人たちはYUI Compressorについて言及し、次に.NETポートについて言及しました。チェーンに別のリンクを追加します。StyleManagerは、YUI Compressorの.NETポートをラップして、ScriptManagerを使用するのと同じように使用できるサーバーコントロールです。CSS定数、背景画像の定義でのチルダ(〜)解像度など、他の多くの優れた機能も追加します。タイトで十分に文書化されており、最近のすべてのプロジェクトで使用していますw / o問題。チェックしてください-gStyleManager.com


3

まだ「ベータ版」ですが、かなりうまく機能するはずです。私はすべてのプロジェクトでその背後にあるコードを使用します:http : //claudiu.phpfogapp.com/これはPHPで構築されており、*。cssファイルをかなり長い時間ホストします。縮小されたCSS。(サーバーでスペースが混雑した場合にのみ、古いcssファイルを削除します)。


2

CSSおよびJSファイルを縮小および圧縮する.net Webサイトにプラグインするcodeplexプロジェクトがあります。Microsoft AJAX MinifierとYUI Compressorの比較もあり、YUIの方がわずかに優れています。Microsoft Minifierとファイルを大幅に縮小する圧縮を組み合わせた追加のバリエーションがあります。

とにかくリンクは http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers)です



2

オンラインツール(www.csscompressor.netでcssを強化したものよりもはるかに優れています):http ://www.cssdrive.com/compressor/compress.phpは優れた機能を果たします


バグがあります。特定の状況では、それは完全に良いjsコードを壊します
brunoais

1

C#の例:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");

1

zbugs.comは優れたオンラインツールであり、ワンクリックでCSSを縮小できます


確かに、私はそれらを開始するために複数回のクリックを必要とする多くの縮小版はないと思いますが。
ポールD.ウェイト2011

あなたはポールを正しいと思います:)しかし、これはミニクリックよりもはるかに多くのことを行い、すべてシングルクリックで実行します
Tamik Soziev

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.