কন্টেইনার স্টাইল প্রশ্নের প্রথম দিন

আমরা এখনও কন্টেইনার কোয়েরি নিয়ে প্রথম দিনগুলিতে আছি। বিস্তৃত ব্রাউজার সমর্থনের জন্য খুব তাড়াতাড়ি, কিন্তু Chromium ইতিমধ্যে এটি সমর্থন করে, Safari৷ 16 সংস্করণে এটি সমর্থন করা শুরু করেছে, এবং ফায়ারফক্স সম্ভবত পিছিয়ে নেই.

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

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

এই উভয়ের জন্য প্রশ্ন করা হয় min-width: 600. পার্থক্য হল মিডিয়া ক্যোয়ারী সেই শৈলী পরিবর্তনগুলিকে ট্রিগার করতে ভিউপোর্টের প্রস্থের দিকে তাকাচ্ছে যখন কন্টেইনার ক্যোয়ারীটি কম্পিউটেড প্রস্থের দিকে তাকাচ্ছে .posts উপাদান মিষ্টি!

কিন্তু শোনার পর CSS পডকাস্ট পর্ব 59, উনা এবং অ্যাডাম কন্টেইনার প্রশ্নের ভবিষ্যত নিয়ে খোঁচা দিলেন: শৈলী প্রশ্ন! CSS কন্টেনমেন্ট মডিউল লেভেল 3 স্পেকের বর্তমান কাজের খসড়া ধারক শৈলী প্রশ্ন সংজ্ঞায়িত করে:

A ধারক শৈলী প্রশ্ন প্রশ্ন করার অনুমতি দেয় গণনা করা মান এর ক্যোয়ারী ধারক. এটি ব্যক্তির একটি বুলিয়ান সমন্বয় শৈলী বৈশিষ্ট্য () যে প্রতিটি ক্যোয়ারী ক্যোয়ারী কন্টেইনারের একটি একক, নির্দিষ্ট বৈশিষ্ট্য।

কিন্তু সিনট্যাক্সের কোন উদাহরণ এখনও নেই - শুধুমাত্র একটি সংক্ষিপ্ত বিবরণ:

a এর বাক্য গঠন  একটি জন্য হিসাবে একই ঘোষণা, এবং এর ক্যোয়ারী সত্য হয় যদি ক্যোয়ারী কন্টেইনারে প্রদত্ত সম্পত্তির গণনা করা মান প্রদত্ত মানের সাথে মেলে (যা ক্যোয়ারী কন্টেইনারের ক্ষেত্রেও গণনা করা হয়), সম্পত্তি বা এর মানটি অবৈধ বা অসমর্থিত হলে অজানা, এবং অন্যথায় মিথ্যা . বুলিয়ান সিনট্যাক্স এবং যুক্তির সমন্বয় শৈলী বৈশিষ্ট্য একটি মধ্যে শৈলী প্রশ্ন হিসাবে হিসাবে একই CSS বৈশিষ্ট্য প্রশ্ন। (দেখুন @সমর্থন করে.)

সুতরাং, হ্যাঁ, প্রদত্ত সময় আমাদের এইরকম কিছু টানতে আশা করা উচিত:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

যে একটি চমত্কার বোবা উদাহরণ. একটি বিষয় লক্ষণীয় যে container-type ধারক এর উপর ভিত্তি করে আর inline-size কিন্তু দ্বারা style. আমরা এটিকে এভাবে উপেক্ষা করতে পারি:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

… কিন্তু সব কন্টেইনার প্রশ্ন হয় style ডিফল্টরূপে প্রশ্ন. আমরা হব. অন্তত আজ যেমন দাঁড়িয়ে আছে। মরিয়ম সুজান একটি সুন্দর আছে পপ আপ হতে পারে যে সম্ভাব্য সমস্যার রূপরেখা সেই সাথে

কোথায় একটি ধারক এর শৈলী অনুসন্ধান কাজে আসতে পারে? আমি এখনো জানি না! কিন্তু আমার মন কয়েক জায়গায় যায়:

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

উনা সিএসএস পডকাস্টে আরও উল্লেখ করেছে যে কন্টেইনার শৈলীর প্রশ্নগুলি কিছু বিশ্রী স্টাইলিং পরিস্থিতি প্রতিরোধ করতে সাহায্য করতে পারে, যেমন আমাদের যদি ইতিমধ্যেই তির্যক করা টেক্সট তির্যক করা হয় blockquote:

blockquote {
  container-name: quote;
}

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