Sono Minifiers CSS che combinano elementi distruttivi?

Question

Ho trovato questo minifier CSS ( http://www.lotterypost.com/css-compress.aspx ). C'è una sezione in fondo a quella pagina con l'etichetta "Che cosa fa il compressore CSS volutamente non lo fanno?" Ci sono quattro cose, due dei quali non riuscivo a capire il motivo per cui potrebbe essere distruttivo:

La combinazione di singoli margine, padding, o stili di confine in un unico immobile.

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

diventa

  margin: 10px 0 8px 30px;

E combinando stili per lo stesso elemento che sono specificati in diversi blocchi di stile.

#element {
   margin: 0;
}

#element {
   color: #000000;
}

diventa

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

Credo CSSTidy fa entrambi. È la pagina web di cui sopra è corretto? Ci sono situazioni in cui questi tipi di minimizzazione potrebbe essere un problema?

Answer 1

Sono lo sviluppatore del compressore CSS che è oggetto di questa domanda ( http: / /www.lotterypost.com/css-compress.aspx ), quindi mi elaborati con un esempio di come un compressore può spezzare la cascata CSS, se uno strumento aggressivo ri-scrive.

Ci sono molti modi di targeting elementi in un foglio di stile, e perché un compressore CSS non ha una profonda conoscenza della struttura della pagina DOM, classi, ids, ecc, non c'è modo per un compressore per sapere se un'ottimizzazione che attraversa tra parentesi le definizioni si romperà o no.

Per esempio, una semplice struttura HTML:

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

E alcuni CSS:

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

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

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

Il non compresso codice produrrebbe un paragrafo centrato con un margine 10px superiore e il margine inferiore 5px.

Se si esegue gli stili CSS attraverso il compressore CSS, si otterrà il seguente codice, che mantiene l'ordine e la cascata di stili non compressi originali.

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

Diciamo che si desidera comprimere in modo aggressivo gli stili ulteriormente, combinando i margini dei due div.normal p Definizioni. Entrambi hanno la stessa identica di selezione, e sembrano ridondante stile il margine inferiore.

Ci sarebbero due modi di combinare i margini: è possibile combinare le due definizioni di margine nel primo (in alto) div.normal p stile o combinarli in l'ultimo (in basso). Proviamo in entrambe le direzioni.

Se si combinano i margini nella prima (in alto) div.normal p stile, si ottiene questo:

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

Il risultato della combinazione dei margini che modo comporterebbe il margine inferiore sia correttamente impostato 10px, perché la classe "centrato" si sovrapporrà il margine inferiore (perché il "centrato" stile defintion ora appare più tardi nella cascata).

Se si combinano i margini nell'ultimo (in basso) div.normal p stile, si ottiene questo:

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

Il risultato della combinazione dei margini che modo si tradurrebbe nel paragrafo non è più appare come centrato, perché il fondo "p" definizione dovrebbe ignorare i margini sinistro e destro di "auto" che sono definiti nel "centrato" di classe.

Quindi, possiamo vedere che dalla combinazione di definizioni di stile che anche hanno la stessa identica selettore può causare alcuni problemi piuttosto male.

Vuoi che personalmente mai scrivere codice come questo? Forse o forse no. A causa delle varie regole "peso" della cascata, è possibile cadere in questo tipo di trappola codice senza mai rendersene conto.

Inoltre, dato il fatto che nelle pagine Web di oggi, più file CSS sono spesso combinati in un unico file di colpire il server con un minor numero di download, è facile immaginare il compressore CSS regalmente avvitare la cascata da ri-scrittura di stile multipla fogli (possibilmente scritte da persone diverse) che vengono aggiunti insieme in un unico file.

In realtà, ho scritto il CSS Compressor per questo scenario sul mio sito web, Lotteria Messaggio . Ogni pagina Web ha molti fogli di stile supportano vari jQuery e altri componenti, e il CSS Compressor viene utilizzato per comprimere automaticamente tutti quei fogli di stile in un unico download. Tutte le pagine del sito hanno almeno 10 diversi fogli di stile combinati insieme, e quasi tutte le pagine hanno più di questo.

Ad esempio, se si guarda il codice dietro la pagina CSS Compressor per sé, si trova il foglio di stile principale nella testa che assomiglia a questo:

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

Il gobbledeegook nell'URL è in realtà una stringa criptata contenente tutti i fogli di stile per coniugare sul server. Il server li comprime e memorizza nella cache il risultato.

Le tecniche di spazio e di risparmio di tempo su quella chiamata foglio di uno stile includono:

• La combinazione di molti fogli di stile in un unico file / download semplicemente aggiungendo tutti insieme
• La compressione del foglio di stile combinato con il CSS Compressor (senza rovinare la cascata!)
• Utilizzo di un nome di dominio diverso (lp.vg) per il foglio di stile download, che migliora la capacità del browser per scaricare in parallelo
• Utilizzo di un nome di dominio molto breve (lp.vg)
• compressione Gzip viene applicato al foglio di stile sul server Web
• Il numero di versione del foglio di stile è incorporato nella URL ( "... / d11019.0 / ...") in modo che se uno stile è cambiato in una delle più fogli di stile, posso cambiare la versione il numero e il browser non sarà mai utilizzare la versione che ha in cache. (Si noti che il numero di versione dovrebbe essere parte del sentiero URL, non nella stringa di query, perché alcuni server proxy non guardano la stringa di query per determinare se una pagina dovrebbe essere recuperate dalla cache.)

Spero che questo spiega meglio le cose, ed è utile per coloro che cercano di migliorare le prestazioni pagina!

-Todd

Più informazioni:

Per aggiungere a quanto sopra, immaginate se prendiamo il vostro esempio il colore, e combinare le definizioni di stile con gli stessi selettori.

Ecco alcuni stili non compressi:

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

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

div.normal p {
    color: black;
}

Il CSS Compressor produce il seguente output:

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

Se dovessimo applicare aggressivo che combina delle definizioni di stile che hanno lo stesso selettore, otterremo il seguente codice.

Metodo 1 , che unisce sia nella prima definizione, avrebbe erroneamente rendere l'azzurro colore del testo:

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

Metodo 2 , combinando entrambi nella seconda definizione, sarebbe errato rendere il testo allineato a sinistra:

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

L'unica volta combinando definizioni di stile con lo stesso selettore è 100% senza errori è quando le definizioni appaiono direttamente una dopo l'altra, ma in ogni altro caso questa tecnica rischi corrompere la cascata di stili.

Non poteva immaginare un caso in cui qualsiasi sviluppatore scrivere codice in questo modo (due definizioni di stile con la stessa identica di selezione, uno subito dopo l'altro), così ho concluso che la quantità di sforzo richiesto per il codice, e la possibilità di un ulteriore punto di guasto nel compressore, non valeva esso da una lunga colpo.

Francamente, sarei molto preoccupato per un compressore CSS che gli stili combinati dai blocchi di definizione diversi, perché la cascata è una cosa molto fragile, ed è estremamente facile da rompere la cascata.

Answer 2

La pagina ha una sezione sulla 'ragione per non utilizzare' che descrive il motivo per cui non fa questi due cose .

E per di più, vorrei assumere che non sta cercando di fare queste cose, perché non è un completo CSS parser / interprete, e avrebbe cominciato a roba bork come CSS blocchi condizionali.

Answer 3

Con 'distruttiva' Presumo si intende 'il CSS non funziona come previsto'.

La combinazione di lunga mano governa come il tuo primo esempio può essere fatto senza alcun effetto negativo a tutti.

In un vecchio foglio di stile semplice, senza blocchi media o altre cose di fantasia, il secondo esempio, inoltre, non causa alcun problema.

Il motivo # 2 è rischioso perché cambiando l'ordine delle regole, o le regole pieghevole insieme senza prendere la Cascade in considerazione, può portare a rotture.

Alcuni compressori CSS possono riordinare le regole in ordine alfabetico, o per tipo di selezione. Questi sono molto rischioso perché le regole che si muovono possono rompere in cascata behavour l'autore creato.

Minifiers come il compressore YUI non fare qualsiasi di questi, optando per strategie più sicure come la rimozione di spazi vuoti, ridondanti virgola e zeri, e simili.

Con i CSS contenenti blocchi di media e altro codice CSS3 è probabile che molti dei compressori CSS attuali non funziona correttamente a tutti. La maggior parte non hanno un lexer adeguata per l'analisi del codice - che usano contesto consapevoli di byte per byte (Tidy) o regexs (la maggior parte del resto) per elaborare il codice

.

Quando si seleziona un compressore vorrei suggerire trovare qualcosa che lo farà a livello locale ed è sostenuta con una buona suite di test in modo da poter vedere ciò che caso sono (e non sono) gestito correttamente.