要素を破壊するCSSミニファイアはありますか？

StackOverflow https://stackoverflow.com/questions/7811395

  •  26-10-2019
  •  | 
  •  

質問

このCSSミニフィーターを見つけました（http://www.lotterypost.com/css-compress.aspx）。そのページの下部に、「CSSコンプレッサーは意図的に何をしないのか」というラベルのあるセクションがあります。 4つのことがありますが、そのうちの2つは、なぜ破壊的であるのか理解できませんでした。

個々のマージン、パディング、またはボーダースタイルを単一のプロパティに組み合わせます。

  margin-top: 10px; 
  margin-right: 0; 
  margin-bottom: 8px;
  margin-left: 30px;

なります 

  margin: 10px 0 8px 30px;

異なるスタイルブロックで指定されているのと同じ要素のスタイルを組み合わせます。

#element {
   margin: 0;
}

#element {
   color: #000000;
}

なります

#element {
   margin: 0;
   color: #000000;
}

Csstidyはこれらの両方を行うと思います。上記のWebページは正しいですか？これらのタイプの模倣が問題になる可能性のある状況はありますか？

役に立ちましたか？

解決

私はこの質問の主題であるCSSコンプレッサーの開発者です（http://www.lotterypost.com/css-compress.aspx）、そのため、ツールが積極的に書き直した場合、コンプレッサーがCSSカスケードをどのように壊すかの例を詳しく説明します。

スタイルシートに要素をターゲットにする方法はたくさんあります。CSSコンプレッサーにはページのDOM構造、クラス、IDなどの詳細な知識がないため、コンプレッサーがブラケットを横切る最適化を知る方法はありません。定義は壊れているかどうかになります。

たとえば、単純なHTML構造：

<div class="normal centered">
    <p>Hello world.</p>
</div>

およびいくつかのCSS：

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
}

div.normal p {
    margin-bottom: 5px;
}

圧迫されていません コードは、10pxのトップマージンと5px下のマージンを備えた中心的な段落を生成します。

CSSコンプレッサーを介してCSSスタイルを実行すると、以下のコードが取得されます。これにより、元の非圧縮スタイルの順序とカスケードが維持されます。

div.normal p{margin:10px 0}div.centered p{margin:10px auto}div.normal p{margin-bottom:5px}

2つのマージンを組み合わせることにより、スタイルをさらに積極的に圧縮したいとしましょう div.Normal p 定義。どちらもまったく同じセレクターを持っており、底部のマージンを冗長にスタイリングしているように見えます。

マージンを組み合わせる方法は2つあります。2つのマージンの定義を最初の（上）に組み合わせることができます div.Normal p スタイルまたはそれらを最後（下）のスタイルに組み合わせます。両方の方法を試してみましょう。

マージンを最初（上）に組み合わせると div.Normal p スタイル、あなたはこれを手に入れます：

div.normal p{margin:10px 0 5px}div.centered p{margin:10px auto}

マージンをそのように組み合わせると、「中心的」クラスが底部のマージンを上書きするため、底部のマージンが10pxに誤って設定されます（「中心的な」スタイルの定義がカスケードの後半に表示されるため）。

マージンを最後（下）に組み合わせると div.Normal p スタイル、あなたはこれを手に入れます：

div.centered p{margin:10px auto}div.normal p{margin:10px 0 5px}

マージンをその方法で組み合わせると、段落が中心として表示されなくなります。これは、「P」定義が「中心」クラスで定義されている「自動」の左右のマージンをオーバーライドするためです。

そのため、まったく同じセレクターを持っていることで、かなり悪い問題を引き起こす可能性があるスタイルの定義を組み合わせることでわかります。

個人的にこのようなコードを書くことはありますか？多分かもしれませんか、そうではありません。カスケードのさまざまな「重量」ルールのため、気付かずにこのタイプのコードトラップに分類することができます。

さらに、今日のWebページでは、複数のCSSファイルが1つのファイルに結合されることが多いという事実を考えると、ダウンロードが少ないサーバーにヒットすることが多いため、CSSコンプレッサーが複数のスタイルシートを書き直してカスケードを王にねじ込んでいることを想像するのは簡単です。 1つのファイルに一緒に追加された人によって書かれています）。

実際、私は私のウェブサイトでこのまさにシナリオのためにCSSコンプレッサーを書きました、 宝くじの投稿. 。各Webページには、さまざまなjQueryやその他のコンポーネントをサポートする多くのスタイルシートがあり、CSSコンプレッサーを使用して、これらすべてのスタイルシートを1つのダウンロードに自動的に圧縮します。サイトのすべてのページには、少なくとも10種類のスタイルシートが組み合わされており、ほとんどのページにはそれ以上のものがあります。

たとえば、CSSコンプレッサーページ自体の背後にあるコードを見ると、頭の中にメインスタイルシートがあります。

<link rel="stylesheet" href="http://lp.vg/css/d11019.0/j2HKnp0oKDOVoos8SA3Bpy3UHd7cAuftiXRBTKCt95r9plCnvTtBMU2BY2PoOQDEUlKCgDn83h16Tv4jbcCeZ(gupKbOQ9ko(TcspLAluwgBqrAjEhOyXvkhqHA(h5WFDypZDK2TIr(xEXVZtX7UANdFp6n1xfnxqIMR8awqGE)vrwUgY2hrCGNNTt1xV7R1LtCSfF46qdH1YQr2iA38r1SQjAgHze(9" />

URL内のGobbledeeGookは、実際には、サーバー上に結合するすべてのスタイルシートを含む暗号化された文字列です。サーバーはそれらを圧縮し、結果をキャッシュします。

その1つのスタイルシート呼び出しのスペースと時間節約のテクニックには、以下が含まれます。

  • 多くのスタイルシートを1つのファイルに組み合わせる/すべてを一緒に追加するだけでダウンロード
  • CSSコンプレッサーを使用して組み合わせたスタイルシートを圧縮します（カスケードを台無しにすることなく！）
  • スタイルシートのダウンロードに別のドメイン名（LP.VG）を使用すると、ブラウザの並行してダウンロードする機能が向上します
  • 非常に短いドメイン名（LP.VG）を使用する
  • GZIP圧縮は、Webサーバーのスタイルシートに適用されます
  • スタイルシートのバージョン番号はURLに埋め込まれています（ ".../d11019.0/..."）。ブラウザは、キャッシュされたバージョンを使用することはありません。 （バージョン番号は、クエリ文字列ではなく、URLパスの一部である必要があることに注意してください。一部のプロキシサーバーは、ページをキャッシュから取得するかどうかを判断するためにクエリ文字列を確認していないためです。）

これが物事をよりよく説明し、ページのパフォーマンスを改善しようとしている人に役立つことを願っています！

-todd

より詳しい情報：

上記に追加するには、色の模範を示し、スタイルの定義を同じセレクターと組み合わせるかどうかを想像してください。

ここにいくつかの非圧縮スタイルがあります：

div.normal p {
    margin: 10px 0 10px 0;
}

div.centered p {
    margin: 10px auto;
    color: blue;
}

div.normal p {
    color: black;
}

CSSコンプレッサーは、次の出力を生成します。

div.normal p{margin:10px 0}div.centered p{margin:10px auto;color:blue}div.normal p{color:#000}

同じセレクターを持つスタイル定義の積極的な組み合わせを適用する場合、次のコードが取得されます。

方法1, 、両方を最初の定義に組み合わせると、テキストが青色になります。

div.normal p{margin:10px 0;color:#000}div.centered p{margin:10px auto;color:blue}

方法2, 、両方を2番目の定義に組み合わせると、テキストが左に整列されるようになります。

div.centered p{margin:10px auto;color:blue}div.normal p{margin:10px 0;color:#000}

スタイルの定義を同じセレクターと組み合わせるのは100％エラーのないことです。定義が次々と直接表示される場合ですが、他のすべての場合、この手法はスタイルのカスケードを破壊するリスクがあります。

開発者がこの方法でコードを書く場合（まったく同じセレクターを持つ2つのスタイルの定義、次々と）ケースを想像することはできませんでした。コンプレッサーの故障の追加ポイントは、ロングショットでは価値がありませんでした。

率直に言って、カスケードは非常に壊れやすいものであり、カスケードを壊すのは非常に簡単だからです。

他のヒント

ページには これらの2つのことをしない理由を説明する「使用されていない理由」に関するセクション.

それに加えて、私はそれが完全なCSSパーサー/インタープリターではなく、CSS条件ブロックのようなものを開始するので、これらのことをしようとしていないと思います。

「破壊的」とは、「CSSが期待どおりに機能しない」という意味だと思います。

最初の例などの長い手のルールを組み合わせることで、悪影響なしで実行できます。

メディアブロックやその他の派手なものがない単純な古いスタイルシートでは、2番目の例も問題を引き起こしません。

＃2が危険な理由は、カスケードを考慮せずにルールの順序を変更したり、ルールを折りたたんだりすることで破損をもたらす可能性があるためです。

一部のCSSコンプレッサーは、アルファベット順にルールを並べ替えるか、セレクタータイプで並べ替えることができます。これらは、著者が作成した著者がカスケードされた行動を壊す可能性があるため、非常に危険です。

Yuiコンプレッサーのようなミニファイヤーは、これらのいずれもしていません。Whitespace、Redundant Semi-Colons、Zerosなどの削除などのより安全な戦略を選択します。

メディアブロックやその他のCSS3コードを含むCSSが増えているため、現在のCSSコンプレッサーの多くが正しく機能しない可能性があります。ほとんどは、コードを解析するための適切なlexerを持っていません - コードを処理するためにコンテキスト認識バイトバイバイト（整頓）または正規表現（残りのほとんど）を使用します。

コンプレッサーを選択するとき、私はそれをローカルに行い、優れたテストスイートでバックされていることを見つけることをお勧めします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top