field-sizing Property

JavaScript မလိုတော့ပါ (No More JavaScript Hacks)

အရင်တုန်းက Textarea တစ်ခုကို User က စာရိုက်ထည့်ရင် ရိုက်သလောက် အလိုအလျောက် ကြီးလာအောင် (Auto-grow) လုပ်ဖို့ JavaScript တွေ မဖြစ်မနေ သုံးခဲ့ရပါတယ်။ အခုတော့ CSS တစ်ကြောင်းတည်းနဲ့တင် အဆင်ပြေသွားပါပြီ။

အသုံးပြုပုံ

field-sizing ဆိုတဲ့ Property ဟာ input, textarea နဲ့ select လိုမျိုး Form Element တွေရဲ့ အရွယ်အစားကို သူတို့အထဲမှာ ရှိတဲ့ စာသား (Content) ပေါ်မူတည်ပြီး အလိုအလျောက် ပြောင်းလဲပေးပါတယ်။

• fixed: (Default) ဒါကတော့ အရင်ကလိုပဲ ပုံသေ အရွယ်အစား သတ်မှတ်ထားတာပါ။
• content: အတွင်းက စာသား အနည်းအများပေါ် မူတည်ပြီး အလိုအလျောက် ကြီးလာ၊ သေးသွား ဖြစ်ပါမယ်။

textarea {
  /* စာရိုက်ထည့်လိုက်ရင် အောက်ကို အလိုအလျောက် ရှည်ထွက်လာပါမယ် */
  field-sizing: content;

  /* ဒါပေမဲ့ အကန့်အသတ်မရှိ ရှည်မထွက်သွားအောင် အနည်းဆုံးနဲ့ အများဆုံး အမြင့်ကို သတ်မှတ်ပေးသင့်ပါတယ် */
  min-height: 40px;
  max-height: 200px;
}

input[type="text"] {
  /* စာရိုက်ထည့်ရင် ဘေးဘက်ကို အလိုအလျောက် ရှည်ထွက်လာပါမယ် */
  field-sizing: content;
  min-width: 100px;
}

ဘာတွေ ပိုကောင်းသွားလဲ?

1. Performance ကောင်းလာခြင်း: JavaScript Event Listener တွေ သုံးစရာ မလိုတော့တဲ့အတွက် Website ပိုပြီး မြန်ဆန်သွက်လက်လာပါတယ်။
2. UX (User Experience) ကောင်းလာခြင်း: User က စာရိုက်နေရင်းနဲ့ နေရာမလောက်လို့ Scroll Bar ကြီး ပေါ်လာတာမျိုး မကြုံရတော့ပါဘူး။
3. Simplicity (ရိုးရှင်းလွယ်ကူခြင်း): ရှုပ်ထွေးတဲ့ Logic တွေ စဉ်းစားစရာမလိုဘဲ CSS Code တစ်ကြောင်းတည်းနဲ့ အလုပ်ပြီးမြောက်သွားပါတယ်။