Was bedeutet eine Eigenschaft mit Sternchen in CSS?

84

Ich habe mir heute eine CSS-Datei angesehen und den folgenden Regelsatz gefunden:

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;
}

Was bedeutet der Stern in * Polsterung und * Linienhöhe?

Vielen Dank.

css Majid Fouladpour
quelle

Antworten:

97

Dies ist der "Star Property Hack" in der gleichen Richtung wie der "Underscore Hack". Es enthält Junk vor der Eigenschaft, die der IE ignoriert (das * funktioniert bis zum IE 7, das _ bis zum IE 6).

opello
quelle
7
Vielen Dank! Und ich habe nach "Star Property Hack" gesucht und diesen klaren und umfassenden Beitrag von Ed Eliot gefunden: "CSS-Tipp: IE 5.x, 6 und 7 getrennt ausrichten
Majid Fouladpour
1
Anstatt CSS-Hacks zu verwenden, können Sie auch bedingte Kommentare für versuchen, dh überprüfen Sie quirksmode.org/css/condcom.html, um weitere Informationen zu erhalten.
Capi Etheriel
Es sollte beachtet werden, dass Safari (7.0.1) und Versionen davor (nicht verifizierbar) Konsolenwarnungen auslösen, wenn Sie den Star-Eigenschaft-Hack verwenden.
Jim
RIP IE7 und diese Art von 'Fixes'.
ChristoKiwi
Hinweis: "Da bedingte Kommentare die HTML-Kommentarstruktur verwenden, können sie nur in HTML-Dateien und nicht in CSS-Dateien enthalten sein" quirksmode.org/css/condcom.html
George Birbilis
32

In CSS? Nichts; Es ist ein Fehler.

Aufgrund von Fehlern in einigen Versionen von Internet Explorer wird der ungültige Eigenschaftsname nicht korrekt ignoriert. Dies ist daher eine Möglichkeit, CSS bereitzustellen, das für diese Browser spezifisch ist.

Die Verwendung von bedingten Kommentaren ist jedoch klarer und sicherer.

QUentin
quelle
2
Tatsächlich. CSS-Hacks, die kein gültiges CSS sind, sollten vermieden werden. Sie wissen nie, was ein zukünftiger Browser mit ihnen machen könnte.
Bobince
@bobince Mir ist klar, dass Sie diesen Kommentar vor langer Zeit gemacht haben, aber wir können jetzt absolut sicher sein, wie jeder zukünftige Browser dies interpretieren wird, da der CSS-Parsing-Algorithmus sehr streng ist und den Browser anweist, solche Regeln stillschweigend zu ignorieren.
mgol
1
@m_gol - Nein, wir können nicht. Wir wissen nicht, was eine zukünftige CSS-Spezifikation über die Bedeutung von a *vor einer Eigenschaft aussagt. Wenn es eine Bedeutung bekommt, werden sie von aktuellen Browsern ignoriert, sodass die Erweiterung sicher hinzugefügt werden kann. Das ist der Punkt der Regel "muss ignoriert werden".
Quentin
8

Das Sternchen ist ein gültiger Platzhalter in CSS. Die alleinige Verwendung bedeutet, dass die folgenden CSS-Eigenschaften für alle Elementknoten im DOM verwendet werden. Beispiel:

*{color:#000;}

Die obige Eigenschaft wird auf alle DOM-Elemente angewendet, wodurch die natürliche Kaskadierung in CSS aufgehoben wird. Es kann nur überschrieben werden, indem DOM-Elemente spezifisch markiert werden, wobei für dieses Targeting eine eindeutige Bezeichnerreferenz beginnt. Beispiel:

#uniqueValue div strong{color:#f00;}

Die obige Eigenschaft überschreibt den Platzhalter und erstellt den Text aller starken Elemente, die in einem div vorkommen, innerhalb eines Elements mit dem ID-Attributwert "uniqueValue".

Die Verwendung eines universell angewendeten Platzhalters wie im ersten Beispiel kann eine schnelle und schmutzige Methode zum Schreiben eines Reset-Stylesheets sein. Es ist schnell und schmutzig, da eine detaillierte Definition der Präsentation nach dem Platzhalter wahrscheinlich ein extrem aufgeblähtes Stylesheet erzeugt. Wenn Sie den Platzhalter verwenden möchten, würde ich vorschlagen, ihn genauer zu verwenden, z. B.:

* strong{color:#f00;}

Im obigen Beispiel wird der Text aller starken Elemente unabhängig von anderen CSS-Eigenschaften, die nicht mit einer eindeutigen Kennung angegeben sind, rot gefärbt. Dies wird als viel sicherer angesehen als die Verwendung der "! Wichtigen" Deklaration, da diese Deklaration bekanntermaßen die natürliche Funktionalität des beabsichtigten Verhaltens beeinträchtigt und ein Alptraum für die Wartung ist.

Die Sternchen in Ihrem Beispiel befinden sich an der falschen Stelle, da sie in den Eigenschaftsdeklarationen, dem Code in geschweiften Klammern, vorkommen und wahrscheinlich einen Fehler verursachen.


quelle
4
Antworten, wonach ich gegoogelt habe, auch wenn es nicht die richtige Antwort ist
Steve
4

Dies ist ein Hack für IE7.

Wenn Sie dies schreiben:

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

Auf allen Navigatoren, die den W3C-Standard <div class="test"></div>HTMLElement respektieren, gibt es ein z-index: 1, für IE7 hat dieses Element einz-index: 2 .

Dies ist nicht Standard.

Gehen Sie folgendermaßen vor, um dasselbe mit W3C Standard zu erreichen:

  • Fügen Sie einen bedingten Internet Explorer-Kommentar hinzu (dies ist ein einfacher HTML-Kommentar für alle anderen Navigatoren, es ist also eine Standardmethode).

    <! - [if IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->

    <! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->

Und verwenden Sie die vorherigen Regeln wie folgt:

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