Que signifie le visage souriant «:)» en CSS?

321

J'ai repéré ce code CSS dans un projet:

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

J'utilise CSS depuis longtemps mais je n'ai jamais vu ce code ":)" auparavant. Est-ce que cela signifie quelque chose ou est-ce juste une faute de frappe?

css css-hack marque
la source
17
Ça ressemble à une faute de frappe pour moi. Le développeur essaie-t-il d'être amusant, ou peut-être un moyen pour lui de marquer les zones du code qu'il recherchera?
Lee
2
@stijn pourrait encore être un code spécifique de fournisseur étrange ...
Mark
22
@ series0ne Je suppose que vous n'avez jamais vu le piratage d'astérisque d'Internet Explorer.
Nit
11
S'il s'agit bien d'un piratage de navigateur, vous voudrez ajouter un commentaire dans le fichier CSS pour l'expliquer.
user247702
32
Ma conjecture: l'auteur du code a tapé :) pensant que l'accent était mis sur le client de messagerie instantanée. Quand ce n'était pas le cas, ils ont cliqué sur le client de messagerie instantanée et sont partis de là, ne réalisant jamais qu'ils avaient tapé un smiley à la dernière place où leur curseur était assis, qui était le fichier CSS.
Nathan

Réponses:

279

À partir d'un article sur javascriptkit.com , cela s'applique à IE 7 et aux versions antérieures:

si vous ajoutez un caractère non alphanumérique tel qu'un astérisque ( *) juste avant un nom de propriété, la propriété sera appliquée dans IE et non dans d'autres navigateurs.

Il existe également un hack pour <= IE 8 :

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

Mais ce n'est pas une bonne idée, ils ne valident pas. Vous vous sentez toujours libre de travailler avec des commentaires conditionnels pour cibler des versions spécifiques d' IE :

<!--[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]-->

Mais pour ceux qui veulent voir le hack en vrai, veuillez ouvrir cette page dans la dernière version d'IE que vous avez. Passez ensuite en mode développeur en faisant a F12. Dans la section Emulation ( ctrl+ 8), changez le mode du document en 7et voyez ce qui se passe.

entrez la description de l'image ici

La propriété utilisée dans la page est :)font-size: 50px;.

revo
la source
2
je connaissais "_" et "*" avant le sélecteur, mais pas celui-ci que vous avez dit.
valerio0999
2
@vlrprbttst Ce sont des caractères conventionnels utilisés pour la facilité. Cependant, il conclut toutes les valeurs non alphanumériques.
revo
1
Je marque cette réponse comme correcte bien que Salman-a soit également correct mais un tout petit peu plus lent. J'étais au courant de ce hack mais j'ai toujours utilisé un "*". Celui qui a fait cette page est un farceur;).
Mark
1
Je suis peut-être assez stupide pour manquer quelque chose ici, mais pourquoi peut-il le faire en utilisant 2 caractères? Il dit "ajouter un non alphanumérique", pas "ajouter un ou plusieurs ...". Ou cela :signifie-t-il autre chose? Sinon, je ne peux pas mettre *********************font-size: "150%";, etc.?
Max
1
Juste pour ajouter une partie supplémentaire à cette réponse. La réponse est excellente et correcte, mais sans cela, ce n'est pas la meilleure pratique. En règle générale, vous devez faire de votre mieux pour offrir la meilleure expérience dans tous les navigateurs que votre base d'utilisateurs utilise. Sans parler, à mon avis, vous ne devriez pas prendre en charge les navigateurs que la société qui les a créés ne prend plus en charge.
AlienDev
171

Il ressemble à un hack CSS pour cibler IE7 et les navigateurs précédents. Bien que ce CSS ne soit pas valide et que les navigateurs devraient l'ignorer, IE7 et versions antérieures analyseront et respecteront cette règle. Voici un exemple de ce hack en action:

CSS

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

IE8 (ignore la règle)

Exemple 1 - IE8

IE7 (applique la règle)

Exemple 1 - IE7

Notez qu'il ne doit pas nécessairement être un visage souriant; BrowserHacks mentionne:

Toute combinaison de ces caractères: [avant que le nom de propriété ne fonctionne] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

L'exemple du stand de hot-dogs GAH est ici .

Salman A
la source
62
GAH Hot dog stand flashback
MikeTheLiar
Oui, depuis IE8 et vers le haut, IE se considère comme conforme à CSS et rompt peu à peu tous leurs correctifs CSS spécifiques à IE. (nous devons donc recourir à des solutions javascript)
Flip Vernooij
39
Tous les sites doivent utiliser un thème de stand de hot-dogs pour tous les utilisateurs <IE10. +1
Pete TNT du
6
@ikkuh Pour être juste, IE11 est un navigateur assez décent et conforme. Il y a une raison pour laquelle ils ont abandonné le support des commentaires conditionnels IE.
ajp15243
2
@ apj15243 Oui, ils ont parcouru un long chemin et espèrent qu'ils continueront, la vérité est que j'ai encore besoin d'un support conditionnel pour cela, et ce n'est pas seulement IE11, mais aussi 10,9 et 8. Alors souhaitons une auto- mise à jour également, il n'y a aucune raison de ne pas exécuter IE11 sur XP autre que des raisons commerciales. Mais c'est une discussion différente.
Flip Vernooij du