এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

পছন্দ মিডিয়া প্রশ্ন সহ ব্যবহারকারী-অভিযোজিত ইন্টারফেস তৈরি করুন

১. শুরু করার আগে

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

ব্যবহারকারীর পছন্দ

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

এখানে ব্যবহারকারীর পছন্দের কয়েকটি উদাহরণ দেওয়া হলো যা CSS-এ ব্যবহার করা যেতে পারে :

ডিভাইসের ভিউপোর্ট আকার
ডিভাইসের অভিমুখ (পোর্ট্রেট | ল্যান্ডস্কেপ)
ফন্টের আকার
অনলাইন / অফলাইন
নেটওয়ার্কের গুণমান
রঙের বিন্যাস (হালকা | গাঢ়)
ইন্টারফেস অ্যানিমেশন (চালু | হ্রাসকৃত)
ইনপুটের ধরণ (মাউস | টাচ | স্টাইলাস)
ডকুমেন্টের দিক এবং লেখার ধরণ (বাম থেকে ডানে, উপর থেকে নিচে, এবং আরও অনেক কিছু)
প্রদর্শন মোড (পূর্ণস্ক্রিন | স্বতন্ত্র | ন্যূনতম UI | ব্রাউজার)

CSS-এ শীঘ্রই আসতে চলেছে এমন কিছু ইউজার প্রেফারেন্সের উদাহরণ নিচে দেওয়া হলো:

সীমিত ডেটা / লাইট মোড
রঙের পরিসর
বৈসাদৃশ্য (কম | বেশি | হ্রাস)
রং (ব্যবহারকারীর রং পৃষ্ঠায় জোর করে প্রয়োগ করে)
স্বচ্ছতা (চালু | হ্রাসকৃত)

মিডিয়া অনুসন্ধান

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

ব্যবহারকারী-অভিযোজিত

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

পূর্বশর্ত

HTML এবং CSS সম্পর্কে জ্ঞান
ডেভেলপার টুলস, যেমন গুগল ক্রোম ডেভেলপার টুলস সম্পর্কে জ্ঞান

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি এমন একটি ব্যবহারকারী-অভিযোজিত ফর্ম তৈরি করবেন যা নিম্নলিখিত বিষয়গুলির সাথে খাপ খাইয়ে নিতে পারে:

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

আপনি যা শিখবেন

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

হালকা এবং গাঢ় থিম তৈরি করুন
অ্যানিমেটেড এবং অ্যাক্সেসযোগ্য ফর্ম তৈরি করুন
রেসপন্সিভ ফর্মের লেআউট
আপেক্ষিক একক এবং যৌক্তিক বৈশিষ্ট্য ব্যবহার করুন

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

আপনার যা যা লাগবে

গুগল ক্রোম ৮৯ বা তার উচ্চতর সংস্করণ, অথবা আপনার পছন্দের ব্রাউজার

২. প্রস্তুত হন

কোডটি নিন

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

পরামর্শ: কোডপেন ব্যবহার করুন।

একটি নতুন ব্রাউজার ট্যাব খুলুন।
https://codepen.io/argyleink/pen/abBMeeq -এ যান।
আপনার যদি কোনো অ্যাকাউন্ট না থাকে, তাহলে কাজটি সংরক্ষণ করতে একটি তৈরি করুন।
ফর্ক-এ ক্লিক করুন।

বিকল্প: স্থানীয়ভাবে কাজ করুন

যদি আপনি কোডটি ডাউনলোড করে আপনার কম্পিউটারে কাজ করতে চান, তাহলে আপনার Node.js ভার্সন ১২ বা তার উচ্চতর সংস্করণ এবং ব্যবহারের জন্য প্রস্তুত একটি কোড এডিটর থাকতে হবে।

গিট ব্যবহার করুন

https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces দেখুন
রিপোজিটরিটি একটি ফোল্ডারে ক্লোন করুন।
লক্ষ্য করুন ডিফল্ট শাখাটি beginning হচ্ছে।

ফাইল ব্যবহার করুন

ডাউনলোড করা জিপ ফাইলটি একটি ফোল্ডারে আনপ্যাক করুন।

প্রকল্পটি চালান

উপরের যেকোনো একটি ধাপে তৈরি করা প্রজেক্ট ডিরেক্টরিটি ব্যবহার করুন, তারপর:

সার্ভার চালানোর জন্য প্রয়োজনীয় ডিপেন্ডেন্সিগুলো ইনস্টল করতে npm install চালান।
পোর্ট 3000-এ সার্ভারটি চালু করতে npm start চালান।
একটি নতুন ব্রাউজার ট্যাব খুলুন।
http://localhost:3000 -এ যান।

এইচটিএমএল সম্পর্কে

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

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

৩. অভিযোজিত মিথস্ক্রিয়া

গিট শাখা : beginning

এই অংশের শেষে, আপনার সেটিংস ফর্মটি নিম্নলিখিত বিষয়গুলোর সাথে সামঞ্জস্যপূর্ণ হবে:

গেমপ্যাড + কিবোর্ড
মাউস + স্পর্শ
স্ক্রিন রিডার বা অনুরূপ সহায়ক প্রযুক্তি

এইচটিএমএল-এর জন্য অ্যাট্রিবিউটসমূহ

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

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

ইনপুট গ্রুপিং

HTML-এর <fieldset> এলিমেন্টটি একই ধরনের ইনপুট এবং কন্ট্রোলগুলোকে একসাথে গ্রুপ করার জন্য ব্যবহৃত হয়। আপনার ফর্মে দুটি গ্রুপ আছে, একটি ভলিউমের জন্য এবং অন্যটি নোটিফিকেশনের জন্য। ব্যবহারকারীর অভিজ্ঞতার জন্য এটি গুরুত্বপূর্ণ, যাতে পুরো অংশ বাদ দেওয়া যায়।

উপাদানগুলির ক্রম

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

কিবোর্ড ইন্টারঅ্যাকশন

ওয়েব ব্যবহারকারীরা ট্যাব কী ব্যবহার করে ফর্মের মধ্যে চলাচল করতে অভ্যস্ত হয়ে গেছেন, এবং সৌভাগ্যবশত, আপনি যদি প্রয়োজনীয় HTML এলিমেন্টগুলো সরবরাহ করেন, তবে ব্রাউজারই এই কাজটি করে দেয়। <button> , <input> , <h2> , এবং <label> এর মতো এলিমেন্টগুলো স্বয়ংক্রিয়ভাবে কীবোর্ড বা স্ক্রিন-রিডারের গন্তব্যে পরিণত হয়।

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

স্টাইল.সিএসএস

input {
  outline-offset: 5px;
}

চেষ্টা করার মতো জিনিস

index.html এ ব্যবহৃত HTML উপাদানগুলো পর্যালোচনা করুন।
আপনার ব্রাউজারে ডেমো পেজটিতে ক্লিক করুন।
ফর্মের মধ্যে এলিমেন্ট ফোকাস সরাতে tab কী এবং shift+tab কী চাপুন।
স্লাইডার ও চেকবক্সগুলোর মান পরিবর্তন করতে কিবোর্ড ব্যবহার করুন।
একটি ব্লুটুথ গেমপ্যাড কন্ট্রোলার সংযুক্ত করুন এবং ফর্ম জুড়ে এলিমেন্ট ফোকাস সরান।

মাউসের মিথস্ক্রিয়া

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

দেখুন তো, কীভাবে আপনার লেবেল এবং সেগুলোর ইনপুট সংযোগ করার জন্য দুটি ইউজার-এক্সপেরিয়েন্স ফিচার পাচ্ছেন ?

প্রথম বৈশিষ্ট্যটি হলো, এতে ইন্টারঅ্যাক্ট করার জন্য বিভিন্ন অপশন রয়েছে এবং একটি ছোট বর্গক্ষেত্রের চেয়ে লেবেলটিকে মাউস দিয়ে টার্গেট করা অনেক বেশি সহজ।

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

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

অসংযুক্ত: উপাদানগুলিকে সংযুক্ত করার জন্য কোনও অ্যাট্রিবিউট নেই

<input type="checkbox">
<label>...</label>

সংশ্লিষ্ট: উপাদানগুলিকে সংযুক্তকারী বৈশিষ্ট্যসমূহ

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

প্রদত্ত HTML-এ ইতিমধ্যেই সমস্ত ইনপুট এবং লেবেলের অ্যাট্রিবিউট উল্লেখ করা আছে। এই ধারণাটি আপনার কাছে নতুন হলে, বিষয়টি আরও খতিয়ে দেখা যেতে পারে।

চেষ্টা করার মতো জিনিস

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

সহায়ক প্রযুক্তি এই ফর্মটির সাথে যোগাযোগ করতে পারে এবং কয়েকটি HTML অ্যাট্রিবিউটের সাহায্যে ব্যবহারকারীর অভিজ্ঞতাকে আরও মসৃণ করে তুলতে পারে।

ক্রোমে স্ক্রিন রিডার ব্যবহার করে বর্তমান ফর্মটি নেভিগেট করার সময়, <picture> এলিমেন্টটিতে একটি অপ্রয়োজনীয় বিরতি দেখা যায় (এটি শুধু ক্রোমের ক্ষেত্রেই ঘটে না)। একজন ব্যবহারকারী সম্ভবত দৃষ্টি প্রতিবন্ধকতার কারণেই স্ক্রিন রিডার ব্যবহার করেন, তাই একটি ছবিতে থেমে যাওয়াটা সহায়ক নয়। আপনি একটি অ্যাট্রিবিউটের মাধ্যমে স্ক্রিন রিডার থেকে এলিমেন্টগুলো লুকাতে পারেন।

index.html

<picture aria-hidden="true">

এখন স্ক্রিন রিডারগুলো সম্পূর্ণরূপে দৃশ্যমান উপাদানটিকে এড়িয়ে যায়।

input[type="range"] ` স্লাইডার এলিমেন্টটিতে একটি বিশেষ ARIA অ্যাট্রিবিউট রয়েছে: aria-labelledby="media-volume" । এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য স্ক্রিন রিডারকে বিশেষ নির্দেশনা প্রদান করে।

চেষ্টা করার মতো জিনিস

ফর্মের মধ্যে ফোকাস সরাতে আপনার অপারেটিং সিস্টেমের স্ক্রিন-রিডার প্রযুক্তি ব্যবহার করুন।
ফর্মটিতে কোনো একটি স্ক্রিন-রিডার সফটওয়্যার ডাউনলোড করে ব্যবহার করে দেখুন।

৪. অভিযোজিত লেআউট

গিট শাখা: layouts

এই অংশের শেষে, সেটিংস পৃষ্ঠাটিতে যা যা থাকবে:

কাস্টম প্রোপার্টি এবং ব্যবহারকারীর আপেক্ষিক একক ব্যবহার করে একটি স্পেসিং সিস্টেম তৈরি করুন।
নমনীয় ও রেসপন্সিভ অ্যালাইনমেন্ট এবং স্পেসিংয়ের জন্য CSS গ্রিড লিখুন।
আন্তর্জাতিকভাবে অভিযোজিত লেআউটের জন্য যৌক্তিক বৈশিষ্ট্য ব্যবহার করুন
কমপ্যাক্ট এবং স্পেসিয়াস লেআউটের মধ্যে অভিযোজনের জন্য মিডিয়া কোয়েরি লিখুন।

ব্যবধান

একটি সুন্দর লেআউটের মূল চাবিকাঠি হলো স্পেসিং অপশনের সীমিত পরিসর। এটি কন্টেন্টকে স্বাভাবিক বিন্যাস ও সামঞ্জস্য খুঁজে পেতে সাহায্য করে।

কাস্টম বৈশিষ্ট্য

এই কর্মশালাটি সাতটি কাস্টম প্রপার্টি সাইজের একটি সেটের উপর ভিত্তি করে তৈরি করা হয়েছে।

style.css ফাইলের একদম উপরে এগুলো রাখুন:

স্টাইল.সিএসএস

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

পৃষ্ঠার শৈলী

এরপরে, আপনাকে কিছু ডকুমেন্ট স্টাইল সেট করতে হবে, এলিমেন্টগুলো থেকে মার্জিন সরাতে হবে এবং ফন্ট হিসেবে একটি সুন্দর স্যানস-সেরিফ ফন্ট সেট করতে হবে।

style.css ফাইলে নিম্নলিখিতটি যোগ করুন:

স্টাইল.সিএসএস

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

এই হলো স্পেসিং কাস্টম প্রপার্টিজের প্রথম ব্যবহার! এখান থেকেই আপনার স্পেস যাত্রা শুরু হলো।

টাইপোগ্রাফি

এই লেআউটের ফন্টটি অ্যাডাপ্টিভ । ` system-ui কীওয়ার্ডটি ব্যবহারকারীর অপারেটিং সিস্টেম দ্বারা নির্ধারিত সর্বোত্তম ইন্টারফেস ফন্টটি ব্যবহার করবে।

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1, h2, এবং h3-এর স্টাইলগুলো সামান্য এবং শৈলীগত। তবে, টেক্সট র‍্যাপ হওয়ার সময় small এলিমেন্টটির জন্য অতিরিক্ত line-height প্রয়োজন। তা না হলে এটি খুব বেশি জট পাকিয়ে যায়।

যৌক্তিক বৈশিষ্ট্য

লক্ষ্য করুন, body padding -এর দিক নির্দিষ্ট করার জন্য লজিক্যাল প্রোপার্টি ( block-start , block-end ) ব্যবহার করা হয়েছে। এই কোডল্যাবের বাকি অংশ জুড়ে লজিক্যাল প্রোপার্টি ব্যাপকভাবে ব্যবহৃত হবে। এগুলোও, একটি rem ইউনিটের মতো, ব্যবহারকারীর প্রয়োজন অনুযায়ী নিজেকে মানিয়ে নেয় । এই লেআউটটিকে অন্য ভাষায় অনুবাদ করা যায় এবং ব্যবহারকারী তার মাতৃভাষায় যে স্বাভাবিক লিখন ও ডকুমেন্টের দিকনির্দেশনায় অভ্যস্ত, সেই অনুযায়ী সেট করা যায়। স্পেস, দিক বা অ্যালাইনমেন্টের মাত্র একটি সংজ্ঞার মাধ্যমেই লজিক্যাল প্রোপার্টি এই সুবিধাটি প্রদান করে।

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

লজিক্যাল প্রোপার্টি ব্যবহার করে কম স্টাইল লিখেও আরও বেশি ব্যবহারকারীর কাছে পৌঁছানো যায়।

সিএসএস গ্রিড লেআউট

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

এখানে ক্রোম ডেভটুলসের একটি স্ক্রিনশট দেওয়া হলো, যেখানে প্রতিটি সিএসএস গ্রিড লেআউট একবারে ওভারলে করা হচ্ছে:

নিচের প্রতিটি স্টাইল style.css ফাইলে যোগ করে নির্দেশটি অনুসরণ করুন:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

গ্রিড ডিফল্টভাবে প্রতিটি চাইল্ড এলিমেন্টকে তার নিজস্ব সারিতে রাখে, যা এলিমেন্ট স্ট্যাক করার জন্য এটিকে চমৎকার করে তোলে। এর আরেকটি বাড়তি সুবিধা হলো gap ) ব্যবহার করার সুযোগ। আগে, আপনি * সিলেক্টরযুক্ত সমস্ত এলিমেন্টে margin: 0 সেট করতেন, যা এখন গুরুত্বপূর্ণ কারণ আপনি স্পেসিংয়ের জন্য gap ব্যবহার করছেন। গ্যাপ শুধুমাত্র একটি কন্টেইনারের মধ্যে স্পেস ম্যানেজ করার একটি একক জায়গা নয়, বরং এটি আপেক্ষিক প্রবাহও নিয়ন্ত্রণ করে।

ফর্ম

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

এটি ডিজাইনের সবচেয়ে জটিল গ্রিড লেআউট, কিন্তু এর কারণেই সবচেয়ে আকর্ষণীয় রেসপন্সিভ দিকটি তৈরি হয়েছে:

max-width হলো একটি মান, যা লেআউট অ্যালগরিদম এর আকার নির্ধারণ করতে ব্যবহার করে।
gap কাস্টম প্রোপার্টি ব্যবহার করছে এবং column-gap থেকে ভিন্ন একটি row-gap পাস করছে।
আইটেমের উচ্চতা যাতে প্রসারিত না হয়, সেজন্য align-items flex-start এ সেট করা হয়েছে।
grid-template-columns সিনট্যাক্স কিছুটা জটিল, কিন্তু এর মূল লক্ষ্য হলো সংক্ষিপ্ততা বজায় রাখা; কলামগুলোর প্রস্থ 35ch এবং তা কখনোই 10ch এর কম হবে না, এবং জায়গা থাকলে বিষয়বস্তু কলামে রাখুন, অন্যথায় সারি ব্যবহার করাই যথেষ্ট।

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

<বিভাগ>

section {
  display: grid;
  gap: var(--space-md);
}

প্রতিটি সেকশন সারিগুলোর একটি গ্রিড হবে এবং এর অধীনস্থ উপাদানগুলোর মধ্যে মাঝারি ব্যবধান থাকবে।

header {
  display: grid;
  gap: var(--space-xxs);
}

প্রতিটি হেডার সারিগুলোর একটি গ্রিড হবে এবং এর চাইল্ড এলিমেন্টগুলোর মধ্যে অতিরিক্ত সামান্য ফাঁকা জায়গা থাকবে।

<ক্ষেত্র সেট>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

এই লেআউটটি একটি কার্ডের মতো চেহারা তৈরি করতে এবং ইনপুটগুলিকে একসাথে গোষ্ঠীভুক্ত করতে সাহায্য করে। পরবর্তী বিভাগে রঙ যোগ করলে overflow: hidden এবং gap: 1px তাৎপর্য স্পষ্ট হয়ে ওঠে।

.ফিল্ডসেট-আইটেম

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

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

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

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

এই লেআউটটি সেটিংস, আইকন বৃত্তের আকার, বৃত্তাকার আকৃতি তৈরি করা এবং এর মধ্যে একটি ছবিকে কেন্দ্র করে স্থাপন করার দায়িত্বে থাকে।

<ছবি> এবং [চেকবক্স] সারিবদ্ধকরণ

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

এই লেআউটটি :is সিউডো সিলেক্টর ব্যবহার করে ছবি এবং চেকবক্স এলিমেন্টগুলিতে সেন্টারিং সীমাবদ্ধ করে।

সিলেক্টর picture > svg .fieldset-item svg দিয়ে এইভাবে প্রতিস্থাপন করুন :

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

এটি সাইজ সিস্টেম থেকে একটি মান নিয়ে SVG আইকনের আকার নির্ধারণ করে।

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

এই ইউটিলিটি ক্লাসটি চেকবক্স লেবেল এলিমেন্টগুলোর জন্য, যা চেকবক্সের হেল্পার টেক্সটের মধ্যে স্পেস দেওয়ার কাজে ব্যবহৃত হয়।

ইনপুট[টাইপ="চেকবক্স"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

এই স্টাইলগুলো আমাদের সেট করা স্পেসিং-এর মান ব্যবহার করে চেকবক্সের আকার বৃদ্ধি করে।

চেষ্টা করার মতো জিনিস

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

মিডিয়া অনুসন্ধান

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

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

ফর্ম

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

ফর্মটি auto-fit ব্যবহার করে আগে থেকেই ভিউপোর্ট সাইজের সাথে রেসপন্সিভ ছিল, কিন্তু একটি মোবাইল ডিভাইসে পরীক্ষা করার সময়, ডিভাইসটিকে ল্যান্ডস্কেপে পরিবর্তন করলে ফর্মের দুটি গ্রুপ পাশাপাশি আসে না। একটি orientation মিডিয়া কোয়েরি এবং ভিউপোর্ট উইডথ চেকের মাধ্যমে এই ল্যান্ডস্কেপ প্রেক্ষাপটের সাথে মানিয়ে নিন । এখন, যদি ডিভাইসটি ল্যান্ডস্কেপ হয় এবং কমপক্ষে ৬৪০ পিক্সেল চওড়া হয়, তাহলে --repeat কাস্টম প্রপার্টিটিকে auto-fit কীওয়ার্ডের পরিবর্তে একটি সংখ্যায় পরিবর্তন করে দুটি কলামে সেট করুন।

.ফিল্ডসেট-আইটেম

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

আরও ভিউপোর্ট স্পেস উপলব্ধ থাকলে এই মিডিয়া কোয়েরিটি স্পেসিং বাড়ানোর আরেকটি উপায়। গ্রিড টেমপ্লেটটি টেমপ্লেটে একটি বড় কাস্টম প্রপার্টি ( var(--space-xxl) ) ব্যবহার করে প্রথম কলামটিকে প্রসারিত করে। প্যাডিংও বড় কাস্টম প্রপার্টি পর্যন্ত বাড়িয়ে দেওয়া হয়।

চেষ্টা করার মতো জিনিস

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

৫. অভিযোজিত রঙ

গিট শাখা: colors

এই অংশের শেষে, আপনার সেটিংস ফর্মটিতে নিম্নলিখিত বিষয়গুলো থাকবে:

গাঢ় এবং হালকা রঙের পছন্দের সাথে মানিয়ে নিন
ব্র্যান্ড হেক্স থেকে উদ্ভূত একটি রঙের পরিকল্পনা রাখুন
সহজলভ্য রঙ রাখুন

এইচএসএল

পরবর্তী অংশে, আপনি HSL ব্যবহার করে একটি কালার সিস্টেম তৈরি করবেন যা আপনাকে হালকা ও গাঢ় থিম বানাতে সাহায্য করবে। এটি CSS-এর এই মূল ধারণাটির উপর ভিত্তি করে তৈরি: calc() ।

HSL-এর পূর্ণরূপ হলো হিউ (hue), স্যাচুরেশন (saturation), এবং লাইটনেস (lightness)। হিউ হলো একটি কোণ, যেমন ঘড়ির কাঁটার একটি বিন্দু, আর স্যাচুরেশন এবং লাইটনেস হলো শতাংশ। calc() শতাংশ এবং কোণের উপর গাণিতিক হিসাব করতে পারে। আপনি CSS-এ এই শতাংশগুলোর উপর ভিত্তি করে লাইটনেস এবং স্যাচুরেশনের হিসাব করতে পারেন। কালার চ্যানেল ক্যালকুলেশনকে কাস্টম প্রোপার্টির সাথে একত্রিত করলে আপনি একটি আধুনিক ও ডাইনামিক কালার স্কিম পাবেন, যেখানে বিভিন্ন ভ্যারিয়েন্টগুলো একটি বেস কালারের উপর ভিত্তি করে গণনা করা হয়, যা আপনাকে কোডে একাধিক রঙ পরিচালনা করার ঝামেলা থেকে মুক্তি দেয়।

কাস্টম বৈশিষ্ট্য

এই অংশে, আপনি আপনার বাকি স্টাইলগুলোতে ব্যবহারের জন্য কিছু কাস্টম প্রোপার্টি তৈরি করবেন। আগে :root ট্যাগে সেট করা স্পেসিংয়ের মতোই, আপনি রং যোগ করবেন।

ধরে নিন আপনার অ্যাপের ব্র্যান্ড কালার হলো #0af । আপনার প্রথম কাজ হলো এই হেক্স কালার ভ্যালুটিকে একটি HSL কালার ভ্যালুতে রূপান্তর করা: hsl(200 100% 50%) । এই রূপান্তরটি HSL-এ আপনার ব্র্যান্ডের কালার চ্যানেলগুলো প্রকাশ করে, যেগুলোর উপর আপনি calc() ব্যবহার করে বিভিন্ন সহায়ক ব্র্যান্ড কালার গণনা করতে পারবেন।

এই বিভাগের নিম্নলিখিত প্রতিটি কোড ব্লক একই :root সিলেক্টরের মধ্যে যোগ করতে হবে।

ব্র্যান্ড চ্যানেল

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

তিনটি HSL চ্যানেলকে নিষ্কাশন করে তাদের নিজস্ব কাস্টম প্রোপার্টিতে রাখা হয়েছে।

তিনটি বৈশিষ্ট্যই হুবহু ব্যবহার করে ব্র্যান্ডের রঙটি পুনরায় তৈরি করুন।

ব্র্যান্ড

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

যেহেতু আপনার কালার স্কিম ডিফল্টভাবে ডার্ক, তাই ডার্ক সারফেসে ব্যবহারের জন্য কালারগুলোকে ডিস্যাচুরেট করা একটি ভালো অভ্যাস (নাহলে সেগুলো চোখে কাঁপতে পারে বা ব্যবহার অনুপযোগী হয়ে যেতে পারে)। আপনার ব্র্যান্ড কালারকে ডিস্যাচুরেট করতে, আপনি হিউ এবং লাইটনেস অপরিবর্তিত রেখে, স্যাচুরেশনকে ভাগ করে অর্ধেক করে দিন: calc(var(--saturation) / 2) । এখন আপনার ব্র্যান্ড কালারটি থিমের সাথে সঠিকভাবে মানানসই, কিন্তু ব্যবহারের জন্য ডিস্যাচুরেটেড।

পাঠ্য

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

আমাদের ডার্ক থিমের রিডিং টেক্সটের জন্য, আপনি ব্র্যান্ড হিউ-কে ভিত্তি হিসেবে ব্যবহার করেন, কিন্তু এর উপর ভিত্তি করে প্রায় সাদা রঙ তৈরি করেন। অনেক ব্যবহারকারী টেক্সটটিকে সাদা মনে করবেন, যদিও এটি আসলে খুব হালকা নীল। হিউ-এর মধ্যে থাকা ডিজাইনে সামঞ্জস্য তৈরির একটি শক্তিশালী উপায়। --text1 হলো ৮৫% সাদা এবং --text2 হলো ৬৫% সাদা, এবং উভয়েরই স্যাচুরেশন খুব কম।

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

পৃষ্ঠতল

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

লেখাটি খুব হালকা, কারণ ডার্ক মোডে সারফেসগুলো গাঢ় হবে। যেখানে লেখার রঙগুলো উচ্চ উজ্জ্বলতার মান (৮৫% এবং তার বেশি) ব্যবহার করত, সেখানে সারফেসগুলো কম মান (৩০% এবং তার কম) ব্যবহার করবে। সারফেস এবং লেখার উজ্জ্বলতার পরিসরের মধ্যে একটি উপযুক্ত ব্যবধান থাকলে তা ব্যবহারকারীদের পড়ার জন্য সহজলভ্য রঙ নিশ্চিত করতে সাহায্য করবে।

লক্ষ্য করুন, রঙগুলো কীভাবে ১০% লাইটনেস ও ১০% স্যাচুরেশন সহ সবচেয়ে গাঢ় ধূসর রঙ থেকে শুরু হয়ে, ক্রমশ হালকা হওয়ার সাথে সাথে ডিস্যাচুরেট হচ্ছে। প্রতিটি নতুন পৃষ্ঠ আগেরটির চেয়ে ৫% হালকা। হালকা পৃষ্ঠগুলোতে স্যাচুরেশনও কিছুটা কমানো হয়েছে। আপনার সব পৃষ্ঠকে ১০% স্যাচুরেশনে রেখে দেখুন। এটি কি আপনার বেশি ভালো লাগছে, নাকি কম?

হালকা থিম

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

রঙের বৈসাদৃশ্য ভালোভাবে বজায় রাখার জন্য, আপনি আপনার সারফেস এবং টেক্সটের রঙের মধ্যে উজ্জ্বলতার মানে একটি বড় পার্থক্য রাখার একই কৌশল ব্যবহার করবেন।

ব্র্যান্ড

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

প্রথমেই আসে ব্র্যান্ডের রঙ। এর স্যাচুরেশনকে তার পূর্ণ শক্তিতে ফিরিয়ে আনা প্রয়োজন।

পাঠ্য

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

যেমনভাবে ডার্ক থিমে টেক্সটের রঙগুলো খুব হালকা নীল ছিল, ঠিক তেমনি লাইট থিমে টেক্সটের রঙগুলো খুব গাঢ় নীল। HSL রঙের হালকাত্বের মান হিসেবে ১০% এবং ৩০% দেখলেই আপনার বোঝা উচিত যে এই রঙগুলো গাঢ়।

পৃষ্ঠতল

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

রঙ ব্যবস্থা ব্যবহার করুন

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

নিম্নলিখিত কোড সেকশনগুলোর জন্য, উপযুক্ত সিলেক্টরটি খুঁজুন এবং বিদ্যমান কোড ব্লকে কালার CSS যোগ করুন।

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

পেজের প্রাথমিক রঙগুলো হলো আপনার তৈরি করা প্রথম পৃষ্ঠতল এবং লেখার রঙ, যা ডিফল্ট কনট্রাস্টের পরিমাণকেও সর্বোচ্চ পর্যায়ে রাখে। এবার হালকা ও গাঢ় রঙের টগলিং পরীক্ষা করা শুরু করা যেতে পারে!

<ক্ষেত্র সেট>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

এটি আপনার ডিজাইনের কার্ড-সদৃশ উপাদান। ১ পিক্সেলের বর্ডার এবং ১ পিক্সেলের ফাঁকা অংশটি একই রঙের এবং এটি প্রতিটি .fieldset-item পেছনের পৃষ্ঠকে নির্দেশ করে। এটি একটি সুন্দর দৃশ্যগত সামঞ্জস্য তৈরি করে এবং এর রক্ষণাবেক্ষণও সহজ।

.ফিল্ডসেট-আইটেম

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > ছবি

.fieldset-item > picture {
  background: var(--surface4);
}

আইকনটিকে ঘিরে থাকা বৃত্তাকার আকৃতিটি তুলে ধরার জন্য এটি একটি শৈল্পিক কৌশল। পরবর্তী অংশে ইন্টারঅ্যাকশন যোগ করলে এর কারণটি স্পষ্ট হয়ে ওঠে।

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

ফর্মের আইকনগুলোতে অল্ট টেক্সট হিসেবে --text2 ব্যবহার করার জন্য সেট করা আছে। যেসব ডিজাইনে ফিল করা আইকনগুলো টেক্সটের চেয়ে কিছুটা হালকা হয়, সেগুলো আইকনগুলোকে অতিরিক্ত ভারী মনে হওয়া থেকে বিরত রাখে।

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

যখন ভেতরের কোনো ইনপুটে ইন্টারঅ্যাক্ট করা হয়, তখন এই সিলেক্টরটি ইনপুট কন্টেইনার এলিমেন্টটিকে ম্যাচ করে এবং আপনার ব্র্যান্ডের অ্যাকসেন্ট দিয়ে সেটিকে হাইলাইট করার জন্য SVG-কে টার্গেট করে। এটি ফর্মটির একটি চমৎকার ইউএক্স (UX) ফিডব্যাক প্রদান করে, যেখানে ইনপুটগুলোতে ইন্টারঅ্যাক্ট করলে সেগুলোর প্রাসঙ্গিক আইকনোগ্রাফি হাইলাইট হয়।

<ছোট>

small {
  color: var(--text2);
}

এটি ছোট লেখা। হেডার এবং প্যারাগ্রাফের (মূল বিষয়বস্তু) তুলনায় এটি কিছুটা অনুজ্জ্বল হওয়া উচিত।

ডার্ক ফর্ম নিয়ন্ত্রণ

:root {
  color-scheme: dark light;
}

এই চমৎকার শেষ সংযোজনটি ব্রাউজারকে জানিয়ে দেয় যে এই পৃষ্ঠাটি ডার্ক এবং লাইট উভয় থিমই সমর্থন করে। এর ফলস্বরূপ ব্রাউজার আমাদের ডার্ক ফর্ম কন্ট্রোলগুলো প্রদান করে।

৬. অভিযোজিত অ্যানিমেশন

গিট শাখা: animations

এই অংশের শেষে, সেটিংস পৃষ্ঠাটিতে যা যা থাকবে:

ব্যবহারকারীর গতিবিধির পছন্দের সাথে খাপ খাইয়ে নিন
ব্যবহারকারীর প্রতিক্রিয়ায় সাড়া দিন

কম গতি বনাম গতিহীনতা

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

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

মিথস্ক্রিয়া শৈলী

<ক্ষেত্র সেট>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

যখন কোনো ব্যবহারকারী <fieldset> কার্ডের মতো দেখতে উপাদানগুলোর কোনো একটির ইনপুটের সাথে ইন্টারঅ্যাক্ট করেন, তখন এটি একটি লিফটিং এফেক্ট যোগ করে। ইন্টারফেসটি একটি উপাদানকে সামনের দিকে ঠেলে দেয়, যা ব্যবহারকারীকে ফোকাস করতে সাহায্য করে, কারণ এর মাধ্যমে কনটেক্সচুয়াল ফর্ম গ্রুপটি ব্যবহারকারীর দিকে এগিয়ে আসে।

.ফিল্ডসেট-আইটেম

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > ছবি

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

এখানে একটি clip-path অ্যানিমেশন রয়েছে যা কেবল তখনই ব্যবহার করা হয়, যখন গতি কমানোর ব্যাপারে ব্যবহারকারীর কোনো পছন্দ থাকে না। প্রথম সিলেক্টর এবং স্টাইলগুলো বৃত্তাকার ক্লিপ পাথটিকে ১০% সংকুচিত করে এবং কিছু ট্রানজিশন প্যারামিটার নির্ধারণ করে। দ্বিতীয় সিলেক্টর এবং স্টাইলটি ব্যবহারকারীর কোনো ইনপুটের সাথে ইন্টারঅ্যাক্ট করার জন্য অপেক্ষা করে, তারপর আইকনের বৃত্তটিকে বড় করে তোলে। যখন এটি ঠিকঠাক কাজ করে, তখন এটি একটি সূক্ষ্ম কিন্তু চমৎকার প্রভাব তৈরি করে।

৭. অভিনন্দন

গিট শাখা: complete

অভিনন্দন, আপনি সফলভাবে একটি ব্যবহারকারী-অভিযোজনযোগ্য ইন্টারফেস তৈরি করেছেন!

বিভিন্ন ব্যবহারকারীর পরিস্থিতি ও পরিবেশের সাথে খাপ খাইয়ে নিতে পারে এমন ইন্টারফেস তৈরির জন্য প্রয়োজনীয় মূল ধাপগুলো সম্পর্কে আপনি এখন জানেন।

১. শুরু করার আগে

ব্যবহারকারীর পছন্দ

মিডিয়া অনুসন্ধান

ব্যবহারকারী-অভিযোজিত

পূর্বশর্ত

আপনি যা তৈরি করবেন

আপনি যা শিখবেন

আপনার যা যা লাগবে

২. প্রস্তুত হন

কোডটি নিন

পরামর্শ: কোডপেন ব্যবহার করুন।

বিকল্প: স্থানীয়ভাবে কাজ করুন

এইচটিএমএল সম্পর্কে

৩. অভিযোজিত মিথস্ক্রিয়া

এইচটিএমএল-এর জন্য অ্যাট্রিবিউটসমূহ

ইনপুট গ্রুপিং

উপাদানগুলির ক্রম

কিবোর্ড ইন্টারঅ্যাকশন

স্টাইল.সিএসএস

চেষ্টা করার মতো জিনিস

মাউসের মিথস্ক্রিয়া

চেষ্টা করার মতো জিনিস

স্ক্রিন-রিডার ইন্টারঅ্যাকশন

index.html

চেষ্টা করার মতো জিনিস

৪. অভিযোজিত লেআউট

ব্যবধান

কাস্টম বৈশিষ্ট্য

স্টাইল.সিএসএস

পৃষ্ঠার শৈলী

স্টাইল.সিএসএস

টাইপোগ্রাফি

যৌক্তিক বৈশিষ্ট্য

সিএসএস গ্রিড লেআউট

<main>

ফর্ম

<বিভাগ>

<হেডার>

<ক্ষেত্র সেট>

.ফিল্ডসেট-আইটেম

.fieldset-item <picture>

<ছবি> এবং [চেকবক্স] সারিবদ্ধকরণ

.fieldset-item <svg>

.sm-stack

ইনপুট[টাইপ="চেকবক্স"]

চেষ্টা করার মতো জিনিস

মিডিয়া অনুসন্ধান

<main>

ফর্ম

.ফিল্ডসেট-আইটেম

চেষ্টা করার মতো জিনিস

৫. অভিযোজিত রঙ

এইচএসএল

কাস্টম বৈশিষ্ট্য

ব্র্যান্ড চ্যানেল

ব্র্যান্ড

পাঠ্য

পৃষ্ঠতল

হালকা থিম

ব্র্যান্ড

পাঠ্য

পৃষ্ঠতল

রঙ ব্যবস্থা ব্যবহার করুন

<body>

<ক্ষেত্র সেট>

.ফিল্ডসেট-আইটেম

.fieldset-item > ছবি

.fieldset-item svg

.fieldset-item:focus-within svg

<ছোট>

ডার্ক ফর্ম নিয়ন্ত্রণ

৬. অভিযোজিত অ্যানিমেশন

কম গতি বনাম গতিহীনতা

মিথস্ক্রিয়া শৈলী

<ক্ষেত্র সেট>

.ফিল্ডসেট-আইটেম

.fieldset-item > ছবি

৭. অভিনন্দন