ছদ্ম-উপাদান

সিএসএস পডকাস্ট - 014: ছদ্ম-উপাদান

আপনি যদি বিষয়বস্তুর একটি নিবন্ধ পেয়ে থাকেন এবং আপনি প্রথম অক্ষরটি অনেক বড় ড্রপ ক্যাপ হতে চান- আপনি কীভাবে এটি অর্জন করবেন?

CSS-এ, আপনি ::first-letter ছদ্ম-উপাদানটি ব্যবহার করতে পারেন এই ধরণের ডিজাইনের বিস্তারিত অর্জন করতে।

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

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

::before এবং ::after

::before এবং ::after উভয়ই ছদ্ম-উপাদান একটি উপাদানের ভিতরে একটি শিশু উপাদান তৈরি করে শুধুমাত্র যদি আপনি একটি content সম্পত্তি সংজ্ঞায়িত করেন।

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content যেকোন স্ট্রিং হতে পারে—এমনকি একটি খালিও— তবে মনে রাখবেন যে একটি খালি স্ট্রিং ছাড়া অন্য কিছু সম্ভবত স্ক্রিন রিডার দ্বারা ঘোষণা করা হবে। আপনি একটি চিত্র url যোগ করতে পারেন, যা একটি চিত্রকে এর মূল মাত্রায় সন্নিবেশ করবে, তাই আপনি এটির আকার পরিবর্তন করতে পারবেন না৷ আপনি একটি counter সন্নিবেশ করতে পারেন।

একবার একটি ::before বা ::after , আপনি এটিকে স্টাইল করতে পারেন যেভাবে আপনি চান কোন সীমা ছাড়াই। আপনি শুধুমাত্র একটি ::before বা ::after এলিমেন্ট এমন একটি এলিমেন্টে সন্নিবেশ করতে পারেন যা চাইল্ড এলিমেন্ট গ্রহণ করবে ( একটি ডকুমেন্ট ট্রি সহ এলিমেন্ট ), তাই এলিমেন্ট যেমন <img /> , <video> এবং <input> কাজ করবে না।

::first-letter

আমরা পাঠের শুরুতে এই ছদ্ম-উপাদানের সাথে দেখা করেছি। এটা জেনে রাখা উচিত যে ::first-letter টার্গেট করার সময় সমস্ত CSS বৈশিষ্ট্য ব্যবহার করা যাবে না। উপলব্ধ বৈশিষ্ট্য হল:

• color
• background বৈশিষ্ট্য (যেমন background-image )
• border বৈশিষ্ট্য (যেমন border-color )
• float
• font বৈশিষ্ট্য (যেমন font-size এবং font-weight )
• পাঠ্য বৈশিষ্ট্য (যেমন text-decoration এবং word-spacing )

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line ছদ্ম-উপাদান আপনাকে পাঠ্যের প্রথম লাইনের স্টাইল করতে দেবে শুধুমাত্র যদি ::first-line প্রয়োগ করা উপাদানটির একটি display মান থাকে block , inline-block , list-item , table-caption বা table-cell

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

::first-letter ছদ্ম-উপাদানের মতো, আপনি ব্যবহার করতে পারেন এমন CSS বৈশিষ্ট্যগুলির শুধুমাত্র একটি উপসেট রয়েছে:

• color
• background বৈশিষ্ট্য
• font বৈশিষ্ট্য
• text বৈশিষ্ট্য

::backdrop

যদি আপনার কাছে একটি এলিমেন্ট থাকে যা ফুল স্ক্রিন মোডে উপস্থাপিত হয়, যেমন একটি <dialog> বা একটি <video> , তাহলে আপনি ব্যাকড্রপকে স্টাইল করতে পারেন—এলিমেন্ট এবং পৃষ্ঠার বাকি অংশের মধ্যবর্তী স্থান— ::backdrop সিউডো- দিয়ে উপাদান:

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker ছদ্ম-উপাদান আপনাকে একটি তালিকা আইটেমের জন্য বুলেট বা নম্বর বা একটি <summary> উপাদানের তীর স্টাইল করতে দেয়।

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

CSS বৈশিষ্ট্যের শুধুমাত্র একটি ছোট উপসেট ::marker : এর জন্য সমর্থিত।

• color
• content
• white-space
• font বৈশিষ্ট্য
• animation এবং transition বৈশিষ্ট্য

আপনি content বৈশিষ্ট্য ব্যবহার করে মার্কার প্রতীক পরিবর্তন করতে পারেন। আপনি একটি <summary> উপাদানের বন্ধ এবং খালি অবস্থার জন্য একটি প্লাস এবং বিয়োগ চিহ্ন সেট করতে এটি ব্যবহার করতে পারেন, উদাহরণস্বরূপ।

::selection

::selection ছদ্ম-উপাদান আপনাকে নির্বাচিত পাঠ্যটি কেমন হবে তা স্টাইল করতে দেয়।

::selection {
  background: green;
  color: white;
}

এই ছদ্ম-উপাদানটি উপরের ডেমোর মতো নির্বাচিত সমস্ত পাঠ্যকে স্টাইল করতে ব্যবহার করা যেতে পারে। এটি আরও নির্দিষ্ট নির্বাচন শৈলীর জন্য অন্যান্য নির্বাচকদের সাথে একত্রে ব্যবহার করা যেতে পারে।

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

অন্যান্য ছদ্ম-উপাদানগুলির মতো, শুধুমাত্র CSS বৈশিষ্ট্যগুলির একটি উপসেট অনুমোদিত:

• color
• background-color কিন্তু background-image নয়
• text বৈশিষ্ট্য

::placeholder

আপনি উপাদান গঠনের জন্য একটি সহায়ক ইঙ্গিত যোগ করতে পারেন, যেমন <input> একটি placeholder বৈশিষ্ট্য সহ। ::placeholder ছদ্ম-উপাদান আপনাকে সেই পাঠ্যটিকে স্টাইল করতে দেয়।

input::placeholder {
  color: darkcyan;
}

::placeholder শুধুমাত্র CSS নিয়মের একটি উপসেট সমর্থন করে:

• color
• background বৈশিষ্ট্য
• font বৈশিষ্ট্য
• text বৈশিষ্ট্য

::cue

ছদ্ম-উপাদানের এই সফরের শেষটি হল ::cue সিউডো-উপাদান। এটি আপনাকে WebVTT সংকেতগুলিকে স্টাইল করার অনুমতি দেয়, যা একটি <video> উপাদানের ক্যাপশন।

এছাড়াও আপনি একটি নির্বাচককে একটি ::cue তে পাস করতে পারেন, যা আপনাকে ক্যাপশনের মধ্যে নির্দিষ্ট উপাদান স্টাইল করতে দেয়।

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

আপনার উপলব্ধি পরীক্ষা করুন

ছদ্ম-উপাদান আপনার জ্ঞান পরীক্ষা