Я заметил этот код CSS в проекте:
html, body { :)width: 640px;}
Я уже давно работаю с CSS, но я никогда не видел этот код ":)" раньше. Означает ли это что-либо или это просто опечатка?
Что означает смайлик ":)" в 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