Container Queries

Responsive web design ဖန်တီးတဲ့အခါမှာ Page-level design တွေ Macro layouts တွေတင်မဟုတ်တော့ဘဲနဲ့ Micro layouts တွေကိုပါ ဖန်းတီးအသုံးပြုလာကြပါတယ်။ ဆိုလိုတာကတော့ Media queries တွေနဲ့တင်မဟုတ်တော့ဘဲနဲ့ container ရဲ့ ပြောင်းလဲမှုပေါ်မှာမူတည်ပြီးတော့ container ရဲ့ children layout တွေကိုပြောင်းလဲချင်တဲ့အခါမှာ container queries တွေကို အသုံးပြုဖို့အတွက် ဒီနေ့ခေတ် modern css မှာအဆင်ပြေလာပါတယ်။ Container query အမျိုးအစား နှစ်မျိုးရှိပါတယ်

• container size query

• container style query

container size query ဆိုတာကတော့ container ရဲ့ size အပြောင်းအလဲပေါ်မှာမူတည်တာဖြစ်ပြီးတော့

container style query ဆိုတာကတော့ container ရဲ့ style အပြောင်းအလဲပေါ်မှာမူတည်ပါတယ်

Container Queries သုံးတော့မယ်ဆိုရင် သိထားဖို့လိုတဲ့ဟာ နှစ်ခုရှိတယ်

• container-name

• container-type

container-name ကတော့ ထည့်ပေးချင်လည်းရတယ် မထည့်လည်းရတယ်

အဓိကကတော့ ဘယ် container လဲဆိုတာကို ရည်ညွှန်းဖို့ဖြစ်တယ်

ထည့်သုံးဖို့ပဲ recommend လုပ်တယ် ဘာကြောင့်လဲဆိုတော့ ပိုပြီးရှင်းရှင်းလင်းလင်းဖြစ်စေဖို့ပါ။

container-type ကတော့ သုံးမျိုးရှိတယ်

• size

• inline-size

• normal

size ကတော့ inline နဲ့ block နှစ်ခုစလုံးပါတယ်

inline-size ကတော့ width တန်ဖိုးနဲ့သုံးဖို့ပေါ့

normal ကတော့ style query အတွက်ပဲဖြစ်တယ်

size မှာဆိုရင် query လုပ်လို့ရတာတွေက အောက်ကကောင်တွေကို query လုပ်နိုင်တယ်

ဆိုလိုတာက query လုပ်လို့ရတာက ဒါတွေပဲဆိုတာမျိုး limit လုပ်ထားတယ်ပေါ့

width, height, inline-size, block-size, aspect-ratio, နဲ့ orientation

ဥပမာ

@container (orientation: landscape) {
  /* styles applied to descendants of this size container */
}

.sizeContainer {
  container-type: size;
}

inline-size ကတော့ ရှင်းပါတယ် width နဲ့ပဲ query လုပ်လိုက်တာပဲ

form {
  container-type: inline-size;
}

@container (10em <= width <= 20em) {
  /* styles */
}

normal ကတော့ style တွေကို query လုပ်ဖို့အတွက်ပဲ

@container style(color: green) and style(background-color: transparent),
    not style(background-color: red),
    style(--themeBackground),
    style(--themeColor: blue) or style(--themeColor: purple),
    (max-width: 100vw) and style(max-width: 600px) {
  /* <stylesheet> */
}

Shorthand ရေးတဲ့ပုံစံကတော့ container-name / container-type

.post {
  container: sidebar / inline-size;
}

Container queries units တွေလည်း သိထားရမယ်

• cqw: 1% of a query container's width

• cqh: 1% of a query container's height

• cqi: 1% of a query container's inline size

• cqb: 1% of a query container's block size

• cqmin: The smaller value of either cqi or cqb

• cqmax: The larger value of either cqi or cqb