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

সম্পাদনাযোগ্য বিষয়বস্তুসহ এলিমেন্টগুলোর স্বয়ংক্রিয় আকার পরিবর্তনের জন্য এক লাইনের কোড।

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

দ্রুত লিঙ্ক

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

শর্ট ফর্ম ভিডিও পছন্দ করেন?

টুইটারে ওয়েস বস এবং ঝে উভয়েরই 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 ব্যবহার করার অর্থ হলো আপনাকে কিছু অতিরিক্ত কাজ করতে হবে। আহমদ শাদীদ একে " ডিফেন্সিভ সিএসএস " বলেন, যেখানে লক্ষ্য কোনো কিছুর আচরণ বা চেহারা ঠিক কেমন হবে তা নির্দিষ্ট করে দেওয়া নয়, বরং সেটিকে একটি অনাকাঙ্ক্ষিত ভিজ্যুয়াল অবস্থায় যাওয়া থেকে রক্ষা করা। আগে ইনপুটগুলোর বেশ কিছু নির্দিষ্ট আকার ছিল, কিন্তু 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 এর ডিফল্ট মান হলো fixed , এবং এটি শুধুমাত্র fixed বা content এই দুটি মান গ্রহণ করে।