গুগল ক্রোম ডেভোলগুলিতে ক্রস করা শৈলীর বৈশিষ্ট্যগুলি কী বোঝায়?


274

ক্রোমের ডেভোলগুলি ব্যবহার করে কোনও উপাদানটি পরীক্ষা করার সময়, উপাদানগুলির ট্যাবে ডান হাতের 'স্টাইলস' বারটি সম্পর্কিত সিএসএস বৈশিষ্ট্যগুলি দেখায়। কখনও কখনও, এই বৈশিষ্ট্যগুলির কয়েকটি হ'ল স্ট্রাইক-থ্রো। এই বৈশিষ্ট্যগুলির অর্থ কী?


4
আমি এই প্রশ্নটি প্রত্যাশিত। এই জন্য +1।
রাজেশ পল

উত্তর:


314

যখন কোনও সিএসএসের সম্পত্তি স্ট্রাইক-থ্রো হিসাবে দেখায়, তার অর্থ হ'ল ক্রস আউট শৈলী প্রয়োগ করা হয়েছিল, তবে তারপরে আরও নির্দিষ্ট নির্দিষ্ট নির্বাচক, আরও স্থানীয় নিয়ম বা একই বিধিটির পরবর্তী কোনও সম্পত্তি দ্বারা ওভাররাইড হয়ে যায়।

(বিশেষ কেসগুলি: কোনও শৈলী কোনও শৃঙ্খলাবদ্ধ হিসাবে দেখানো হবে যদি কোনও শৈলীর সাথে কোনও মিলের নিয়মে উপস্থিত থাকে তবে তাকে মন্তব্য করা হয়, বা আপনি যদি ক্রম বিকাশকারী সরঞ্জামগুলির মধ্যে এটি চেক না করে ম্যানুয়ালি অক্ষম করে থাকেন তবে এটি ক্রস হিসাবে প্রদর্শিত হবে) আউট, তবে একটি ত্রুটি আইকন সহ, যদি শৈলীতে একটি সিনট্যাক্স ত্রুটি থাকে))

উদাহরণস্বরূপ, যদি ব্যাকগ্রাউন্ড রঙটি সমস্ত ক্ষেত্রে প্রয়োগ করা হয় div, তবে divনির্দিষ্ট আইডির সাথে একটি ভিন্ন পটভূমির রঙ প্রয়োগ করা হয় তবে প্রথম রঙটি প্রদর্শিত হবে তবে দ্বিতীয় বর্ণটি পরিবর্তিত হয়ে যাবে কারণ (বৈশিষ্ট্যে) divসেই আইডি সহ তালিকার জন্য )।


18
সাইড নোটে, ক্রস-আউট সম্পত্তিগুলি একই নামী বৈশিষ্ট্যগুলি পরে একই সিএসএস বিধি অনুসারে (বাতিল হওয়া ") হতে পারে (সিএসএস স্পেকের প্রয়োজন অনুসারে)
আলেকজান্ডার পাভলভ

57
@ জ্যাকোবএম: কীভাবে জানবেন যে কোন সম্পত্তি হ'ল সম্পত্তিকে ছাড়িয়ে যাচ্ছে।
অরুণরাজ

51
@ অরুনরাজ - কোন সম্পত্তি (বা বৈশিষ্ট্যগুলি) ক্রস আউটকে ছাড়িয়ে যাচ্ছে তা বলার সহজ উপায় নেই। একটি বিকল্প হ'ল একই ধরণের প্রকারের সন্ধানের জন্য "গণিত" শৈলীর ট্যাবটি সন্ধান করা এবং তারপরে আপনি যদি প্রসারিত করেন যে সেই সম্পত্তি প্রয়োগের চেষ্টা করছে এমন বিভিন্ন বিধিগুলির উত্স দেখতে পাওয়া উচিত (আসলে সক্রিয় রয়েছে এমন একটি সহ) । সুতরাং যদি আপনি দেখতে পান যে "ফন্ট-আকার: 11px" অতিক্রম করেছে, তবে "ফন্ট-আকার" এর জন্য গণিত বৈশিষ্ট্যগুলি সন্ধান করুন এবং ফন্ট-আকার প্রয়োগ করা সমস্ত জায়গাগুলির মধ্যে আপনাকে দেখতে হবে, প্রকৃত সক্রিয় সহ। আশাকরি এটা সাহায্য করবে.
জ্যাকব ম্যাটিসন

7
স্টাইলস ট্যাবের শীর্ষে এখন একটি ফিল্টার বাক্স রয়েছে। আপনি যদি ভাবছেন যে কী ওভাররাইড হয়েছে border-colorতবে কেবল border-colorফিল্টারটি টাইপ করুন। এটি সম্পত্তিটি হলুদে হাইলাইট করে সেই সম্পত্তি সম্বলিত সমস্ত বিধি প্রদর্শন করবে। এই বৈশিষ্ট্যটি ফায়ারফক্সেও পাওয়া যায়।
জোয়েটউইডল

4
এছাড়াও যোগ করতে চেয়েছিলেন: যদি কোনও শৈলীটি আড়াল করা হয় তবে এটি ইতিমধ্যে শীর্ষে রয়েছে, তবে আপনার !importantএটির ওভাররাইট করে কোথাও কোনও সিএসএস শৈলী থাকতে পারে ।
ডমিনিক কে

12

সাইড নোটে। আপনি যদি @ মিডিয়া ক্যোয়ারী (যেমন @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 **

মিডিয়া কোয়েরি যদি একটি ভিন্ন সিএসএস ফাইলে থাকে তবে কী হবে?
কার্লোস হার্নান্দেজ গিল

11

উপরের উত্তরের পাশাপাশি আমি স্ট্রাইকড আউটপুট সম্পর্কিত একটি ঘটনাও হাইলাইট করতে চাই যা আমাকে সত্যিই অবাক করেছিল।

যদি আপনি একটি ডিভের সাথে একটি পটভূমি চিত্র যুক্ত করে থাকেন:

<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; 
}

তারপরে ক্রোমে আপনি ব্যাকগ্রাউন্ড-আকার দেখতে পাবেন । আমি কেন নিশ্চিত তা নিশ্চিত নই, তবে হ্যাঁ আপনি এটি নিয়ে গোলযোগ করতে চান না।


8

যদি আপনি স্ট্রাইক-ট্রুপ ইঙ্গিত পাওয়ার পরেও স্টাইলটি প্রয়োগ করতে চান তবে আপনি স্টাইলটি প্রয়োগ করতে পারেন "!important"। এটি সঠিক সমাধান না হলেও সমস্যার সমাধান হতে পারে।


মিডিয়াতে মোবাইলের জন্য আমার একটি গুগলম্যাপ স্কেল করতে সমস্যা হয়েছিল। আমার ব্রাউজারগুলির জন্য একটি বেস সেটিং রয়েছে (মিডিয়া ছাড়াই) তার পরে ছোট আকারের বিভিন্ন মিডিয়া রয়েছে, যা কাজ করেনি (মোবাইলের জন্য সঠিক স্টিলে জিসিতে প্রদর্শিত হয়েছে তবে স্ট্রাইকথ্রু সহ)। আমি যুক্ত করার পরে! গুরুত্বপূর্ণ, এটি কাজ করে, তবে এর পিছনে "যুক্তি" আমি বুঝতে পারি না ...
ফ্রেডিওঞ্জার

-5

আপনি কোথাও সিএসএস কোডটি অনুলিপি করে আটকালে কিছু ক্ষেত্রে রয়েছে এবং এটি ফর্ম্যাটটি ভেঙে দেয় যাতে ক্রোম হলুদ সতর্কতা দেখায়। আপনার আবার সিএসএস কোড পুনরায় ফর্ম্যাট করার চেষ্টা করা উচিত এবং এটি ঠিক আছে।


2
প্রশ্নটি "হলুদ সতর্কতা" সম্পর্কে কিছু জিজ্ঞাসা করেনি। এই উত্তর সেরা মন্তব্য করা উচিত।
সাইমন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.