[CSS] Cross Browsing을 고려한 Style Tip

IE Hack

• IE 6만 적용: 속성 앞에 언더바(_)를 붙임
• IE 7만 적용: 속성 앞에 아스트릭크(*)를 붙임
• IE 8만 적용: 속성 뒤에 \0/IE8을 붙임
• IE 9만 적용: 속성 뒤에 \0/IE9를 붙임
• IE 6, 7: 속성 앞에 마침표(.)를 붙임
• IE 6, 7, 8: 속성 뒤에 \9를 붙임
• IE 8, 9: 속성 뒤에 \0/IE8+9를 붙임

폰트의 구성

Windows XP에는 ‘맑은 고딕’이 없으므로 굴림, 돋움으로 표현된다. 폰트의 차이로 인해 font-size, line-height, width를 조정해야 하는 경우가 가장 빈번한 문제 중 하나이므로, 굴림, 돋움을 기본으로 사용하거나 고려되어야 한다.

IE 6, 7 등 구형 브라우저에서 미지원 기능

• IE 6, 7에서 inline-block을 사용하면 Block로 적용되는 경우가 있다.
  • div와 같은 block요소는 inline-block를 적용하면 block로 인식한다.
  • span과 같은 inline 요소는 inline-block을 적용하면 inline-block로 적용된다.
  • 다음 CSS를 통해서 어떤 요소이든지 inline-block로 만들 수 있다.

    div.inline-block
    { 
        display:inline-block; 
        zoom:1;
        *display:inline; /* IE7 */
        _display:inline; /* IE6 */
    }

화려한 UI가 꼭 필요한지 묻기

• 멋진 UI, Design은 소프트웨어의 핵심이 아닌 경우가 많다. (이것이 중요한 것인지 처음부터 의사결정이 되어야 하며, 정말 중요하다면 Flash, Silverlight 등의 RIA의 사용을 고려해야 한다.)
• HTML/CSS를 통해 단순하게 목적에 부합하게 구현을 해야 하며, 그렇게 함으로써 개발시간과 더불어 유지보수 시간을 상당히 아낄 수 있다.

Watermark의 부재

HTML 5에서부터는 placeholder라는 html attribute를 통해서 Watermark를 표현할 수 있다. Watermark는 경우에 따라 매우 중요한 요소이지만 모든 브라우저에서 지원하는 것이 아니다.

• IE 9 이하, Firefox 4 미만, 안드로이드 브라우저 11미만 버전은 지원하지 않거나 부분지원 한다.
• Placeholder를 Style해야 한다면 다음과 같은 속성을 통해서 설정할 수 있다.
  

  ::-webkit-input-placeholder { }
  :-moz-placeholder { } /* FF 4-18+ */
  ::-moz-placeholder { } /* FF 19+ */
  :-ms-input-placeholder { } /* IE 10+ */

• Placeholder가 중요하다면 아예 JQuery Placeholder  Plugin을 사용하는 것이 더 단순하고 빠른 개발방법일 수 있다.