Что означает смайлик ":)" в CSS?

Ответ 1

Из статьи на javascriptkit.com, которая применяется для IE 7 и более ранних версий:

если вы добавляете не алфавитно-цифровой символ, такой как звездочка (*) непосредственно перед именем свойства, свойство будет применяться в IE, а не в других браузерах.

Также есть взломать для <= IE 8:

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

Однако это не очень хорошая идея, они не подтверждают. Вы всегда можете работать с условными комментариями для таргетинга на определенные версии 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]-->

Но для тех, кто хочет увидеть взломать в реальности, пожалуйста, откройте эту страницу в последней версии IE, которую вы имеете. Затем перейдите в режим разработчика, выполнив F12. В разделе "Эмуляция" (ctrl + 8) измените режим документа на 7 и посмотрите, что произойдет.

Свойством, используемым на странице, является :)font-size: 50px;.

Ответ 2

Похоже, что CSS-хак нацелен на IE7 и более ранние браузеры. Хотя этот недействительный CSS и браузеры должны его игнорировать, IE7 и более ранние будут анализировать и соблюдать это правило. Вот пример этого взлома в действии:

CSS

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

IE8 (игнорирует правило)

IE7 (применяет правило)

Обратите внимание, что это не должно быть смайликом; BrowserHacks упоминает:

Любая комбинация этих символов:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
[до того, как имя свойства будет работать] Internet Explorer ≤ 7

Здесь приведен пример стенда для горячей собаки GAH.