ব্রাউজারগুলি সিএসএস নির্বাচনকারীদের ডান থেকে বামে মেলে কেন?


560

সিএসএস সিলেক্টরগুলি ব্রাউজার ইঞ্জিনগুলির সাথে ডান থেকে বামে মিলিত হয়। সুতরাং তারা প্রথমে বাচ্চাদের সন্ধান করে এবং তারপরে তাদের বাবা-মাকে পরীক্ষা করে তারা নিয়মের অন্যান্য অংশগুলির সাথে মেলে কিনা।

  1. কেন?
  2. এটা কি অনুমান বলে?
  3. এটি যদি বাম থেকে ডানে মূল্যায়ন করা হয় তবে তা কী লেআউটটিকে প্রভাবিত করে?

আমার কাছে এটি করার সহজতম উপায়টি হ'ল সংখ্যক উপাদানগুলির সংখ্যক সহ নির্বাচকদের ব্যবহার করা। সুতরাং প্রথম আইডি (যেমন তাদের কেবল 1 টি উপাদান ফেরত দেওয়া উচিত)। তারপরে ক্লাসে বা এমন কোনও উপাদান যা নোডের সংখ্যক সংখ্যা রয়েছে - যেমন পৃষ্ঠায় কেবল একটি স্প্যান থাকতে পারে তাই কোনও স্প্যান উল্লেখ করে যে কোনও নিয়ম সহ সরাসরি সেই নোডে সরাসরি যান।

আমার দাবির ব্যাক আপ করার জন্য এখানে কয়েকটি লিঙ্ক রয়েছে

  1. http://code.google.com/speed/page-speed/docs/rendering.html
  2. https://developer.mozilla.org/en/Writing_Efficient_CSS

মনে হচ্ছে এটি কোনও সন্তানের সমস্ত পিতা-মাতার তুলনায় পিতা বা মাতার সমস্ত সন্তানের দিকে নজর রাখা (যা অনেক হতে পারে) এড়াতে এইভাবে করা হয়েছে। এমনকি ডিওএম গভীর হলেও এটি আরটিএল মিলের ক্ষেত্রে একাধিক না হয়ে কেবলমাত্র স্তরের প্রতি এক নোডের দিকে নজর দেবে। সিএসএস নির্বাচকদের এলটিআর বা আরটিএল মূল্যায়ন করা কি আরও সহজ / দ্রুত?


5
৩. না - আপনি এটি যেভাবে পড়ুন তা বিবেচনা না করেই, নির্বাচক সর্বদা একই উপাদানের সাথে সমান মেলে।
Vidime বিদাস

39
এটির জন্য মূল্যবান, ব্রাউজার ধরে নিতে পারে না যে আপনার আইডি অনন্য। আপনি সমস্ত ডিওএম জুড়ে একই আইডি = "ফু" আটকে রাখতে পারেন, এবং কোনও #fooনির্বাচককে এই সমস্ত নোডের সাথে মিল রাখতে হবে। jQuery এর বলার বিকল্প রয়েছে যে $ ("# foo") সর্বদা কেবলমাত্র একটি উপাদান ফিরে আসবে, কারণ তারা তার নিজস্ব বিধি তার নিজস্ব বিধি দ্বারা সংজ্ঞায়িত করছে। তবে ব্রাউজারগুলির সিএসএস বাস্তবায়ন করা দরকার, এবং সিএসএস বলেছে যে প্রদত্ত আইডির সাথে ডকুমেন্টের সমস্ত কিছুই মিলে যায়।
বরিস জবারস্কি

4
@ কুইন্টিন একটি "নন-কনফর্মেন্ট" (এইচটিএমএল) নথির আইডি অ-অনন্য হতে পারে এবং সেই নথিতে সিএসএসের জন্য এই আইডির সাথে সমস্ত উপাদান মেলে requires সিএসএস নিজেই আইডিগুলির অনন্য হিসাবে কোনও আদর্শিক প্রয়োজনীয়তা রাখে না; আপনি যে পাঠ্যটি উদ্ধৃত করেছেন তা তথ্যপূর্ণ।
বোরিস জবারস্কি

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

5
আমি এমনকি নিশ্চিত নই যে আপনি দুজনেই এই দীর্ঘ কথোপকথনের সাথে কী ঘটছে তা বুঝতে পারবেন। আমরা এই বর্ধিত আলোচনার জন্য চ্যাট করি। আপনি যা কিছু সত্যই আশেপাশে রাখতে চান তা প্রশ্ন বা উত্তরের মধ্যে রাখা উচিত, বিশেষত যদি এটি তথ্য পরিষ্কার করে ying স্ট্যাক ওভারফ্লো মন্তব্যগুলিতে আলোচনাকে ভালভাবে পরিচালনা করে না।
জর্জ স্টকার

উত্তর:


824

মনে রাখবেন যে যখন কোনও ব্রাউজার সিলেক্টর ম্যাচিংয়ের কাজ করে তখন এর একটি উপাদান থাকে (যার জন্য এটি স্টাইল নির্ধারণ করার চেষ্টা করছে) এবং আপনার সমস্ত বিধি এবং তাদের নির্বাচক এবং এটি কোনও বিধি উপাদানটির সাথে মেলে তা খুঁজে নেওয়া দরকার। এটি সাধারণ jQuery জিনিস থেকে আলাদা, বলুন, যেখানে আপনার কেবলমাত্র একজন নির্বাচক রয়েছে এবং আপনাকে সেই নির্বাচকের সাথে মেলে এমন সমস্ত উপাদান খুঁজে বের করতে হবে।

সেই নির্বাচকটির তুলনায় যদি আপনার কাছে কেবলমাত্র একজন নির্বাচক এবং কেবল একটি উপাদান থাকে তবে বাম থেকে ডান কিছু ক্ষেত্রে আরও বোধগম্য হয়। কিন্তু যে নিশ্চিতভাবে এর না ব্রাউজারের অবস্থা। ব্রাউজারটি জিমেইল বা যা কিছু রেন্ডার করার চেষ্টা করছে এবং যা <span>এটি স্টাইল করার চেষ্টা করছে এবং জিমেইল তার স্টাইলশীটে 10,000+ বিধি রেখেছিল (আমি সেই সংখ্যাটি তৈরি করছি না)।

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

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

অন্যদিকে, আপনি যদি নির্বাচকটির বামতম অংশটি মিলিয়ে শুরু করেন ... তবে এর সাথে আপনি কী মেলে? আপনাকে ডিওএম হাঁটা শুরু করতে হবে, এর সাথে মেলে এমন নোডগুলি সন্ধান করতে হবে। কেবল আবিষ্কার করে যে বাম দিকের অংশটি মিলছে তার কিছুটা সময় লাগতে পারে।

সুতরাং ব্রাউজারগুলি ডান থেকে মিলছে; এটি একটি সুস্পষ্ট সূচনা পয়েন্ট দেয় এবং আপনাকে বেশিরভাগ প্রার্থী নির্বাচনকারীদের থেকে খুব দ্রুত মুক্তি দিতে দেয়। আপনি http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (যদিও স্বরলিপিটি বিভ্রান্তিকর) এ কিছু ডেটা দেখতে পাবেন , তবে আপলোডটি হ'ল বিশেষত জিমেইলের জন্য দু'বছর আগে, rule০% (নিয়ম, উপাদান) জোড়ার জন্য আপনি সিদ্ধান্ত নিতে পারেন যে নিয়মের ডানদিকের নির্বাচকের কেবল ট্যাগ / শ্রেণি / আইডি অংশগুলি পরীক্ষা করে নিয়মটি মেলে না। মজিলার পেজলোড লোড পারফরম্যান্স টেস্ট স্যুইটের জন্য সংশ্লিষ্ট নম্বরটি ছিল 72%। সুতরাং এই সমস্ত 2/3 সমস্ত নিয়ম যত দ্রুত সম্ভব আপনি তা থেকে মুক্তি পাওয়ার চেষ্টা করার মতো মূল্য রয়েছে এবং তারপরে কেবল বাকী 1/3 টির সাথে মিল রেখে চিন্তা করা উচিত।

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


5
একটি সামান্য বোনাস হিসাবে, এটি ইংরেজিতে এমনকি এলটিআর এর চেয়ে আরটিএল পড়তে আরও বেশি বোঝা যায়। একটি উদাহরণ: stackoverflow.com/questions/3851635/css-combinator-precedence/...
BoltClock

6
লক্ষ্য করুন আরটিএল ম্যাচিং শুধুমাত্র জুড়ে প্রযোজ্য combinators । এটি সাধারণ নির্বাচক স্তরে নিচে যায় না। এটি হ'ল, কোনও ব্রাউজার সঠিকতম যৌগিক নির্বাচক বা সরল নির্বাচকদের ক্রম নেয় এবং এটি পরমাণুর সাথে মেলাতে চেষ্টা করে। তারপরে, যদি কোনও মিল থাকে তবে এটি সম্মিলনকারীকে বাম দিকের পাশের পরবর্তী যৌগ নির্বাচনের দিকে অনুসরণ করে এবং সেই অবস্থানের উপাদানটি পরীক্ষা করে। কোনও প্রমাণ নেই যে কোনও ব্রাউজার যৌগিক নির্বাচক আরটিএল এর প্রতিটি অংশ পড়ে; আসলে, শেষ অনুচ্ছেদটি অন্যথায় অবিকল দেখায় (আইডি চেকগুলি সর্বদা প্রথম আসে)।
BoltClock

5
প্রকৃতপক্ষে, আপনি যখন নির্বাচকদের সাথে মিলে যাবেন, কমপক্ষে গেকোতে, ট্যাগের নাম এবং নেমস্পেসটি প্রথমে আসবে। আইডি (পাশাপাশি ট্যাগের নাম এবং ক্লাসের নাম) একটি পূর্ব-ফিল্টারিং পদক্ষেপে বিবেচনা করা হয় যা নির্বাচকদের সাথে ম্যাচ করার চেষ্টা না করে বেশিরভাগ নিয়ম সরিয়ে দেয়।
বরিস জবারস্কি

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

@ বেনিটো সিয়ারো: সুনির্দিষ্ট সমস্যাগুলিরও উল্লেখ না করা।
BoltClock

33

ডান থেকে বাম পার্সিং, নীচের অংশে পার্সিং নামেও পরিচিত এটি ব্রাউজারের পক্ষে কার্যকর।

নিম্নোক্ত বিবেচনা কর:

#menu ul li a { color: #00f; }

ব্রাউজারটি প্রথমে a, তারপরে li, তারপরে ulএবং তারপরে অনুসন্ধান করে #menu

এটি কারণ ব্রাউজারটি পৃষ্ঠাটি স্ক্যান করছে তার ঠিক বর্তমান উপাদান / নোড এবং এটি স্ক্যান করা সমস্ত পূর্ববর্তী নোড / উপাদানগুলির দিকে নজর দেওয়া দরকার।

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

এটি যদি অন্যভাবে করে তবে এটি অকার্যকর হবে কারণ ব্রাউজারটি প্রথম চেকটিতে যে উপাদানটি স্ক্যান করছিল তা খুঁজে পেয়েছিল, তবে পরে অতিরিক্ত অতিরিক্ত নির্বাচকদের জন্য দস্তাবেজটি সন্ধান করতে বাধ্য করা হয়েছিল। এর জন্য ব্রাউজারটিতে পুরো এইচটিএমএল থাকা দরকার এবং এটি সিএসএস পেইন্টিং শুরু করার আগে পুরো পৃষ্ঠাটি স্ক্যান করতে পারে।

এটি বেশিরভাগ লিবস পার্স ডমকে বিপরীত করে। সেখানে ডোমটি তৈরি করা হয়েছে এবং এটির জন্য পুরো পৃষ্ঠাটি স্ক্যান করার দরকার নেই কেবল প্রথম উপাদানটি খুঁজে বের করুন এবং তারপরে এর সাথে অন্যদের সাথে মিলিয়ে চলুন।


20

এটি আরও নির্দিষ্ট থেকে কম নির্দিষ্ট থেকে ক্যাসকেডিংয়ের অনুমতি দেয়। এটি প্রয়োগে একটি শর্ট সার্কিটের অনুমতি দেয়। অভিভাবকরা যে নিয়মটি প্রয়োগ করে সেই ক্ষেত্রে যদি আরও সুনির্দিষ্ট নিয়ম প্রয়োগ হয় তবে সমস্ত পিতামাতার নিয়ম উপেক্ষা করা হবে। যদি পিতামাতার মধ্যে অন্য বিট থাকে তবে সেগুলি প্রয়োগ করা হয়।

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


11
এটি একটি পৃথক বিষয়। আপনি নির্দিষ্টকরণের মাধ্যমে বিধিগুলি বাছাই করে এবং তারপরে নির্দিষ্টতার ক্রমে মিল রেখে ক্যাসকেডিং করেন। তবে এখানে প্রশ্ন হ'ল কোনও নির্দিষ্ট নিয়মের জন্য কেন আপনি তার নির্বাচকদের একটি বিশেষ উপায়ে মেলে।
বরিস জবারস্কি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.