CSS "صور احتياطية"

Question

لذلك إذا كان لديك رمز مثل هذا:

background: url('image.png');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

سيستخدم متصفحك التدرج إذا كان WebKit ، ولكن إذا لم يكن الأمر كذلك ، فسيتم تراجعه ويستخدم الصورة. إذا كنت تستخدم WebKit ، فلن يتم تنزيل الصورة. لذلك إذا كان لديك:

background: url('image1.png');
background: url('image2.png');

هل سيتم تنزيل "Image1" على الإطلاق أو القيام بنفس القواعد التي تنطبق عليها صورة "الاحتياط"؟

Answer 1

سيقوم Chrome (تم اختباره على V9.x) بتنزيل الصورة الثانية فقط. انظر أدوات المطورين على هذا نموذج الصفحة

Answer 2

تنطبق نفس القواعد - ما يحدث (بصراحة) هو أن WebKit يقرأ القاعدة الثانية ، ويعترف أنه يحل محل الأول ويفعل ذلك ، وبعد ذلك كثيرًا ما يفعل شيئًا معهم عند استخدامه ، لكنه مجرد قيمة حتى ذلك الحين. بالنسبة لمتصفحات غير ويبكيت ، تبدو القاعدة الثانية مثل القمامة حتى تتخطىها والتي تترك القاعدة الأولى مازلت هنا, ، وهذا هو السبب في أنه يعمل بشكل فعال كاحتياطي (على الرغم من أن السقوط إلى الأمام سيكون أكثر صحة).

هذا ليس هو نفسه بالنسبة لجميع المتصفحات - على الرغم من أن الجميع سوف يطبقون فقط قاعدة واحدة iIRC IE6 <المستخدمة في القاعدة الأولى وكان هناك بعض الاختراقات في المدرسة القديمة حول هذه "الميزة".