কনটেইনার শৈলী প্রশ্নে আরও গভীর খনন করা

আমি কিছু লিখলাম ধারক শৈলী প্রশ্ন প্রাথমিক চিন্তা একটু আগে। এটা এখনও প্রথম দিন. তারা ইতিমধ্যে সংজ্ঞায়িত করা হয়েছে CSS কন্টেনমেন্ট মডিউল লেভেল 1 স্পেসিফিকেশন (বর্তমানে সম্পাদকের খসড়া স্থিতিতে) কিন্তু এখনও কয়েকটি অসামান্য আলোচনা চলছে৷

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

@container ?  {
  /* conditional styles */
}

আমি এখন পর্যন্ত দেখেছি সেরা উদাহরণটি এমন কিছু থেকে তির্যক অপসারণ করা , , এবং যখন সেগুলি এমন প্রেক্ষাপটে ব্যবহার করা হয় যেখানে বিষয়বস্তু ইতিমধ্যেই তির্যক করা হয়েছে:

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

এটাই সাধারণ ধারণা। কিন্তু যদি আপনি এটি না জানেন, মরিয়ম সুজান, যিনি স্পেকের একজন সম্পাদক, তিনি একটি চলমান এবং পুঙ্খানুপুঙ্খ সেট রাখেন ধারক শৈলী প্রশ্নের ব্যক্তিগত নোট যে সর্বজনীনভাবে উপলব্ধ. এটি অন্য দিন আপডেট করা হয়েছিল এবং আমি সেখানে কিছু সময় কাটিয়েছি শৈলী প্রশ্নের আরও সূক্ষ্ম দিকগুলির চারপাশে আমার মাথা মোড়ানোর চেষ্টা করে। এটা অনানুষ্ঠানিক স্টাফ, কিন্তু আমি ভেবেছিলাম আমি কিছু জিনিস লিখে দেব যা আমার কাছে আলাদা। কে জানে? হয়তো এটি এমন জিনিস যা আমরা শেষ পর্যন্ত অপেক্ষা করতে পারি!

প্রতিটি উপাদান একটি শৈলী ধারক

আমরা এমনকি স্পষ্টভাবে একটি বরাদ্দ করার প্রয়োজন নেই container-name or container-type একটি শৈলী ধারক সংজ্ঞায়িত করতে কারণ সবকিছুই ডিফল্টরূপে একটি শৈলী ধারক।

সুতরাং, আপনি উপরের যে উদাহরণ দেখতে তির্যক অপসারণ? লক্ষ্য করুন এটি একটি ধারক সনাক্ত করে না। এটি ব্যবহার করে ক্যোয়ারীতে ডানদিকে যায় style() ফাংশন সুতরাং, কোন পাত্রে জিজ্ঞাসা করা হচ্ছে? এটা হতে যাচ্ছে উপাদানের সরাসরি অভিভাবক প্রয়োগ শৈলী গ্রহণ. এবং যদি না হয়, তাহলে এটা পরবর্তী নিকটতম আপেক্ষিক ধারক যে অগ্রাধিকার লাগে।

আমি যে পছন্দ. এটি একটি মিলের জন্য অনুসন্ধান করার জন্য ক্যোয়ারীটির জন্য খুব CSS-y, তারপর এটি একটি মিল শর্ত না পাওয়া পর্যন্ত বুদবুদ করা চালিয়ে যান।

আমার ছোট মস্তিষ্কের পক্ষে বোঝা কঠিন ছিল কেন আমরা শৈলীর উপর ভিত্তি করে একটি অন্তর্নিহিত ধারক দিয়ে দূরে সরে যেতে পারি কিন্তু যখন আমরা মাত্রিক প্রশ্নগুলির সাথে কাজ করছি, যেমন size এবং inline-size. মরিয়ম সুন্দরভাবে ব্যাখ্যা করেছেন:

ডাইমেনশনাল কোয়েরির জন্য CSS প্রয়োজন সংবরণ লেআউট লুপ প্রতিরোধ করার জন্য কন্টেইনারের আকার, বিন্যাস এবং শৈলীতে। কন্টেনমেন্ট ব্যাপকভাবে প্রয়োগ করার জন্য একটি আক্রমণাত্মক জিনিস, তাই এটি গুরুত্বপূর্ণ ছিল যে কোন উপাদানগুলি (বা নয়) আকারের পাত্রে লেখকদের সতর্ক নিয়ন্ত্রণ রয়েছে৷

শৈলী-ভিত্তিক প্রশ্নগুলির একই সীমাবদ্ধতা নেই। বংশধর শৈলীর জন্য CSS-এ পূর্বপুরুষের গণনা করা শৈলীতে প্রভাব ফেলার কোনো উপায় নেই। তাই কোনো নিয়ন্ত্রণের প্রয়োজন নেই, এবং কোনো উপাদান হিসেবে প্রতিষ্ঠার ক্ষেত্রে কোনো আক্রমণাত্মক বা অপ্রত্যাশিত পার্শ্বপ্রতিক্রিয়া নেই শৈলী ক্যোয়ারী ধারক.

(জোর আমার)

এটি সবই পরিণতির দিকে নেমে আসে — যার মধ্যে সবকিছুই বাক্সের বাইরে একটি স্টাইল কোয়েরি কন্টেইনার হওয়ার মতো কিছুই নেই।

• যদি একটি ধারক পাওয়া যায়: শর্তগুলি সেই পাত্রের বিরুদ্ধে সমাধান করা হয়।
• যদি একাধিক পাত্র মেলে: নিকটতম আপেক্ষিক ধারক অগ্রাধিকার নেয়।
• যদি কোন মিল পাওয়া না যায়: unknown ফিরে আসেন।

সেটাও তাই CSS এর বাকি অংশ হিসাবে "ক্ষমাকারী" আত্মা.

একটি ধারক উভয় মাত্রিক এবং শৈলী প্রশ্ন সমর্থন করতে পারে

ধরা যাক আমরা একটি সুস্পষ্ট ছাড়া একটি শৈলী ক্যোয়ারী সংজ্ঞায়িত করতে চাই container-name:

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

এই কাজ করে কারণ সমস্ত উপাদান শৈলী পাত্রে হয়কোন ব্যাপার না container-type. এটিই আমাদের অন্তর্নিহিতভাবে শৈলী অনুসন্ধান করতে এবং নিকটতম ম্যাচের উপর নির্ভর করতে দেয়। এবং এটি সম্পূর্ণরূপে সূক্ষ্ম যেহেতু, আবার, শৈলী পাত্র স্থাপন করার সময় কোন প্রতিকূল পার্শ্ব প্রতিক্রিয়া নেই।

আমরা একটি সুস্পষ্ট ব্যবহার করতে হবে container-type মাত্রিক প্রশ্নের জন্য, কিন্তু শৈলী প্রশ্নের জন্য এত বেশি নয় যেহেতু প্রতিটি উপাদান একটি শৈলী প্রশ্ন। এর মানে এই ধারকটি উভয়ই একটি শৈলী এবং মাত্রিক প্রশ্ন:

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

জিজ্ঞাসা করা থেকে একটি ধারক বাদ

সম্ভবত আমরা একটি ধারক ম্যাচিং প্রক্রিয়ায় অংশগ্রহণ করতে চাই না। যে যেখানে এটি সেট করা সম্ভব হতে পারে container-type: none একটি উপাদানের উপর।

.some-element {
  container-type: none;
}

সুস্পষ্ট শৈলী ক্যোয়ারী কন্টেইনারগুলি যা জিজ্ঞাসা করা হয় তার উপর আরো নিয়ন্ত্রণ প্রদান করে

যদি, বলুন, আমরা একটি স্টাইল কোয়েরি লিখতে চাই padding , আমরা একটি সুস্পষ্টভাবে নামযুক্ত ধারক বা নিকটতম সরাসরি অভিভাবকের সাথে কাজ করছি কিনা তা নির্বিশেষে, সর্বোত্তম ম্যাচিং কন্টেইনার নির্ধারণ করার কোন নির্ভরযোগ্য উপায় নেই৷ এটার কারন padding উত্তরাধিকারসূত্রে প্রাপ্ত সম্পত্তি নয়।

সুতরাং, সেই ক্ষেত্রে, আমাদের ব্যবহার করা উচিত container-name ব্রাউজারকে স্পষ্টভাবে জানাতে যে তারা কোন পাত্র থেকে টানতে পারে। এমনকি আমরা একটি ধারককে একাধিক স্পষ্ট নাম দিতে পারি যাতে এটি আরও শর্তের সাথে মেলে:

.card {
  container-name: card layout theme;
}

উহু! অতঃপর container-name যেকোন সংখ্যক ঐচ্ছিক এবং গ্রহণ করে পুনর্ব্যবহারযোগ্য একটি ধারক জন্য নাম! এটি আরও বেশি নমনীয়তা যখন এটি ব্রাউজারকে ম্যাচগুলি অনুসন্ধান করার সময় একটি পছন্দ করতে সহায়তা করার ক্ষেত্রে আসে৷

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

আমি আশ্চর্যের বিষয় যে একটি ধারকটি অতিক্রম করার ক্ষেত্রে এটিকে "ফলব্যাক" হিসাবেও বিবেচনা করা যেতে পারে।

শৈলী প্রশ্ন একত্রিত করা যেতে পারে

সার্জারির or এবং and অপারেটররা আমাদের জিনিসগুলিকে শুকনো রাখতে wueries একত্রিত করার অনুমতি দেয়:

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

টগলিং শৈলী

ধারক শৈলী প্রশ্ন এবং মধ্যে একটি সামান্য ওভারল্যাপ আছে একটি সংজ্ঞায়িত করার জন্য কাজ করা হচ্ছে toggle() ক্রিয়া. উদাহরণস্বরূপ, আমরা দুটি মাধ্যমে চক্র করতে পারি font-style মান, বলুন italic এবং normal:

em, i, q {
  font-style: italic;
}

@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

কুল। কিন্তু সিএসএস টগলের প্রস্তাবটি প্রস্তাব করে যে toggle() ফাংশন একটি সহজ পদ্ধতি হবে:

em, i, q {
  font-style: toggle(italic, normal);
}

কিন্তু বাইনারি ব্যবহার ক্ষেত্রে এই সাজানোর বাইরে কিছু যেখানে toggle() কম উপযুক্ত। শৈলী প্রশ্ন, যদিও, যেতে ভাল. মিরিয়াম তিনটি দৃষ্টান্ত চিহ্নিত করে যেখানে শৈলী প্রশ্নগুলি a এর চেয়ে বেশি উপযুক্ত toggle():

/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) {
  em, i, q {
    background: lightpink;
  }
}

/* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

/* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) {
  em, i, q {
    /* clipped gradient text */
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    text-shadow: none;
  }
}

স্টাইল প্রশ্নগুলি "কাস্টম প্রপার্টি টগল হ্যাক" সমাধান করে

লক্ষ্য করুন যে শৈলী প্রশ্নগুলি এর জন্য একটি আনুষ্ঠানিক সমাধান "CSS কাস্টম প্রপার্টি টগল ট্রিক". সেখানে, আমরা একটি খালি কাস্টম সম্পত্তি সেট করি (--foo: ;) এবং যখন কাস্টম প্রপার্টি একটি বাস্তব মান সেট করা হয় তখন বৈশিষ্ট্যগুলিকে "টগল" করতে কমা-বিচ্ছিন্ন ফলব্যাক পদ্ধতি ব্যবহার করুন।

button {
  --is-raised: ; /* off by default */
  
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

#foo {
  --is-raised: initial; /* turned on, all fallbacks take effect. */
}

এটা সুপার কুল, এছাড়াও অনেক কাজ যে শৈলী ধারক প্রশ্ন তুচ্ছ করে তোলে.

স্টাইল কোয়েরি এবং সিএসএস তৈরি করা সামগ্রী

দ্বারা উত্পাদিত বিষয়বস্তুর জন্য content সম্পত্তি ::before এবং ::after ছদ্ম-উপাদান, ম্যাচিং কন্টেইনার হল সেই উপাদান যার উপর বিষয়বস্তু তৈরি হয়।

.bubble {
  --arrow-position: end end;
  container: bubble;
  border: medium solid green;
  position: relative;
}

.bubble::after {
  content: "";
  border: 1em solid transparent;
  position: absolute;
}

@container bubble style(--arrow-position: end end) {
  .bubble::after {
    border-block-start-color: inherit;
    inset-block-start: 100%;
    inset-inline-end: 1em;
  }
}

শৈলী প্রশ্ন এবং ওয়েব উপাদান

আমরা একটি ওয়েব কম্পোনেন্টকে একটি ধারক হিসাবে সংজ্ঞায়িত করতে পারি এবং এটিকে শৈলী দ্বারা জিজ্ঞাসা করতে পারি। প্রথমত, আমরা আছে উপাদানের:

  

    

      …
    
    

      …
      …
    
  

তারপর আমরা ব্যবহার :host ছদ্ম-উপাদান একটি ধারক হিসাবে সেট a container-name, একটি container-type, এবং এটিতে কিছু উচ্চ-স্তরের বৈশিষ্ট্য:

:host {
  container: media-host / inline-size;
  --media-location: before;
  --media-style: square;
  --theme: light;
}

ভিতরে উপাদান এর পরামিতি জিজ্ঞাসা করতে পারেন উপাদান:

@container media-host style(--media-style: round) {
  [part='img'] {
    border-radius: 100%;
  }
}

এরপর কি?

আবার, আমি এখানে যে সমস্ত জিনিস লিখেছি তা মিরিয়ামের নোটের উপর ভিত্তি করে, এবং সেই নোটগুলি অফিসিয়াল স্পেকের বিকল্প নয়। তবে তারা কী আলোচনা করা হচ্ছে এবং ভবিষ্যতে জিনিসগুলি কোথায় অবতরণ করতে পারে তার একটি ইঙ্গিত। আমি মরিয়মকে প্রশংসা করি যে মুষ্টিমেয় কিছু অসামান্য আলোচনা এখনও চলছে যা আমরা বিষয়গুলির শীর্ষে থাকার জন্য অনুসরণ করতে পারি: