CSS3에 대한 브라우저 지원이 감지되지 않으면 어떻게 CSS2 사양을 사용합니까?

HTML5와 CSS3로 사이트를 개발하는 중입니다. 그러나 이전 브라우저도 지원해야합니다. Modernizr 라이브러리를 사용하지만 특정 CSS3 요소를 CSS2로 대체 할 수 없습니다.CSS3에 대한 브라우저 지원이 감지되지 않으면 어떻게 CSS2 사양을 사용합니까?

예 : 상자 그림자뿐만 아니라 경계선 반경을 사용하는 div가 있습니다. CSS3가 감지되지 않으면 둥근 모서리와 희미한 테두리로 구성된 배경 이미지가있는 대체 스타일을 제공하고 싶습니다.

클래스 이름에 확장자를 추가하는 등의 아마 뭔가 :

 
CSS3 Class - .mainContent 
CSS2 Class - .mainContentFlat

출처

2011-01-12 Kurt

나는 국경 반경의 사용뿐만 아니라 상자 그림자

아무튼 '를 만드는 사업부가 modernizr.js가 기본적으로이를 지원합니까?

당신이 ID = "테스트"

<div id="test"> 
    Hello HTML5 CSS3 
</div>

와 싶은 스타일 당신은 다음과 같은 CSS를 제공 할 수 있습니다 사업부 있다고 가정합시다.

div#test{ 
    height: 50px; 
    width: 200px; 
    border: 1px solid #CCC; 
} 

.borderradius div#test { 
    border-radius: 4px 4px 0 0; 
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-topright: 4px; 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-top-right-radius: 4px; 
} 
.no-borderradius div#test { 
    /*add style rules for css2 here*/ 
} 
.boxshadow div#test { 
    box-shadow: #666 1px 1px 1px; 
    -moz-box-shadow: #666 1px 1px 1px; 
    -webkit-box-shadow: #666 1px 1px 1px; 
} 
.no-boxshadow div#test { 
/*add style rules for css2 here*/ 
}

출처

2011-01-12 09:19:40 naveen

css2 규칙을 "기본"규칙으로, css3을 "우세한"규칙으로 생각해야합니다. 그들이 충돌하는 경우에, 당신은 css 상속을 통해 효과를 부정합니다. 그래서 당신이 언급하는 경우에 당신은 비슷한 것을 가질 것입니다.

.mainContent { 
    background: #fff url(image-with-shadow-and-rounded-corners.png) top left no repeat; 
} 

.boxshadow.borderradius .mainContent { 
    background-image: none; /*take out the background image if support for css3 exists*/ 
    -moz-border-radius: 5px; 
    -wekbkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 5px #000; 
    -wekbkit-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
}

출처

2011-01-12 18:33:59 Duopixel

CSS3에 대한 브라우저 지원이 감지되지 않으면 어떻게 CSS2 사양을 사용합니까?

답변

관련 문제