> For the complete documentation index, see [llms.txt](https://channyeintun.gitbook.io/blogs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://channyeintun.gitbook.io/blogs/css/container-queries.md).

# 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`

ဥပမာ

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

.sizeContainer {
  container-type: size;
}
```

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

```css
form {
  container-type: inline-size;
}

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

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

```css
@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

```css
.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`

<br>