Trình duyệt có lưu vào bộ nhớ cache hình nền CSS nếu nó không được sử dụng không?

Question

Khi bạn có hai quy tắc như thế này:

.foo { 
    background-image: url(foo.gif); 
} 

.foo { 
    background-image: url(bar.gif); 
} 

và có <div class='foo'>Foobar</div>

sẽ cache của trình duyệt của bạn cả, hoặc chỉ là một thực sự nhận được hiển thị (bar.gif trong trường hợp này)?

Điều này có đúng trong mọi thiết lập không? (các quy tắc nằm trong các tệp khác nhau, !important đang được áp dụng cho một, v.v.)

Answer 1

Tôi giả định bằng "bộ nhớ cache" tại đây, nghĩa là "tải trước". Thực tế "bộ nhớ đệm" đã làm với hết hạn tiêu đề và muốn.

Nó hoàn toàn dựa trên hành vi của trình duyệt và những gì nó chọn để làm. Tuy nhiên, kinh nghiệm của tôi là các trình duyệt hiện đại không bận tâm để tải một hình ảnh được xác định trong một tệp CSS trừ khi hình ảnh thực sự được gọi.

Đây là một lý do khiến một số chọn làm cho cả trạng thái mặc định và di chuột của phần tử thành một hình ảnh, sau đó sử dụng thuộc tính background-position để thay đổi hiển thị. Có thêm một chút chi phí, nhưng cũng không có sự chậm trễ giữa di chuột và trạng thái di chuột đang được hiển thị, làm cho trải nghiệm mượt mà hơn.

Answer 2

Tốt nhất là tôi có thể nói (với FireBug), nó chỉ lấy hình ảnh bạn hiển thị chứ không phải hình ảnh bạn đã xác định.

Answer 3

nếu cả hai quy tắc đều có cùng độ đặc hiệu thì sau đó sẽ được áp dụng. đọc thêm về specificity tại đây.

Answer 4

Trình duyệt không tải hình ảnh khi đọc css, nó chỉ ghi nhớ chúng. Và khi nó bắt đầu hiển thị trang, nó bắt đầu tải hình ảnh.

Vì vậy, trong trường hợp bạn đã ghi đè quy tắc css và khi trình duyệt hiển thị trang, nó bỏ qua quy tắc css của bạn và tự nhiên nó không tải hình ảnh đầu tiên của bạn.

Answer 5

Sử dụng tail -f trên log apache địa phương của tôi, tôi thấy như sau:

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 - 
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205 

Sử dụng firefox, trình duyệt duy nhất cố gắng tải "bar.gif" (được 404 không tìm thấy vì tôi didn' t có hình ảnh đó).

Nếu bạn quan tâm đến các trình duyệt khác, tôi cũng có thể kiểm tra các trình duyệt đó.