အားလုံးပဲ မင်္ဂလာပါ။
ညီမကတော့ Spiceworks Myanmar မှာ Web Designer အဖြစ် တာဝန်ယူလုပ်ကိုင်နေတဲ့ နီလာဌေး ဖြစ်ပါတယ်။ အချိန်ပြောင်းလဲလာတာနှင့်အမျှ နည်းပညာတွေကလည်း သူ့ဟာနှင့်သူ updates တွေရှိလာကြပါတယ်။ အဲ့ဒီထဲကမှ ဒီနေ့မှာတော့ web pages တွေကို အလှဆင်ပေးတဲ့ CSS ရဲ့ နောက်ဆုံးထွက်ရှိထားတဲ့ CSS4 features တွေအကြောင်းကို ညီမလေ့လာထားသလောက် ပြန်လည်ဝေမျှပေးချင်ပါတယ်။ လက်ရှိမှာ browsers အားလုံးက CSS ကို CSS3 ထိ အသုံးပြုနိုင်တယ်။ CSS4 မှာ ထည့်မယ်လို့ပြောထားတဲ့ features တွေကလည်း အခုထိ မရရှိသေးပါဘူး။ ဘယ်ချိန်မှာ ရနိုင်မယ်လို့လည်း မပြောထားသေးတဲ့အတွက် အသုံးပြုခွင့်ရတဲ့အခါမှာ အဆင်ပြေပြေသုံးလို့ရအောင် ကြိုပြီးလေ့လာထားရင် ပိုပြီးကောင်းပါတယ်။
CSS4 features တွေအကြောင်းမပြောခင် CSS ရဲ့ အကြောင်းလေးကို အနည်းငယ် ပြောပြပေးချင်ပါတယ်။ CSS အကြောင်းသိမယ်ဆိုရင် CSS ရဲ့ နည်းပညာပိုင်းဆိုင်ရာအဆင့်ကိုလည်း သိမှာဖြစ်တဲ့အတွက် coding ရေးရာမှာလည်း အဆင်ပြေမယ်လို့ထင်ပါတယ်။ CSS ကို စတင်လေ့လာနေသူတွေအတွက် အကျိုးရှိမယ်လို့လည်း မျှော်လင့်ပါတယ်။
What is CSS?
CSS stands for Cascading Style Sheets. Cascading means a waterfall that flows over the stairs in English.
ကိုယ်အသုံးပြုထားတဲ့ styles တွေကို အဆင့်လိုက် သတ်မှတ်ပေးရပါတယ်။ ဥပမာအားဖြင့် web page တစ်ခုလုံးအသုံးပြုမယ့် styles တွေကို အရင်သတ်မှတ်တယ်။ ပြီးရင် blocks တွေ၊ items တွေ၊ ကြီးတဲ့အပိုင်းတွေမှ သေးငယ်တဲ့အပိုင်းတွေအထိ အဆင့်လိုက် သတ်မှတ်ပေးရပါတယ်။ အခုလက်ရှိ CSS က style အတွက်သာမက animation တွေအထိပါ အသုံးပြုနိုင်ပါတယ်။ တဖြည်းဖြည်းနဲ့ CSS ရဲ့ လုပ်ဆောင်ချက်တွေက ဆက်လက်ပြီး တိုးတက်နေဦးမယ်လို့ ထင်ပါတယ်။
When was CSS developed?
ပထမဆုံး CSS ကို 1994 ခုနှစ်၊ Switzerland မှာ developed လုပ်ခဲ့တာပဲဖြစ်ပါတယ်။ အဲ့ဒီအချိန်ထိ web pages တွေကို HTML ဖြင့်သာ ဖွဲ့စည်းပြီး ရေးခဲ့ကြတယ်။ CSS ကို developed လုပ်ပြီးတဲ့အခါမှာတော့ HTML ကို အလှဆင်နိုင်လာပြီး color တွေ၊ size တွေ သတ်မှတ်ဖို့ ဖြစ်လာတယ်။
Who Determines CSS Levels?
CSS ကို W3C လို့ခေါ်တဲ့ အဖွဲ့အစည်းတစ်ခုကနေမှ သတ်မှတ်ပေးခဲ့တာပဲဖြစ်ပါတယ်။
About CSS version
CSS1 ကို 1996 နှစ်မှာ W3C မှ အကြံပြုပေးခဲ့တယ်။ Level 2 အထိ CSS2 လို့ခေါ်ပြီး CSS3 မှစပြီး module တစ်ခုစီမှာ ကိုယ်ပိုင်အဆင့်တွေ ရှိလာတယ်။ တချို့ properties တွေက CSS3 တွေ ဖြစ်တယ်။ Module တစ်ခုစီရဲ့ level နဲ့ properties တွေကို သတ်မှတ်ပေးတယ်။ ဥပမာအားဖြင့် animation properties တွေက level 1 ပဲ ရှိပါသေးတယ်။ အရောင်တွေကို RGBA နဲ့ သတ်မှတ်ထားလျှင် CSS3 ဖြစ်တယ်။ Level ကို ကြည့်ပြီး CSS1 လား၊ CSS2 လား၊ CSS3 လား ခွဲနိုင်တယ်။
CSS4
CSS4 လို့မရှိသေးပေမယ့်လည်း module တစ်ခုစီနဲ့ properties တွေက level 4 သို့မဟုတ် အထက်ကို ရောက်နိုင်တယ်လို့ ကြေညာထားတယ်။ CSS3 ပြီးနောက် module နဲ့ properties တွေက အဆင့်သတ်မှတ်ထားတဲ့အတွက်ကြောင့် ရှိပြီးသား properties တွေကို update လုပ်နေမှာမဟုတ်ပဲ properties အသစ်တွေသာ ထပ်ထည့်သွားမယ်လို့လည်း ပြောထားပါတယ်။
Properties to CSS4
ဒီ properties တွေက W3C မှ ထုတ်ထားတာပဲရှိသေးပြီး browsers တွေနဲ့ စမ်းသပ်မှု မပြုလုပ်ရသေးပါဘူး။ အဲ့ဒီအတွက် browser supporting ရမရ စမ်းကြည့်စေချင်ပါတယ်။ တချို့ properties တွေက browser supporting ရပေမယ့် တချို့ကတော့ မရရှိသေးပါဘူး။
1. Hexadecimal color codes
CSS3 မှာ အရောင်တွေကို rgba() တွေနဲ့ အသုံးပြုခဲ့ကြတယ်။ အခု CSS4 မှာတော့ hexadecimal codes ဖြင့် ခွင့်ပြုထားတယ်။
/*CSS3*/
section{
background-color: rgba(0, 0, 0, 0.5);
}
/*CSS4*/
section{
background-color: #00000080;
}
2. Variables only with CSS
CSS မှာ variables သုံးခြင်းက code အရေအတွက်ကိုလည်း လျှော့ချပေးပြီး နောင်ပြင်တဲ့အခါမှာ ပိုပြီးလွယ်ကူစေပါတယ်။ အရင်က IE browser မှာ supporting မပေးတဲ့အတွက် SASS ကိုသာအသုံးပြုခဲ့ကြပြီး အခုနောက်ပိုင်း IE မရှိတော့တဲ့အတွက် အဆင်ပြေပါတယ်။
/*declare variable*/
:root{
--main-color: #FFFFFF;
--text-color: #000000;
--text-size: 20px;
}
/*call a variable*/
p{
font-size: var(--text-size);
color: var(--text-color);
}
3. Types of selectors
CSS မှာ selectors များစွာရှိပြီး သူ့နေရာနှင့်သူ မှန်မှန်ကန်ကန်အသုံးပြုမယ်ဆိုရင် code အရေအတွက်ကိုလည်း လျှော့ချပေးပါတယ်။ Class name သုံးလို့မရတဲ့ wordpress လို website မျိုးမှာဆို သုံးဖို့ ပိုပြီးအဆင်ပြေပါတယ်။
1. :not(s1,s2)
section :not(h1,span){
color: var(--text-color);
}
2. :valid and :invalid
input[type=email]:invalid{
border: 2px solid red;
}
input[type=email]:valid{
border: 2px solid green;
}
3. :has
h2:has(+span){
color: red;
}
4. :matches
:matches(header, footer) p{
color: green;
}
CSS ရဲ့ လုပ်ဆောင်ချက်တွေက ပိုမိုများပြားလာပြီး တိုးတက်လာတာဖြစ်တဲ့အတွက် web creators တွေအနေဖြင့် ပုံမှန်သုံးနေကျ properties တွေအစား အသစ်အသစ်သော properties တွေကို စမ်းသုံးကြည့်ဖို့ အကြံပေးချင်ပါတယ်။ ဒီနေ့တော့ ဒီလောက်နဲ့ပဲ အဆုံးသတ်လိုက်ပါတော့မယ်။ နောက်တစ်ခါမှာ ကျန်ရှိနေသေးတဲ့ CSS4 ရဲ့ modules အသစ်တွေနဲ့ ပြန်လာခဲ့ပါမယ်။ အဆုံးထိ ဖတ်ရှုပေးတဲ့အတွက်လည်း ကျေးဇူးအများကြီးတင်ပါတယ်။
