Oggi stavo guardando un file css e ho trovato il seguente set 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.
Risposte:
Questo è lo "star property hack" sulla stessa linea del "underscore hack". Include spazzatura prima della proprietà che IE ignora (* 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 valida, quindi questo è un modo per fornire CSS specifico per quei browser.
Tuttavia, l'utilizzo di commenti condizionali è più chiaro e sicuro.
*prima di una proprietà. Se ha un significato, i browser attuali lo ignoreranno consentendo di aggiungere l'estensione in modo sicuro. Questo è il punto della regola "deve ignorare".
Il carattere asterisco è un carattere jolly valido in CSS. Il suo utilizzo da solo significa che le seguenti proprietà CSS verranno utilizzate contro tutti i nodi elemento nel DOM. Esempio:
*{color:#000;}
La proprietà di cui sopra verrà applicata a tutti gli elementi DOM, annullando così la cascata naturale nei CSS. Può essere sovrascritto solo mediante tag specifici degli elementi DOM in cui tale targeting inizia un riferimento identificativo univoco. Esempio:
#uniqueValue div strong{color:#f00;}
La proprietà precedente sovrascriverà il carattere jolly e renderà il testo di tutti gli elementi forti che si trovano in un div all'interno di un elemento con un valore dell'attributo id di "uniqueValue".
L'uso di un carattere jolly applicato universalmente, come il primo esempio, può essere un metodo rapido e sporco per scrivere un foglio di stile di ripristino. È veloce e sporco perché una definizione granulare della presentazione dopo il carattere jolly creerà probabilmente un foglio di stile estremamente gonfio. Se intendi utilizzare il carattere jolly, ti suggerirei di utilizzarlo in modo più specifico, ad esempio:
* strong{color:#f00;}
L'esempio precedente renderà il testo di tutti gli elementi forti di colore rosso indipendentemente dalle altre proprietà CSS non specificate con un identificatore univoco. Ciò è considerato molto più sicuro rispetto all'uso della dichiarazione "! Important" poiché è noto che tale dichiarazione causa interferenze con la funzionalità naturale dei comportamenti previsti ed è un incubo di manutenzione.
Gli asterischi nel tuo esempio si trovano nel posto sbagliato poiché sembrano essere presenti all'interno delle dichiarazioni di proprietà, il codice che va dentro le 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 <div class="test"></div>HTMLElement hanno un z-index: 1ma per IE7, questo elemento ha un z-index: 2.
Questo non è standard.
Per ottenere lo stesso risultato con W3C Standard, segui questi passaggi:
Aggiungi un commento condizionale di Internet Explorer (questo è un semplice commento HTML per tutti gli altri navigatori, quindi è un modo standard).
<! - [if IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->
<! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->
E usa le regole precedenti in questo modo:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}