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

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

Adam Argyle

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

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

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

ব্রাউজার সমর্থন

• 123
• 123
• x
• x

উৎস

দ্রুত লিঙ্ক

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

সংক্ষিপ্ত ফর্ম ভিডিও পছন্দ?

Wes Bos এবং Jhey প্রত্যেকের টুইটারে একটি দুর্দান্ত ভিডিও রয়েছে যা আপনাকে 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 ডিফল্ট মান fixed আছে, এবং এটি শুধুমাত্র fixed বা content দুটি মান গ্রহণ করে।