ক্রোমের ডেভোলগুলি ব্যবহার করে কোনও উপাদানটি পরীক্ষা করার সময়, উপাদানগুলির ট্যাবে ডান হাতের 'স্টাইলস' বারটি সম্পর্কিত সিএসএস বৈশিষ্ট্যগুলি দেখায়। কখনও কখনও, এই বৈশিষ্ট্যগুলির কয়েকটি হ'ল স্ট্রাইক-থ্রো। এই বৈশিষ্ট্যগুলির অর্থ কী?
ক্রোমের ডেভোলগুলি ব্যবহার করে কোনও উপাদানটি পরীক্ষা করার সময়, উপাদানগুলির ট্যাবে ডান হাতের 'স্টাইলস' বারটি সম্পর্কিত সিএসএস বৈশিষ্ট্যগুলি দেখায়। কখনও কখনও, এই বৈশিষ্ট্যগুলির কয়েকটি হ'ল স্ট্রাইক-থ্রো। এই বৈশিষ্ট্যগুলির অর্থ কী?
উত্তর:
যখন কোনও সিএসএসের সম্পত্তি স্ট্রাইক-থ্রো হিসাবে দেখায়, তার অর্থ হ'ল ক্রস আউট শৈলী প্রয়োগ করা হয়েছিল, তবে তারপরে আরও নির্দিষ্ট নির্দিষ্ট নির্বাচক, আরও স্থানীয় নিয়ম বা একই বিধিটির পরবর্তী কোনও সম্পত্তি দ্বারা ওভাররাইড হয়ে যায়।
(বিশেষ কেসগুলি: কোনও শৈলী কোনও শৃঙ্খলাবদ্ধ হিসাবে দেখানো হবে যদি কোনও শৈলীর সাথে কোনও মিলের নিয়মে উপস্থিত থাকে তবে তাকে মন্তব্য করা হয়, বা আপনি যদি ক্রম বিকাশকারী সরঞ্জামগুলির মধ্যে এটি চেক না করে ম্যানুয়ালি অক্ষম করে থাকেন তবে এটি ক্রস হিসাবে প্রদর্শিত হবে) আউট, তবে একটি ত্রুটি আইকন সহ, যদি শৈলীতে একটি সিনট্যাক্স ত্রুটি থাকে))
উদাহরণস্বরূপ, যদি ব্যাকগ্রাউন্ড রঙটি সমস্ত ক্ষেত্রে প্রয়োগ করা হয় div
, তবে div
নির্দিষ্ট আইডির সাথে একটি ভিন্ন পটভূমির রঙ প্রয়োগ করা হয় তবে প্রথম রঙটি প্রদর্শিত হবে তবে দ্বিতীয় বর্ণটি পরিবর্তিত হয়ে যাবে কারণ (বৈশিষ্ট্যে) div
সেই আইডি সহ তালিকার জন্য )।
border-color
তবে কেবল border-color
ফিল্টারটি টাইপ করুন। এটি সম্পত্তিটি হলুদে হাইলাইট করে সেই সম্পত্তি সম্বলিত সমস্ত বিধি প্রদর্শন করবে। এই বৈশিষ্ট্যটি ফায়ারফক্সেও পাওয়া যায়।
!important
এটির ওভাররাইট করে কোথাও কোনও সিএসএস শৈলী থাকতে পারে ।
সাইড নোটে। আপনি যদি @ মিডিয়া ক্যোয়ারী (যেমন @media screen (max-width:500px
) ব্যবহার করছেন তবে সাধারণ স্টাইলগুলি সম্পন্ন করার পরে @ মিডিয়া ক্যোয়ারী প্রয়োগের দিকে বিশেষ মনোযোগ দিন । কারণ @ মিডিয়া ক্যোয়ারী অতিক্রম করা হবে (যদিও এটি আরও সুনির্দিষ্ট) তবে যদি সিএসএস অনুসরণ করা হয় যা একই উপাদানগুলিকে হেরফের করে। উদাহরণ:
@media (max-width:750px){
#buy-box {width: 300px;}
}
#buy-box{
width:500px;
}
** width will be 500px and 300px will be crossed out in Developer Tools. **
#buy-box{
width:500px;
}
@media (max-width:750px){
#buy-box {width: 300px;}
}
** width will be 300px and 500px will be crossed out **
উপরের উত্তরের পাশাপাশি আমি স্ট্রাইকড আউটপুট সম্পর্কিত একটি ঘটনাও হাইলাইট করতে চাই যা আমাকে সত্যিই অবাক করেছিল।
যদি আপনি একটি ডিভের সাথে একটি পটভূমি চিত্র যুক্ত করে থাকেন:
<div class = "myBackground">
</div>
ডিভের মাত্রাগুলিতে ফিট করার জন্য আপনি চিত্রটি স্কেল করতে চান যাতে এটি আপনার সাধারণ বর্গ সংজ্ঞা হতে পারে।
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
তবে আপনি যদি আদেশটি বদলে দেন: -
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
তারপরে ক্রোমে আপনি ব্যাকগ্রাউন্ড-আকার দেখতে পাবেন । আমি কেন নিশ্চিত তা নিশ্চিত নই, তবে হ্যাঁ আপনি এটি নিয়ে গোলযোগ করতে চান না।
যদি আপনি স্ট্রাইক-ট্রুপ ইঙ্গিত পাওয়ার পরেও স্টাইলটি প্রয়োগ করতে চান তবে আপনি স্টাইলটি প্রয়োগ করতে পারেন "!important"
। এটি সঠিক সমাধান না হলেও সমস্যার সমাধান হতে পারে।
আপনি কোথাও সিএসএস কোডটি অনুলিপি করে আটকালে কিছু ক্ষেত্রে রয়েছে এবং এটি ফর্ম্যাটটি ভেঙে দেয় যাতে ক্রোম হলুদ সতর্কতা দেখায়। আপনার আবার সিএসএস কোড পুনরায় ফর্ম্যাট করার চেষ্টা করা উচিত এবং এটি ঠিক আছে।