အဘယ်အရာကိုသူတို့ဖြစ်ကြပြီးဘာလို့သူတို့ကိုသင်အသုံးပြုသင့်ပါတယ်
လည်းတစ်ချိန်ချိန်မှာအဖြစ်သို့မဟုတ်လူသိများ CSS ကိုရောင်းချသူရှေ့ဆက်, CSS ကို browser ကိုရှေ့ဆက်, browser ကိုချမှတ်သူများအဘို့ထောက်ခံမှုထည့်သွင်းဖို့အတှကျနညျးလမျးများမှာ အသစ်က CSS ကို features တွေ သူတို့အား features တွေအပြည့်အဝ browser အားလုံးအတွက်ထောက်ခံနေကြသည်မီ။ ဒါဟာဘရောက်ဇာကိုထုတ်လုပ်သူကဤအသစ်က CSS ကို features တွေအကောင်အထည်ဖော်လိမ့်မည်အတိအကျဘယ်လိုအဆုံးအဖြတ်သည်အဘယ်မှာရှိစမ်းသပ်ခြင်းများနှင့်လက်တွေ့စမ်းသပ်ချက်ကာလတစ်ခုစီအတွင်းမှာအမှုကိုပြုနိုင်ပါသည်။ ဤရွေ့ကားရှေ့ဆက်၏မြင့်တက်နှင့်အတူအလွန်ရေပန်းစားဖြစ်လာခဲ့သည် CSS3 လွန်ခဲ့တဲ့နှစ်အနည်းငယ်။
CCS3 ပထမဦးဆုံးမိတ်ဆက်ခံရသောအခါစိတ်လှုပ်ရှားဂုဏ်သတ္တိများ၏နံပါတ်ကွဲပြားခြားနားသောအချိန်များတွင်ကွဲပြားခြားနားသော browser များထိမှန်လာတယ်။ ဥပမာ, Webkit-powered browser များ (Safari နှင့် Chrome) အသွင်ပြောင်းခြင်းနှင့်အကူးအပြောင်းလိုကာတွန်းစတိုင်ဂုဏ်သတ္တိများအချို့ကိုမိတ်ဆက်ပေးဖို့ပထမဦးဆုံးသူတွေဖြစ်တယ်။ ရောင်းချသူ prefixed ဂုဏ်သတ္တိများကို အသုံးပြု. အသုံးပြုပုံကို web ဒီဇိုင်နာများကသူတို့အလုပ်အတွက်သူများ features အသစ်တွေကိုသုံးပါနှင့်သူတို့အစားကိုတက်ဖမ်းရန်သည်အခြားဘရောက်ဇာကိုထုတ်လုပ်သူအဘို့စောင့်ဆိုင်းရန်ရှိခြင်း၏, ချက်ချင်းသူတို့ကိုထောက်ခံသော browser များပေါ်တွင်တွေ့မြင်ရှိသည်ဖို့နိုငျခဲ့ကွ!
ဒါကြောင့်တစ်ဦး Front-အဆုံးကို web developer များ၏ရှုထောင့်ကနေ, ဘရောက်ဇာကိုရှေ့ဆက်အဆိုပါ browser များသောသူတို့ကိုစတိုင်များကိုထောကျပံ့မညျဖွစျကွောငျး သိ. နှစ်သိမ့်ရှိခြင်းစဉ် site တစ်ခုပေါ်သို့အသစ်က CSS ကို features တွေထပ်ထည့်ဖို့အသုံးပြုကြပါတယ်။ ကွဲပြားခြားနားသောဘရောက်ဇာကိုထုတ်လုပ်သူအနည်းငယ်ကွဲပြားခြားနားတဲ့နည်းလမ်းတွေတွင်သို့မဟုတ်တစ်ဦးကွဲပြားခြားနား syntax နှင့်အတူဂုဏ်သတ္တိများအကောင်အထည်ဖော်သည့်အခါဤသည်အထူးသဖြင့်အထောက်အကူဖြစ်စေနိုင်ပါတယ်။
(ကကွဲပြားခြားနားသောဘရောက်ဇာမှတိကျတဲ့တစ်ခုချင်းစီသည်အရာ၏) သင်အသုံးပြုနိုငျသော CSS ကို browser ကိုရှေ့ဆက်နေသောခေါင်းစဉ်:
- အန်းဒရွိုက်: -webkit-
- chrome: -webkit-
- Firefox ကို: -moz-
- က Internet Explorer: -ms-
- iOS ကို: -webkit-
- အော်ပရာ: -o-
- Safari က: -webkit-
အများဆုံးကိစ္စများတွင်တစ်ဦးအမှတ်တံဆိပ်အသစ်က CSS ကိုစတိုင်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုရန်, သင်စံ CSS ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကို ယူ. တစ်ဦးချင်းစီကို browser များအတွက်ရှေ့ဆက်ထည့်ပါ။ ပုံမှန် CSS ကိုပိုင်ဆိုင်မှုနောက်ဆုံးရောက်ရလိမ့်မည်နေစဉ် prefixed ဗားရှင်းကိုအမြဲ (သင်ကြိုက်တတ်တဲ့မဆိုနိုင်ရန်အတွက်) ပထမဦးဆုံးလာလိမ့်မယ်။ သင်သည်သင်၏စာရွက်စာတမ်းတစ်ခု CSS3 အကူးအပြောင်းကိုထည့်သွင်းချင်တယ်ဆိုရင်အောက်မှာပြထားတဲ့အတိုင်းဥပမာ, သငျသညျအကူးအပြောင်း property ကိုသုံးလိမ့်မယ်:
-webkit- အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း,
-moz- အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း,
-ms- အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း,
-o- အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း,
အကူးအပြောင်း: အားလုံး 4s လွယ်ကူခြင်း,
မှတ်ချက်: ကိုသတိရပါအချို့သော browser များအခြားသူတွေထက်သေချာသောဂုဏ်သတ္တိများများအတွက်ကွဲပြားခြားနားသော syntax ရှိသည်, ဒါကြောင့်အိမ်ခြံမြေ၏ Browser-prefixed ဗားရှင်းစံအိမ်ခြံမြေအဖြစ်အတိအကျအတူတူပင်ဖြစ်ပါသည်ဟုမယူဆကြဘူး။ ဥပမာအားဖြင့်, တစ်ဦးကိုဖန်တီးရန် CSS ကို gradient ကို , သင် linear-gradient ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုပါ။ Chrome နဲ့ Safari က၏အစောပိုင်းဗားရှင်း prefixed ပိုင်ဆိုင်မှု -webkit-gradient ကိုအသုံးပွုရစဉ်က Firefox, Opera က, နှင့် Chrome နဲ့ Safari ၏ခေတ်သစ်ဗားရှင်းသင့်လျော်သောရှေ့ဆက်နဲ့ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုအသုံးပြုပါ။ ဒါ့အပြင် Firefox ကိုစံမြားကိုထက်ကွဲပြားခြားနားသောတန်ဖိုးများကိုအသုံးပြုသည်။
တစ်ဘရောက်ဇာကိုစိုးမိုးရေးကိုထောကျပံ့မရသောအခါ, ထိုသို့တဦးတည်းကိုအသုံးပြုဖို့ပါလိမ့်မယ်ဒါကြောင့်သင်ကအမြဲ CSS ကိုပိုင်ဆိုင်မှု၏ပုံမှန်မဟုတ်သော prefixed ဗားရှင်းနှင့်သင်၏ကြေငြာအဆုံးသတ်သောအကြောင်းပြချက်ဖြစ်ပါတယ်။ CSS ကိုဖတ်ပါဘယ်လိုသတိရပါ။ တိကျသောဒီတော့တစ်ဘရောက်ဇာကိုစည်းကမ်းများ၏ရောင်းချသူဗားရှင်းကိုဖတ်ရှုကြောင့်သာမန်တဦးတည်းကိုထောကျပံ့မပါဘူးဆိုရင်သုံးလိုအတူတူပင်ဖြစ်ပါသည်, သို့သော်မတစ်ချိန်ကတစ်ခုကိုအတူရောင်းချသူဗားရှင်းထပ်ရေးဦးမည်ဆိုပါကအဆိုပါနောက်ပိုင်းတွင်စည်းမျဉ်းစည်းကမ်းတွေကိုအစောပိုင်းကသူတွေကိုထက် ကျော်လွန်. ယူ အမှန်တကယ် CSS ကိုအစိုးရ၏။
vendor ပုဒ်တစ်ဦးကို Hack မများမှာ
ရောင်းချသူရှေ့ဆက်ပထမဦးဆုံးမိတ်ဆက်ကြသောအခါသူတို့တစ်တွေ hack ကသို့မဟုတ်နောက်ကျောကွဲပြားခြားနားသော browser များ (မက်ဆေ့ခ်ျက "ဒီ site ကို IE ကိုအကောင်းဆုံးရှုမြင်" အဲဒီသတိရပါ) ကူညီပံ့ပိုးရန် website တစ်ခုဖွင့်ကုဒ် forking ၏မှောင်မိုက်ရက်တစ်ပြောင်းကုန်ပြီဖြစ်လျှင်, များစွာသောကို web ပညာရှင်များအံ့ဩကြ၏။ CSS ကိုသို့သော်ရှေ့ဆက် Hack မဟုတ် vendors, သင်ကသင်၏အလုပ်အတွက်သူတို့ကိုအသုံးပြုခြင်းအကြောင်းမျှသံသယရှိသင့်ပါတယ်။
တစ်ဦးက CSS ကို hack ကမှန်ကန်စွာအလုပ်လုပ်အခြားပိုင်ဆိုင်မှုအရနိုင်ရန်အတွက်အခြားဒြပ်စင်သို့မဟုတ်ပိုင်ဆိုင်မှုများ၏အကောင်အထည်ဖော်မှုအတွက်အပြစ်အနာအဆာယူအမြတ်ထုတ်။ ဥပမာအားဖြင့်, box ကိုမော်ဒယ် hack က၏ဆန်းစစ်မှုထဲမှာအားနည်းချက်တွေကိုအသုံးချပြီး အသံမိသားစုပိုင်ဆိုင်မှု သို့မဟုတ် browser များဘယ်ဘက်မျဉ်းစောင်း (\) ခွဲခြားစိတ်ဖြာမှုဘယ်လောက်၌တည်၏။ သို့သော်ဤ hack က Internet Explorer 5.5 box ကိုမော်ဒယ်ကိုင်တွယ်နှင့်မည်သို့ကို Netscape ကအနက်နှင့်စကားသံကိုမိသားစုစတိုင်နဲ့ဘာမှရှိပုံကိုအကြားခြားနားချက်များ၏ပြဿနာကိုဖြေရှင်းဖို့အသုံးပြုခဲ့ကြသည်။ ကျေးဇူးတင်စရာအဲဒီနှစျခုခေတ်မမီတော့ browser များကျွန်တော်ဒီရက်နှင့်အတူစိုးရိမ်ပူပန်မှုများကိုကိုယျ့ကိုယျကိုမရှိဘူးသူများဖြစ်ကြ၏။
ကသတ်မှတ်ချက်တစ်ချိန်တည်းမှာ browser ကိုထုတ်လုပ်သူအခြားအရာအားလုံးခြိုးဖောကျမရှိဘဲကွဲပြားခြားနားသောလမ်းအတွက်အိမ်ခြံမြေအကောင်အထည်ဖေါ်ခွင့်ပြုနေချိန်တွင်အိမ်ခြံမြေ, အကောင်အထည်ဖော်မည်အကြောင်းတည်းကိုဘယ်လိုအဘို့စည်းမျဉ်းစည်းကမ်းတွေကို set up ခွင့်ပြုဘာလို့လဲဆိုတော့တစ်ဦးကရောင်းချသူရှေ့ဆက်မယ့် hack ကမဟုတ်ပါဘူး။ ထို့ပြင်ဤရှေ့ဆက်နောက်ဆုံးမှာသတ်မှတ်ချက်၏အစိတ်အပိုင်းတစ်ခုဖြစ်လိမ့်မည်ဟု CSS ကိုဂုဏ်သတ္တိများနှင့်အတူအလုပ်လုပ်ကိုင်နေကြသည်။ ကျနော်တို့ရိုးရှင်းစွာစောစောပိုင်ဆိုင်မှုရယူနိုင်ရန်အတွက်အချို့ code များထည့်သွင်းထားပါသည်။ ဤသည်ကိုသင်ပုံမှန်မဟုတ်သော prefix ပိုင်ဆိုင်မှုနှင့်အတူ CSS ကိုအုပ်စိုးမှုကိုအဆုံးသတ်အဘယ်ကြောင့်အခြားအကြောင်းပြချက်ဖြစ်ပါတယ်။ အပြည့်အဝ browser ကိုထောက်ခံမှုအောင်မြင်နေသည်တစ်ချိန်ကအဲဒီလမ်းကိုသင် prefixed ဗားရှင်း drop နိုင်ပါတယ်။
တစ်ခြို့သောအင်္ဂါရပ်များအတွက်ဘရောက်ဇာကိုထောက်ခံမှုကဘာလဲဆိုတာသိရန်လိုပါသလား? ဝက်ဘ်ဆိုက် CanIUse.com ဤအချက်အလက်စုဆောင်းခြင်းနှင့်သင်လက်ရှိအင်္ဂါရပ်ကိုထောက်ပံ့ပေးသော browser များနှင့်သော browser များ၏ဗားရှင်း, အသိပေးများအတွက်အံ့သြစရာအရင်းအမြစ်ဖြစ်ပါတယ်။
vendor ပုဒ်နှောင့်အယှက်သို့သော်ယာယီများမှာ
ဟုတ်ပါတယ်, အဲဒါကိုအားလုံး browser များအတွက်အလုပ်လုပ်ရရန်ဂုဏ်သတ္တိများ 2-5 ကြိမ်ရေးသားဖို့ရှိသည်ဖို့နှောင့်အယှက်များနှင့်ထပ်တလဲလဲခံစားရလိမ့်မယ်, ဒါပေမယ့်သူကယာယီအခွအေနေပါတယ်။ ဥပမာအားဖြင့်, ယ့်လွန်ခဲ့တဲ့နှစ်အနည်းငယ်ကသင်သည်ရေးသားဖို့ခဲ့တဲ့ box ကိုအပေါ်တစ်ဦး rounded ထောင့်တင်ထားရန်:
-moz-border-အချင်းဝက်: 10px 5px;
-webkit-border-top-left-အချင်းဝက်: 10px;
-webkit-border-top-Right-အချင်းဝက်: 5px;
-webkit-border-Bottom-Right-အချင်းဝက်: 10px;
-webkit-border-Bottom-လက်ဝဲ-အချင်းဝက်: 5px;
နယ်စပ်-အချင်းဝက်: 10px 5px;
ယခုမူကား browser များအပြည့်အဝဒီ feature ကိုထောကျပံ့ဖို့လာကြပြီ, သင်အမှန်တကယ်သာစံဗားရှင်းကိုလို:
နယ်စပ်-အချင်းဝက်: 10px 5px;
Chrome ဗားရှင်း 5.0 ကတည်းက CSS3 property ကထောက်ခံထားပြီး, Firefox ကိုဗားရှင်း 4.0 ထဲမှာထည့်သွင်း, Safari 2.1 အတွက် 4.0 အတွက်ကို iOS, 10.5 အတွက်အော်ပရာ, 5.0 ထဲမှာထည့်သွင်း, Android နှင့်။ တောင်မှက Internet Explorer 9 ရှေ့ဆက်မပါဘဲထောက်ခံပါတယ် (နှင့် IE ကို 8 နဲ့အနိမ့်နှင့်အတူသို့မဟုတ်ရှေ့ဆက်မပါဘဲထောကျပံ့ပေးခဲ့ပါဘူး) ။
browser များအမြဲပြောင်းလဲနေတဲ့ခံရဖို့သွားကြသည်နှင့်အသင်တို့အပေါ်မှာစီစဉ်နေမဟုတ်လျှင်အဟောင်း browser များထောက်ပံ့ဖို့ဖန်တီးမှုချဉ်းကပ်မှုလိုအပ်မည်ဆိုတာသတိရပါ က်ဘ်စာမျက်နှာများကိုတည်ဆောက်ခြင်း အများဆုံးခေတ်သစ်နည်းစနစ်များနောက်ကွယ်တွင်အနှစ်ဖြစ်ကြောင်း။ အဆုံး၌, browser ကိုရှေ့ဆက်ရေးသားရဆုံးဖွယ်ရှိသင်တို့သည်ဤမျှအပေါ်အမြတ်ထုတ်ခြင်းနှင့်အခြားအမှားတွေ့ပါသည်ဟုလိုအပ်တစ်အနာဂတ်ဗားရှင်း fixed မည်ဖြစ်ကြောင်းအမှားများကိုရှာဖွေတာနဲ့အမြတ်ထုတ်ခြင်းထက်အများကြီးပိုလွယ်သည်။