IE를 위한 css모음

by Bathory

IE6 png filter

IE6에서 알파값이 들어간 png를 처리하지 못하기 때문에 filter를 사용해야 합니다.

<br />
/*scale*/<br />
selector {<br />
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='scale');<br />
}<br />
/*crop*/<br />
selector {<br />
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='crop');<br />
}<br />
/*image*/<br />
selector {<br />
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngImage.png', sizingMethod='image');<br />
}<br />

scale, crop, image 속성을 지원합니다.

  • scale 상위의 객체에 꽉 체워 줍니다. 만일 이미지를 싸고 있는 레이어가 있다면 그 레이어에 크기에 맞게 그림이 늘어납니다.
  • crop 이미지의 크기 비율에 맞게 디스플레이 합니다.
  • image 기본 설정값으로 본래의 이미지 크기로 보여줍니다.

Opacity

opacity의 경우 브라우마다 지원하는 방법이 다릅니다.

<br />
/*표준브라우저*/<br />
selector {<br />
	opacity:.5;<br />
}<br />
/*IE 5~7*/<br />
selector {<br />
	filter:alpha(opacity=50);<br />
}<br />
/*IE 8*/<br />
selector {<br />
	-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;;<br />
}<br />

expression

IE6에서 max-width같은 지원하지 않는 스타일을 써야할때 많이 사용합니다.

<br />
selector {<br />
	max-width:320px;</p>
<p>}<br />
* html selector {<br />
	width:expression(this.width &gt; 320 ? &quot;320px&quot; : this.width);<br />
}<br />

안에 사용되는 스크립트의 경우 코딩 상황에 따라 달라질수도 있습니다.

child selector

expression을 child selector이용한 사용하기

<br />
.selector { color:blue; }<br />
.selector &gt; .selector { color:red; }<br />
* html .selector .selector { color:expression(/selector/.test(this.parentNode.className) ? 'red' : 'blue'); }<br />

class가 아니여도 스크립트만 잘 조합해서 쓰시면 됩니다.

first-child selector

IE6은 :first-child, :last-child 둘 다 지원하지 않고, IE7은 :last-child를 지원하지 않습니다.
(왠만하면 한번만 쓰는게 좋기 때문에 :first-child로 통일하는게 좋을듯합니다.)

<br />
selector { color:blue; }<br />
selector:first-child { color:red; }<br />
* html selector { color:expression((this.previousSibling == null) ? 'red' : 'blue'); }<br />

class는 지원하지 않습니다.
태그(li, div…등)에서만 사용 가능합니다.
:last-childthis.previousSiblingthis.nextSibling로 바꾸시면 됩니다.

이중 class

IE6에서 .class.class2같은 이중클래스를 사용할수있게 해줍니다.

<br />
.selector { color:red; }<br />
.selector.selector2 { color:blue; }<br />
.selector2 { color:green; }<br />
* html .selector { color:expression((function(that) { if(/[selector]\s*[selector2]/.test(that.className) === true) return 'blue'; })(this)); }<br />

부모의 클래스를 찾고 싶을때는 that.classNamethat.parentNode.className로 바꿔서 사용 하시면 됩니다.

:before, :after

IE에서 :before, :after를 사용할수 있게 해주는 속성입니다.

<br />
.selector:before {<br />
	content:'앞의 내용 추가';<br />
	background-color:blue;<br />
}<br />
.selector:after {<br />
	content:'뒤의 내용 추가';<br />
	background-color:red;<br />
}<br />
.selector {<br />
	* zoom:expression(<br />
		this.runtimeStyle['zoom'] = '1',<br />
		this.innerHTML = '&lt;span style=&quot;background-color:blue;&quot;&gt;앞의 내용 추가&lt;/span&gt; ' + this.innerHTML + ' &lt;span style=&quot;background-color:red;&quot;&gt;뒤의 내용 추가&lt;/span&gt;'<br />
	);<br />
}<br />

내용 설명은 생략합니다만, this.runtimeStyle['zoom'] = '1',를 뺀뒤 테스트 해보시는것도 또 하나의 재미라고 생각됩니다.

아래와 같이 selecter tag가 before, after에 사용될 태그와 같을 경우 에러가 납니다.

<br />
span {<br />
	* zoom:expression(<br />
		this.runtimeStyle['zoom'] = '1',<br />
		this.innerHTML = '&lt;span style=&quot;background-color:blue;&quot;&gt;앞의 내용 추가&lt;/span&gt; ' + this.innerHTML + ' &lt;span style=&quot;background-color:red;&quot;&gt;뒤의 내용 추가&lt;/span&gt;'<br />
	);<br />
}<br />

em같은 태그로 회피해서 사용.

소스를 사용함에 있어

몇몇 소스의 경우 인터넷에 돌아다니는 내용이고, 대부분 많이 사용 되는 소스기때문에 문제가 없지만, 몇몇 소스는 제가 만든소스입니다. 저도 실무에서 잘 안쓰는 소스이고, 검증되지 않았습니다.
그런고로 책임은 지지 않습니다.

Comments

5 Comments

  1. 우왕 길환씨 코드 보는거 완전 멋지다~+ㅁ+

  2. I have been looking looking around for this kind of information. Will you post some more in future? I’ll be grateful if you will.

  3. 안녕하세요~
    워드프레스 한번 써보려고 하다가 이렇게 우연하게 들렀네요
    근데 이 코드하일라이트? 플러그인 사용법 좀 알려주세요 ㅠ
    죄다 영문이니 도통 모르겠네요;

    사용중이신 플러그인 이름도 자세히 부탁드려요 ㅠ

    • 안녕하세요..^^
      제가 사용하는 플러그인은 SyntaxHighlighter Evolved라는 플러그인입니다.

      영어라 힘드신 부분이 있으시다면..
      순수영혼님의 한글화 통합팩을 설치해보실껄 추천합니다..^^;


Menu