اختصار خلفية CSS في متصفحات WebKit للأجهزة الجوّالة

Pete LePage

في وقت سابق من هذا العام، عدّلت مكتبة 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.