সিএসএস: নির্দিষ্ট উপাদানগুলিতে সামগ্রী যুক্ত না করার পরে

Question 1

সিএসএস :afterসম্পত্তি সম্পর্কিত আচরণ বুঝতে আমার সমস্যা হচ্ছে । অনুমান অনুসারে ( এখানে এবং এখানে ):

তাদের নামগুলি ইঙ্গিত করে যে, :beforeএবং :afterসিউডো-উপাদানগুলি কোনও উপাদানের ডকুমেন্ট ট্রি সামগ্রীর আগে এবং পরে সামগ্রীর অবস্থান নির্দিষ্ট করে।

এটি উপাদানগুলির একটি :after(বা :before) সম্পত্তি থাকতে পারে তার উপর বিধিনিষেধ স্থাপন করবে বলে মনে হয় না । তবে, এটি কেবল নির্দিষ্ট উপাদানগুলির সাথেই কাজ করছে বলে মনে হয় ... <p>কাজ করে, <img>করে না, <input>করে না, <table>করে। আমি আরও পরীক্ষা করতে পারি, তবে বিষয়টি তৈরি হয়েছে। নোট করুন যে এটি ব্রাউজারগুলিতে বেশ সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে। কোন বস্তু একটি সম্পত্তি :beforeএবং :afterসম্পত্তি গ্রহণ করতে পারে কিনা তা নির্ধারণ করে ?

Question 2

imgএবং inputউভয়ই প্রতিস্থাপিত উপাদান ।

একটি প্রতিস্থাপিত উপাদান এমন কোনও উপাদান যার উপস্থিতি এবং মাত্রা একটি বাহ্যিক সংস্থান দ্বারা সংজ্ঞায়িত হয়। উদাহরণ চিত্র (অন্তর্ভুক্ত <img>ট্যাগ), প্লাগইনগুলির ( <object>ট্যাগ), এবং ফর্ম উপাদানের ( <button>, <textarea>, <input>, এবং <select>ট্যাগ)। অন্যান্য সমস্ত উপাদান ধরণের অ-প্রতিস্থাপিত উপাদান হিসাবে উল্লেখ করা যেতে পারে।

:beforeএবং :afterশুধুমাত্র অ-প্রতিস্থাপিত উপাদানগুলির সাথে কাজ করে।

অনুমান থেকে :

বিঃদ্রঃ. এই স্পেসিফিকেশনটি প্রতিস্থাপিত উপাদানগুলির (যেমন এইচটিএমএল-তে আইএমজি) এর সাথে যোগাযোগের :beforeএবং সম্পূর্ণরূপে সংজ্ঞা দেয় না :after। ভবিষ্যতের নির্দিষ্টকরণে এটি আরও বিশদে সংজ্ঞায়িত হবে।

এর সাথে span:before, span:after, ডিওএম এর মত দেখাচ্ছে:

<span><before></before>Content of span<after></after></span>

স্পষ্টতই, এটি কাজ করে না <img src="" />।

Question 3

:beforeএবং প্রতিস্থাপিত উপাদানগুলির জন্য কাজ করার প্রয়োজন:after হয় না এবং সিএসএসের স্পেসিফিকেশনগুলি তাদের জন্য কীভাবে কাজ করবে তা নির্দিষ্ট করে না এবং প্রতিস্থাপিত উপাদানগুলির ধারণাটি কিছুটা অস্পষ্ট।

সিএসএস ২.১ স্পেসিফিকেশনটি পরিষ্কারভাবে পরামর্শ দেয় যে তারা প্রতিস্থাপিত উপাদানগুলির জন্য কাজ করতে পারে , কেবল এই বলে যে এটি কীভাবে "পুরোপুরি সংজ্ঞায়িত" করে না। এটি এই সমস্যার সাথে সম্পর্কিত যে কোনও প্রতিস্থাপিত উপাদানটির নিজস্ব ভিজ্যুয়াল রেন্ডারিং হবে বলে আশা করা হচ্ছে যা সিএসএস দ্বারা নিয়ন্ত্রিত নয়, অন্যদিকে ছদ্ম-উপাদানগুলির উপাদানটির সামগ্রীতে কিছু যুক্ত করা উচিত। অনুমানটি যোগ করেছে যে এটি ভবিষ্যতের নির্দিষ্টকরণে "আরও বিশদে" সংজ্ঞায়িত করা হবে, তবে এটি এখনও পর্যন্ত হয়নি।

ব্রাউজার বিক্রেতারা কেবলমাত্র কিছু উপাদানগুলির জন্য এই ছদ্ম-উপাদান প্রয়োগ না করেই সমস্যাগুলি এড়াতে সিদ্ধান্ত নিয়েছেন।

"প্রতিস্থাপিত উপাদান" এর অর্থ কী তা মোটেই পরিষ্কার নয় এবং এর অর্থ কিছুটা পরিবর্তিত হয়েছে বলে মনে হয়। এটি প্রায়শই খালি উপাদান হিসাবে অর্থ হিসাবে ব্যাখ্যা করা হয় ( EMPTYঘোষিত সামগ্রীযুক্ত একটি উপাদান, অর্থাত্ কোনও উপাদান থাকতে পারে না এমন উপাদান), তবে সিএসএস ২.১ নিজেই নির্বাচকের সাথে একটি নমুনা শৈলী শীট দেখায় br:before(যদিও ব্রাউজারগুলি এটিকে উপেক্ষা করেছে, brতাদের নিজস্ব বাস্তবায়ন করেছে উপায়)। এটি যুক্তিযুক্ত হতে পারে যে আরও এবং আরও বেশি উপাদান সিএসএস রেন্ডারিংয়ের স্কোপে চলে গেছে, অন্তত কিছুটা অংশে। উদাহরণস্বরূপ, একটি inputউপাদান (এটির ফন্ট, রঙগুলি ইত্যাদিতে অন্তর্ভুক্ত) আধুনিক ব্রাউজারগুলিতে CSS সহ বেশিরভাগ ক্ষেত্রে নিয়ন্ত্রণযোগ্য।

বর্তমান ব্রাউজারগুলি (ফায়ারফক্স, আইই, ক্রোম) এর বাইরে খালি উপাদানগুলির জন্য :afterএবং :beforeসিউডো-উপাদানগুলিকে সমর্থন করে বলে মনে হয় না hr। এর জন্য hr, IE এবং Chrome উত্পন্ন সামগ্রীটিকে সীমানা বাক্সের মধ্যে রাখে, যা বাস্তবায়ন হয় hr; সামগ্রীটি বাক্সটিকে লম্বা করে তোলে। ফায়ারফক্স উভয় (!) সিউডো-এলিমেন্টের বিষয়বস্তুগুলিকে আনুভূমিক নিয়মের পরে রাখে যা এটি কার্যকর হয় hr। এই প্রকরণটি সিএসএস ২.১-এ উল্লিখিত "ইন্টারঅ্যাকশন" সমস্যার ধরণের চিত্র তুলে ধরে।

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

উপসংহারে আসা :afterএবং :beforeবর্তমানে খালি উপাদানগুলির জন্য (প্রান্তিক ব্যতীত hr) ব্যবহারযোগ্য নয় , তবে এটি মূলত বাস্তবায়নের কারণে এবং ভবিষ্যতে পরিবর্তিত হতে পারে।

Question 4

ক্লোজিং ট্যাগ নেই এমন উপাদানগুলি শূন্য উপাদান এবং তারা তাদের ভিতরে সামগ্রী প্রদর্শন করতে পারে না:

https://www.w3.org/TR/html5/syntax.html#void- উপাদান

সমস্ত ব্লিঙ্ক, ওয়েবকিট এবং কোয়ান্টাম ব্রাউজারগুলি আপনাকে কেবলমাত্র চেকবক্সগুলিতে সিউডো উপাদান তৈরি করতে দেয় তবে এটি বিতর্কিত কারণ কোনও স্পষ্টই এই আচরণের অনুমতি দেয় না।

এখানে একটি উদাহরণ: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}