IE6를 버리면 사용할 수 있는 CSS

What CSS Properties Are Supported When You Drop IE6 Support

• > - Immediate descendant (child) selector.
• [attr] - Attribute selector (starts with, ends with, contains).
• :first-child - First child selector.
• min-width - Minimum width layout.
• max-width - Maximum width layout.
• min-height - Minimum height layout.
• max-height - Maximum height layout.
• position:fixed - Fixed position layout.
• .A.B - Multiple class selection.
• :hover - Hover selector on all elements.
• clear:both - Full clear support in float layouts.

1. CHILD SELECTORS (자식 선택자)
body>p{color:red}
버그 : 부모태그와 자식태그 사이에 주석이 있으면 ie7에서 오류 발생

2. CHAINED CLASSES (다중 클래스)
.class1.class2.class3{color:red}

3. ATTRIBUTE SELECTORS (속성 선택자)
a[href]{color:red} : href 속성이 선언된 a태그에 텍스트 색상 적용
input[type="text"]{border:1px solid red} : input 타입이 text만 라인색 적용
div[class^="test"]{color:red} : div태그에 test로 시작되는 클래스명에 텍스트 색상 적용
div[class$="test"]{color:red} : div태그에 test로 끝나는 클래스명에 텍스트 색상 적용
table[summary*="목록"]{border:1px solid red} : table태그 summary에 "목록" 문구가 포함되면 table 라인색 적용

4. ADJACENT SIBLING SELECTORS (인접 형제 선택자)
h1+p{color:red}
버그 : 선언된 태그 사이에 주석이 있으면 ie7에서 오류 발생

5. GENERAL SIBLING SELECTORS (일반 형제 선택자)
h1~p{color:red}

6. PSEUDO-CLASSES AND PSEUDO-ELEMENTS (가상 클래스)
a:hover span{color:red}
div:hover{color:red}
ie6을 제외함으로써 a태그 외 요소에도 :hover 사용이 가능하고, 또 다른 가상 클래스 사용도 가능하다.
(a태그 외에 :hover 사용 시 ie7에서 속도 이슈가 있음.)
하지만 아쉽게도 ie7에서도 지원이 안되고 있는 가상 클래스가 많다. ie7까지 지원을 중단한다면 가상 클래스의 활용도는 더욱 높아 질 것이다.
 
7. CHAINED PSEUDO-CLASSES (다중 가상 클래스)
a:first-child:hover{color:red}

8. VIRTUAL DIMENSIONS DETERMINED BY POSITION (포지션으로 가상 치수 지정)
#box{position:absolute;top:50px;right:100px;bottom:50px;left:100px;background:red}
넓이와 높이값을 지정하지 않고도 포지션 값으로 요소의 가상 치수를 제공할 수 있다.    

9. MAX-WIDTH & MAX-HEIGHT, MIN-WIDTH & MIN-HEIGHT (최대/최소 넓이,높이)
#box{max-width:100%;max-height:100%;min-width:10%;min-height:10%}
버그 : 이미지 태그에 max-width 선언시 오류가 있다고 하네요.
참고 사이트 : http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/

10. TRANSPARENT BORDER COLOR (투명 보더)
#box{border:1px solid transparent}

11. FIXED-POSITION ELEMENTS (고정 포지션)
#box{position:fixed}

12. Fixed-Position Background Relative to Viewport (고정 배경 이미지)
#box{background-attachment:fixed}
#box{overflow:scroll;width:100px;height:100px;background:url(../image.gif) no-repeat fixed 0 0}
영역이 스크롤 시에도 배경은 고정으로 항상 지정한 포지션에 위치한다.

추가 항목
* label 암시적 연결
<label><input type="checkbox">약관동의</label> : 암시적 연결
<input type="checkbox" id="agree"><label for="agree">약관동의</label> : 명시적 연결
ie6에서 암시적 연결 방법 시 텍스트에 focus가 되지 않았다. ie6을 제외함으로써 암시적 연결 방법으로 마크업 활용이 가능하겠다.

* png 이미지 사용 수월


참고 사이트
http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/