ওয়েব ফিচার:
::selection
user-select
accent-color
color-scheme
scrollbar-color
scrollbar-width
:user-valid and :user-invalid
:placeholder-shown
::placeholder
field-sizing
ছোট বড় করা (CSS প্রপার্টি)
কাস্টমাইজ করা যায় এমন <select>
appearance
:has()
::file-selector-button
ব্রাউজার-জেনারেটেড বেশিরভাগ UI, CSS ব্যবহার করে কিছুটা কাস্টমাইজ করা যায়। এমনকি আধুনিক ফিচারের প্রয়োজন হলেও, এটি পুরনো ব্রাউজারেও কাজ করে এবং তাই প্রায়শই পলিফিল বা ফলব্যাকের প্রয়োজন হয় না।
ব্রাউজার UI (ফর্ম কন্ট্রোল, স্ক্রলবার, বেছে নেওয়া, সমস্যার মেসেজ ইত্যাদি) আবার তৈরি করার আগে, প্রথমে যাচাই করুন যে:
- আধুনিক CSS ব্যবহার করলেও, আপনার প্রয়োজন অনুযায়ী ব্রাউজার UI যথেষ্ট কাস্টমাইজ করা যায় না,
- প্রয়োজনীয় কাস্টমাইজেশন এতটাই গুরুত্বপূর্ণ যে বিল্ট-ইন UI আবার তৈরি করার ট্রেড-অফকে যুক্তিযুক্ত করে — সবচেয়ে উল্লেখযোগ্য হল অ্যাক্সেসিবল সিম্যান্টিক্স, কীবোর্ড হ্যান্ডলিং, IME এবং AT ইন্টিগ্রেশন হারানো যা নেটিভ UI ফ্রিতে প্রদান করে।
কাস্টমাইজেশনের উদাহরণ যা করা সম্ভব:
- হাইলাইট করা টেক্সটের রঙ কাস্টমাইজ করতে
::selectionব্যবহার করুন। - কন্টেন্ট টেক্সটে
user-select: noneপ্রয়োগ করবেন না — কপি-পেস্ট, অনুবাদ টুল এবং AT "এখান থেকে পড়ুন" জেসচার কাজ করে না। এটি Chrome-এ সীমাবদ্ধ রাখুন (হ্যান্ডেল, টুলবার, অপ্রয়োজনীয় বোতামের লেবেল টেনে আনুন)। - ব্রাউজারের তৈরি করা যেকোনও UI-তে পৃষ্ঠার অ্যাকসেন্ট কালার প্রয়োগ করতে
accent-colorব্যবহার করুন। - ব্রাউজার UI-কে লাইট/ডার্ক মোডের সাথে মানানসই করতে
color-schemeব্যবহার করুন। - স্ক্রলবারের রঙ কাস্টমাইজ করতে
scrollbar-colorএবং স্ক্রলবারের ঘনত্ব নিয়ন্ত্রণ করতেscrollbar-widthব্যবহার করুন — থাম্ব যেন ট্র্যাক থেকে স্পষ্টভাবে আলাদা করা যায় (≥৩:১) এবং স্ক্রল করা যায় এমন অঞ্চলেscrollbar-width: noneসেট করবেন না (এটি শুধুমাত্র তখনই ব্যবহার করুন যখন স্ক্রল করার সুবিধা অন্য কোনও অ্যাফর্ডেন্স দ্বারা সম্পূর্ণভাবে প্রতিস্থাপিত হয়)। - বৈধতা স্টাইলিংয়ের জন্য
:user-invalid/:user-validব্যবহার করুন, নয়:invalid/:valid— ব্যবহারকারী ফিল্ডের সাথে ইন্টার্যাক্ট করার পরেই শুধু এগুলি ম্যাচ করে, পৃষ্ঠা লোড হওয়ার সময় প্রয়োজনীয়-খালি ফিল্ডকে ত্রুটি হিসেবে ফ্ল্যাগ করার প্রতিকূল ডিফল্ট এড়িয়ে যায়।input-কে ব্যাপকভাবে টার্গেট করার সময় রেঞ্জ স্লাইডার বাদ দিন (যেমন,input:not(input[type="range"]):user-valid) যাতে স্লাইডার অ্যাডজাস্ট করলে ফিল্ডের বৈধতা সংক্রান্ত বর্ডার বা ব্যাকগ্রাউন্ড এতে প্রযোজ্য না হয়। - বোতাম এবং টেক্সট ফিল্ড (
<textarea>সহ) সাধারণত সাধারণ এলিমেন্ট হিসেবে স্টাইল করা যেতে পারে। - স্কেল করতে
font-sizeএবং টাইপোগ্রাফি নিয়ন্ত্রণ করতে অন্যান্য টেক্সচুয়াল প্রপার্টি ব্যবহার করুন
টেক্সট ফিল্ড স্টাইল করা (<input> ও <textarea>)
বেশিরভাগ স্টাইলিংয়ের উদ্দেশ্যে (যেমন, রঙ, বর্ডার, ব্যাকগ্রাউন্ড, টাইপোগ্রাফি ইত্যাদি) এইসব এলিমেন্টকে সাধারণ টেক্সট কন্টেনার হিসেবে বিবেচনা করুন।
- ইনপুট প্লেসহোল্ডার স্টাইল করতে
:placeholder-shownএবং::placeholderব্যবহার করুন। - টেক্সট ফিল্ডের সাইজ কন্টেন্টের সাইজের মতো করতে
field-sizing: contentব্যবহার করুন। <textarea>এলিমেন্টের জন্য, অনুভূমিকভাবে ছোট বড় করার সুবিধা বন্ধ করতেresize: verticalঅথবা সব ধরনের ছোট বড় করার সুবিধা বন্ধ করতেresize: noneব্যবহার করুন।
একাধিক পছন্দের কন্ট্রোল (বেছে নেওয়া, রেডিও, চেকবক্স)
- ড্রপডাউনে দেখানো অনেক বিকল্পের মধ্যে থেকে একটি বেছে নিতে:
<select>+appearance: base-select+::picker(select)ব্যবহার করুন। আরও তথ্যের জন্য ব্র্যান্ডেড সিলেক্ট স্টাইলিং দেখুন - পৃষ্ঠায় ইনলাইন হিসেবে দেখানো একাধিক বিকল্পের মধ্যে থেকে এক বা একাধিক বিকল্প বেছে নেওয়া: প্রতিটি বিকল্পের জন্য
<label>-এর মধ্যে<input type=checkbox>বা<input type=radio>ব্যবহার করুন।label:has(:checked)-এর মাধ্যমে স্টাইল করুন। - চেক করা অবস্থা দেখানোর জন্য
appearance: none+ জেনারেট করা কন্টেন্ট (::before/::after) বা ব্যাকগ্রাউন্ড ইমেজের মাধ্যমে চেকবক্স, রেডিও ও সুইচের স্টাইল সেট করুন।
টেক্সট নয় এমন <input> (বোতাম, স্লাইডার, ফাইল ইনপুট ইত্যাদি)
- ফাইল ইনপুট: বোতাম স্টাইল করতে
::file-selector-buttonব্যবহার করুন। <input>-এর সাথেtype-এরbutton,submitবাresetব্যবহার করবেন না। পরিবর্তে<button>ব্যবহার করুন এবং এটিকে সাধারণ এলিমেন্ট হিসেবে স্টাইল করুন।- স্লাইডার: আরও সূক্ষ্ম কন্ট্রোলের জন্য
appearance: none+ থাম্ব সিউডো-এলিমেন্ট (::-webkit-slider-thumb,::-moz-range-thumbইত্যাদি) এবং ট্র্যাক সিউডো-এলিমেন্ট (::-webkit-slider-runnable-track,::-moz-range-trackইত্যাদি) ব্যবহার করুন।