브라우저 감지 기능이없는 여러 브라우저에 대해 다른 CSS 상자 그림자를 제공합니까?

Question

각 브라우저가 상자 그림자 흐리게 반경을 약간 다르게 표시하여 너무 고르고 싶다는 것을 알게되었습니다. 그러나 접두사가없는 버전을 사용함에 따라 다른 브라우저에 대해 다른 스타일 시트를 제공해야합니다. 가장 신뢰할 수있는 방법은 무엇입니까?

예를 들어

: 모질라, moz_style.css 사용 크롬이 사용하는 사용자 에이전트 감지하고 chrome_style.css

임을 사용하지만 나는 매우 신뢰할 수 없습니다 heared : 이미 CSS 속성으로-상자 그림자

<script> 
if(BrowserDetect.browser=="Chrome") { 
    document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />') 
} 
</script> 

Answer 1

가 확실히 몇 가지 다른 브라우저에 대해 공급 업체 접두어를 사용합니다. 당신은 내가에서 가져온이 랜덤 상자 그림자 조각을 살펴 경우 다른 웹에 당신은 웹킷에 대해 서로 다른 선언을 사용하는 것을 볼 수 있습니다, 파이어 폭스 차 상자 그림자 속성 위에 : 내가 아는

-moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow:   inset 0 0 10px #000000; 

예를 들어 오페라 공급 업체 접두사가 -o 인 경우 해당 공급 업체 접두어를 상자 그림자 속성에 추가하여 오페라 브라우저를 지원할 수 있습니다 (지원되는지 확실하지는 않음). 자바 스크립트와 "스니핑"

.ieShadow{ 
    display:block; 
    position:absolute; 
    z-index:2; 
    top:5px; 
    left:5px; 
    right:-5px; 
    bottom:-5px; 
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)"; 
    background-color:#444; 
} 

브라우저를 브라우저를 감지하기 위해 더 이상 갈 방법이 보이지 않는다 : 또한 당신은뿐만 아니라 IE의 특정 상자 그림자 규칙이 있습니다.

그렇다면 모두 상자 그림자 코드는 한 공급 업체 접두어가 붙은 속성마다 다를 수 있습니다.

편집 : 주제에 대한 깨달음은 실제로 그렇게 단순하지 않다는 것을 보여줍니다. 공급 업체 접두사는 정말 엉망입니다.

.box_shadow { 
    -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */ 
      box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ 
} 

그래서 내가 특정 브라우저 대상은 CSS에서 공급 업체 접두사와 달성하지 추측 (? :

이 당신에게 웹킷 엔진과 주요 상자 그림자 속성을 사용하여 브라우저의 좋은 아이디어를 제공합니다!)