নতুন প্রতিক্রিয়াশীল: একটি উপাদান-চালিত বিশ্বে ওয়েব ডিজাইন

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

Una Kravets

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

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

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

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

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

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

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

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

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

ব্যবহারকারীর প্রতি প্রতিক্রিয়াশীল

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

এই ব্যবহারকারীর পছন্দের মিডিয়া বৈশিষ্ট্যগুলির মধ্যে রয়েছে:

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

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

prefers-reduced-motion

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

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

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

"Pefers-reduced-motion" বলতে "কোন গতি নেই" বোঝানো উচিত নয়, কারণ অনলাইনে তথ্য পৌঁছে দেওয়ার জন্য গতি খুবই গুরুত্বপূর্ণ। পরিবর্তে, একটি দৃঢ় বেসলাইন অভিজ্ঞতা প্রদান করুন যা আপনার ব্যবহারকারীদের অপ্রয়োজনীয় নড়াচড়া ছাড়াই গাইড করে এবং আপনার ব্যবহারকারীদের জন্য সেই অভিজ্ঞতা ধীরে ধীরে উন্নত করে, সেই অ্যাক্সেসিবিলিটি চাহিদা বা পছন্দ ছাড়াই।

prefers-color-scheme

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

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

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

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

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

গভীরতা তৈরি করে কোনও উপাদানকে সামনের দিকে আঁকতে ছায়া ব্যবহার করার পরিবর্তে, আপনি উপাদানটির পটভূমির রঙে আলো ব্যবহার করতে পারেন যাতে এটি সামনের দিকে আঁকতে পারে। কারণ অন্ধকার পটভূমিতে ছায়া ততটা কার্যকর হবে না।

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

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

যখনই সম্ভব আপনার ব্যবহারকারীদের জন্য একটি অন্ধকার থিমের অভিজ্ঞতা প্রদান করা উচিত।

কন্টেইনারের প্রতি প্রতিক্রিয়াশীল

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

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

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

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

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

এর জন্য @container at-rule প্রয়োজন। এটি @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 এর কম প্রশস্ত হয় তখন টাইম ফন্টের আকার হ্রাস করে।

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

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

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

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

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

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

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

কম জায়গায়, পণ্য কার্ডগুলো স্তূপীকৃত হয়। প্রতিটি পণ্য কার্ড নিজেই স্টাইল করে, যা কেবল বিশ্বব্যাপী স্টাইল দিয়ে অসম্ভব।

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

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

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

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

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

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

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

এই পতাকাটি সংশ্লিষ্ট Chrome DevTools বৈশিষ্ট্যগুলিকেও সক্ষম করে। DevTools-এ কন্টেইনার কোয়েরিগুলি কীভাবে পরিদর্শন এবং ডিবাগ করতে হয় তা শিখুন।

বিস্তৃত শৈলী

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

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

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

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

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

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

ফর্ম ফ্যাক্টরের প্রতি প্রতিক্রিয়াশীল

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

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

screen-spanning এর জন্য একটি পরীক্ষামূলক মিডিয়া কোয়েরি আমাদের এখানে সাহায্য করতে পারে। বর্তমানে এটি এইভাবে আচরণ করে: @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 সম্প্রদায় হিসেবে আমাদের জন্য কম্পোনেন্ট-ভিত্তিক শৈলী, নতুন ফর্ম ফ্যাক্টর গ্রহণ এবং ব্যবহারকারী-প্রতিক্রিয়াশীল অভিজ্ঞতা তৈরির একটি বিশাল সুযোগ উন্মুক্ত করে।