[css] 사용하지 않은 CSS 이미지는 다운로드됩니까?

Program / 글쓴이

브라우저에서 사용하지 않는 CSS 이미지를 다운로드했거나 무시합니까?

예 : 어떤 요소와도 일치하지 않는 CSS 규칙.

.nothingHasThisClass{background:url(hugefile.png);}

아니면 브라우저에 따라 다릅니 까?

답변

사양을 구현하기로 결정한 방식이므로 브라우저에 따라 다르지만 빠른 테스트는 다음과 같습니다.

  • 크롬 : 하지 않습니다
  • FireFox : 하지 않습니다
  • 사파리 : 하지 않습니다
  • IE8 : 하지 않습니다
  • IE7 : 하지 않습니다
  • IE6 : 알 수 없음 (누군가 테스트하고 댓글을 달 수 있습니까?)

답변

아니요, 최소한 Firefox, IE8 및 Chrome에서는 다운로드되지 않습니다.

이것을 테스트하는 쉬운 방법 :

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
        .nonexistent {
            background: url('index.php?foo');
        }
        </style>
    </head>
    <body>
<?php if(isset($_GET['foo'])) {
    file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
    </body>
</html>

경우 test.txt브라우저의 사용자 에이전트로 채워집니다, 다음 이미지가 다운로드됩니다. 이것은 내 테스트 중 하나가 아닙니다.

답변

빠른 테스트로 증명되었습니다. 

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css"><!--

.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}

--></style>

</head><body>

<div class="hassomething"></div>

</body></html>

두 번째 이미지 인 tumblr_kxytwr7YzH1qajh4xo1_500.png을 (를) 다운로드했지만 다른 이미지 는 다운로드하지 않았습니다. 이는 Chrome (개발자 도구) 및 Firefox (Firebug)에서 입증되었습니다.

답변

Firefox 및 Chrome (Ubuntu 9.10)은 DOM에 적용되지 않은 클래스 / ID의 이미지를 다운로드하지 않습니다.

그러나 이것은 플랫폼 과 브라우저에 따라 다를 수 있습니다 .

답변

때때로, 그것은 “사용하지 않은”의 의미에 정확히 의존합니다. 다른 브라우저는 다르게 정의합니다. 예를 들어, Firefox에서 <noscript>태그에 적용된 스타일 은 “미사용”으로 간주되므로 이미지가 다운로드되지 않습니다.

Chrome 26 (모두 확실 하지는 않지만 ) 은 <noscript>JS가 활성화 된 경우에도 CSS 이미지가 요소에 적용된 경우 CSS 이미지를 다운로드 합니다. (아마도 이것이 버그일까요?)

그것은 하지 않습니다 CSS 이미지 요소에 적용 다운로드 내<noscript> 불구 요소입니다. (물론 이것은 예상되는 행동입니다).

예:

CSS :

noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }

HTML :

<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome.  Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>

이 경우 사용자가 JS를 사용하는 경우 always.png와 otherbg.png가 모두 Chrome에서 다운로드됩니다. 사용자가 JS를 사용하도록 설정 하지 않은 경우 Chrome에서는 nojsonly.png 만 다운로드됩니다.

Google 애널리틱스에서 오류가 발생하여이 기능을 사용하여 JS를 사용하지 않는 사용자의 트래픽 수준을 측정합니다. 나는 <img...>봇이 이미지보다 CSS 이미지를 잡을 가능성이 적고 <img...>인간 방문자에게 더 정확한 수를 남기는 (비평가) 이론 아래서 작업하기 때문에 일반 태그 보다는 배경 CSS 이미지를 사용하는 것을 선호 합니다.

답변

거의 모든 브라우저가 느리게로드됩니다. 이미지가 필요하지 않으면 다운로드하지 않습니다. 파이어 버그 (Firebug / Chrome의 애드온)를 사용하여 리소스의로드 시간을 확인하십시오.

답변

흥미롭게도 다음 예제에서 Chrome (적어도)은 unused.png를 다운로드합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .unused {
                background: url(unused.png) no-repeat;
            }
            .used {
                background: url(used.png);
            }
        </style>
    </head>
    <body>
        <div class="unused used">
            hello world
        </div>
    </body>
</html>