CSS ফিল্ড-সাইজিং

এডিট করা যাবে এমন কন্টেন্ট সহ অটোমেটিক সাইজ করা এলিমেন্টের জন্য এক লাইনের কোড।

Adam Argyle

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

field-sizing-এর মাধ্যমে, কন্টেন্টের উপর ভিত্তি করে সাইজ নির্ধারণ করার জন্য আপনার CSS-এর একটি লাইন প্রয়োজন। কন্টেন্টের উপর ভিত্তি করে সাইজ নির্ধারণের এই স্টাইলটি টেক্সট এরিয়া ছাড়াও আরও অনেক কিছুর জন্য কাজ করে!

textarea, select, input {
  field-sizing: content;
}

ডাইরেক্ট লিঙ্ক

স্পেসিফিকেশন | ব্যাখ্যা

স্বল্প দৈর্ঘ্যের ভিডিও পছন্দ করেন?

Wes Bos এবং Jhey-এর প্রত্যেকেরই Twitter-এ একটি দুর্দান্ত ভিডিও আছে যা আপনাকে field-sizing-এর সাথে পরিচয় করিয়ে দেয়।

ফিল্ড-সাইজিংয়ের মাধ্যমে কোন কোন এলিমেন্ট প্রভাবিত হয়?

এখানে <form> এলিমেন্টের তালিকা দেওয়া হল যেগুলির উপর field-sizing কাজ করে, সাথে প্রতিটির উপর এর প্রভাবের সারসংক্ষেপও দেওয়া হল।

<textarea>

ইনপুটটি min-inline-size-এ বা প্লেসহোল্ডারে ফিট করার জন্য ছোট হয়ে যায়।

ব্যবহারকারী টাইপ করার সাথে সাথে, ইনপুট ইনলাইন দিকে বৃদ্ধি পায় যতক্ষণ না এটি একটি সর্বাধিক ইনলাইন আকারে পৌঁছায়, যে সময়ে টেক্সট র‍্যাপ হবে এবং ইনপুটের ব্লক সাইজ নতুন লাইনে ফিট করার জন্য বৃদ্ধি পায়।

<select> এবং <select multiple>

বেছে নেওয়া বিকল্পটি ফিট করার জন্য বেছে নেওয়া এলিমেন্টটি ছোট হয়ে যায়।

multiple অ্যাট্রিবিউট সহ একটি সিলেক্ট সবচেয়ে বড় বিকল্পের সাথে ফিট করার জন্য বড় হয় এবং বিকল্পের সংখ্যার সাথে ফিট করার জন্য যতটা প্রয়োজন ততটা লম্বা হয়।

<input type="text">, <input type="email"> এবং <input type="number">

ইনপুটটি min-inline-size-এ বা প্লেসহোল্ডারে ফিট করার জন্য ছোট হয়ে যায়।

ব্যবহারকারী টাইপ করার সাথে সাথে, ইনপুট ইনলাইন ডিরেকশনে বাড়তে থাকে যতক্ষণ না এটি max-inline-size-এ পৌঁছায়, যে পয়েন্টে ওভারফ্লো ইনপুট ভ্যালু ক্লিপ করে।

<input type="file">

ইনপুটটি বোতাম এবং আগে থেকে পূরণ করা ফাইলের নামের টেক্সটে ছোট হয়ে যায়।

ফাইল আপলোড করার পরে, ইনপুটটি বোতাম এবং ফাইলের নামের টেক্সটের মতো চওড়া হয়ে যায়।

ফলাফল দেখা, পরীক্ষা করা ও তুলনা করা

field-sizing-এর দ্বারা প্রভাবিত প্রতিটি ফর্ম এলিমেন্টের আগে ও পরে কেমন আচরণ করে তার একটি ইন্টার‍্যাক্টিভ ও সংক্ষিপ্ত উদাহরণ এখানে দেওয়া হল।

আরও ভালোভাবে দেখা হচ্ছে

[placeholder] ব্যবহার করার সময়, প্লেসহোল্ডারটি কন্টেন্ট হয়ে যায়। এটি আগে উল্লেখ করা হয়েছে তবে এখানে বলা হয়েছে, কারণ ফর্ম স্টাইল করার সময় এটি জানা গুরুত্বপূর্ণ। একটি দীর্ঘ বা সংক্ষিপ্ত প্লেসহোল্ডার field-sizing: content সহ ইনপুটের অন্তর্নিহিত আকার পরিবর্তন করবে।

খালি ও উপচে পড়া স্টাইল হ্যান্ডলিং

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

নিম্নলিখিত স্টাইলগুলি দিয়ে শুরু করা যেতে পারে। এগুলি এলিমেন্টকে খুব ছোট বক্সে ভেঙে যেতে দেয় না এবং textarea-এর ক্ষেত্রে খুব বড় হতে দেয় না।

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

এই CSS সাইজ নির্ধারণের জন্য রিলেটিভ ইউনিট ব্যবহার করে। নতুন lh ইউনিট ব্লক সাইজের জন্য উপযুক্ত এবং ch ইনলাইন সাইজের জন্য ভাল কাজ করে।

field-sizing-এর ডিফল্ট ভ্যালু কী?

field-sizing-এর ডিফল্ট ভ্যালু হল fixed এবং এটি শুধুমাত্র fixed বা content-এর দুটি ভ্যালু গ্রহণ করে।