في وقت سابق من هذا العام، عدّلت مكتبة WebKit سلوك سمة الاختصار background
في CSS. بعد إجراء هذا التغيير، ستعيد خاصية الاختصار background
ضبط background-size
على القيمة التلقائية auto auto
إذا لم يتم ضبطها في بيان الاختصار. يتوافق هذا التغيير مع مواصفات متصفّح Chrome ومتصفّحات WebKit الأخرى، كما يتطابق مع سلوك Firefox وOpera وInternet Explorer.
مع انتقال Chrome لنظام التشغيل Android إلى المراجعات الحالية في WebKit، يتم الآن طرح هذا التغيير في Android. وبما أنّ هذا الإصلاح كان لبرنامج webkit، من المرجّح ألا تتأثّر المواقع الإلكترونية التي تم اختبارها في عدة متصفحات.
الطريقة القديمة في تنفيذ المهام
// 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
(50px 40px).
إصلاحات للرمز الحالي
هناك عدة خيارات لحلّ هذه المشكلة بسهولة:
- استخدِم
background-image
بدلاً من السمة المختصرةbackground
. - اضبط
background-size
أخيرًا، مع تحديد أكثر دقة من أي قواعد CSS أخرى تضبطbackground
على هذا العنصر، ولا تنسَ التحقّق من قواعد:hover
. - طبِّق السمة
!important
علىbackground-size
. - انقل معلومات الحجم إلى السمة المختصرة
background
.
مكافأة: Offsets لصورة الخلفية
بالإضافة إلى هذا التغيير، تتوفّر الآن مرونة أكبر في تحديد موضع الصورة داخل الخلفية. في السابق، كان بإمكانك تحديد موضع الصورة بالنسبة إلى أعلى يمين الشاشة فقط، ولكن يمكنك الآن تحديد مسافة من حواف الحاوية. على سبيل المثال، عند ضبط القيمة background-position: right 5px bottom 5px;
، سيتم وضع الصورة على مسافة 5 بكسل من الحافة اليمنى وعلى مسافة 5 بكسل من الأسفل. اطّلِع على هذا النموذج على JSBin.