Was bedeutet das Smiley-Gesicht ":)" in CSS?

321

Ich habe diesen CSS-Code in einem Projekt entdeckt:

html, body { :)width: 640px;}

Ich bin schon lange mit CSS beschäftigt, aber ich habe diesen ":)" - Code noch nie gesehen. Bedeutet es etwas oder ist es nur ein Tippfehler?

css css-hack

— Kennzeichen
quelle

Sieht für mich wie ein Tippfehler aus. Der Entwickler, der versucht, Spaß zu haben, oder vielleicht eine Möglichkeit für ihn, Bereiche des Codes zu markieren, nach denen er oder sie suchen wird?

— Lee

@stijn könnte noch einige ungerade herstellerspezifischen Code sein ...

— Mark

@ series0ne Ich nehme an, Sie haben den Internet Explorer-Sternchen-Hack noch nie gesehen.

— Nit

Wenn dies tatsächlich ein Browser-Hack ist, sollten Sie der CSS-Datei einen Kommentar hinzufügen, der dies erklärt.

— user247702

Meine Vermutung: Code-Autor getippt :) Ich denke, der Fokus lag auf dem IM-Client. Wenn dies nicht der Fall war, klickten sie in den IM-Client und gingen von dort aus weiter, ohne zu bemerken, dass sie an der letzten Stelle, an der sich ihr Cursor befand, einen Smiley eingegeben hatten, nämlich die CSS-Datei.

— Nathan

Antworten:

279

Aus einem Artikel auf javascriptkit.com geht hervor , dass er für IE 7 und frühere Versionen gilt:

Wenn Sie *unmittelbar vor einem Eigenschaftsnamen ein nicht alphanumerisches Zeichen wie ein Sternchen ( ) hinzufügen , wird die Eigenschaft im IE und nicht in anderen Browsern angewendet.

Es gibt auch einen Hack für <= IE 8 :

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

Das ist jedoch keine gute Idee, sie validieren nicht. Sie können jederzeit mit bedingten Kommentaren arbeiten, um bestimmte Versionen von IE auszurichten :

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

Aber für diejenigen, die den Hack in Wirklichkeit sehen wollen, öffnen Sie bitte diese Seite in der neuesten Version von IE, die Sie haben. Wechseln Sie dann in den Entwicklermodus, indem Sie a ausführen F12. Ändern Sie im Abschnitt Emulation ( ctrl+ 8) den Dokumentmodus in 7und sehen Sie, was passiert.

Geben Sie hier die Bildbeschreibung ein

Die auf der Seite verwendete Eigenschaft ist :)font-size: 50px;.

— revo
quelle

Ich wusste über "_" und "*" vor dem Selektor Bescheid, aber nicht über diesen, den Sie gesagt haben.

— Valerio0999

@vlrprbttst Dies sind herkömmliche Zeichen, die zur Vereinfachung verwendet werden. Es werden jedoch alle nicht alphanumerischen Werte geschlossen.

— Revo

Ich markiere diese Antwort als richtig, obwohl Salman-a auch richtig war, aber ein bisschen langsamer. Ich war mir dieses Hacks bewusst, benutzte aber immer ein "*". Derjenige, der diese Seite gemacht hat, ist ein Joker;).

— Mark

Ich mag dumm genug sein, hier etwas zu verpassen, aber warum kann er es mit 2 Zeichen tun? Es heißt "nicht alphanumerisch hinzufügen", nicht "eins oder mehrere hinzufügen ...". Oder bedeutet das :etwas anderes? Kann ich sonst nicht setzen *********************font-size: "150%";, etc.?

— Max

Nur um einen zusätzlichen Teil zu dieser Antwort zu werfen. Die Antwort ist großartig und richtig, aber es fehlt die Tatsache, dass dies keine bewährte Methode ist. In der Regel sollten Sie Ihr Bestes tun, um in allen Browsern, die Ihre Benutzerbasis verwendet, die bestmögliche Benutzererfahrung zu erzielen. Ganz zu schweigen davon, dass Sie meiner Meinung nach keine Browser unterstützen sollten, die von der Firma, die sie hergestellt hat, nicht mehr unterstützt werden.

— AlienDev

171

Es sieht aus wie ein CSS-Hack für IE7 und frühere Browser. Während dies ist ungültig CSS und Browser ignorieren sollte, IE7 und früher wird analysieren und diese Regel ehren. Hier ist ein Beispiel für diesen Hack in Aktion:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8 (ignoriert die Regel)

Beispiel 1 - IE8

IE7 (wendet die Regel an)

Beispiel 1 - IE7

Beachten Sie, dass es kein Smiley sein muss. BrowserHacks erwähnt:

Beliebige Kombination dieser Zeichen: [bevor der Eigenschaftsname funktioniert] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

Das GAH Hot Dog Stand Beispiel ist hier .

— Salman A.
quelle

GAH Hot Dog Stand Rückblende

— MikeTheLiar

Ja, ab IE8 und höher betrachtet sich IE als CSS-kompatibel und bricht nach und nach alle IE-spezifischen CSS-Korrekturen. (Daher müssen wir auf Javascript-Lösungen zurückgreifen.)

— Flip Vernooij

Alle Websites sollten ein Hot-Dog-Stand-Thema für alle <IE10-Benutzer verwenden. +1

— Pete TNT

@ikkuh Um fair zu sein, IE11 ist ein ziemlich anständiger und kompatibler Browser. Es gibt einen Grund, warum sie die Unterstützung für IE-bedingte Kommentare eingestellt haben.

— Ajp15243

@ apj15243 Ja, sie haben einen langen Weg zurückgelegt und hoffen, dass sie weitermachen werden. Die Wahrheit ist, dass ich noch bedingte Unterstützung dafür brauche, und das ist nicht nur IE11, sondern auch 10,9 und 8. Also wünschen wir uns ein Auto- Update gibt es auch keinen Grund, IE11 unter XP nur aus kommerziellen Gründen auszuführen. Aber das ist eine andere Diskussion.

— Flip Vernooij