CSS ::মার্কার সহ কাস্টম বুলেট

<ul> বা <ol> ব্যবহার করার সময় রঙ, আকার বা সংখ্যা বা বুলেটের ধরন কাস্টমাইজ করা এখন তুচ্ছ।

Adam Argyle

Oriol Brufau

ব্লুমবার্গ দ্বারা স্পনসর করা ইগালিয়াকে ধন্যবাদ, আমরা অবশেষে স্টাইলিং তালিকার জন্য আমাদের হ্যাকগুলিকে দূরে রাখতে পারি। দেখা!

CSS ::marker কে ধন্যবাদ আমরা বিষয়বস্তু এবং বুলেট এবং সংখ্যার কিছু স্টাইল পরিবর্তন করতে পারি।

ব্রাউজার সামঞ্জস্য

::marker ডেস্কটপ এবং অ্যান্ড্রয়েড, ডেস্কটপ Safari এবং iOS Safari (কিন্তু শুধুমাত্র color এবং font-* বৈশিষ্ট্য, Bug 204163 দেখুন), এবং Chromium-ভিত্তিক ডেস্কটপ এবং Android ব্রাউজারগুলির জন্য Firefox-এ সমর্থিত।

ছদ্ম-উপাদান

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

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

যার ফলে নিম্নলিখিত অবাস্তব রেন্ডারিং হয়:

প্রতিটি <li> আইটেমের শুরুতে বিন্দু বিনামূল্যে! ব্রাউজারটি আপনার জন্য একটি জেনারেটেড মার্কার বক্স আঁকছে এবং তৈরি করছে।

আজ আমরা ::marker ছদ্ম-উপাদান সম্পর্কে কথা বলতে উত্তেজিত, যা ব্রাউজারগুলি আপনার জন্য তৈরি বুলেট উপাদানটিকে স্টাইল করার ক্ষমতা দেয়৷

একটি মার্কার তৈরি করা হচ্ছে

::marker ছদ্ম-উপাদান মার্কার বক্সটি স্বয়ংক্রিয়ভাবে প্রতিটি তালিকা আইটেমের উপাদানের ভিতরে তৈরি হয়, প্রকৃত বিষয়বস্তুর আগে এবং ::before ।

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

সাধারণত, তালিকার আইটেমগুলি হল <li> HTML উপাদান, তবে অন্যান্য উপাদানগুলি display: list-item ।

<dl>
  <dt>Lorem</dt>
  <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
  <dd>Dolores quaerat illo totam porro</dd>

  <dt>Ipsum</dt>
  <dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  display: list-item;
  list-style-type: "🤯";
  padding-inline-start: 1ch;
}

একটি মার্কার স্টাইলিং

::marker পর্যন্ত , তালিকাগুলিকে স্টাইল করা যেতে পারে list-style-type এবং list-style-image ব্যবহার করে লিস্ট আইটেম চিহ্ন পরিবর্তন করতে সিএসএসের 1 লাইনের সাথে:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

এটা সহজ কিন্তু আমরা আরো প্রয়োজন. রঙ, আকার, ব্যবধান, ইত্যাদি পরিবর্তন সম্পর্কে কি!? এখানেই ::marker উদ্ধারে আসে। এটি সিএসএস থেকে এই ছদ্ম-উপাদানগুলির স্বতন্ত্র এবং বিশ্বব্যাপী টার্গেট করার অনুমতি দেয়:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

list-style-type সম্পত্তি খুব সীমিত স্টাইলিং সম্ভাবনা দেয়। ::marker ছদ্ম-উপাদানের অর্থ হল আপনি নিজেই মার্কারটিকে লক্ষ্য করতে পারেন এবং সরাসরি এটিতে শৈলী প্রয়োগ করতে পারেন। এটি অনেক বেশি নিয়ন্ত্রণের জন্য অনুমতি দেয়।

এটি বলেছে, আপনি একটি ::marker এ প্রতিটি CSS সম্পত্তি ব্যবহার করতে পারবেন না। কোন বৈশিষ্ট্যগুলি অনুমোদিত এবং অনুমোদিত নয় তার তালিকাটি স্পষ্টভাবে উল্লেখ করা হয়েছে৷ আপনি যদি এই ছদ্ম-উপাদানের সাথে আকর্ষণীয় কিছু চেষ্টা করেন এবং এটি কাজ না করে, নীচের তালিকাটি CSS দিয়ে কী করা যায় এবং কী করা যায় না সে সম্পর্কে আপনার গাইড:

অনুমোদিত CSS ::marker বৈশিষ্ট্য

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

list-style-type বিপরীতে একটি ::marker content পরিবর্তন করা হয়। এই পরবর্তী উদাহরণে প্রথম আইটেমটি list-style-type ব্যবহার করে স্টাইল করা হয়েছে এবং দ্বিতীয়টি ::marker দিয়ে। প্রথম ক্ষেত্রে বৈশিষ্ট্যগুলি সম্পূর্ণ তালিকা আইটেমের জন্য প্রযোজ্য, শুধুমাত্র মার্কার নয়, যার অর্থ হল টেক্সটটি অ্যানিমেটিং এবং মার্কারও৷ ::marker ব্যবহার করার সময় আমরা শুধু মার্কার বক্সকে টার্গেট করতে পারি, টেক্সট নয়।

এছাড়াও, নোট করুন কিভাবে অননুমোদিত background সম্পত্তির কোন প্রভাব নেই।

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

একটি মার্কার বিষয়বস্তু পরিবর্তন

এখানে আপনি আপনার মার্কার স্টাইল করতে পারেন কিছু উপায় আছে.

সমস্ত তালিকা আইটেম পরিবর্তন

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

শুধুমাত্র একটি তালিকা আইটেম পরিবর্তন

li:last-child::marker {
  content: "😍";
}

একটি তালিকা আইটেম SVG তে পরিবর্তন করা হচ্ছে

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

সংখ্যাযুক্ত তালিকা পরিবর্তন করা যদিও একটি <ol> সম্পর্কে কি? একটি অর্ডারকৃত তালিকা আইটেমের চিহ্নিতকারী একটি সংখ্যা এবং ডিফল্টরূপে একটি বুলেট নয়। CSS-এ এগুলোকে কাউন্টার বলা হয়, এবং এগুলো বেশ শক্তিশালী। এমনকি সংখ্যাটি যেখানে শুরু হয় এবং শেষ হয় সেখানে সেট এবং রিসেট করার জন্য বা তাদের রোমান সংখ্যায় পরিবর্তন করার বৈশিষ্ট্য রয়েছে। আমরা যে স্টাইল করতে পারি? হ্যাঁ, এবং এমনকি আমরা আমাদের নিজস্ব সংখ্যায়ন উপস্থাপনা তৈরি করতে মার্কার বিষয়বস্তুর মান ব্যবহার করতে পারি।

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

ডিবাগিং

Chrome DevTools আপনাকে ::marker সিউডো উপাদানগুলিতে প্রয়োগ করা শৈলীগুলি পরিদর্শন, ডিবাগ এবং সংশোধন করতে সহায়তা করার জন্য প্রস্তুত৷

ভবিষ্যতের ছদ্ম-উপাদানের স্টাইলিং

আপনি থেকে ::marker সম্পর্কে আরও জানতে পারেন:

• স্ম্যাশিং ম্যাগাজিনের CSS তালিকা, মার্কার এবং কাউন্টার
• CSS-ট্রিকস থেকে CSS কাউন্টার এবং CSS গ্রিড দিয়ে গণনা করা
• MDN থেকে CSS কাউন্টার ব্যবহার করা

স্টাইল করা কঠিন ছিল এমন কিছুতে অ্যাক্সেস পাওয়া দুর্দান্ত। আপনি হয়তো চান যে আপনি অন্য স্বয়ংক্রিয়ভাবে উত্পন্ন উপাদান স্টাইল করতে পারেন। আপনি হয়ত <details> বা অনুসন্ধান ইনপুট স্বয়ংসম্পূর্ণ নির্দেশক নিয়ে হতাশ হতে পারেন, যেগুলি ব্রাউজার জুড়ে একইভাবে প্রয়োগ করা হয় না। আপনার যা প্রয়োজন তা শেয়ার করার একটি উপায় হল https://webwewant.fyi- এ একটি চাওয়া তৈরি করা।