¿Qué significa la carita sonriente ":)" en CSS?
Vi este código CSS en un proyecto:
html, body { :)width: 640px;}
He estado usando CSS durante mucho tiempo, pero nunca antes había visto este código ":)". ¿Significa algo o es sólo un error tipográfico?
De un artículo en javascriptkit.com , que se aplica a 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 puedes trabajar con comentarios condicionales para apuntar a 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 truco en realidad, abran esta página en la última versión de IE que tengan. Luego vaya al modo desarrollador haciendo un archivo F12. En la sección Emulación ( ctrl+ 8), cambie el modo de documento a 7y vea qué sucede.
La propiedad utilizada en la página es :)font-size: 50px;.
Parece un truco de CSS dirigido a IE7 y navegadores anteriores. Si bien este es un 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)
IE7 (aplica la regla)
Tenga en cuenta que no es necesario que sea una carita sonriente; BrowserHacks menciona:
Cualquier combinación de estos caracteres: [antes de que el nombre de la propiedad funcione en] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
El ejemplo del puesto de perritos calientes de GAH está aquí .
