সিএসএস অ্যাট্রিবিউট সিলেক্টরে "আই" এর অর্থ কী?

Question

আমি গুগল ক্রোম ব্যবহারকারী এজেন্ট স্টাইলশিটে নিম্নলিখিত সিএসএস নির্বাচনকারীকে পেয়েছি:

[type="checkbox" i]

কী iমানে?

Comments

@ আলেকজান্ডার ও'মারা: নির্বাচক স্তর 4 সিএসএস 3 এর অংশ - এটি মডিউলের ঠিক পরবর্তী স্তর যা 3 স্তরে শুরু হয়েছিল। "সিএসএস 4" একটি ভুল ধারণা রয়েছে।

— BoltClock

@ আলেকজান্ডার ওমারা: আমি এটি মেটাতে উত্থাপিত দেখতে দেখতে পছন্দ করব। বিশেষত আমি কীভাবে আমরা [সিএসএস 4] ট্যাগটি ব্যবহার করতে পারি তা জানতে চাই - আমি যে কঠোর পরিমাপ করতে পারি তা হ'ল এটি [সিএসএস 3] এর প্রতিশব্দ হিসাবে তৈরি করা এবং এটি আসলে সঠিক জিনিস হবে।

— BoltClock

@ বলটকলক মেটা প্রশ্ন শেষ! বিটিডাব্লু, আপনি যখন এই প্রশ্নের সাথে আপনার উত্তরটি মার্জ করার বিষয়ে জিজ্ঞাসা করবেন, আপনি কি এখানে তথ্য / সংযুক্তিটি যুক্ত করার জন্য প্রশ্নটি / উত্তরটি সম্পাদন করার অর্থ বুঝিয়েছিলেন, বা আপনি কোনও ম্যাজিক মুভ-এ-উত্তর-থেকে-অন্য-প্রশ্ন বোতামের উল্লেখ করছেন?

— আলেকজান্ডার ও'মারা

@ আলেকজান্ডার ও'মারা: স্বতন্ত্র উত্তরগুলি সরানো নয়, তবে দুটি সম্পূর্ণ প্রশ্নের সংমিশ্রণ। এটি একটি মোড-কেবল ফাংশন।

— BoltClock

@ টাইলার এই বিষয়টিতে মেটা নিয়ে আমাদের একটি আলোচনা আছে । সেখানে আলোচনায় নির্দ্বিধায় যোগ করুন।

— আলেকজান্ডার ও'মারা

Answer 1

মন্তব্যে উল্লিখিত হিসাবে, এটি কেস-সংবেদনশীল বৈশিষ্ট্য মিলে যাওয়ার জন্য। এটি সিএসএস নির্বাচক স্তর 4-এ একটি নতুন বৈশিষ্ট্য।

বর্তমানে এটি ক্রোম 49+, ফায়ারফক্স 47+, সাফারি 9+, এবং অপেরা 37 + * এ উপলব্ধ। এর আগে এটি ক্রোম 39-এর আশপাশে কেবলমাত্র ক্রোম ব্যবহারকারী-এজেন্ট শৈলীতেই উপলভ্য ছিল তবে পরীক্ষামূলক বৈশিষ্ট্যগুলির পতাকাটিকে সেট করে ওয়েব সামগ্রীর জন্য সক্ষম করা যেতে পারে।

* অপেরার পূর্ববর্তী সংস্করণগুলিও এটি সমর্থন করতে পারে।

কাজের উদাহরণ / ব্রাউজার পরীক্ষা:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

<div data-test="A"></div>

উপরের স্কোয়ারটি সবুজ হবে যদি ব্রাউজারটি এই বৈশিষ্ট্যটি সমর্থন করে তবে এটি লাল না হলে লাল।

Comments

শিক্ষকতার জন্য ধন্যবাদ! আপনার নতুন টুপি উপভোগ করুন। এই ধরণের জিনিসটি কি নির্বাচক লাইব্রেরিতে কাজ করে? এটি কোন ধরণের ব্রাউজার সমর্থন করে?

— বেনজামিন গ্রুইনবাউম

@ বেনজামিন গ্রুয়েনবাউম দেখে মনে হচ্ছে এটি কেবল ক্রোম ব্যবহারকারী-এজেন্ট শৈলীতেই উপলব্ধ (কোনও ওয়েবসাইটের সিএসএস নয়, অন্তত এখনও নয়)। আমি কোনও অফিসিয়াল সামঞ্জস্যের ডকুমেন্টেশন খুঁজে পাইনি।

— আলেকজান্ডার ও'মারা

(প্রশ্নগুলি একত্রিত হয়ে এখন আমার আগের মন্তব্যটি পুনরায় পোস্ট করা)) এটি সম্পূর্ণ বিস্ময়কর নয় যে একেবারে নতুন, পরীক্ষামূলক মানগুলি যেমন খারাপভাবে নথিভুক্ত। এটি বলেছিল, আমার উত্তরে এটি সম্পর্কে আরও কিছু তথ্য রয়েছে, যেমন এটি কীভাবে কাজ করে, কেন এটি ব্যবহৃত হয় এবং কীভাবে এটি ক্রোমে প্রয়োগ করা হয় (প্রশ্ন অনুসারে দেওয়া হয়েছে)।

— বোল্টক্লক

ক্রোম এটির জন্য 49.0 সংস্করণে (বর্তমানে বিটাতে), ফায়ারফক্সের 47.0 সংস্করণে সমর্থন যোগ করবে (জুন 2016 এ প্রকাশিত হবে নির্ধারিত)। সূত্র: ডেভেলপার.মোজিলা.আর.ইন-

— দুর্বৃত্ত

@ এলডাব্লুক্রিস: আমি নিশ্চিত নই যে এ জাতীয় কোনও ব্রাউজার আসলেই রয়েছে। আই 66 গুণাবলী নির্বাচনকারীদের মোটেই বুঝতে পারে না এবং আই 7 কাস্টম ডেটা অ্যাট্রিবিউট সহ তাদের সমর্থন করে।

— বোল্টক্লক

Answer 2

এটি নির্বাচক 4-এ প্রবর্তিত বৈশিষ্ট্য নির্বাচনকারীদের ক্ষেত্রে কেস-সংবেদনশীল পতাকা । স্পষ্টতই তারা 2014 এর আগস্টের শুরুতে ক্রোমে এই বৈশিষ্ট্যটির একটি প্রয়োগকে ছিনিয়ে এনেছে।

সংক্ষেপে: এই পতাকাটি ব্রাউজারকে typeবৈশিষ্ট্য কেস-সংবেদনশীলতার সাথে সম্পর্কিত মানগুলির সাথে মেলে বলে । এইচটিএমএলতে অ্যাট্রিবিউট মানগুলির জন্য ডিফল্ট নির্বাচক মিলে যাওয়া আচরণটি কেস-সংবেদনশীল , যা প্রায়শই অনাকাঙ্ক্ষিত কারণ অনেকগুলি বৈশিষ্ট্য কেস-সংবেদনশীল মান হিসাবে সংজ্ঞায়িত করা হয়, এবং আপনি নিশ্চিত করতে চান যে আপনার নির্বাচক কেস নির্বিশেষে সমস্ত সঠিক উপাদানকে বেছে নিয়েছে। typeএই জাতীয় বৈশিষ্ট্যের একটি উদাহরণ, কারণ এটি একটি গণিত বৈশিষ্ট্য , এবং গণিত গুণাবলী কেস-সংবেদনশীল মান বলে ।

এখানে সম্পর্কিত কমিটগুলি রয়েছে:

• 179370 - বাস্তবায়ন
• 179401 - প্রশ্নের স্ক্রিনশটে প্রদর্শিত ইউএ স্টাইলশিটে পরিবর্তন

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

এখানে আপনি ব্যবহার করতে পারেন এমন একটি পরীক্ষার কেস - পতাকাটি সক্ষম ও অক্ষম করা হলে ফলাফলগুলির সাথে তুলনা করুন:

span[data-foo="bar"] {
    color: red;
}

span[data-foo="bar" i] {
    color: green;
}

<span data-foo="bar">If all of this text is green,</span>
<span data-foo="Bar">your browser supports case-insensitive attribute selectors.</span>

নোট করুন যে আমি typeএটির পরিবর্তে একটি কাস্টম ডেটা অ্যাট্রিবিউট ব্যবহার করি এটি দেখায় যে এটি প্রায় কোনও বৈশিষ্ট্যের সাথে ব্যবহার করা যেতে পারে।

এই লেখার মতো আমি অন্য কোনও প্রয়োগ সম্পর্কে অবগত নই, তবে আশা করি অন্যান্য ব্রাউজারগুলি শিগগিরই এটি গ্রহণ করবে। এটি স্ট্যান্ডার্ডের তুলনায় তুলনামূলকভাবে সহজ তবে অত্যন্ত দরকারী সংযোজন এবং আমি ভবিষ্যতে এটি ব্যবহার করতে সক্ষম হওয়ার অপেক্ষায় রয়েছি।

Comments

আমার "সেই বিকেলে" ক্লান্তি হচ্ছে ... ডাব্লু 3 পড়ার পরেও আমি পুরোপুরি বুঝতে পারছি না, এর জন্য সিএসএসে বাস্তব জীবনের ব্যবহার কী হবে?

— ম্যাট

@ ম্যাট: এইচটিএমএল 5-তে বর্ণিত হিসাবে অ্যাট্রিবিউট সিলেক্টারের মিলটি কেস-সংবেদনশীল , যা অনেক ক্ষেত্রেই অনাকাঙ্ক্ষিত কারণ HTML5 নির্দিষ্ট বৈশিষ্ট্যের জন্য কেস-সংবেদনশীল মানগুলিকে মঞ্জুরি দেয়। আপনি কেস নির্বিশেষে সঠিক উপাদানগুলি তুলছেন তা নিশ্চিত করতে আপনি এই পতাকাটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে এটির জন্য এটির মতো দেখাচ্ছে input[type="search" i], যা এর মতো উপাদানের সাথে মিলবে <input type="SEARCH">।

— BoltClock

আমি এটি ক্রোমিয়াম সংস্করণ 43.0.2357.130 এবং "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য সক্ষম করুন" সক্ষম করে তা নিশ্চিত করতে পারি।

— রবার্ট সিমার