সিএসএস পডকাস্ট - 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;
}
আপনার উপলব্ধি পরীক্ষা করুন
ছদ্ম-উপাদান আপনার জ্ঞান পরীক্ষা
নিচের কোনটি ছদ্ম-উপাদান নয়?
::marker
::before
:active
::after
::pencil
::first-paragraph
ছদ্ম-উপাদানগুলি একটি HTML ফাইলে পাওয়া যেতে পারে।