CSS In a Nutshell 🧠

Website တွေဟာ စာတွေ၊ ပုံတွေ၊ အချက်အလက်တွေကို သမရိုးကျ ဖော်ပြပေးရုံနဲ့ မလုံလောက်ပါဘူး။ ကြည့်ရှုသူတွေကို စွဲဆောင်နိုင်မယ့် အသွင်အပြင်ဒီဇိုင်းပုံစံရှိဖို့လည်း လိုအပ်ပါတယ်။ အဲဒီလို Webpage တခုရဲ့ ဒီဇိုင်းအသွင်အပြင်ကို စိတ်ကြိုက်ဖန်တီးပုံဖော်နိုင်ဖို့ CSS ကို အသုံးပြုရပါတယ်။

CSS က ဘာလဲ။

--

CSS က Web Document တွေရဲ့ Content နဲ့ Presentation ကို သီးခြားစီ ခွဲထုတ် ပေးလိုက်တာဖြစ်ပါတယ်။ HTML က Webpage တခုရဲ့ ဖွဲ့စည်းတည်ဆောက်ပုံ (Structure) အပိုင်းကို တာဝန်ယူပြီး CSS က ဒီဇိုင်းအသွင်အပြင် (Style) အပိုင်းကို တာဝန်ယူပါတယ်။ ဥပမာ၊ Webpage တခုရဲ့ Color Scheme ကို ပြောင်းလဲလိုတဲ့အခါ CSS ဖိုင်ထဲမှာ ဝင်ရောက်ပြောင်းလဲလိုက်ရုံပါပဲ။

CSS Syntax

--

CSS Rule တခုမှာ Selector တခုနဲ့ Declaration သတ်မှတ်ချက်တွေ ပါဝင်ပါတယ်။ Selector က ပြောင်းလဲလိုတဲ့ HTML Element ကို Select လုပ်ပေးတာဖြစ်ပြီး Declaration တွေကတော့ ပြောင်းလဲလိုတဲ့ ဒီဇိုင်းသတ်မှတ်ချက်တွေဖြစ်ပါတယ်။ Declaration တခုကို Property: Value အတွဲပုံစံနဲ့ သတ်မှတ်ပေးရပါတယ်။ အရောင်၊ တည်နေရာ၊ ဖောင့်အရွယ်အစား စသည်ဖြင့် သီးခြားရည်ရွယ်ချက်ကိုယ်စီနဲ့ ခေါ်ယူအသုံးပြုနိုင်တဲ့ Property တွေ အများအပြားရှိပါတယ်။

ဥပမာ၊ <p> Element အားလုံးကို အနီရောင် သုံးပြီး ပြောင်းလဲဖော်ပြလိုတဲ့အခါ p { color: blue; } လို့ ရေးသားရပါမယ်။ ဒီနမူနာမှာ pက Selector ဖြစ်ပြီး color: blue ကတော့ Declaration သတ်မှတ်ချက်တခုဖြစ်ပါတယ်။

Cascading In CSS

--

CSS ကို အပြည့်အဝ နားလည်ဖို့ Cascading သဘောသဘာဝကို နားလည်ဖို့ လိုအပ်ပါတယ်။

Element တခုပေါ်မှာ သတ်မှတ်လိုက်တဲ့ CSS Rule တွေ အချင်းချင်း ရှေ့နောက်မညီဘဲ Conflict ဖြစ်သွားတဲ့အခါ Browser က ဦးစားပေးရမယ့် Rule တခုကို ဆုံးဖြတ်ပေးပါတယ်။ အဲဒီလို ဆုံးဖြတ်ပေးရတဲ့အခါ Rule တွေရဲ့ Styles Hierarchy နဲ့ Specificity ကို ကြည့်ပြီး ဆုံးဖြတ်ပေးတာဖြစ်ပါတယ်။ Style Hierarchy ပိုမြင့်တဲ့ကောင်၊ Specificity ပိုမြင့်တဲ့ကောင်ကိုသာ ဦးစားပေးဖော်ပြသွားမှာဖြစ်ပါတယ်။ ဥပမာ၊ Class Selector အသုံးပြုတာထက် Id Selector အသုံးပြုထားတဲ့ Rule တွေက Cascading သဘောအရ ပိုပြီး ဦးစားပေးခံရမှာဖြစ်ပါတယ်။

Powerful Layout များ

--

ဟိုးအရင်က CSS ဟာ ရိုးရှင်းတဲ့ ဒီဇိုင်းအသွင်အပြင်တွေကိုသာ ဖန်းတီပေးနိုင်ခဲ့တာပါ။ ရှုပ်ထွေးတဲ့ ဒီဇိုင်းအသွင်အပြင်တွေ ရရှိဖို့အတွက် Developer တွေဟာ Float တို့၊ Table တို့ကို အသုံးပြုခဲ့ရပါတယ်။ အခုအချိန်မှာတော့ Flex နဲ့ Grid ဆိုတဲ့ Layout နှစ်ခုကြောင့် Responsive Design တွေ၊ ရှုပ်ထွေးတဲ့ ဒီဇိုင်းအသွင်အပြင်တွေကို လွယ်ကူစွာ လုပ်ဆောင်နိုင်သွားပါတယ်။ ဥပမာ၊ Flex Grid Layout တွေနဲ့အတူ Media Query တွေကို လိုအပ်သလို အသုံးပြုပြီး မတူညီတဲ့ Screen အရွယ်အစားတွေ၊ Resolution တွေအတွက် လိုက်ရောညီထွေရှိတဲ့ ဒီဇိုင်းသွင်ပြင်တွေကို ဖန်တီးနိုင်သွားတာဖြစ်ပါတယ်။

CSS Animation များ

--

CSS က Element တွေရဲ့ ပြုမှုလှုပ်ရှားပုံကို Javascript အသုံးပြုဖို့ မလိုအပ်ဘဲ လွယ်လွယ်ကူကူ ဖန်တီးလို့ရအောင် Animation Feature တွေကို ထည့်သွင်းပေးခဲ့ပါတယ်။ CSS Animation တွေဟာ အသုံးပြုသူတွေအတွက် စိတ်ကျေနပ်စရာ အတွေ့အကြုံတွေကို ဖန်တီးပေးနိုင်ပါတယ်။ ဥပမာ၊ @keyframe ကို သုံးပြီး Animation Stage တွေကို သတ်မှတ်ပေးနိုင်သလို Transition Property ကို အသုံးပြုပြီး Element တွေရဲ့ State တွေကို ထိန်းချုပ်ပြောင်းလဲနိုင်မှာဖြစ်ပါတယ်။

CSS Variable များ

--

CSS Variable တွေဟာ CSS ဖိုင်တခုထဲမှာ ထပ်ခါထပ်ခါ ပြန်ပြီးအသုံးပြုနေရတဲ့ တချို့ Property တန်ဖိုးတွေကို Variable အဖြစ် သတ်မှတ်ပြီး လိုအပ်သလို ပြန်လည်ခေါ်ယူ သုံးစွဲလို့ရစေမှာဖြစ်ပါတယ်။ CSS Variable တွေဟာ ကုဒ်တွေကို ပိုပြီး ရှင်လင်းသွားစေသလို Maintain လုပ်ရတဲ့အခါမှာလည်း ပိုမို လွယ်ကူသွားစေပါတယ်။ ဥပမာ၊ Webpage တခုရဲ့ Primary Color ကို Variable အဖြစ်ကြေညာပြီး ခေါ်ယူသုံးစွဲခြင်းအားဖြင့် နောင်တချိန် ပြန်လည်ပြင်ဆင်လိုတဲ့အခါ လွယ်ကူလွယ်ကူ ပြင်ဆင်နိုင်ပြီး မလိုအပ်တဲ့ Bug တွေကိုလည်း ဖယ်ရှားနိုင်မှာ ဖြစ်ပါတယ်။