Putting Stylesheets at the Top of the Web Pages - Stylesheet များကို အင်တာနက်စာမျက်နှာ၏ ထိပ်ဆုံးတွင် ထားရှိခြင်း

အဓိက အကြောင်းအရာ - CSS
Yahoo! မှ အင်ဂျင်နီယာများသည် အင်တာနက်စာမျက်နှာများ၏ စွမ်းဆောင်ရည်ကို သုတေသန ပြုလုပ်သည့်အခါ - CSS Stylesheet များကို စာမျက်နှာ၏ ထိပ်ပိုင်းနေရာ HEAD တွင် ရွှေ့ပြောင်းထားရှိခြင်းဖြင့် စာမျက်နှာများကို ပိုမို လျင်မြန်စွာ မြင်တွေ့ရစေနိုင်ကြောင်း- ရှာဖွေတွေ့ရှိခဲ့ကြသည်။ အကြောင်းမှာ - အင်တာနက်ကြည့်ဆော့ဖ်ပဲက Stylesheet ကို ဦးစွာ ရရှိခြင်းကြောင့် - စာမျက်နှာကို လျင်မြန်စွာ ပုံဖော်ပြသ နိုင်သည့်အတွက် ဖြစ်သည်။

Website တစ်ခု၏ စွမ်းဆောင်ရည်နှင့် အမြန်နှုံးကို အလေးထားသော Front-end အင်ဂျင်နီယာများသည် -

  • အင်တာနက်စာမျက်နှာများကို အလျင်အမြန်ပုံဖော် ပြသပေးလိုကြသည်။
  • စာမျက်နှာထဲတွင် ပါရှိသည့် အကြောင်းအရာများကို မည်သည့်အစိတ်အပိုင်းမှ စတင်၍ဖြစ်စေ အင်တာနက်ကြည့်ဆော့ဖ်ပဲတွင် မြန်နိုင်သမျှ မြန်မြန် ဖော်ပြလိုကြသည်။
  • ဤအချက်သည် အစိတ်အပိုင်းများစွာ ပါရှိသည့် စာမျက်နှာများ အတွက်နှင့်
  • အင်တာနက် အမြန်နှုံး နှေးကွေးသော နေရာများမှ အင်တာနက် အသုံးပြုနေသူများ အတွက် အထူးပင် အရေးကြီးသည်။

အင်တာနက် အသုံးပြုနေသူများအတွက် ပုံဖော်ပြသ တုန့်ပြန်ချက် (Visual Feedback) များ (ဥပမာ - အခြေအနေတိုးတက်မှုပြပုံ - Progress Indicator) သည် အလွန်ပင် လိုအပ်ပြီး အရေးလည်းကြီးကြောင်း အထောက်အထား အခိုင်အလုံဖြင့် ကောင်းစွာ သုတေသန ပြုထားခဲ့ကြပြီး ဖြစ်သည်။ (ဖတ်ရှုရန်)။ အင်တာနက် စာမျက်နှာတစ်ခုတွင် ပါရှိသည့် အစိတ်အပိုင်းများသည်ပင်လျှင် Progress indicator များ ဖြစ်ကြသည်။

 

အင်တာနက်ကြည့်ဆော့ဖ်၀ဲက အင်တာနက်စာမျက်နှာ တစ်ခုကို ဆွဲယူပုံဖော်လိုက်သည်နှင့် Header (စာမျက်နှာ၏ ထိပ်ပိုင်း)၊ Navigation bar, ထိပ်ဆုံးရှိ Logo စသည်တို့ အဆက်မပြတ် ပေါ်ထွက်လာသည်ကို မြင်တွေ့ရမည်။ ထိုသို့ တစ်ခုခြင်းစီ အဆက်မပြတ် ပေါ်ထွက်လာခြင်းသည်ပင်လျင် ၀က်ဘ်ဆိုက်ကို လာရောက် အသုံးပြုနေသူများအတွက် - ၀က်ဘ်ဆိုက်သည် အလုပ်လုပ်နေကြောင်း - Visual Feedback အဖြစ် ခံစားသိရှိရပြီး စောင့်ဆိုင်းနေရသည့် အခြေအနေအတွက် စိတ်သက်သာရာ ရစေသည်။ ထို့ကြောင့် ၀က်ဘ်ဆိုက်သို့ လာရောက်လည်ပတ်သူများ၏ အတွေ့အကြုံ (User Experience) ကို လွန်စွာ တိုးတက်မှု ဖြစ်ထွန်းစေသည်။

Stylesheet များကို အင်တာနက် စာမျက်နှာ၏ အောက်ခြေနားတွင် ထားရှိခြင်းကြောင့် ဖြစ်ရသည့် ပြဿနာမှာ - Internet Explorer အပါအ၀င် အင်တာနက်ကြည့်ဆော့ဖ်ပဲ များစွာတို့၏ ပုံဖော်ပြသမှုကို နှောင့်နှေးစေခြင်း ဖြစ်သည်။ ဆော့ဖ်ပဲများသည် စာမျက်နှာအတွင်း ပါရှိသည့် အစိတ်အပိုင်းများ၏ Style များပြောင်းလဲသွားပါက ပုံဖော်ပြသမှု ပြန်လည်ပြုလုပ်ရခြင်းကို ရှောင်လွှဲနိုင်စေရန် ပြုလုပ်ထားသဖြင့် - အောက်ခြေတွင် Stylesheet ထားသော အင်တာနက်စာမျက်နှာကို ကြည့်နေရသူအတွက် အဖြူရောင်စာမျက်လွတ် တစ်ခုကို ကြည့်နေရပြီး အဓိပ္ပါယ်မဲ့ အချိန်ကုန် အလဟဿ ဖြစ်နေမည်။

HTML သတ်မှတ်ချက်များ တွင်လည်း Stylesheet များကို အင်တာနက်စာမျက်နှာ၏ HEAD ထဲတွင် ထည့်သွင်းထားရှိရမည် ဖြစ်ကြောင်း ယခုကဲ့သို့ "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." ရှင်းရှင်းလင်းလင်း ဖော်ပြထားပြီး ဖြစ်သည်။ သီးခြား အပြောင်းအလဲများ ဖော်ပြနိုင်ခြင်း မရှိပါက - မည်သည့် အစိတ်အပိုင်းမှ မပါသော အဖြူရောင် စာမျက်နှာလွတ် သို့မဟုတ် အချိုးအစား မပြေသော စာမျက်နှာတစ်ခုကို မည်သူကမျှ ရေရှည် ကြည့်ရှုလိုမည် မဟုတ်ပေ။

အကောင်းဆုံး အမြန်ဆုံး စွမ်းဆောင်ရည်ကို ရရှိရန်အတွက် အဖြေတစ်ခုမှာ - HTML ၏ သတ်မှတ်ချက်များ (HTML specification) ကို အတိအကျ လိုက်နာပြီး ကျွန်တော်တို့၏ Stylesheet များကို စာမျက်နှာ၏ HEAD အပိုင်းတွင် ထားရှိအသုံးပြုရန် ပင် ဖြစ်လေသည်။

REF: http://developer.yahoo.com/performance/rules.html#css_top

Add new comment

Similar Articles

  1. December Songs Collections (Burmese Version)         4,789 Reads...
  2. Minimizing the Number of iframes Usage to Speed Up our Websites         4,551 Reads...
  3. Gmail's People Widgets         7,100 Reads...
  4. sh404SEF in Joomla CMS         19,113 Reads...
  5. Data and Presentation Layers of Web Content Management Systems         13,038 Reads...
  6. 3 Essential Security Tips for Every WordPress Site         3,597 Reads...
  7. A Remote Team for a Tech Startup in Myanmar         15,529 Reads...

Featured Articles