Cosa significa una proprietà preceduta dalle stelle in CSS?

Stavo guardando un file css oggi e ho trovato la seguente serie di regole:

div.with-some-class { display:block; margin:0; padding:2px 0 0 0; *padding:1px 0 0 0; font-size:11px; font-weight:normal; *line-height:13px; color:#3D9AD0; } 

Cosa significa la stella in * padding e * line-height?

Grazie.

Questo è il “trucco delle stelle” sulla stessa falsariga del “trucco di sottolineatura”. Include junk prima della proprietà che IE ignora (il * funziona fino a IE 7, _ fino a IE 6).

In CSS? Niente; è un errore

A causa di bug in alcune versioni di Internet Explorer, non ignoreranno correttamente il nome della proprietà non valido, quindi questo è un modo per fornire un CSS specifico per quei browser.

L’uso dei commenti condizionali è tuttavia più chiaro e sicuro.

Il carattere asteriks è un carattere jolly valido nei CSS. L’uso di questo solo significa che le seguenti proprietà CSS verranno utilizzate contro tutti i nodes elemento nel DOM. Esempio:

 *{color:#000;} 

La suddetta proprietà verrà applicata a tutti gli elementi DOM, sconfiggendo in tal modo la naturale cascata nei CSS. Può essere sovrascritto solo taggando in modo specifico gli elementi DOM in cui il targeting inizia un riferimento identificativo univoco. Esempio:

 #uniqueValue div strong{color:#f00;} 

La suddetta proprietà sovrascriverà il carattere jolly e creerà il testo di tutti gli elementi forti che si verificano in un div all’interno di un elemento con un valore di attributo id di “uniqueValue”.

L’utilizzo di un carattere jolly universalmente applicato, come il primo esempio, può essere un metodo rapido e sporco per scrivere un foglio di stile di ripristino. È veloce e sporco perché la definizione granulare della presentazione dopo il carattere jolly creerà probabilmente un foglio di stile estremamente gonfio. Se intendi utilizzare il carattere jolly, ti suggerisco di utilizzarlo in modo più specifico, ad esempio:

 * strong{color:#f00;} 

L’esempio precedente renderà rosso il testo di tutti gli elementi forti a prescindere dalle altre proprietà CSS non specificate con un identificatore univoco. Questo è considerato molto più sicuro dell’uso della dichiarazione “! Important” in quanto tale dichiarazione è nota per causare interferenze con la naturale funzionalità dei comportamenti previsti ed è un incubo di maintanence.

Gli asterischi nel tuo esempio si trovano nel posto sbagliato in quanto sembrano verificarsi all’interno delle dichiarazioni di proprietà, il codice che va all’interno di parentesi graffe e che probabilmente causerà un errore.

Questo è un trucco per IE7.

Se scrivi questo:

 .test { z-index: 1; *z-index: 2; } 

su tutti i navigatori che rispettano lo standard W3C

HTMLElement ha uno z-index: 1 ma per IE7, questo elemento ha uno z-index: 2 .

Questo non è standard.

Per ottenere la stessa cosa con lo standard W3C, seguire questa procedura:

  • Aggiungi qualche commento condizionale di Internet Explorer (questo è un semplice commento HTML per tutti gli altri navigatori, quindi è un modo standard).

E usa le regole precedenti come questa:

 .test { z-index: 1; } .ie7 .test { z-index: 2; }