Enhanced attr() Function

HTML နှင့် CSS ကို ပေါင်းကူးပေးသော တံတား (HTML to CSS Bridge)

အရင်တုန်းက attr() ဆိုတဲ့ Function ကို CSS ရဲ့ content Property တစ်ခုတည်းမှာပဲ အသုံးပြုခွင့် ရှိပါတယ်။ အခုအခါမှာတော့ နေရာတိုင်းလိုလိုမှာ လွတ်လပ်စွာ အသုံးပြုလို့ ရလာပါပြီ။

အသုံးပြုပုံ

HTML ထဲမှာ ရေးထားတဲ့ တန်ဖိုး (Attributes) တွေကို CSS ကနေ တိုက်ရိုက် လှမ်းယူပြီး Style အဖြစ် ပြောင်းလဲ အသုံးချလို့ ရသွားပါတယ်။

<div class="grid" data-columns="3" data-gap="20px">
  <!-- Items များကို ဒီနေရာမှာ ထည့်ပါ -->
</div>

.grid {
  display: grid;

  /* HTML ထဲက 'data-columns' ရဲ့ တန်ဖိုး (၃) ကို နံပါတ်အနေနဲ့ လှမ်းယူမယ် */
  grid-template-columns: repeat(attr(data-columns type(<number>), 1), 1fr);

  /* HTML ထဲက 'data-gap' ရဲ့ တန်ဖိုး (20px) ကို အရှည်အတိုင်းအတာ (length) အနေနဲ့ ယူမယ် */
  gap: attr(data-gap type(<length>), 10px);
}

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

• Dynamic Styling: CSS ဖိုင်ထဲကို သွားပြင်နေစရာ မလိုဘဲ၊ HTML ဘက်ကနေပဲ Attribute တွေ ပြောင်းပြီး Style တွေကို အလွယ်တကူ ထိန်းချုပ်လို့ ရသွားပါတယ်။
• Component Libraries: React သို့မဟုတ် Vue လိုမျိုး Component တွေ ရေးတဲ့အခါ၊ Props တွေကို CSS Variable အနေနဲ့ တစ်ဆင့်ခံ ပို့ပေးနေစရာ မလိုတော့ဘဲ HTML Attribute အနေနဲ့ တိုက်ရိုက် ပို့ပေးလို့ ရသွားတဲ့အတွက် Code ပိုရှင်းသွားပါတယ်။