မင်္ဂလာပါ။
spiceworks Myanmar မှ ညီညီဇော်ပါ။ ဒီတစ်ပတ်မှာတော့ CSS At-rules ဆိုတဲ့အကြောင်းကို sharing လုပ်ပေးချင်ပါတယ်။ Css At-rules တွေက Css ဖိုင်များတွင် အထူးသတ်မှတ်ချက်များ ဖြစ် ပါတယ်။ @ သင်္ကေတဖြင့် စတင်ပြီး၊ Css ကို အတိအကျ ညွှန်ကြားရန် အသုံးပြုပါတယ်။

1. @charset
@charset ကို ဘာကြောင့် အသုံးပြုသလဲ?
@charset သည် Css ဖိုင်၏ တစ်ခုလုံးကို သတ်မှတ်ရာတွင် အသုံးပြုသည်။ ဤသို့သတ်မှတ်ခြင်းအားဖြင့် Css ဖိုင်တွင် ပါဝင်သော စာလုံးများကို browser သည် မှန်ကန်စွာ ဖတ်ရှုနိုင်မှာဖြစ်တယ်။ (ဥပမာ – မြန်မာစာ၊ ဂျပန်စာ) ပါဝင်ပါက၊ အဆိုပါစာလုံးများကို မှန်ကန်စွာ ပြသရန် @charset ကို သတ်မှတ်ရန် လိုအပ်သည်။
@charset ကို ဘယ်နေရာမှာ သုံးရမလဲ?
@charset ကို CSS File စတင်ရာတွင် @charset “UTF-8” ဆိုပြီး သတ်မှတ်ရမည်။
@charset မသတ်မှတ်ပါက၊ browser သည် အလိုအလျောက် မိမိသတ်မှတ်ပေးထားတဲ့ styleအုပ်စုကို မှန်ကန်စွာသတ်မှတ်ရန် ကြိုးစားပါသည်။ သို့သော်၊ အချို့သော browser များတွင်အဆိုပါစာလုံးများကို browser တွင် မှန်ကန်စွာ မပြသနိုင်ပါ။ ဥပမာအားဖြင့်၊ မြန်မာစာသည် အစားထိုးသည့် စာလုံးများဖြင့် ပြသနိုင်ပါသည်။ ဒါကြောင့် browser တိုင်းမှာ မိမိသတ်မှတ်ထားသည့် အတိုင်းမြင်ချင်တယ်ဆိုရင် @charset ကိုသတ်မှတ်ပေးရန်လိုအပ်ပါသည်။

2.@import
ဘာကြောင့်သုံးတာလဲ။?
Code Organization: ကြီးမားသော CSS ဖိုင်များကို အစိတ်အပိုင်းများအဖြစ် ခွဲခြား၍ စီမံခန့်ခွဲနိုင်ပါတယ်။ မသုံးဘူးဆိုရင် Performance Issues: @import ကို မသုံးခြင်းအားဖြင့် browser များသည် Css ဖိုင်များကို အလိုအလျောက် run ရတာဖြစ်တဲ့အတွက်အချိန်ကြာစေပါတယ်။
ရေးနည်းကတော့
@import url(‘styles.css’);ဖြစ်ပါတယ်။
ဤနည်းလမ်းသည် styles.css ဖိုင်ကို ယခု Css ဖိုင်ထဲသို့ ထည့်သွင်းထားခြင်းဖြစ်ပါတယ်။ ထို့အတူ တစ်ခြားသော Css file များကိုလည်း ထည့်ပြီး ရေးရပါတယ်။

3.@font-face
CSS @font-face at-rule သည် ဝဘ်စာမျက်နှာများတွင် ကိုယ်ပိုင် font များကို အသုံးပြုရန် အတွက်ဖြစ်ပါသည်။
ဘာကြောင့်သုံးတာလဲ?
Brand Identity: ကုမ္ပဏီ၏ အမှတ်တံဆိပ်ကို ဖော်ပြရန် အထောက်အကူပြုသည်။
အသုံးပြုသူ၏ စက်တွင် font မရှိပါကလည်း၊ ကိုယ်ပိုင် font ကို ဝဘ်စာမျက်နှာတွင် ပြသနိုင်ပါသည်။မသုံးရင်လည်းရပါတယ်။ browser မှာ အလိုအလျောက်ပါဝင်တဲ့ default fonts ဘဲအသုံးပြုရပါလိမ့်မယ်။ Branding Constraints: ကုမ္ပဏီ၏ အမှတ်တံဆိပ် fonts ကို ဖော်ပြရန် အခက်အခဲရှိနိုင်ပါသည်။
font-family ကို အောက်ပါအတိုင်း ရေးသားပါတယ်။

@font-face {
font-family: ‘MyCustomFont’;
src: url(‘fonts/MyCustomFont.woff2’) format(‘woff2’),
url(‘fonts/MyCustomFont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

body {
font-family: ‘MyCustomFont’, sans-serif;
}

4.@container
Layout အပေါ်မူတည်ပြီးကြား section တွေကို response ဖြစ်အောင်လုပ်ချင်တဲ့ခါအသုံးပြုပါတယ်။
ဘယ်လိုအခြေအနေမှာ သုံးတာလဲ?
Section တစ်ခု၏ အရွယ်အစားအပေါ် မူတည်၍ အခြားသော element များ၏ styles များကို ပြောင်းလဲတဲ့အခါသုံးပါတယ်။အဲ့လိုလုပ်ခြင်းအားဖြင့် အရွယ်အစားအပေါ် မူတည်၍ အလိုအလျောက် ပြောင်းလဲနိုင်စေနိုင်ပြီး Layout များကို component-level အတိုင်းအတာတွင် responsive ဖြစ်စေပါသည်။
ရေးနည်းကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

.container {
container-type: inline-size;
}

.card h2 {
font-size: 1em;
}

@container (min-width: 600px) {
.card h2 {
font-size: 2em;
}
}

ဤဥပမာတွင် .container သည် container-type: inline-size; ဖြင့် container ဖြစ်စေပြီး၊ .card h2 ၏ font-size ကို container ၏ အရွယ်အစားအပေါ် မူတည်၍ ပြောင်းလဲနိုင်သည်။

5.@counter-style
Custom List Markers: Emoji အမှတ်အသားများကို ကိုယ်ပိုင်စိတ်ကြိုက် ဖန်တီးနိုင်ရန်အတွက် အသုံးပြုပါတယ်။ Brand Identity: ကုမ္ပဏီ၏ အမှတ်တံဆိပ်ကို ဖော်ပြရန် အထောက်အကူပြုသည်။ မသုံးရင်တော့ ဘာမှမဖြစ်ပါဘူး။ ဒါပေမယ့် Limited Styling Options: များ၏ အမှတ်အသားများကို ပုံမှန် list-style-type များဖြင့်သာ ဖော်ပြရမည်ဖြစ်သည်။ Brand Inconsistency: ကုမ္ပဏီ၏ အမှတ်တံဆိပ်ကို ဖော်ပြရန် အခက်အခဲရှိနိုင်သည်။
ရေးနည်းကတော့ အောက်ပါအတိုင်းဖြစ်ပါတယ်။

ul.custom-checkmarks {
list-style-type: my-checkmark;
}

@counter-style my-checkmark {
system: cyclic;
symbols: “✔︎” “✖︎”;
suffix: ” “;
}

ဤဥပမာတွင် thumbs ဆိုသော custom counter style ကို ဖန်တီးထားပြီး၊ thumbs-up emoji ကို စာရင်းအမှတ်အသားအဖြစ် အသုံးပြုထားသည်။
https://emojiguide.org/

6. @keyframes
ဘာကြောင့်သုံးတာလဲ?
Website အသုံးပြုသူပိုစိတ်ဝင်စားအောင် website မှာ animations ထည့်တဲ့အချိန်မှာ အသုံးပြုပါတယ်။ animations ထည့်ခြင်းအားဖြင့် element များ၏ style များကို အချိန်အလိုက် ပြောင်းလဲစေပြီး၊ အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုထူးခြားစေသည်။
ရေးနည်းကတော့အောက်ပါအတိုင်းဖြစ်ပါတယ်။
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}

.button {
animation: bounce 0.6s ease infinite;
}

animation မရှိပါက ဝဘ်စာမျက်နှာသည် ပိုမိုရိုးရှင်းပြီး၊ အသုံးပြုသူရဲ့ စိတ်ဝင်စားမှုကို လျော့နည်းစေနိုင်ပါသည်။

7. @layer
ဘာကြောင့်သုံးတာလဲ?
CSS cascade ကို ပိုမိုထိန်းချုပ်နိုင်ရန် အသုံးပြုသော နည်းလမ်းတစ်ခုဖြစ်သည်။ ဒီနည်းလမ်းသည် styles များ၏ အဓိက priority ကို သတ်မှတ်နိုင်စေပြီး၊ code maintainability နှင့် collaboration အတွက် အထောက်အကူပြုပါတယ်။ Maintainability: styles များကို အုပ်စုလိုက် စီမံခန့်ခွဲခြင်းအားဖြင့် code ကို ပိုမိုဖတ်ရှုရလွယ်ကူစေပါသည်။
team members များအကြား styles များ၏ priority ကို ပိုမိုထိန်းချုပ်နိုင်ပါတယ်။
မသုံးဘူးဆိုရင် styles များ၏ cascade အစီအစဉ်ကို ထိန်းချုပ်ရန် အခက်အခဲရှိနိုင်ပါတယ်။
Maintainability Issues: styles များကို အုပ်စုလိုက် စီမံခန့်ခွဲခြင်းမရှိပါက code ကို ဖတ်ရှုရခက်ကွယ်နိုင်ပါသည်။
Collaboration Challenges: team members များအကြား styles များ၏ priority ကို ထိန်းချုပ်ရန် အခက်အခဲရှိနိုင်ပါတယ်။
1. Basic Layer Declaration
@layer theme, layout, utilities;

2. Layer with Styles
@layer utilities {
.padding-sm {
padding: 5rem;
}

.padding-lg {
padding: 8rem;
}
}

3. Layer with Import
@import “style.css” layer(utilities);

ဤဥပမာတွင် theme, layout, နှင့် utilities ဆိုသော layers များကို သတ်မှတ်ထားပါတယ်။ utilities ဆိုသော layer တွင် .padding-sm နှင့် .padding-lg ဆိုသော classes များကို သတ်မှတ်ထားပါတယ်။ @layer ကို အသုံးပြု၍ styles များကို အုပ်စုလိုက် စီမံခန့်ခွဲနိုင်ပါတယ်။ style.css ဆိုသော stylesheet ကို utilities layer ထဲသို့ import လုပ်ထားပါတယ် @import နှင့် layer() function ကို ပေါင်းစပ်အသုံးပြု၍ imported styles များ၏ priority ကို ထိန်းချုပ်နိုင်ပါသည်။

8. @media
ဘာကြောင့်သုံးတာလဲ?
Responsive Design: device အမျိုးမျိုးအတွက် အဆင်ပြေသော layout များကို ဖန်တီးနိုင်ပါသည်။
User Experience (UX): screen size နှင့် orientation အရ အဆင်ပြေသော အတွေ့အကြုံကို ပေးနိုင်ပါသည်။
Performance Optimization: mobile devices များအတွက် အလေးချိန်နည်းသော styles များကိုသာ အသုံးပြု၍ performance ကို မြှင့်တင်နိုင်ပါသည်။
မသုံးဘူးဆိုရင် screen size နှင့် orientation အရ layout မတူညီခြင်းကြောင့် design consistency ကို ထိခိုက်စေနိုင်ပါသည်။
Performance Issues: mobile devices များအတွက် အလေးချိန်များသော styles များကို အသုံးပြုခြင်းကြောင့် performance ကို လျော့နည်းစေနိုင်ပါသည်။
ဒီအပတ် ကျွန်တော် sharing လုပ်ပေးတာ ဒီမှာ ရပ်ပါရစေခင်ဗျ။