নতুন রেসপন্সিভ: কম্পোনেন্ট-চালিত বিশ্বে ওয়েব ডিজাইন

রেসপন্সিভ ওয়েব ডিজাইনের নতুন যুগে ম্যাক্রো ও মাইক্রো লেআউট কন্ট্রোল করা।

Una Kravets

আজকের রেসপন্সিভ ডিজাইন

আজ, "রেসপন্সিভ ডিজাইন" শব্দটি ব্যবহার করার সময়, আপনি সম্ভবত মোবাইল সাইজ থেকে ট্যাবলেট সাইজ, ডেস্কটপ সাইজ পর্যন্ত ডিজাইনের সাইজ পরিবর্তন করার সময় লেআউট পরিবর্তন করার জন্য মিডিয়া কোয়েরি ব্যবহার করার কথা ভাবছেন।

কিন্তু শীঘ্রই, রেসপন্সিভ ডিজাইনের এই ধারণাটি পৃষ্ঠা লেআউটের জন্য টেবিল ব্যবহার করার মতোই পুরানো বলে বিবেচিত হতে পারে।

ভিউ পোর্ট-ভিত্তিক মিডিয়া কোয়েরি আপনাকে কিছু শক্তিশালী টুল দেয়, কিন্তু অনেক সূক্ষ্মতার অভাব রয়েছে। ব্যবহারকারীর প্রয়োজন অনুযায়ী রেসপন্স করার ক্ষমতা এবং কম্পোনেন্টে রেসপন্সিভ স্টাইল ইনজেক্ট করার ক্ষমতা তাদের নেই।

মনে রাখবেন: এই নিবন্ধের ক্ষেত্রে কম্পোনেন্ট বলতে এলিমেন্টকে বোঝানো হয়েছে, যার মধ্যে অন্যান্য এলিমেন্ট দিয়ে তৈরি এলিমেন্টও অন্তর্ভুক্ত, যেমন কার্ড বা সাইডবার। এইসব কম্পোনেন্ট আমাদের ওয়েব পেজ তৈরি করে।

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

সুখবর হল, ইকোসিস্টেম পরিবর্তন হচ্ছে এবং এটি খুব দ্রুত পরিবর্তন হচ্ছে। CSS-এর বিবর্তন হচ্ছে এবং রেসপন্সিভ ডিজাইনের নতুন যুগ শুরু হতে চলেছে।

আমরা দেখি যে এটি প্রতি ১০ বছরে একবার ঘটে। ১০ বছর আগে, ২০১০-২০১২ সালের কাছাকাছি সময়ে, আমরা মোবাইল ও রেসপন্সিভ ডিজাইন এবং CSS3-এর উত্থানের সাথে সাথে একটি বিশাল পরিবর্তন দেখেছি।

সোর্স: Web Design Museum.

তাই, এটি থেকে বোঝা যায় যে, CSS-এ কিছু বড় পরিবর্তন করার জন্য ইকোসিস্টেম আবার প্রস্তুত। Chrome এবং ওয়েব প্ল্যাটফর্ম জুড়ে ইঞ্জিনিয়াররা রেসপন্সিভ ডিজাইনের পরবর্তী যুগের জন্য প্রোটোটাইপ, স্পেক এবং ইমপ্লিমেন্টেশন শুরু করছেন।

এইসব আপডেটের মধ্যে ব্যবহারকারীর পছন্দ অনুযায়ী মিডিয়া ফিচার, কন্টেনার কোয়েরি এবং নতুন ধরনের স্ক্রিনের জন্য মিডিয়া কোয়েরি অন্তর্ভুক্ত, যেমন ফোল্ডেবল স্ক্রিন।

ব্যবহারকারীর প্রতি রেসপন্সিভ হওয়া

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

এই ব্যবহারকারীর পছন্দ সংক্রান্ত মিডিয়া ফিচারের মধ্যে রয়েছে:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• এবং আরও অনেক কিছু

পছন্দ সংক্রান্ত ফিচার ব্যবহারকারীর অপারেটিং সিস্টেমে সেট করা পছন্দ অনুযায়ী কাজ করে এবং আরও শক্তিশালী ও পছন্দমতো ওয়েব অভিজ্ঞতা তৈরি করতে সাহায্য করে, বিশেষ করে যাদের অ্যাক্সেসিবিলিটি সংক্রান্ত প্রয়োজন আছে।

prefers-reduced-motion

যেসব ব্যবহারকারী কম মোশন-এর জন্য অপারেটিং সিস্টেমের পছন্দ সেট করেছেন, তারা সাধারণত কম্পিউটার ব্যবহার করার সময় কম অ্যানিমেশনের অনুরোধ করছেন। তাই, তারা সম্ভবত ওয়েব ব্যবহার করার সময় একটি ফ্ল্যাশি ইন্ট্রো স্ক্রিন, কার্ড ফ্লিপ অ্যানিমেশন, জটিল লোডার বা অন্যান্য ফ্ল্যাশি অ্যানিমেশনের প্রশংসা করবেন না।

prefers-reduced-motion-এর সাহায্যে আপনি রিডিউসড-মোশন মাথায় রেখে আপনার পৃষ্ঠা ডিজাইন করতে পারবেন এবং যাদের এই পছন্দ সেট করা নেই তাদের জন্য মোশন-এনহ্যান্সড অভিজ্ঞতা তৈরি করতে পারবেন।

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

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

prefers-color-scheme

পছন্দের আরেকটি মিডিয়া ফিচার হল prefers-color-scheme। এই ফিচার আপনার ব্যবহারকারীর পছন্দ অনুযায়ী থিমে UI কাস্টমাইজ করতে আপনাকে সাহায্য করে। ডেস্কটপ বা মোবাইল, যে কোনও অপারেটিং সিস্টেমেই ব্যবহারকারীরা লাইট, ডার্ক বা অটো থিমের জন্য পছন্দ সেট করতে পারেন, যা দিনের সময়ের উপর নির্ভর করে পরিবর্তিত হয়।

আপনি CSS কাস্টম প্রপার্টি ব্যবহার করে আপনার পৃষ্ঠা সেট-আপ করলে, রঙের ভ্যালু সোয়্যাপ করা সহজ হয়ে যায়। আপনি মিডিয়া কোয়েরির মধ্যে নতুন থিমে ডায়নামিকভাবে অ্যাডজাস্ট করতে backgroundColor এবং textOnPrimary-এর মতো আপনার রঙের থিম ভ্যালু দ্রুত আপডেট করতে পারবেন।

এইসব প্রেফারেন্স কোয়েরির মধ্যে কিছু পরীক্ষা করা সহজ করতে, প্রতিবার আপনার সিস্টেম প্রেফারেন্স খোলার পরিবর্তে আপনি এমুলেশনের জন্য DevTools ব্যবহার করতে পারেন।

ডার্ক থিমের জন্য ডিজাইন করা

ডার্ক থিমের জন্য ডিজাইন করার সময়, শুধু ব্যাকগ্রাউন্ড ও টেক্সটের রঙ বা ডার্ক স্ক্রলবার ইনভার্ট করলেই হয় না। এমন কিছু বিষয় আছে যা আপনি হয়ত বুঝতে পারছেন না। যেমন, ভিজ্যুয়াল ভাইব্রেশন কমাতে আপনাকে ডার্ক ব্যাকগ্রাউন্ডে রঙের স্যাচুরেশন কমাতে হতে পারে।

গভীরতা তৈরি করতে এবং কোনও এলিমেন্টকে সামনে নিয়ে আসতে শ্যাডো ব্যবহার করার পরিবর্তে, আপনি এলিমেন্টের ব্যাকগ্রাউন্ড-কালারে আলো ব্যবহার করে সেটি সামনে নিয়ে আসতে চাইতে পারেন। কারণ, ডার্ক ব্যাকগ্রাউন্ডে শ্যাডো ততটা কার্যকর হবে না।

মেটেরিয়াল ডিজাইন ডার্ক থিমের জন্য ডিজাইন করার ব্যাপারে কিছু দারুণ নির্দেশিকা প্রদান করে।

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

ডার্ক থিমের উপর করা একটি ২০১৮ Android স্টাডি অনুযায়ী, স্ক্রিনের উজ্জ্বলতা ও সামগ্রিক ইউজার ইন্টারফেসের উপর নির্ভর করে ৬০% পর্যন্ত ব্যাটারি সাশ্রয় করা সম্ভব। অ্যাপ UI-এর জন্য ডার্ক থিম বনাম লাইট থিম ব্যবহার করে ১০০% স্ক্রিন ব্রাইটনেসে পজ করা ভিডিও সহ YouTube প্লে স্ক্রিনের তুলনা করে ৬০% পরিসংখ্যান পাওয়া গেছে।

সম্ভব হলে, আপনার ব্যবহারকারীদের জন্য সবসময় ডার্ক থিম অভিজ্ঞতা প্রদান করা উচিত।

কন্টেনারের সাথে মানানসই

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

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

Codepen-এ ডেমো দেখুন (Canary-তে ফ্ল্যাগের পিছনে)।

এই উদাহরণে দুটি ভিন্ন কন্টেনার সাইজ সহ দুটি অভিন্ন কম্পোনেন্ট দেখানো হয়েছে, উভয়ই CSS গ্রিড ব্যবহার করে তৈরি করা লেআউটে জায়গা নিচ্ছে। প্রতিটি কম্পোনেন্ট তার অনন্য স্পেস অ্যালোটমেন্টে ফিট করে এবং সেই অনুযায়ী নিজেকে স্টাইল করে।

এই পরিমাণ নমনীয়তা এমন কিছু যা শুধুমাত্র মিডিয়া কোয়েরির মাধ্যমে সম্ভব নয়।

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

এর জন্য @container at-রুল প্রয়োজন এটি @media সহ মিডিয়া কোয়েরির মতোই কাজ করে, তবে @container ভিউপোর্ট ও ইউজার এজেন্টের পরিবর্তে পেরেন্ট কন্টেনারের কাছে তথ্য জানতে চায়।

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

প্রথমে, মূল এলিমেন্টে কন্টেনমেন্ট সেট করুন। তারপর, min-width বা max-width ব্যবহার করে, কন্টেনারের সাইজের উপর ভিত্তি করে, কন্টেনারের মধ্যে থাকা যেকোনও এলিমেন্ট স্টাইল করার জন্য @container কোয়েরি লিখুন।

উপরের কোডটি max-width ব্যবহার করে এবং লিঙ্কগুলিকে display:none-এ সেট করে, সেইসাথে কন্টেনারের প্রস্থ 850px-এর কম হলে টাইম ফন্টের সাইজ কমিয়ে দেয়।

কন্টেনার কোয়েরি কার্ড

এই ডেমো প্ল্যান্ট ওয়েবসাইটে, প্রতিটি প্রোডাক্ট কার্ড, যার মধ্যে রয়েছে হিরো, সম্প্রতি দেখা আইটেমের সাইডবার এবং প্রোডাক্ট গ্রিড, সবই একই মার্কআপ সহ একই কম্পোনেন্ট।

Codepen-এ ডেমো দেখুন (Canary-তে ফ্ল্যাগের পিছনে)।

এই সম্পূর্ণ লেআউট তৈরি করতে কোনও মিডিয়া কোয়েরি ব্যবহার করা হয়নি, শুধু কন্টেনার কোয়েরি ব্যবহার করা হয়েছে। এর ফলে প্রতিটি প্রোডাক্ট কার্ড সঠিক লেআউটে শিফট করে যায় এবং স্পেস পূরণ করে। যেমন, গ্রিড minmax কলাম লেআউট ব্যবহার করে যাতে এলিমেন্টগুলি তাদের স্পেসে ফ্লো করতে পারে এবং সেই স্পেস খুব বেশি কম্প্রেস করা হলে গ্রিডটি আবার লেআউট করে (যার অর্থ হল এটি সর্বনিম্ন সাইজে পৌঁছে গেছে)।

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

গ্রিডে অন্তত 350px স্পেস থাকলে, কার্ড লেআউট display: flex-এ সেট হয়ে অনুভূমিক হয়ে যায়, যার ডিফল্ট ফ্লেক্স-ডিরেকশন "সারি" হিসেবে সেট করা থাকে।

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

মিডিয়া কোয়েরির সাথে কন্টেনার কোয়েরি মিক্স করা

কন্টেনার কোয়েরির অনেক ব্যবহারিক প্রয়োগ আছে—একটি হল ক্যালেন্ডার কম্পোনেন্ট। আপনি ক্যালেন্ডার ইভেন্ট এবং অন্যান্য সেগমেন্টের লেআউট পরিবর্তন করতে কন্টেনার কোয়েরি ব্যবহার করতে পারেন তাদের প্যারেন্টের উপলভ্য প্রস্থের উপর ভিত্তি করে।

Codepen-এ ডেমো দেখুন (Canary-তে ফ্ল্যাগের পিছনে)।

এই ডেমো কন্টেনার ক্যালেন্ডারের তারিখ ও সপ্তাহের দিনের লেআউট ও স্টাইল পরিবর্তন করার জন্য কোয়েরি করে, পাশাপাশি শিডিউল করা ইভেন্টের মার্জিন ও ফন্ট সাইজ অ্যাডজাস্ট করে যাতে সেগুলি উপলভ্য স্পেসে আরও ভালোভাবে ফিট করে।

তারপর, ছোট স্ক্রিন সাইজের জন্য সম্পূর্ণ লেআউট শিফট করতে মিডিয়া কোয়েরি ব্যবহার করুন। এই উদাহরণ থেকে বোঝা যায় যে কন্টেনার কোয়েরির (কন্টেনারের চাইল্ড ও তাদের মাইক্রো স্টাইল অ্যাডজাস্ট করা) সাথে মিডিয়া কোয়েরি (গ্লোবাল বা ম্যাক্রো স্টাইল অ্যাডজাস্ট করা) একত্রিত করা কতটা শক্তিশালী।

তাই এখন আমরা একই UI কম্পোনেন্টের মধ্যে ম্যাক্রো এবং মাইক্রো লেআউট সম্পর্কে ভাবতে পারি কিছু সত্যিই চমৎকার সূক্ষ্ম ডিজাইন সিদ্ধান্ত নিতে অনুমতি দিন.

আজ কন্টেনার কোয়েরি ব্যবহার করা হচ্ছে

এই ডেমো এখন Chrome Canary-তে ফ্ল্যাগের পিছনে খেলার জন্য উপলভ্য। Canary-তে about://flags-এ যান এবং #enable-container-queries ফ্ল্যাগ চালু করুন। এটি contain প্রপার্টির জন্য @container, inline-size ও block-size ভ্যালু এবং LayoutNG Grid ইমপ্লিমেন্টেশনের জন্য সহায়তা চালু করবে।

এছাড়াও, ফ্ল্যাগটি সংশ্লিষ্ট Chrome DevTools ফিচার চালু করে। DevTools-এ কীভাবে কন্টেনার কোয়েরি পরীক্ষা ও ডিবাগ করতে হয় তা জানুন।

স্কোপড স্টাইল

কন্টেনার কোয়েরি তৈরি করতে, আপনার সিলেক্টরের নাগাল সীমিত করতে @scope সহ স্কোপড স্টাইল ব্যবহার করুন।

এই চিত্রটি মূলত Miriam Suzanne ডিজাইন করেছেন।

স্কোপড স্টাইল কম্পোনেন্ট-নির্দিষ্ট স্টাইলিংয়ের অনুমতি দেয় যাতে নামকরণে সংঘর্ষ এড়ানো যায়, এমন কিছু যা অনেক ফ্রেমওয়ার্ক এবং প্লাগ-ইন যেমন CSS মডিউল ইতিমধ্যে আমাদের ফ্রেমওয়ার্কের মধ্যে করার অনুমতি দেয়। স্কোপড স্টাইল আপনাকে মার্কআপ অ্যাডজাস্ট না করেই রিডেবল CSS সহ কম্পোনেন্টের জন্য নেটিভভাবে এনক্যাপসুলেটেড স্টাইল লিখতে দেয়।

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

স্কোপিংয়ের মাধ্যমে আপনি "ডোনাট আকৃতির" সিলেক্টর তৈরি করতে পারবেন, যেখানে আপনি সর্বোচ্চ ও সর্বনিম্ন সীমা নির্দিষ্ট করতে পারবেন। @scope নিয়মে থাকা সিলেক্টরগুলি সেই সীমার মধ্যে ম্যাচ করে।

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

ফর্ম ফ্যাক্টরের সাথে মানানসই

রেসপন্সিভ ডিজাইনের নতুন যুগ সম্পর্কে আমাদের কথোপকথনের পরবর্তী বিষয় হল ফর্ম ফ্যাক্টরের পরিবর্তন এবং ওয়েব কমিউনিটি (যেমন, আকৃতি পরিবর্তনকারী স্ক্রিন বা ভার্চুয়াল রিয়েলিটি) হিসেবে আমাদের কী ডিজাইন করতে হবে তার ক্রমবর্ধমান সম্ভাবনা।

Microsoft Edge Explainers থেকে ডায়াগ্রাম।

আজকে আমরা ফর্ম ফ্যাক্টর শিফ্ট কোথায় দেখতে পাই তার একটি উদাহরণ হল, ফোল্ডেবল বা ফ্লেক্সিবল স্ক্রিন এবং স্ক্রিন স্প্যানিংয়ের জন্য ডিজাইন করা। এছাড়াও, স্ক্রিন-স্প্যানিং হল আরেকটি স্পেসিফিকেশন যার উপর কাজ করা হচ্ছে যাতে এইসব নতুন ফর্ম ফ্যাক্টর ও প্রয়োজনীয়তা পূরণ করা যায়।

স্ক্রিন-স্প্যানিংয়ের জন্য একটি পরীক্ষামূলক মিডিয়া কোয়েরি এখানে আমাদের সাহায্য করতে পারে। বর্তমানে এটি এইভাবে কাজ করে: @media (spanning: <type of fold>)। ডেমোটি দুটি কলাম সহ একটি গ্রিড লেআউট সেট-আপ করে: একটির প্রস্থ হল --sidebar-width, যা ডিফল্ট হিসেবে 5rem এবং অন্যটি হল 1fr। যখন লেআউটটি একটি ডুয়াল স্ক্রিনে দেখা হয় যার একটি উল্লম্ব ভাঁজ রয়েছে, তখন --sidebar-width-এর মানটি বাম ভাঁজের পরিবেশের মান দিয়ে আপডেট করা হয়।

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

এটি এমন একটি লেআউট চালু করে যেখানে সাইডবার, এই ক্ষেত্রে নেভিগেশন, একটি ফোল্ডের জায়গা পূরণ করে, যেখানে অ্যাপ UI অন্যটি পূরণ করে। এটি UI-তে "ক্রিজ" হওয়া আটকায়।

ডিবাগ করতে এবং সরাসরি ব্রাউজারে স্ক্রিন স্প্যানিংয়ের প্রোটোটাইপ তৈরি করতে, আপনি Chrome DevTools এমুলেটরে ফোল্ডেবল স্ক্রিন পরীক্ষা করতে পারেন।

উপসংহার

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

এটি হল নতুন রেসপন্সিভ।

এটি ম্যাক্রো লেআউটকে মাইক্রো লেআউটের সাথে একত্রিত করছে এবং সর্বোপরি, এটি ব্যবহারকারীর কাস্টমাইজেশন এবং ফর্ম ফ্যাক্টরকে বিবেচনা করছে।

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

রেসপন্সিভ ডিজাইনের পরবর্তী যুগ এসে গেছে এবং আপনি এখনই এটি নিজে এক্সপ্লোর করা শুরু করতে পারেন।

web.dev/learnCSS

আর এখন, আপনি যদি CSS-এর ব্যাপারে আরও দক্ষ হতে চান এবং কিছু বেসিক জিনিস আবার ঝালিয়ে নিতে চান, তাহলে আমার টিম web.dev-এ একটি সম্পূর্ণ নতুন, সম্পূর্ণ ফ্রি CSS কোর্স এবং রেফারেন্স লঞ্চ করছে। আপনি web.dev/learnCSS-এর মাধ্যমে এটি অ্যাক্সেস করতে পারবেন।

আমি আশা করি আপনি রেসপন্সিভ ডিজাইনের পরবর্তী যুগের এই ওভারভিউ এবং এর সাথে আসা কিছু প্রিমিটিভ উপভোগ করেছেন এবং আমি আরও আশা করি যে ওয়েব ডিজাইনের ভবিষ্যতের জন্য এর অর্থ কী তা নিয়ে আপনি আমার মতোই উত্তেজিত।

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