ধারক প্রশ্ন

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

কল্পনা করুন আপনার কাছে একটি নিউজলেটার সাইন-আপ ফর্ম আছে যা আপনার সাইটে বিভিন্ন প্রসঙ্গে ব্যবহার করার জন্য। আপনি এটি একটি সাইনআপ পৃষ্ঠায় পৃষ্ঠার সম্পূর্ণ প্রস্থে বিস্তৃত করতে চাইতে পারেন, তবে অন্যান্য সামগ্রী সহ একটি পৃষ্ঠায় একটি বিভক্ত কলামে যান৷

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

একটি কন্টেইনার কোয়েরি সেট আপ করা হচ্ছে

মিডিয়া প্রশ্নের বিপরীতে, ধারক প্রশ্ন দুটি অংশে প্রতিষ্ঠিত হয়:

1. একটি ধারক সংজ্ঞায়িত করুন।
2. একটি শিশু উপাদান প্রয়োগ করার জন্য শৈলী লিখুন যখন একটি অভিভাবক কন্টেনার কোয়েরির শর্তের সাথে মেলে।

একটি ধারক সংজ্ঞায়িত

আপনি container-type সম্পত্তি ব্যবহার করে একটি ধারক সংজ্ঞায়িত করতে পারেন।

.my-container-element {
  container-type: inline-size;
}

inline-size container-type আপনাকে কন্টেইনারের ইনলাইন অক্ষকে জিজ্ঞাসা করতে দেয়।

inline এবং block অক্ষ উভয়ের বিরুদ্ধে প্রশ্ন করতে, container-type: size ব্যবহার করুন।

main,
.my-component {
  container-type: size;
}

container-type উভয় মানই বিভিন্ন ধরনের আকারের কন্টেনমেন্ট প্রয়োগ করে। একটি উপাদানের Inline-size কন্টেনমেন্ট তার বংশধরদের তার ইনলাইন-আকারকে প্রভাবিত করতে বাধা দেয়।

size কন্টেনমেন্ট সহ একটি উপাদান তার বংশধরদের ব্লক এবং ইনলাইন অক্ষ উভয় ক্ষেত্রেই এর আকারকে প্রভাবিত করতে বাধা দেয়।

এই উদাহরণে আপনি দেখতে পাচ্ছেন আকার কন্টেনমেন্ট উপাদানটিকে প্রভাবিত করতে পারে যার উপর এটি প্রয়োগ করা হয়।

যেহেতু এটির বাচ্চাদের ( <p> উপাদান) আকারের উপর ভিত্তি করে এটির মাপ করা হবে না, তাই কন্টেইনারটি ধসে পড়বে যদি না এর মাত্রা (অর্থাৎ, inline-size , block-size , aspect-ratio ) সেট করে বা এটিকে একটি স্পষ্ট আকারের লেআউটে স্থাপন করে একটি সুস্পষ্ট আকার দেওয়া না হয়।

ধারক ক্যোয়ারী শর্তাবলী

একবার একটি ধারক প্রতিষ্ঠিত হয়ে গেলে, আপনি একটি শর্ত যোগ করতে পারেন, বন্ধনীতে মোড়ানো, যা কন্টেইনার কোয়েরির ভিতরের শৈলী প্রয়োগের জন্য সত্য হতে হবে। ধারক আকারের প্রশ্নগুলির জন্য, যা পূর্বপুরুষ উপাদানগুলির মাত্রার উপর ভিত্তি করে, শর্তটি নিম্নলিখিতগুলি নিয়ে গঠিত:

• একটি আকার বৈশিষ্ট্য: width , height , inline-size , block-size , aspect-ratio , বা orientation ,
• একটি তুলনা অপারেটর (অর্থাৎ, > , < , = , >= ),
• এবং একটি দৈর্ঘ্য মান।

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

আকার বৈশিষ্ট্য শর্তাবলী পরীক্ষা করার জন্য একটি কোলন এবং একটি একক মান দিয়েও লেখা যেতে পারে।

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

আপনি and এবং or , বা অপারেটরদের সাথে একসাথে একাধিক শর্ত চেইন করার মতো কীওয়ার্ড ব্যবহার করে একাধিক শর্ত একত্রিত করতে পারেন।

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

পাত্রের নামকরণ

নির্দিষ্ট কন্টেইনারগুলিকে টার্গেট করতে, এমনকি যদি তারা নিকটতম পূর্বপুরুষ নাও হয়, আপনি container-name বৈশিষ্ট্য সহ কন্টেইনারগুলির নাম দিতে পারেন। তারপরে আপনি আপনার শর্তগুলি সংজ্ঞায়িত করার আগে আপনি যে ধারকটির নাম জিজ্ঞাসা করতে চান তা উল্লেখ করতে পারেন।

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

নামযুক্ত ধারকটি এখনও স্টাইল করা উপাদানগুলির পূর্বপুরুষ হতে হবে৷

container সম্পত্তি সহ সংক্ষিপ্ত হস্ত ব্যবহার করুন

container প্রপার্টি আপনাকে একটি ধারক সংজ্ঞায়িত করতে এবং কন্টেইনারের ধরন নির্দিষ্ট করতে উভয়ের জন্য একটি শর্টহ্যান্ড সিনট্যাক্স ব্যবহার করতে দেয়।

.sidebar {
  container: main-sidebar / inline-size;
}

স্ল্যাশের আগে কন্টেইনারের নাম আসে এবং কন্টেইনারের ধরন পরে আসে।

কন্টেইনার কোয়েরি ইউনিট

কন্টেইনারগুলির মধ্যে আপনার কাছে কনটেইনার আপেক্ষিক দৈর্ঘ্যের ইউনিটগুলিতেও অ্যাক্সেস রয়েছে। এটি বিভিন্ন পাত্রে বিদ্যমান উপাদানগুলির জন্য আরও নমনীয়তা প্রদান করে, যেহেতু আপেক্ষিক দৈর্ঘ্য কন্টেইনারের মাত্রার উপর নির্ভর করে সামঞ্জস্য করবে।

এখানে কন্টেইনার দৈর্ঘ্য ইউনিট cqi (কোয়েরি কন্টেইনারের ইনলাইন আকারের 1%) বোতামের প্যাডিংয়ের জন্য ব্যবহার করা হচ্ছে।

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

উভয় বোতামে একই আপেক্ষিক ইউনিট প্রয়োগ করা হয়েছে, কিন্তু যেহেতু ইউনিটগুলি কন্টেইনারের আকারের সাথে আপেক্ষিক, তাই দ্বিতীয় বোতামের বড় কন্টেইনারের কারণে আরও প্যাডিং রয়েছে।

নেস্টিং কন্টেইনার প্রশ্ন

আপনি নির্বাচকদের ভিতরে কন্টেইনার প্রশ্নগুলি নেস্ট করতে পারেন।

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

অথবা অন্য কন্টেইনার কোয়েরি বা এট-রুলের ভিতরে সেগুলিকে নেস্ট করুন।

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

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