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

Я заметил этот код CSS в проекте:

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

Я был вокруг с CSS в течение длительного времени, но я никогда не видел этого ":)" код раньше. Это что-то значит или это просто опечатка?

2 315
css css-hack

2 ответа:

С статья на javascriptkit.com, это подано на IE 7 и более ранние версии:

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

также есть хак для IE 8:

div {
  color: blue;      /* All browsers */
  color: purple;  /* 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 и посмотреть, что происходит.

enter image description here

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

273

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

CSS

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

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

Example 1 - IE8

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

Example 1 - IE7

обратите внимание, что он делает не обязательно должен быть смайлик; BrowserHacks отмечает:

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

пример стойки хот-дога GAH здесь.

168