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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

দ্রুত লিঙ্কগুলি

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

ছোট ভিডিও পছন্দ?

ওয়েস বস এবং ঝে-এর টুইটারে একটি দুর্দান্ত ভিডিও আছে যেখানে তারা আপনাকে field-sizing সম্পর্কে পরিচয় করিয়ে দেবে।

ক্ষেত্র-আকার নির্ধারণের ফলে কোন উপাদানগুলি প্রভাবিত হয়?

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

<textarea>

ইনপুটটি min-inline-size অথবা স্থানধারকের সাথে মানানসই করে ভেঙে ফেলা হয়।

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

<select> এবং <select multiple>

নির্বাচিত বিকল্পের সাথে মানানসই করার জন্য select উপাদানটি সঙ্কুচিত হয়।

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 দুটি মান গ্রহণ করে।