خلاصه‌نویسی پس‌زمینه CSS به مرورگرهای WebKit موبایل می‌آید

پیت لی پیج

در اوایل سال جاری، WebKit رفتار ویژگی کوتاه‌نویسی background CSS را به‌روزرسانی کرد. با این تغییر، ویژگی background کوتاه‌نویسی، background-size به مقدار پیش‌فرض auto auto بازنشانی می‌کند، اگر در اعلان کوتاه‌نویسی تنظیم نشده باشد. این تغییر کروم و سایر مرورگرهای WebKit را با مشخصات مطابقت می‌دهد و با رفتار فایرفاکس، اپرا و اینترنت اکسپلورر مطابقت دارد.

با توجه به اینکه Chrome for 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 (50px 40px) مشخص شود.

رفع کدهای موجود

چندین گزینه وجود دارد که یک راه حل آسان برای این موضوع ارائه می دهد:

  • به جای خاصیت اختصار background-image background استفاده کنید.
  • background-size در آخر تنظیم کنید، با ویژگی بالاتر از هر قانون CSS دیگری که background آن عنصر را تنظیم می‌کند، و فراموش نکنید که قوانین را بررسی کنید و :hover .
  • ویژگی !important را در background-size اعمال کنید.
  • اطلاعات اندازه را به خاصیت کوتاه نویسی background منتقل کنید.

پاداش: تغییر تصویر پس زمینه

علاوه بر این تغییر، اکنون انعطاف پذیری بیشتری در قرار دادن تصویر در پس زمینه وجود دارد. در گذشته، موقعیت تصویر را فقط می‌توانستید از گوشه سمت چپ بالا مشخص کنید، اکنون می‌توانید یک افست را از لبه‌های ظرف مشخص کنید. به عنوان مثال تنظیم background-position: right 5px bottom 5px; تصویر 5 پیکسل از لبه سمت راست و 5 پیکسل از پایین قرار می گیرد. این نمونه را در JSBin بررسی کنید