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

321

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

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

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

css css-hack отметка
источник
17
Похоже на опечатку для меня. Разработчик пытается быть забавным, или, может быть, он помечает области кода, которые он или она будут искать?
Ли
2
@stijn все еще может быть каким-то странным кодом конкретного продавца ...
Марк
22
@ series0ne Я так понимаю, вы никогда не видели взлом звездочки Internet Explorer.
Нит
11
Если это действительно взлом браузера, вы захотите добавить комментарий в файле CSS, объясняющий это.
user247702
32
Мое предположение: автор кода набрал :), думая, что основное внимание было уделено IM-клиенту. Когда это было не так, они кликали в IM-клиент и продолжали оттуда, никогда не понимая, что они напечатали смайлик в последнем месте, где сидел их курсор, который был файлом CSS.
Натан

Ответы:

279

Из статьи на 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;.

Revo
источник
2
Я знал о «_» и «*» до выбора, но не о том, что вы сказали.
valerio0999
2
@vlrprbttst Это обычные символы, используемые для простоты. Однако он завершает все не буквенно-цифровые значения.
Революция
1
Я отмечаю этот ответ как правильный, хотя salman-a также был правильным, но чуть-чуть медленнее. Я знал об этом взломе, но всегда использовал «*». Тот, кто сделал эту страницу - шутник;).
Марк
1
Я могу быть настолько глуп, чтобы что-то упустить, но почему он может сделать это, используя 2 символа? Он говорит «добавить не алфавитно-цифровую», а не «добавить один или несколько ...». Или :значит что-то еще? В противном случае я не могу поставить *********************font-size: "150%";и т. Д.?
Макс
1
Просто чтобы добавить дополнительную часть к этому ответу. Ответ велик и корректен, но пропускает тот факт, что это не лучшая практика. Как правило, вы должны сделать все возможное, чтобы обеспечить наилучшее взаимодействие во всех браузерах, которые использует ваша пользовательская база. Не говоря уже о том, что, на мой взгляд, вы не должны поддерживать браузеры, которые компания, которая сделала их, больше не поддерживает.
AlienDev
171

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

CSS

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

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

Пример 1 - IE8

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

Пример 1 - IE7

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

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

Пример стенда для хот-догов GAH здесь .

Салман А
источник
62
GAH Вспышка стенда для хот-дога
MikeTheLiar
Да, начиная с IE8 и выше, IE считает себя CSS-совместимым и постепенно ломает все свои специфичные для IE исправления CSS. (поэтому мы должны прибегнуть к решениям javascript)
Flip Vernooij
39
Все сайты должны использовать тему хот-дога для всех пользователей <IE10. +1
Пит ТНТ
6
@ikkuh Честно говоря, IE11 - довольно приличный и совместимый браузер. Есть причина, по которой они отказались от поддержки условных комментариев IE.
ajp15243
2
@ apj15243 Да, они прошли долгий путь и надеются, что будут продолжать, правда в том, что мне все еще нужна условная поддержка, и это не только IE11, но также 10,9 и 8. Так что давайте пожелаем авто Кроме того, нет никаких причин не запускать IE11 на XP, кроме как по коммерческим причинам. Но это другое обсуждение.
Перевернуть Vernooij