Modern CSS

2024

Nested CSS

.card {
  padding: 1rem;

  > h2:first-child {
    margin-block-start: 0;
  }

  footer {
    border-block-start: 1px solid black;
  }
  
  @container (min-inline-size: 250px) {
    gap: 2rem;
  }
  
  body.home & { /* totally fine */ }
  & .footer { /* totally fine, don't even need the & */
  &__big { /* nope, can't do this */ }
  
}

Nested selector တွေကို အရင်ကတော့ Preprocessor တွေဖြစ်တဲ့ Sass, Less, PostCSS တို့လိုကောင်တွေသုံးပြီးတော့ပဲ ရေးလို့ရခဲ့တယ်။ အခုကတော့ CSS မှာလည်း Nested selector တွေရေးလို့ရလာပါပြီ။

Scoping

@scope (.card) to (.markdown-output) {
  h2 {
    background: tan; /* stop doing this when we get to the Markdown */
  }
}

.markdown-output ရဲ့ scope ကိုမထိဘဲနဲ့ .markdown-output အပြင်က h2 တွေရဲ့ background ကိုပဲ သတ်မှတ်ပေးတာ ဖြစ်ပါတယ်။

အောက်ကနမူနာကိုကြည့်ပါ

@scope မသုံးဘဲ Nesting နဲ့လည်း ရေးလို့ရပေမယ့် @scope အသုံးပြုတာက ပိုသေသပ်သလို Nesting ထက်ပိုအဆင်ပြေတာတွေလည်း လုပ်လို့ရပါသေးတယ်။

<div class="my-cool-component">
  <style>
    @scope {
      :scope { /* selects the div above, without having to select it by class or anything */
      }
      .card {
      }
    }
  </style>

  <article class="card">
  </article>
</div>

Cascade Layers

Selector strength ကို specificity နဲ့တင်မဟုတ်ဘဲ layer တွေခွဲပြီးတော့ပါ ထားလို့ရပါသေးတယ်။

Higher layer က style တွေက Lower layer ကကောင်တွေထက် weight ပိုများပါတယ်။

Layer တွေမခွဲခဲ့ရင်တော့ source order အတိုင်းပဲရှိနေမှာဖြစ်ပါတယ်။

@layer base {
  body#home {
    margin: 0;
    background: #eee;
  }
}

body {
  background: white;
}

@layer reset, default, themes, patterns, layouts, components, utilities;

@import url("https://cdn.com/bootstrap.css") layer;

h5 {
  margin-bottom: 2rem;
}

Logical Properties

Logical properties တွေရှိလာတဲ့အခါမှာ Element size တွေကို vew port ရဲ့ Physical dimensions တွေနဲ့သတ်မှတ်တာမျိုးမဟုတ်ဘဲ content flow ပေါ်မှာမူတည်ပြီးတော့ သတ်မှတ်တာမျိုးဖြစ်ပါတယ်။

Logical properties သုံးရတဲ့ ရည်ရွယ်ချက်က inclusive frontend တည်ဆောက်ဖို့ဖြစ်ပါတယ်။

အသေးစိတ်ကိုတော့ web.dev မှာလေ့လာနိုင်ပါတယ်။

Logical Properties  |  web.devweb.dev

:has pseudo class selector

:has သည် သာမာန်အားဖြင့်တော့ parent selector လို့ပြောလို့ရတယ်၊ ဒါပေမယ့် parent selector တစ်ခုထက်ပိုတဲ့ လုပ်ဆောင်နိုင်စွမ်းတွေလည်း ရှိတယ်။

• parent selector

• quantity selector

• conditional selector

figure:has(caption){} /* parent selector */

.layout:has(>:nth-child(5)){} /* quantity selector */

html:has(#sidenav.--is-open) main {} /* conditional selector */

:has selector ကို တခြား css feature တွေနဲ့ ပေါင်းပြီးတော့သုံးရင် ဘယ်လောက်ထိ powerful ဖြစ်သလဲဆိုတာကိုအောက်က twitter tweet မှာ ကြည့်နိုင်ပါတယ်

:is pseudo class selector

:is မရှိခင်တုန်းက ရေးရတဲ့ထဲမှာ verbose ဖြစ်လွန်းတဲ့ နမူနာတစ်ခုကြည့်ရအောင်

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

:is သုံးတဲ့အခါမှာတော့ selector အရှည်ကြီးမရေးရတော့ဘဲ တော်တော် အဆင်ပြေသွားပါတယ်

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

:is နဲ့တူတာနောက်တစ်ခု :where ရှိပါတယ်

:where ရဲ့ အလုပ်လုပ်တဲ့ပုံနဲ့ အသုံးပြုရတဲ့ပုံက :is နဲ့အတူတူပါပဲ

ဘယ်နေရာမှာမတူသလဲဆိုတော့ specificity မှာမတူပါဘူး

:is က သူ့နောက်မှာပါတဲ့ထဲက specificity အမြင့်ဆုံးကောင်ရဲ့ weight ကိုယူပါတယ်

:is(a,div,#id) /* ဒီမှာဆိုရင် #id ရဲ့ weight 100 အတိုင်းရပါတယ် */

ဒီတော့ :is သုံးရင် သတိထားရပါတယ် weight မတူတဲ့ကောင်တွေကို grouping လုပ်လိုက်ရင် weight အမြင့်ဆုံးကောင်နဲ့ပဲ တွက်သွားမှာဖြစ်ပါတယ်။ အောက်ကနမူနာကိုကြည့်ပါ :is သုံးပြီး grouping လုပ်တာထက် အရင်တုန်းကရေးသနည်းပဲ ရေးလိုက်တာက specificity ပြဿနာကိုငြိမ်းစေမှာပါ။

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

:where ကတော့ specificity လုံးဝမရှိပါဘူး

align-content Property

အရင်တုန်းက CSS မရေးဖူးတဲ့သူတွေ center ထားဖို့ တိုင်ပတ်ခဲ့ကြဖူးမှာပါ။ အခုကတော့ ဒီ property ရှိသွားပြီဖြစ်လို့ flex, grid, position တစ်ခုမှမသုံးဘဲနဲ့ center ပို့တဲ့ကိစ္စက တော်တော်လွယ်သွားပါပြီ။

ဒါတွေကတော့ modern CSS features တွေထဲက အနည်းငယ်ကို ဖော်ပြပေးခဲ့တာပဲဖြစ်ပါတယ်။ ပိုပြီးတော့ သိချင်ရင်တော့ အောက်မှာ ဆက်လေ့လာလို့ရပါတယ်။

What You Need to Know about Modern CSS (2024 Edition)Frontend Masters Blog