في وقت سابق من هذا العام، عدّلت WebKit سلوك الموقع المختصر background في CSS. مع هذا التغيير، ستعيد السمة المختصرة background إعادة ضبط background-size على قيمتها التلقائية auto auto إذا لم يتم ضبطها في التعريف المختصر. يؤدي هذا التغيير إلى جعل Chrome ومتصفّحات WebKit الأخرى متوافقة مع المواصفات المحدّدة ويتطابق مع سلوك متصفحات Firefox وOpera وInternet Explorer.
في الوقت الذي ينتقل فيه Chrome لنظام Android إلى الإصدارات الحالية على WebKit، يتم طرح هذا التغيير الآن في نظام Android. ولأنّ هذا كان إصلاحًا لواجهة برمجة التطبيقات، من المحتمل ألا تتأثر المواقع الإلكترونية التي تم اختبارها في عدة متصفِّحات.
الطريقة القديمة في تنفيذ المهام
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
لا تحتوي السمة المختصرة background على سمة أي حجم، لذا ستعمل على إعادة ضبط background-size على قيمتها التلقائية التي تبلغ auto auto.
الطريقة الصحيحة لتحديد حجم الصورة
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
في fooB، يتطلب تحديد background-size في الاختصار background تحديد position (0%) أولاً، يليه شرطة مائلة للأمام ثم background-size (50 بكسل 40 بكسل).
إصلاحات للرمز الحالي
ثمة خيارات متعددة ستساعدك في حلّ هذه المشكلة بسهولة:
- استخدِم
background-imageبدلاً من السمة المختصرةbackground. - اضبط السمة
background-sizeالأخيرة مع خصوصية أعلى من أي قواعد CSS أخرى تضبط السمةbackgroundعلى هذا العنصر، ولا تنسَ الاطّلاع على قواعد:hover. - تطبيق السمة
!importantعلىbackground-size - انقل معلومات المقاس إلى خاصية
backgroundالمختصرة.
ميزة إضافية: إزاحة صورة الخلفية
بالإضافة إلى هذا التغيير، تتوفر الآن مرونة أكبر في تحديد موضع الصورة داخل الخلفية. في الماضي، كان بإمكانك فقط تحديد موضع الصورة بالنسبة إلى أعلى الجانب الأيسر، والآن أصبح بإمكانك تحديد إزاحة من حواف الحاوية. على سبيل المثال، عند ضبط background-position: right 5px bottom 5px;، سيتم وضع الصورة على بُعد 5 بكسل من الحافة اليمنى و5 بكسل من أسفلها. يمكنك الاطّلاع على هذا العيّنة على JSBin.