소개하다
CSS를 사용하려는 웹 디자이너나 개발자라면 브라우저마다 다른 스타일 선언이 필요하다는 사실을 알게 될 것입니다. 이러한 성가심은 브라우저와 버전에 따른 CSS 구현 무결성의 정도가 다르기 때문에 발생합니다. 조건부 CSS는 Internet Explorer의 조건부 주석 구문 아이디어를 가져와 CSS 선언에 인라인하는 방식으로 이 문제를 해결합니다.
기본 사용법
조건부 CSS는 주로 특정 CSS 문을 특정 브라우저에서 사용해야 하는지 여부를 나타내는 데 사용됩니다. 물론 이 작업을 자주 수행하고 싶지는 않지만 브라우저를 대상으로 해야 할 때 매우 유용할 수 있습니다. 대부분의 브라우저가 이 방법을 지원한다는 것을 U4EA 지원 목록에서 확인할 수 있습니다.
모든 CSS 선언이나 블록에는 조건부 선언이 접두어로 붙을 수 있습니다. 접두사에는 세 가지 기본 유형이 있습니다.
[{!} 브라우저인 경우]
[{!} 브라우저 버전인 경우]
[if {!} 조건 브라우저 버전]
! - 명령문의 부정(예: NOT) - 선택 사항
browser - 선언이 이루어진 브라우저
'IE' - 인터넷 익스플로러
'Gecko' - Gecko 기반 브라우저(Firefox, Camino 등)
'Webkit' - Webkit 기반 브라우저(Safari, Shiira 등)
'SafMob' - 모바일 사파리(아이폰/아이팟 터치)
'Opera' - 오페라의 브라우저
'IEMac' - Internet Explorer의 Mac 버전
'Konq' - 정복자
'IEmob' - 모바일용 IE
'PSP' - 플레이스테이션 포터블
'NetF' - Net Front(Sugar와 Tomatoes에 대해 무지해서 죄송합니다. 이것이 무엇인지 모르겠습니다)
version - 대상으로 하는 브라우저 버전
조건 - 산술 연산자
lt - 미만
lte - 작거나 같음
eq - 같음
gte - 크거나 같음
gt - 보다 큼
조건문의 몇 가지 예:
// 조건부 CSS 구문 예
[IE인 경우] - 브라우저가 IE인 경우
[if ! Opera] - 브라우저가 Opera가 아닌 경우
[IE 5인 경우] - 브라우저가 IE 5인 경우
[IE 6인 경우] - 브라우저가 IE 6 이하(IE 5, IE 4 등)인 경우
[if !gt IE 6] - 브라우저 버전이 IE 6보다 높지 않은 경우 위의 설명과 동일합니다.
많은 경우 div가 너비와 패딩이 있는 상자 클래스라고 생각하기 때문입니다. 따라서 IE 5에서도 제대로 작동해야 합니다(많은 사람들이 IE 5에 대한 지원을 중단한 것을 보았지만 이는 전형적인 예입니다). IE 5의 박스 모델은 표준이 아니므로 조건부 CSS를 사용하여 이를 해결하는 방법은 다음과 같습니다.
// 조건부 CSS 상자 모델 예
div.박스 {
너비: 400px;
[IE 5의 경우] 너비: 600px;
패딩: 0 100px;
}
보시다시피, 조건부 CSS를 사용하면 IE의 조건부 주석을 사용해야 하는 여러 파일 대신 단 하나의 CSS 파일만 유지할 수 있습니다. 이는 유지 관리를 간소화하고 코드를 더 명확하게 만드는 데 도움이 됩니다.
한 단계 더 나아가 조건부 CSS의 중요한 기능은 @import CSS 선언을 찾으면 가져와야 하는 파일을 자동으로 열고 삽입한다는 것입니다. 이렇게 하면 브라우저가 CSS 파일에 대해 단일 HTTP 요청만 하면 되기 때문에 페이지 로드 시간이 단축됩니다.
조건부 CSS는 주로 다양한 버전의 IE 브라우저에 사용되지만, 조건부 CSS는 다른 브라우저에서 수정하기 어려운(주로 Javascript를 사용하여 수정) 버그가 발생할 때에도 매우 유용합니다. 예를 들면 'display: inline-block' 지원이 부족한 Firefox 2 및 Safari 2의 배경 이미지 버그가 있습니다. 이러한 버그는 해당 브라우저의 최신 버전에서 수정되었지만 이러한 브라우저가 특정 시장 점유율을 차지할 경우 이전 버전과의 호환성이 매우 중요합니다.