¿Qué significa la carita feliz ":)" en CSS?

321

Vi este código CSS en un proyecto:

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

He estado con CSS por mucho tiempo, pero nunca vi este código ":)" antes. ¿Significa algo o es solo un error tipográfico?

css css-hack marca
fuente
17
A mí me parece un error tipográfico. ¿El desarrollador intenta ser divertido, o tal vez una forma de marcar las áreas del código que buscará?
Lee
2
@stijn todavía podría ser un código específico de proveedor extraño ...
Marque el
22
@ series0ne Supongo que nunca has visto el hack de asterisco de Internet Explorer.
Nit
11
Si este es realmente un truco del navegador, querrás agregar un comentario en el archivo CSS que explique esto.
user247702
32
Mi suposición: el autor del código escribió :) pensando que el foco estaba en el cliente de mensajería instantánea. Cuando no fue así, hicieron clic en el cliente de MI y procedieron desde allí, sin darse cuenta de que habían escrito una carita sonriente en el último lugar donde estaba el cursor, que era el archivo CSS.
Nathan

Respuestas:

279

De un artículo en javascriptkit.com , que se aplica para IE 7 y versiones anteriores:

Si agrega un carácter no alfanumérico como un asterisco ( *) inmediatamente antes del nombre de una propiedad, la propiedad se aplicará en IE y no en otros navegadores.

También hay un truco para <= IE 8 :

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

Sin embargo, esa no es una buena idea, no validan. Siempre puede trabajar con comentarios condicionales para orientar versiones específicas de 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]-->

Pero para aquellos que quieran ver el hack real, abra esta página en la última versión de IE que tenga. Luego vaya al modo desarrollador haciendo un F12. En la sección Emulación ( ctrl+ 8) cambie el modo de documento a 7y vea qué sucede.

ingrese la descripción de la imagen aquí

La propiedad utilizada en la página es :)font-size: 50px;.

revo
fuente
2
Sabía sobre "_" y "*" antes del selector, pero no este que dijiste.
valerio0999
2
@vlrprbttst Esos son caracteres convencionales utilizados para la facilidad. Sin embargo, concluye todos los valores no alfanuméricos.
revo
1
Estoy marcando esta respuesta como correcta, aunque salman-a también fue correcta pero un poco más lenta. Estaba al tanto de este truco, pero siempre usé un "*". El que hizo esta página es un bromista;).
Mark
1
Puedo ser lo suficientemente estúpido como para perder algo aquí, pero ¿por qué puede hacerlo usando 2 personajes? Dice "agregar un no alfanumérico", no "agregar uno o más ...". ¿O :significa algo más? De lo contrario, ¿no puedo poner *********************font-size: "150%";, etc.?
Max
1
Solo para agregar una parte extra a esta respuesta. La respuesta es excelente y correcta, pero omitiendo esto el hecho de que esta no es la mejor práctica. Como regla general, debe hacer todo lo posible para brindar la mejor experiencia en todos los navegadores que utiliza su base de usuarios. Sin mencionar, en mi opinión, no deberías admitir navegadores que la compañía que los creó ya no admite.
AlienDev
171

Parece un hack CSS para apuntar a IE7 y navegadores anteriores. Si bien esto es CSS no válido y los navegadores deben ignorarlo, IE7 y versiones anteriores analizarán y respetarán esta regla. Aquí hay un ejemplo de este truco en acción:

CSS

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

IE8 (ignora la regla)

Ejemplo 1 - IE8

IE7 (aplica la regla)

Ejemplo 1 - IE7

Tenga en cuenta que no tiene que ser una cara sonriente; BrowserHacks menciona:

Cualquier combinación de estos caracteres: [antes de que el nombre de la propiedad funcione] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

El ejemplo del puesto de perritos calientes de GAH está aquí .

Salman A
fuente
62
Retroceso del stand de perros calientes de GAH
MikeTheLiar
Sí, desde IE8 en adelante, IE se considera a sí mismo compatible con CSS y está rompiendo poco a poco todas sus correcciones CSS específicas de IE. (por lo tanto, debemos recurrir a soluciones javascript)
Flip Vernooij
39
Todos los sitios deben usar un tema de soporte de hot dog para todos los usuarios de <IE10. +1
Pete TNT
66
@ikkuh Para ser justos, IE11 es un navegador bastante decente y compatible. Hay una razón por la que dejaron de admitir los comentarios condicionales de IE.
ajp15243
2
@ apj15243 Sí, han recorrido un largo camino y esperan que continúen, la verdad es que todavía necesito apoyo condicional para ello, y eso no es solo IE11, sino también 10,9 y 8. Así que deseamos un auto- Además, no hay ninguna razón para no ejecutar IE11 en XP que no sean razones comerciales. Pero esa es una discusión diferente.
Flip Vernooij