CSS কন্টেইনার কোয়েরিগুলি এখনও ট্র্যাকশন অর্জন করছে এবং আমাদের মধ্যে অনেকেই সেগুলি দিয়ে আমাদের হাত ভিজিয়ে রাখছে, এমনকি তা সামান্য পরীক্ষা-নিরীক্ষার জন্য বা কিছু না হলেও। তারা দুর্দান্ত পেয়েছে, তবে পুরোপুরি পূর্ণ নয়, ব্রাউজার সমর্থন — কিছু প্রকল্পে সেগুলিকে ন্যায্যতা দেওয়ার জন্য যথেষ্ট, কিন্তু সম্ভবত সেই পরিমাণে নয় যেখানে আমরা প্রতিস্থাপন শুরু করতে প্রলুব্ধ হতে পারি মিডিয়া প্রশ্নের চকচকে নতুন কন্টেইনার আকারের প্রশ্ন সহ অতীতের প্রকল্পগুলি থেকে।
তারা নিশ্চিত যদিও সহজ! প্রকৃতপক্ষে, আমি ইতিমধ্যে কয়েকটি পরিস্থিতিতে চলেছি যেখানে আমি সত্যিই তাদের কাছে পৌঁছাতে চেয়েছিলাম কিন্তু সমর্থনের প্রয়োজনীয়তাগুলি অতিক্রম করতে পারিনি। আমি যদি সেগুলি ব্যবহার করতে সক্ষম হতাম, তবে এই পরিস্থিতিতে এটি দেখতে হত।
এই লেখার সময় নিচের সমস্ত ডেমো ক্রোম বা সাফারিতে সবচেয়ে ভালো দেখা হবে। ফায়ারফক্স পরিকল্পনা করছে জাহাজ সমর্থন 109 সংস্করণে।
কেস 1: কার্ড গ্রিড
আপনি ধরনের এই এক আশা ছিল, তাই না? এটি এমন একটি সাধারণ প্যাটার্ন যে আমরা সকলেই কোনও না কোনও সময়ে এটির সাথে জড়িত বলে মনে করি। কিন্তু আসল বিষয়টি হল যে কন্টেইনার আকারের প্রশ্নগুলি আমার জন্য একটি বড় সময়-সংরক্ষণকারী হয়ে উঠত, যদি আমি সেগুলিকে স্ট্যান্ডার্ড মিডিয়া প্রশ্নের উপর ব্যবহার করতে সক্ষম হতাম।
ধরা যাক প্রতিটি কার্ডের অনুপাত 1:1 রাখার প্রয়োজনে আপনাকে এই কার্ড গ্রিড তৈরি করার দায়িত্ব দেওয়া হয়েছে:
এটা দেখতে চেয়েও কঠিন! সমস্যাটি হল যে ভিউপোর্টের প্রস্থে একটি উপাদানের বিষয়বস্তুর আকার নির্ধারণ করা আপনাকে কম্পোনেন্টটি ভিউপোর্টে কীভাবে সাড়া দেয় - সেইসাথে অন্য কোনো পূর্বপুরুষ কন্টেনারগুলি কীভাবে এটিকে প্রতিক্রিয়া জানায় তার করুণার উপর ছেড়ে দেয়। উদাহরণস্বরূপ, আপনি যদি কার্ডের শিরোনামের ফন্টের আকার কমাতে চান যখন কার্ডটি একটি নির্দিষ্ট ইনলাইন আকারে আঘাত করে তখন এটি করার কোন নির্ভরযোগ্য উপায় নেই।
আপনি ফন্টের আকার সেট করতে পারেন vw ইউনিট, আমি মনে করি, কিন্তু উপাদানটি এখনও ব্রাউজারের ভিউপোর্ট প্রস্থের সাথে আবদ্ধ। এবং এটি সমস্যা সৃষ্টি করতে পারে যখন কার্ড গ্রিড অন্য প্রেক্ষাপটে ব্যবহার করা হয় যেখানে একই ব্রেকপয়েন্ট নাও থাকতে পারে।
আমার বাস্তব-বিশ্বের প্রকল্পে, আমি একটি জাভাস্ক্রিপ্ট পদ্ধতিতে অবতরণ করেছি যা হবে:
- একটি রিসাইজ ইভেন্টের জন্য শুনুন।
- প্রতিটি কার্ডের প্রস্থ গণনা করুন।
- প্রতিটি কার্ডের প্রস্থের উপর ভিত্তি করে একটি ইনলাইন ফন্ট সাইজ যোগ করুন।
- স্টাইল ভিতরে সবকিছু ব্যবহার করে
emইউনিট।
অনেক কাজের মত মনে হচ্ছে, তাই না? কিন্তু বিভিন্ন প্রেক্ষাপটে বিভিন্ন স্ক্রীন মাপ জুড়ে প্রয়োজনীয় স্কেলিং পেতে এটি একটি স্থিতিশীল সমাধান।
কন্টেইনার প্রশ্নগুলি আরও ভাল হত কারণ তারা আমাদের সরবরাহ করে কন্টেইনার কোয়েরি ইউনিট, যেমন cqw ইউনিট আপনি সম্ভবত ইতিমধ্যে এটি পেয়েছেন, কিন্তু 1cqw সমান 1% একটি ধারক এর প্রস্থ. আমরা এছাড়াও আছে cqi একক যা একটি পাত্রের ইনলাইন প্রস্থের পরিমাপ, এবং cqb একটি ধারক এর ব্লক প্রস্থ জন্য. সুতরাং, যদি আমরা একটি কার্ড ধারক আছে যে 500px চওড়া, ক 50cqw মান গণনা করে 250px.
যদি আমি আমার কার্ড গ্রিডে কন্টেইনার প্রশ্নগুলি ব্যবহার করতে সক্ষম হতাম, আমি সেট আপ করতে পারতাম .card একটি ধারক হিসাবে উপাদান:
.card {
container: card / size;
}তারপর আমি সঙ্গে একটি ভিতরের মোড়ক সেট করতে পারে padding যে স্কেল এ 10% এর .cardএর প্রস্থ ব্যবহার করে cqw ইউনিট:
.card__inner {
padding: 10cqw;
} কার্ডের প্রান্ত এবং এর বিষয়বস্তুগুলির মধ্যে ব্যবধান মাপানোর এটি একটি চমৎকার উপায়, যে কোনও প্রদত্ত ভিউপোর্ট প্রস্থে কার্ডটি যেখানেই ব্যবহার করা হোক না কেন। কোন মিডিয়া প্রশ্ন প্রয়োজন!
আরেকটি ধারণা? ব্যবহার করুন cqw অভ্যন্তরীণ বিষয়বস্তুর ফন্ট আকারের জন্য ইউনিট, তারপর প্যাডিং প্রয়োগ করুন em ইউনিট:
.card__inner {
font-size: 5cqw;
padding: 2em;
} 5cqw একটি নির্বিচারে মান - শুধুমাত্র একটি যে আমি স্থির করেছি. যে প্যাডিং এখনও সমান 10cqw যেহেতু em ইউনিট আপেক্ষিক .card__inner অক্ষরের আকার!
আপনি যে ধরা? দ্য 2em আপেক্ষিক হয় 5cqw ফন্ট সাইজ সেট করা হয় একই পাত্রে. পাত্রে আমরা যা ব্যবহার করছি তার চেয়ে ভিন্ন কাজ, হিসাবে em একক একই উপাদান এর আপেক্ষিক font-size value. কিন্তু আমি কি দ্রুত লক্ষ্য করেছি যে কন্টেইনার ক্যোয়ারী ইউনিট সম্পর্কিত নিকটতম অভিভাবক যেটিও একটি ধারক.
উদাহরণ স্বরূপ, 5cqw উপর ভিত্তি করে স্কেল না .card এই উদাহরণে উপাদানের প্রস্থ:
.card {
container: card / size;
container-name: card;
font-size: 5cqw;
}বরং, এটি একটি ধারক হিসাবে সংজ্ঞায়িত নিকটতম পিতামাতার যা কিছুতে স্কেল করে। এজন্য আমি একটি সেট আপ করেছি .card__inner মোড়কের।
কেস 2: বিকল্প বিন্যাস
একটি ভিন্ন প্রকল্পে আমার আরও একটি কার্ড উপাদান প্রয়োজন। এইবার, ল্যান্ডস্কেপ লেআউট থেকে পোর্ট্রেট লেআউটে রূপান্তর করার জন্য আমার কার্ডের প্রয়োজন ছিল... তারপরে ল্যান্ডস্কেপে ফিরে যান, এবং স্ক্রীন ছোট হওয়ার সাথে সাথে আবার পোর্ট্রেটে ফিরে যান।
আমি এই উপাদানটিকে সেই দুটি নির্দিষ্ট ভিউপোর্ট রেঞ্জে প্রতিকৃতিতে যাওয়ার নোংরা কাজ করেছি (চিৎকার করে নতুন মিডিয়া ক্যোয়ারী পরিসীমা সিনট্যাক্স!), কিন্তু আবার, সমস্যা হল যে এটি তারপরে সেট করা মিডিয়া ক্যোয়ারী, এর প্যারেন্ট এবং ভিউপোর্টের প্রস্থে সাড়া দিতে পারে এমন অন্য কিছুতে লক করা হয়। আমরা এমন কিছু চাই যা যেকোন অবস্থায় কাজ করে তা ভাবার চিন্তা না করে কন্টেন্ট কোথায় ভেঙ্গে যাচ্ছে!
ধারক প্রশ্ন এই একটি হাওয়া করা হবে, ধন্যবাদ @container নিয়ম:
.info-card {
container-type: inline-size;
container-name: info-card;
}
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}একটি প্রশ্ন, অসীম তরলতা:
কিন্তু ধর! এমন কিছু আছে যা আপনি দেখতে চাইতে পারেন। বিশেষত, একটি প্রপ-ভিত্তিক ডিজাইন সিস্টেমের মধ্যে এই ধরনের একটি ধারক ক্যোয়ারী ব্যবহার করা কঠিন হতে পারে। উদাহরণস্বরূপ, এই .info-card উপাদানটিতে শিশু উপাদান থাকতে পারে যা তাদের চেহারা পরিবর্তন করতে প্রপসের উপর নির্ভর করে।
কেন যে একটি বড় চুক্তি? কার্ডের পোর্ট্রেট লেআউটের জন্য বিকল্প স্টাইলিং প্রয়োজন হতে পারে কিন্তু আপনি CSS দিয়ে JavaScript প্রপস পরিবর্তন করতে পারবেন না। যেমন, আপনি প্রয়োজনীয় শৈলীর নকল করার ঝুঁকি নিয়ে থাকেন। আমি আসলে এই স্পর্শ এবং অন্য নিবন্ধে এটির চারপাশে কীভাবে কাজ করবেন. আপনি যদি আপনার স্টাইলিং এর একটি উল্লেখযোগ্য পরিমাণের জন্য কন্টেইনার কোয়েরি ব্যবহার করতে চান, তাহলে মিডিয়া ক্যোয়ারীগুলির জন্য ভারী একটি বিদ্যমান ডিজাইন সিস্টেমে জুতা বাঁধার চেষ্টা করার পরিবর্তে আপনাকে আপনার পুরো ডিজাইন সিস্টেমকে তাদের চারপাশে বেস করতে হবে।
কেস 3: SVG স্ট্রোক
এখানে আরেকটি অতি সাধারণ প্যাটার্ন রয়েছে যা আমি সম্প্রতি ব্যবহার করেছি যেখানে কন্টেইনার আকারের প্রশ্নগুলি আরও পালিশ পণ্যের ফলে হত। বলুন আপনার কাছে একটি শিরোনাম সহ একটি আইকন লক করা আছে:
Heading
এমনকি মিডিয়া প্রশ্ন ছাড়াই শিরোনামের আকারের সাথে আইকনটি স্কেল করা বেশ সহজ। সমস্যা, যদিও, SVG এর stroke-width একটি ছোট আকারে যে সব ভাল লক্ষ্য করা খুব পাতলা পেতে পারে, এবং সম্ভবত একটি বৃহত্তর আকারে একটি সুপার পুরু স্ট্রোক সঙ্গে খুব বেশি মনোযোগ ধরা.
এর আকার এবং স্ট্রোক প্রস্থ নির্ধারণ করতে আমাকে প্রতিটি আইকন উদাহরণে ক্লাস তৈরি করতে এবং প্রয়োগ করতে হয়েছিল। এটি ঠিক আছে যদি আইকনটি একটি নির্দিষ্ট ফন্ট সাইজ সহ স্টাইল করা শিরোনামের পাশে থাকে, আমি অনুমান করি, কিন্তু ক্রমাগত পরিবর্তিত তরল প্রকারের সাথে কাজ করার সময় এটি এতটা দুর্দান্ত নয়৷
শিরোনামের ফন্টের আকার ভিউপোর্টের প্রস্থের উপর ভিত্তি করে হতে পারে, তাই SVG আইকনকে সেই অনুযায়ী সামঞ্জস্য করতে হবে যেখানে এটির স্ট্রোক যেকোনো আকারে কাজ করে। আপনি শিরোনাম এর আপেক্ষিক স্ট্রোক প্রস্থ করতে পারেন font-size এটি সেট করে em ইউনিট কিন্তু আপনার যদি স্ট্রোকের আকারের একটি নির্দিষ্ট সেট থাকে যা আপনাকে আটকে রাখতে হবে, তাহলে এটি কাজ করবে না কারণ এটি অন্যথায় রৈখিকভাবে স্কেল করে - এটি একটি নির্দিষ্টভাবে সামঞ্জস্য করার কোনো উপায় নেই stroke-width ভিউপোর্ট প্রস্থে মিডিয়া কোয়েরি অবলম্বন না করে নির্দিষ্ট পয়েন্টে মান।
কিন্তু সেই সময়ে কন্টেইনার প্রশ্নের বিলাসিতা থাকলে আমি যা করতাম তা এখানে:
.icon {
container: icon / size;
width: 1em;
height: 1em;
}
.icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: #ccc;
stroke-width: 0.8;
}
@container icon (max-width: 70px) {
.icon svg {
stroke-width: 1.5;
}
}
@container icon (max-width: 35px) {
.icon svg {
stroke-width: 3;
}
}বাস্তবায়নের তুলনা করুন এবং দেখুন কিভাবে কনটেইনার ক্যোয়ারী সংস্করণ SVG-এর স্ট্রোককে আমি কন্টেইনারের প্রস্থের উপর ভিত্তি করে নির্দিষ্ট প্রস্থের সাথে স্ন্যাপ করে।
বোনাস: অন্যান্য ধরনের কন্টেইনার আকারের প্রশ্ন
ঠিক আছে, তাই আমি আসলে একটি বাস্তব প্রকল্পে এই মধ্যে চালানো হয়নি. কিন্তু যখন আমি কন্টেইনার কোয়েরিগুলির তথ্য দিয়ে আঁচড়ানোর চেষ্টা করছিলাম, আমি লক্ষ্য করেছি যে কন্টেইনারের আকার বা ভৌত মাত্রার সাথে সম্পর্কিত একটি কন্টেইনারে আমরা অনুসন্ধান করতে পারি এমন অতিরিক্ত জিনিস রয়েছে।
অধিকাংশ উদাহরণ আমি প্রশ্ন দেখেছি width, max-width, এবং min-width, height, block-size, এবং inline-size আমি এই নিবন্ধ জুড়ে করা হয়েছে.
@container info-card (max-width: 500px) {
.info-card__inner {
flex-direction: column;
}
}কিন্তু MDN আরও দুটি জিনিস রূপরেখা দেয় আমরা বিরুদ্ধে প্রশ্ন করতে পারেন. এক orientation যা নিখুঁত বোধগম্য করে কারণ আমরা মিডিয়া প্রশ্নে এটি সব সময় ব্যবহার করি। এটি কন্টেইনার প্রশ্নের সাথে আলাদা নয়:
@media screen (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
}
@container info-card (orientation: landscape) {
.info-card__inner {
/* Style away! */
}
} অন্যটি? এটা aspect-ratio, এটা বিশ্বাস করি বা না:
@container info-card (aspect-ratio: 3/2) {
.info-card__inner {
/* Style away! */
}
} উভয় উদাহরণের সাথে খেলার জন্য এখানে একটি সম্পাদনাযোগ্য ডেমো রয়েছে:
আমি এখনও এই দুটির জন্য একটি ভাল ব্যবহারের ক্ষেত্রে খুঁজে পাইনি। আপনার যদি কোন ধারণা থাকে বা মনে হয় যে এটি আপনার প্রকল্পগুলিতে আপনাকে সাহায্য করতে পারে, আমাকে মন্তব্যে জানান!
