স্টাইল করার জন্য আরও বিকল্প <বিস্তারিত>

ব্রামাস

প্রকাশিত: নভেম্বর 6, 2024

Chrome 131 থেকে <details> এবং <summary> উপাদানগুলির গঠন শৈলী করার জন্য আপনার কাছে আরও বিকল্প রয়েছে। ডিসক্লোজার বা অ্যাকর্ডিয়ন উইজেট তৈরি করার সময় আপনি এখন এই উপাদানগুলি ব্যবহার করতে পারেন।

বিশেষ করে, Chrome 131-এ প্রবর্তিত পরিবর্তনগুলি এই উপাদানগুলিতে display বৈশিষ্ট্য ব্যবহার করতে সক্ষম করে এবং একটি ::details-content ছদ্ম-উপাদান যোগ করে যে অংশটি প্রসারিত হয় এবং ভেঙে যায়।

ব্রাউজার সমর্থন

  • ক্রোম: 131।
  • প্রান্ত: সমর্থিত নয়।
  • ফায়ারফক্স: সমর্থিত নয়।
  • সাফারি: সমর্থিত নয়।

<details> উপাদানে display সেট করা হচ্ছে

ঐতিহাসিকভাবে <details> উপাদানটির প্রদর্শনের ধরন পরিবর্তন করা সম্ভব ছিল না। এই বিধিনিষেধটি এখন শিথিল করা হয়েছে, আপনি উদাহরণস্বরূপ, <details> উপাদানে গ্রিড বা ফ্লেক্স লেআউট ব্যবহার করতে পারবেন।

নিম্নলিখিত উদাহরণে একচেটিয়া অ্যাকর্ডিয়নে পাশাপাশি রাখা একাধিক <details> উপাদান রয়েছে। <details> উপাদানগুলির একটিকে প্রসারিত করার সময়, এর বিষয়বস্তু <summary> এর পাশে রাখা হয়।

ডেমো

রেকর্ডিং

Chrome 131 এ https://codepen.io/web-dot-dev/pen/VwoBQjY এর রেকর্ডিং

নিম্নলিখিত CSS ব্যবহার করে <details> উপাদানে একটি ফ্লেক্স লেআউট ব্যবহার করে এটি অর্জন করা হয়:

details {
  display: flex;
  flex-direction: row;
}

এছাড়াও অন্যান্য প্রদর্শন মান যেমন grid অনুমোদিত।

display: inline

একটি display মান যা একটি অপ্রত্যাশিত ফলাফল হতে পারে তা হল inline । কারণ এটি কাজ করে না কিন্তু HTML পার্সার সীমাবদ্ধতার কারণে।

একটি অনুচ্ছেদের ভিতরে একটি <details> উপাদান স্থাপন করার সময় এটি HTML পার্সারকে প্রথমে খোলা অনুচ্ছেদটি বন্ধ করতে বাধ্য করে, যেমনটি HTML স্ট্যান্ডার্ডের 13.2.6.4.7 বিভাগে সংজ্ঞায়িত করা হয়েছে:

একটি স্টার্ট ট্যাগ যার ট্যাগের নাম হল: "ঠিকানা", "নিবন্ধ", "একপাশে", "ব্লককোট", "সেন্টার", "বিস্তারিত", "ডায়ালগ", "ডির", "ডিভি", "ডিএল", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "main", "menu", "nav", "ol", "p", "search", "section" ", "সারাংশ", "উল"

যদি খোলা উপাদানের স্ট্যাকের বোতামের সুযোগে ap উপাদান থাকে, তাহলে ap উপাদান বন্ধ করুন। টোকেনের জন্য একটি HTML উপাদান সন্নিবেশ করুন।

ফলস্বরূপ, <details> ব্লকের দিকে প্রবাহিত হয়, আপনি display: inline ।

উদাহরণস্বরূপ, নিম্নলিখিত মার্কআপ

<p>Hello <details>…</details> world</p>

পার্স করার পরে এটি হয়ে যায়:

<p>Hello </p><details>…</details> world<p></p>

আপনি Chrome DevTools ব্যবহার করে পার্স করা মার্কআপ পরিদর্শন করে এই ডেমোতে নিজের জন্য দেখতে পারেন।

মনে রাখবেন যে এটি শুধুমাত্র <p> এর ভিতরে <details> নেস্ট করার ক্ষেত্রে প্রযোজ্য। display: inline একটি <div> এর ভিতরে একটি <details> ইনলাইন ভাল কাজ করে।

::details-content ছদ্ম

ব্রাউজারে, <details> উপাদানটি Shadow DOM ব্যবহার করে প্রয়োগ করা হয়। এতে সারাংশের জন্য একটি <slot> রয়েছে (একটি ডিফল্ট সারাংশ চাইল্ড সহ) এবং একটি <slot> বাকি সমস্ত সামগ্রীর জন্য, মানে <summary> উপাদান ছাড়া <details> উপাদানের সমস্ত শিশু।

<details>
  ↳ #shadow-root (user-agent)
      <slot id="details-summary">
        <summary>Details</summary>
        <!-- The summary goes here -->
      </slot>
      <slot id="details-content">
        <!-- All content goes here -->
      </slot>
</details>

<details> -এ আরও প্রদর্শনের ধরন ব্যবহার করার পাশাপাশি, বিষয়বস্তু স্লটকে এখন ::details-content ছদ্ম-উপাদান ব্যবহার করে লক্ষ্যবস্তু করা যেতে পারে। আপনি <details> উপাদানের বিষয়বস্তু মোড়ানো কন্টেইনারটিকে স্টাইল করতে এই ছদ্ম ব্যবহার করতে পারেন।

details::details-content {
  border: 5px dashed hotpink;
}

<details> উপাদানটি খোলা অবস্থায় থাকলে শুধুমাত্র সেট শৈলী প্রয়োগ করতে, এটিতে [open] নির্বাচককে পূর্বে যুক্ত করুন।

[open]::details-content {
  border: 5px dashed hotpink;
}

<details> উপাদানটি [open] অবস্থায় থাকলে শুধুমাত্র ::details-content ছদ্ম-এ স্টাইলিং প্রয়োগ করার পরামর্শ দেওয়া হয়।

ডেমো

রেকর্ডিং

Chrome 131-এ https://codepen.io/web-dot-dev/pen/oNKMEYv- এর রেকর্ডিং

display ধরন ::details-content UA স্টাইল শীটে block জন্য সেট করা হয়েছে, যেখানে আগে এটি display: contents । এই পরিবর্তনটি কিছু ক্ষেত্রে আপনার বিরুদ্ধে কাজ করতে পারে, যেমন প্রকাশ করা বিষয়বস্তু height: 100% । যদি এটি আপনার জন্য একটি সমস্যা হয়, তাহলে আপনি contents display ধরণটি সেট করে এটিকে ঘিরে কাজ করতে পারেন, যেমন: details[open]::details-content { display: contents; }

::details-content ছদ্ম অ্যানিমেটিং

আপনি <details> উপাদানটির বিষয়বস্তু প্রসারিত হওয়ার সাথে সাথে অ্যানিমেট করতে পারেন। নিম্নলিখিত উদাহরণে, প্রস্থ 0px থেকে 300px পর্যন্ত অ্যানিমেট হয়।

::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: 300px;
}

width স্থানান্তরিত করার পাশাপাশি, content-visibility বৈশিষ্ট্যও স্থানান্তর করা প্রয়োজন। এটি কারণ ব্যবহারকারী-এজেন্ট শৈলী শীটে সংজ্ঞায়িত হিসাবে অপ্রকাশিত এবং খোলা অবস্থায় এর মান পরিবর্তন হয়। কারণ সেই সম্পত্তিটি একটি বিচ্ছিন্নভাবে অ্যানিমেটেবল সম্পত্তি, এটিকে কাজ করার জন্য আপনার allow-discrete কীওয়ার্ড প্রয়োজন।

আগে ভাগ করা একচেটিয়া অ্যাকর্ডিয়ন ডেমোতে যোগ করা হয়েছে, ফলাফলটি হল:

ডেমো

রেকর্ডিং

Chrome 131-এ https://codepen.io/web-dot-dev/pen/XWvBZNo- এর রেকর্ডিং

height অ্যানিমেটেড হতে পারে। height: auto , আপনাকে interpolate-size বা calc-size() ব্যবহার করতে হবে। অতিরিক্তভাবে, ::details-content ছদ্ম থেকে কন্টেন্টের রক্তপাত রোধ করতে, এতে overflow: clip প্রয়োগ করুন।

::details-content {
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
    [open]::details-content {
        height: 150px;
        overflow-y: scroll; /* In case the contents should be taller than 150px */
    }
}

আপনি ম্যাটেরিয়াল UI-এর অ্যাকর্ডিয়ন দ্বারা অনুপ্রাণিত নিম্নলিখিত ডেমোতে কার্যকারী কোডটি দেখতে পারেন। প্রতিটি <details> উপাদানের বিষয়বস্তু সুন্দরভাবে অ্যানিমেট করে।

ডেমো

রেকর্ডিং

Chrome 131 এ https://codepen.io/web-dot-dev/pen/ExqpQZM এর রেকর্ডিং

যেসব ব্রাউজারে ::details-content জন্য কোনো সমর্থন নেই, সেখানে কম্পোনেন্টটি এখনও ঠিকঠাক কাজ করে। দর্শকরা দেখতে পায় না শুধুমাত্র জিনিস অ্যানিমেশন.

বৈশিষ্ট্য সনাক্তকরণ

CSS-এ ::details-content ছদ্ম-এর জন্য সমর্থন শনাক্ত করতে, নিম্নলিখিত স্নিপেটটি ব্যবহার করুন।

@supports selector(::details-content) {
  …
}

আপনার দর্শক যে ব্রাউজারটি ব্যবহার করছেন সেটি অতিরিক্ত ডিসপ্লে মান সমর্থন করে কিনা তা নির্ধারণ করতে আপনি এই সনাক্তকরণটি একটি টেলটেল চেক হিসাবে ব্যবহার করতে পারেন।

অ্যাক্সেসযোগ্যতা বিবেচনা

::details-content ছদ্ম-উপাদান এবং প্রদর্শনের ধরন পরিবর্তন করার ক্ষমতা <details> উপাদানের অ্যাক্সেসযোগ্যতার উপর প্রভাব ফেলে না।

আগের মতই, অন্তত ক্রোমিয়াম ভিত্তিক ব্রাউজারে এবং এইচটিএমএল স্ট্যান্ডার্ড অনুসারে , <details> উপাদানটি অনুসন্ধানযোগ্য এবং স্বয়ংক্রিয়ভাবে প্রসারিত হয় যখন ব্রাউজারটি ফাইন্ড-ইন-পেজ, ScrollToTextFragment এবং এলিমেন্ট ফ্র্যাগমেন্ট নেভিগেশনের প্রতিক্রিয়া হিসাবে তার লুকানো বিষয়বস্তুগুলিতে স্ক্রোল করার চেষ্টা করে। . এই পরিবর্তন হয় না.

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

মার্কার স্টাইলিং সম্পর্কে কি?

বর্তমানে তালিকা চিহ্নিতকারীর স্টাইলিং আন্তঃপ্রক্রিয়াযোগ্য নয় কারণ দুটি ভিন্ন পদ্ধতি রয়েছে, একটি Gecko এবং (বর্তমান) Chromium দ্বারা নেওয়া হয়েছে এবং অন্যটি WebKit দ্বারা নেওয়া হয়েছে (যা আগে Chromium-এর সাথে ভাগ করা হয়েছিল)৷

বৈশিষ্ট্যটি একবার ইন্টারঅপারেবল হয়ে গেলে, আমাদের লক্ষ্য হল মার্কারটি কীভাবে স্টাইল করা যায় তার উপর আপনাকে আরও ভাল নিয়ন্ত্রণ দেওয়া।

আরো ডেমো

বন্ধ করার জন্য, এখানে আপনার চেক আউট করার জন্য আরও কিছু ডেমো রয়েছে৷ তারা সবাই ::details-content ব্যবহার করে।

ইউআইকিট অ্যাকর্ডিয়ন

ডেমো

রেকর্ডিং

Chrome 131 এ https://codepen.io/web-dot-dev/pen/rNXrJyQ এর রেকর্ডিং

এই ডেমোটি UIKit অ্যাকর্ডিয়নের পরে নির্মিত হয়েছে। কোডটি কার্যত মেটেরিয়াল UI অ্যাকর্ডিয়নের মতোই যা আগে ভাগ করা হয়েছিল৷

আংশিকভাবে খোলা প্রকাশ উইজেট

ডেমো

রেকর্ডিং

Chrome 131 এ https://codepen.io/web-dot-dev/pen/PoMBQmW এর রেকর্ডিং

এই ডেমোতে একটি আংশিকভাবে খোলা ডিসক্লোজার উইজেট রয়েছে যার সামগ্রী ইতিমধ্যেই স্ক্রিনে দৃশ্যমান। এটি অর্জন করতে, content-visibility সর্বদা visible হিসাবে সেট করা হয়। height calc-size() ব্যবহার করে অ্যানিমেটেড হয় কারণ সেখানে একটি গণনা জড়িত। 

::details-content {
  content-visibility: visible; /* Make it always visible */
    
  transition: height 0.5s ease;
  height: 150px;
  overflow: clip;
}

[open]::details-content {
  height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
}

স্টাইলিং সুবিধার জন্য বিষয়বস্তু একটি wrapper div মধ্যে আবৃত করা হয়. র‍্যাপার ডিভ লেআউট শৈলী পায় যেমন padding প্রয়োগ করা হয় এবং ::details-content সিউডো অ্যানিমেটেড হয়।