CSS : CSS에 명시되었지만 나중에 무시되는 이미지일까요?

Question

나는 꽤 많은 양의 그림자와 그라디언트를 사용하는 웹 사이트를 만들고 있습니다. CSS의 상자 그림자 속성을 통해 많은 작업을 수행 할 수 있습니다.

아아아, 우리는 여전히 IE를 지원하므로 이러한 상황에서 배경 이미지를 추가해야합니다.

저는 게으르며 모든 사람에게 배경 이미지를 줄 수 있지만 최신 브라우저를 사용하는 사람들을 위해 간소화하려고합니다. 이상적으로, 나는 그 사용자가 심상을 요구할 필요 없게하고 싶으면.

.box { 
    background: url('myImage.jpg'); 
} 

.box-shadowSupport { 
    background: none; 
    [box shadow properties go here] 
} 

있는 HTML이처럼 보이는 끝나는 경우 브라우저가 상자 그림자 (박스 shadowSupport)를 지원하고 내 CSS는 다음과 같이보고 끝나는 경우

그래서, 난 자바 스크립트를 통해 별도의 클래스를 추가 해요 이 :

<div class="box box-shadowSupport"></div> 

이미지가 요청 되나요? 또는 브라우저가 배경 이미지 속성을 오버 라이딩하는 두 번째 스타일로 인해 필요하지 않다는 것을 이해합니까?

이미지가 요청 된 경우 캐스케이드를 통해 스타일을 오버 라이드하는 대신 CSS와 자바 스크립트를 다시 정렬해야하므로 클래스를 스왑해야하므로 처음에는 HTML에서 참조되지 않습니다. .

Answer 1

나는 모든 웹 브라우저가 자신의 방식대로이를 처리 할 것이라고 믿는다. 보통은 : Charles과 같은 웹 프록시를 사용하여 이미지가 요청되었는지 확인한다. 그리고 물론 다른 브라우저에서 이것을 테스트하십시오.

Answer 2

이 같은 별도의 시트에 IE의 특정 스타일을 정의하고 conditional comments와 함께로드 고려할 수 있습니다 무엇 :

<!--[if IE]> 
<link rel="stylesheet" id="ie-css" href="ie-specific.css" 
    type="text/css" media="all" /> 
<![endif]--> 

이는 IE 관련 설정과 시트를로드하고 당신이 할 수있는 다른 클래스를 !important 마커로 덮어 씁니다. 조건부 주석은 IE5 이후에 있었으며 다른 브라우저는 위의 블록을 무시합니다.

Answer 3

IE의 그림자를 건너 뛰는 것이 좋습니다.

대부분의 사람들은 하나의 브라우저 만 사용하며 그림자가 있어야한다는 것을 모릅니다. 브라우저가 정상적으로 보일 때마다 사이트가 다르게 보일 경우 큰 문제는 아닙니다 (즉, 이상하지는 않습니다).

그렇지 않으면, 즉 특정 CSS의 경우 태그로 사용하고, 드롭 그림자를 할 수 있습니다으로 :

.box { 
    filter: progid: DXImageTransform.Microsoft.dropShadow(
      color=#818181, 
      offX=5, offY=5, 
      positive=true); 
} 

그 see here에 대한 자세한 내용은.

Answer 4

나는 모든 현대 브라우저 로드 'myImage.jpg'것입니다 확신합니다. 사실, 당신이 제공 한 코드는 자바 스크립트를 사용하지 않고 이미지를 프리로드하는 순수한 CSS 방법을 설명했습니다 :)