programing

What does the smiley face ":)" mean in CSS?

lastcode 2023. 9. 9. 09:33
반응형

What does the smiley face ":)" mean in CSS?

I spotted this CSS code in a project:

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

I have been around with CSS for a long time now but I never saw this ":)" code before. Does it mean anything or is it just a typo?

From an article at javascriptkit.com, that's applied for IE 7 and earlier versions:

별표와 같은 영숫자가 아닌 문자를 추가하는 경우(*) 속성 이름 직전에 IE에서 적용되며 다른 브라우저에서는 적용되지 않습니다.

Also there's a hack for <= IE 8:

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

However that's not a good idea, they don't validate. You always feel free to work with Conditional comments for targeting specific versions of 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의 최신 버전에서 이 페이지를 열어주시기 바랍니다.그런 다음 에뮬레이션 ctrl8섹션에서 (+) 문서 모드를 다음으로 변경하여 개발자 모드로 이동합니다.7무슨 일이 일어나는지 봐요.

enter image description here

페이지에 사용된 속성은:)font-size: 50px;.

It looks like a CSS hack to target IE7 and earlier browsers. While this is invalid CSS and browsers should ignore it, IE7 and earlier will parse and honor this rule. Here is an example of this hack in action:

CSS

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

IE8 (ignores the rule)

Example 1 - IE8

IE7 (applies the rule)

Example 1 - IE7

Note that it does not have to be a smiley face; BrowserHacks mentions:

다음 문자의 조합:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
[property name이 작동하기 전] Internet Explorer ≤ 7


The GAH hot dog stand example is here.

ReferenceURL : https://stackoverflow.com/questions/25444328/what-does-the-smiley-face-mean-in-css

반응형