প্রতিক্রিয়াশীল ওয়েব ডিজাইনের একটি নতুন যুগে ম্যাক্রো এবং মাইক্রো লেআউট নিয়ন্ত্রণ করা।
প্রতিক্রিয়াশীল ডিজাইন আজ
আজ, শব্দটি ব্যবহার করার সময়: "প্রতিক্রিয়াশীল ডিজাইন", আপনি সম্ভবত মোবাইলের আকার, ট্যাবলেট আকার থেকে ডেস্কটপ আকারে ডিজাইনের আকার পরিবর্তন করার সময় লেআউট পরিবর্তন করতে মিডিয়া প্রশ্নগুলি ব্যবহার করার কথা ভাবছেন৷
কিন্তু শীঘ্রই, প্রতিক্রিয়াশীল ডিজাইনের এই উপলব্ধিটিকে পৃষ্ঠা বিন্যাসের জন্য টেবিল ব্যবহার করার মতো পুরানো হিসাবে বিবেচনা করা যেতে পারে।
ভিউপোর্ট-ভিত্তিক মিডিয়া প্রশ্নগুলি আপনাকে কিছু শক্তিশালী সরঞ্জাম দেয়, কিন্তু অনেক সূক্ষ্মতার অভাব রয়েছে। তাদের ব্যবহারকারীর চাহিদার প্রতি সাড়া দেওয়ার ক্ষমতা এবং নিজেরাই উপাদানগুলিতে প্রতিক্রিয়াশীল শৈলী ইনজেক্ট করার ক্ষমতার অভাব রয়েছে।
আপনি আপনার উপাদান স্টাইল করতে গ্লোবাল ভিউপোর্ট তথ্য ব্যবহার করতে পারেন, কিন্তু তারা এখনও তাদের শৈলীর মালিক নয়, এবং এটি কাজ করে না যখন আমাদের ডিজাইন সিস্টেমগুলি উপাদান-ভিত্তিক এবং পৃষ্ঠা-ভিত্তিক নয়।
ভাল খবর হল, বাস্তুতন্ত্র পরিবর্তিত হচ্ছে, এবং এটি বেশ দ্রুত পরিবর্তন হচ্ছে। CSS বিকশিত হচ্ছে, এবং প্রতিক্রিয়াশীল ডিজাইনের একটি নতুন যুগ সঠিক দিগন্তে।
আমরা প্রতি 10 বছরে এটি ঘটতে দেখি। 10 বছর আগে, প্রায় 2010-2012, আমরা মোবাইল এবং প্রতিক্রিয়াশীল ডিজাইনের সাথে একটি বিশাল পরিবর্তন এবং CSS3 এর আবির্ভাব দেখেছি।
সুতরাং এটি কাজ করে যে, আবারও, ইকোসিস্টেম সিএসএসে কিছু বড় পরিবর্তনের জন্য প্রস্তুত। ক্রোমের ইঞ্জিনিয়াররা এবং ওয়েব প্ল্যাটফর্ম জুড়ে প্রতিক্রিয়াশীল ডিজাইনের পরবর্তী যুগের জন্য প্রোটোটাইপিং, স্পেসিং এবং বাস্তবায়ন শুরু করছে।
এই আপডেটগুলির মধ্যে ব্যবহারকারী-অভিরুচি ভিত্তিক মিডিয়া বৈশিষ্ট্য, ধারক ক্যোয়ারী এবং নতুন স্ক্রীনের ধরনগুলির জন্য মিডিয়া ক্যোয়ারী, যেমন ফোল্ডেবল স্ক্রীন অন্তর্ভুক্ত রয়েছে।
ব্যবহারকারীর কাছে প্রতিক্রিয়াশীল
নতুন ব্যবহারকারীর পছন্দের মিডিয়া বৈশিষ্ট্যগুলি, আপনাকে ওয়েব অভিজ্ঞতার স্টাইল করার ক্ষমতা দেয় যা ব্যবহারকারীর নিজস্ব নির্দিষ্ট পছন্দ এবং প্রয়োজনের সাথে সারিবদ্ধ হয়। এর মানে হল পছন্দ মিডিয়া বৈশিষ্ট্যগুলি আপনাকে আপনার ব্যবহারকারীর অভিজ্ঞতাগুলিকে আপনার ব্যবহারকারীর অভিজ্ঞতার সাথে খাপ খাইয়ে নিতে দেয়৷
এই ব্যবহারকারী পছন্দ মিডিয়া বৈশিষ্ট্য অন্তর্ভুক্ত:
-
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 স্ক্রিনে ব্যাটারি লাইফকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। এগুলি হল সেই স্ক্রীনগুলি যা আমরা নতুন হাই-এন্ড ফোনগুলিতে দেখছি এবং সেগুলি মোবাইল ডিভাইসগুলিতে ক্রমশ জনপ্রিয় হয়ে উঠছে৷
অন্ধকার থিমগুলির উপর একটি 2018 অ্যান্ড্রয়েড সমীক্ষা স্ক্রীনের উজ্জ্বলতা এবং সামগ্রিক ব্যবহারকারী ইন্টারফেসের উপর নির্ভর করে 60% পর্যন্ত পাওয়ার ড্র সঞ্চয় দেখিয়েছে। 60% পরিসংখ্যানটি এসেছে ইউটিউব প্লে স্ক্রীনের সাথে একটি পজ করা ভিডিওর সাথে 100% স্ক্রিনের উজ্জ্বলতায় অ্যাপের 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 , যার একটি ডিফল্ট ফ্লেক্স-দিক আছে "সারি"।
কম জায়গা সহ, পণ্য কার্ড স্ট্যাক. প্রতিটি পণ্য কার্ড নিজেই শৈলী করে, এমন কিছু যা একা বিশ্বব্যাপী শৈলীর সাথে অসম্ভব।
মিডিয়া কোয়েরির সাথে কন্টেইনার কোয়েরি মিশ্রিত করা
কন্টেইনার কোয়েরির অনেকগুলি ব্যবহার আছে—একটি ক্যালেন্ডারের উপাদান। আপনি তাদের অভিভাবকের উপলব্ধ প্রস্থের উপর ভিত্তি করে ক্যালেন্ডার ইভেন্টগুলি এবং অন্যান্য বিভাগগুলিকে পুনরায় লেআউট করতে ধারক প্রশ্নগুলি ব্যবহার করতে পারেন৷
এই ডেমো কন্টেইনারটি ক্যালেন্ডারের তারিখ এবং সপ্তাহের দিনের বিন্যাস এবং শৈলী পরিবর্তন করার জন্য, সেইসাথে নির্ধারিত ইভেন্টগুলিতে মার্জিন এবং ফন্টের আকার সামঞ্জস্য করার জন্য তাদের স্থানটিকে আরও ভালভাবে ফিট করতে সহায়তা করে।
তারপরে, ছোট পর্দার আকারের জন্য সম্পূর্ণ বিন্যাস স্থানান্তর করতে একটি মিডিয়া ক্যোয়ারী ব্যবহার করুন। এই উদাহরণটি দেখায় যে মিডিয়া কোয়েরি (গ্লোবাল বা ম্যাক্রো শৈলী সামঞ্জস্য করা) কন্টেইনার কোয়েরির সাথে (কন্টেইনারের বাচ্চাদের এবং তাদের মাইক্রো শৈলীগুলি সামঞ্জস্য করা) একত্রিত করা কতটা শক্তিশালী।
তাই এখন আমরা একই UI কম্পোনেন্টের মধ্যে ম্যাক্রো এবং মাইক্রো লেআউটের কথা ভাবতে পারি যাতে কিছু সত্যিই চমৎকার সূক্ষ্ম ডিজাইনের সিদ্ধান্ত নেওয়া যায়।
ধারক প্রশ্ন আজ ব্যবহার করে
এই ডেমোগুলি এখন Chrome ক্যানারিতে একটি পতাকার পিছনে খেলার জন্য উপলব্ধ৷ ক্যানারিতে about://flags এ যান এবং #enable-container-queries পতাকা চালু করুন। এটি @container , contain সম্পত্তির জন্য inline-size এবং block-size মান এবং LayoutNG গ্রিড বাস্তবায়নের জন্য সমর্থন সক্ষম করবে।
পতাকাটি সংশ্লিষ্ট Chrome DevTools বৈশিষ্ট্যগুলিকেও সক্ষম করে৷ DevTools-এ কনটেইনার কোয়েরিগুলি কীভাবে পরিদর্শন এবং ডিবাগ করতে হয় তা জানুন।
স্কোপড শৈলী
কন্টেইনার কোয়েরি তৈরি করতে, আপনার নির্বাচকদের নাগাল সীমিত করতে @scope সহ স্কোপযুক্ত শৈলী ব্যবহার করুন।
স্কোপড শৈলীগুলি নামকরণের সংঘর্ষ এড়াতে উপাদান-নির্দিষ্ট স্টাইলিং করার অনুমতি দেয়, এমন কিছু যা অনেক ফ্রেমওয়ার্ক এবং সিএসএস মডিউলের মতো প্লাগইন ইতিমধ্যেই আমাদের ফ্রেমওয়ার্কের মধ্যে করতে সক্ষম করে। স্কোপড শৈলী আপনাকে মার্কআপ সামঞ্জস্য করার প্রয়োজন ছাড়াই পাঠযোগ্য CSS সহ উপাদানগুলির জন্য নেটিভভাবে এনক্যাপসুলেটেড শৈলী লিখতে দেয়।
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
স্কোপিং আপনাকে "ডোনাট আকৃতির" নির্বাচক তৈরি করতে দেয়, যেখানে আপনি একটি উচ্চ এবং নিম্ন সীমা নির্দিষ্ট করতে পারেন। @scope নিয়মে থাকা নির্বাচকরা সেই সীমাগুলির মধ্যে মিলিত হয়।
এর একটি উদাহরণ হল একটি ট্যাব প্যানেল, যেখানে আপনি ট্যাবগুলিকে স্কোপযুক্ত শৈলী পেতে চান তবে সেই ট্যাবের মধ্যে থাকা প্যানেলটি সেই স্কোপযুক্ত শৈলীগুলির দ্বারা প্রভাবিত না হয়৷
ফর্ম ফ্যাক্টর প্রতিক্রিয়াশীল
প্রতিক্রিয়াশীল ডিজাইনের নতুন যুগ সম্পর্কে আমাদের কথোপকথনের পরবর্তী বিষয় হল ফর্ম ফ্যাক্টরের পরিবর্তন, এবং ওয়েব সম্প্রদায় (যেমন আকৃতি পরিবর্তনকারী স্ক্রীন বা ভার্চুয়াল বাস্তবতা) হিসাবে আমাদের কী ডিজাইন করতে হবে তার ক্রমবর্ধমান সম্ভাবনা।
ফোল্ডেবল বা নমনীয় স্ক্রিন, এবং স্ক্রিন স্প্যানিংয়ের জন্য ডিজাইন করা হল একটি উদাহরণ যেখানে আমরা আজ একটি ফর্ম ফ্যাক্টর পরিবর্তন দেখতে পাচ্ছি। এবং স্ক্রিন-স্প্যানিং এই নতুন ফর্ম ফ্যাক্টর এবং প্রয়োজনগুলিকে কভার করার জন্য কাজ করা আরও একটি বৈশিষ্ট্য।
স্ক্রিন-স্প্যানিংয়ের জন্য একটি পরীক্ষামূলক মিডিয়া ক্যোয়ারী আমাদের এখানে সাহায্য করতে পারে। এটি বর্তমানে এইরকম আচরণ করে: @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 গেমকে সমতল করতে চান, এবং হয়ত কিছু বেসিক আবার দেখতে চান, আমার দল একটি একেবারে নতুন, সম্পূর্ণ বিনামূল্যের CSS কোর্স এবং web.dev-এ রেফারেন্স চালু করছে। আপনি web.dev/learnCSS এর মাধ্যমে এটি অ্যাক্সেস করতে পারেন।
আমি আশা করি আপনি প্রতিক্রিয়াশীল ডিজাইনের পরবর্তী যুগে এই সংক্ষিপ্ত বিবরণটি উপভোগ করেছেন, এবং এর সাথে আসা কিছু আদিম বিষয়গুলি, এবং আমি এটাও আশা করি যে আপনি ওয়েব ডিজাইনের ভবিষ্যতের জন্য এর অর্থ কী তা নিয়ে আমি যতটা উত্তেজিত হয়েছি।
এটি একটি UI সম্প্রদায় হিসাবে আমাদের জন্য উপাদান-ভিত্তিক শৈলী, নতুন ফর্ম ফ্যাক্টর এবং ব্যবহারকারী-প্রতিক্রিয়াশীল অভিজ্ঞতা তৈরি করার জন্য একটি বিশাল সুযোগ উন্মুক্ত করে।