এই বছরের শুরুতে, WebKit CSS background শর্টহ্যান্ড সম্পত্তির আচরণ আপডেট করেছে । এই পরিবর্তনের সাথে, background শর্টহ্যান্ড প্রপার্টি background-size auto auto ডিফল্ট মানতে পুনরায় সেট করবে যদি এটি শর্টহ্যান্ড ঘোষণায় সেট করা না থাকে। এই পরিবর্তনটি Chrome এবং অন্যান্য ওয়েবকিট ব্রাউজারগুলিকে স্পেসিফিকেশন মেনে নিয়ে আসে এবং Firefox, Opera এবং Internet Explorer-এর আচরণের সাথে মেলে।
অ্যান্ড্রয়েডের জন্য ক্রোম ওয়েবকিটে বর্তমান সংশোধনগুলিতে এগিয়ে যাওয়ার সাথে, এই পরিবর্তনটি এখন অ্যান্ড্রয়েডে রোল আউট হচ্ছে৷ যেহেতু এটি ওয়েবকিটের একটি সমাধান ছিল, একাধিক ব্রাউজারে পরীক্ষা করা সাইটগুলি সম্ভবত প্রভাবিত হয় না৷
কাজ করার পুরানো পদ্ধতি
// 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 শর্টহ্যান্ডে background-size নির্দিষ্ট করার জন্য প্রথমে position (0%) নির্দিষ্ট করতে হবে, তারপরে একটি ফরোয়ার্ড স্ল্যাশ তারপর background-size (50px 40px) উল্লেখ করতে হবে।
বিদ্যমান কোডের জন্য সমাধান
বেশ কয়েকটি বিকল্প রয়েছে যা এটির জন্য একটি সহজ সমাধান প্রদান করবে:
-
backgroundশর্টহ্যান্ড সম্পত্তির পরিবর্তেbackground-imageব্যবহার করুন। - সেই উপাদানটিতে
backgroundসেট করে এমন অন্য যেকোন CSS নিয়মের চেয়ে উচ্চতর নির্দিষ্টতার সাথে,background-sizeশেষ করুন, এবং চেক করতে ভুলবেন না এবং:hoverনিয়মগুলি। -
background-size!importantসম্পত্তি প্রয়োগ করুন। - সাইজিং তথ্য
backgroundশর্টহ্যান্ড সম্পত্তি সরান.
বোনাস: ব্যাকগ্রাউন্ড ইমেজ অফসেট
এই পরিবর্তন ছাড়াও, এখন পটভূমির মধ্যে চিত্রের অবস্থানের ক্ষেত্রে আরও নমনীয়তা রয়েছে। অতীতে, আপনি শুধুমাত্র উপরের বাম কোণ থেকে ইমেজ অবস্থান আপেক্ষিক নির্দিষ্ট করতে পারেন, এখন আপনি পাত্রের প্রান্ত থেকে একটি অফসেট নির্দিষ্ট করতে পারেন। উদাহরণস্বরূপ background-position: right 5px bottom 5px; ছবিটি ডান প্রান্ত থেকে 5px এবং নীচে থেকে 5px অবস্থান করবে। JSBin-এ এই নমুনাটি দেখুন