HTML & CSS ဆိုင်ရာ သိမှတ်ဖွယ်ရာများ
Website တစ်ခုဆွဲရင် ရှင်းလင်းပြီး Browser တိုင်းမှာ အစဉ်ပြေစေဖို့ဆိုတာက လွယ်ကူတာတော့မဟုတ်ပါဘူး။ Firefox လို Browser တွေကတော့ ပြဿနာသိပ်မရှိပါဘူး။ အဓိကကတော့ ကိုးလို့ကန့်လန့်နိုင်လွန်းတဲ့ Internet Explorer ဖြစ်ပါတယ်။ ကျွန်တော်ကတော့ Site ရေးတဲ့အခါ IE မှာကြည့်လို့အစဉ်ပြေအောင်လုပ်ရတာ အရမ်းမုန်းပါတယ်။ ယခု ဒီ Post မှာတော့ Site ရေးတဲ့အခါမှာ အသုံးဝင်မယ့် အကောင်းဆုံး အလေ့အကျင့် ၈ ခုကို စုစည်းပြီးဖော်ပြပေးထားပါတယ်။
မည်သည့် Div အပိတ်ဖြစ်သည်ကို ဖော်ပြထားပါ
ဝဘ်ဆိုက်တော်တော်များများရဲ့ Source Code (Ctrl + U) ကို ကြည့်မယ်ဆိုရင် ဘယ် Div ရဲ့ အပိတ် Tag ဖြစ်သလဲဆိုတာကိုထည့်ထားတာ တွေ့ရပါလိမ့်မယ်။ နောက်ပိုင်း Div tag တွေအရမ်းများလာတဲ့အခါမှာ အရမ်းရှုပ်လာပြီး ဘယ် Tag ရဲ့အပိတ်မှန်းမသိဘဲဖြစ်နေပါလိမ့်မယ်။ ဒါ့ကြောင့် HTML Comment ဖြင့် ဖော်ပြပေးထားသင့်ပါတယ်။
ဥပမာ -
<div id=”header”>
<div id=”logo”>
<img src=”logo.png” />
</div> <!– End of Logo –>
</div> <!– End of Header –>
CSS reset အသုံးပြုပါ
Browser တိုင်းရဲ့ CSS Default တန်ဖိုးတွေဟာ မတူညီပါဘူး ။ ကျွန်တော်တို့အနေနဲ့ Firefox ရဲ့ CSS Default တန်းဖိုးတွေကို ရင်းနှီးပြီးသားဖြစ်နေနိုင်ပေမယ့် ၊ Internet Explorer ရဲ့ CSS Default တန်းဖိုးကိုတော့ သိချင်မှ သိပါလိမ့်မယ်။ နောက်ပြီး IE က Version အလိုက် ပြောင်းလဲမှုတွေရှိနေပါတယ်။ CSS Reset ကိုအသုံးပြုမယ်ဆိုရင်တော့ Style တွေကို Reset လုပ်လိုက်တဲ့အတွက် Browser တိုင်းမှာ အစဉ်ပြေပါလိမ့်မယ်။
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Source: http://meyerweb.com/eric/tools/css/reset/index.html
@import ကို အသုံးမပြုပါနှင့်
CSS Stylesheet တစ်ခုထဲကို အခြား Stylesheet ထဲက CSS တွေပါ ပေါင်းထည့်ချင်တယ်ဆိုရင်တော့ @import ကိုအသုံးပြုနိုင်ပါတယ်။ ဒါ့အပြင် HTML ဖိုင်ထဲမှာ Stylesheet ပေါင်းထည့်ချင်တယ်ဆိုရင်တော့ အောက်ပါအတိုင်းအသုံးပြုနိုင်ပါတယ်။
<style type="text/css>
@import url(‘a.css’);
@import url(‘b.css’);
</style>
အထက်ပါအတိုင်း Import လုပ်တာဟာ သာမာန် HTML Stylesheet ထည့်သွင်းခြင်းထက် Page Loading ကြာပါတယ်။ လူအဝင်နည်းတဲ့ ဝဘ်ဆိုက်ဆိုရင် မသိသာပေမယ့် လူအဝင်များတဲ့ဆိုက်ဆိုရင် ပြဿနာရှိနိုင်ပါတယ်။
@import ဘာ့ကြောင့် မသုံးသင့်သလဲဆိုတာကိုတော့ http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ မှာ အသေးစိတ် သွားရောက်ဖတ်ရှုနိုင်ပါတယ်။
JavaScript ဖိုင်တွေကို အောက်ဖက်မှာထားပါ
ပုံမှန်အားဖြင့်တော့ JavaScript ဖိုင်တွေကို <head></head> ထဲမှာ ထည့်ပေးရမှာဖြစ်ပါတယ်။ ပြဿနာကတော့ Head tag ထဲမှာထည့်လိုက်ရင် Website မှာ ဖော်ပြမယ့်အကြောင်းအရာတွေကို မပြခင် ၎င်း JavaScript တွေ ပထမဦးဆုံး Load လုပ်ရပါမယ်။ ဒါ့ကြောင့် JavaScript ဖိုင်တွေကို Body tag မပိတ်ခင် နေရာမှာ ထည့်သင့်တယ်လို့ထင်ပါတယ်။
Code ရေးနေရင်းBrowser တိုင်းမှာ မကြာခန စစ်ဆေးပါ
ကျွန်တော်တို့ Design တစ်ခုကို Code ရေးပြီးဆိုရင် Firefox မှာပဲ အမြဲတမ်းစမ်းသပ်ကြပါတယ်။ IE မှာ စမ်းသပ်ဖို့မေ့နေတာများပါတယ်။ Code တွေအားလုံးရေးပြီးမှ IE မှာ စမ်းမယ်ဆိုရင် Style တွေမှားနေပါလိမ့်မယ်။ အဲဒီတော့မှ အကုန်သေချာလိုက်ပြင်နေရင် အချိန်အရမ်းကုန်ပြီး ခက်လဲခက်ပါတယ်။ ဒါ့ကြောင့် Code ရေးတဲ့အခါမှာ မကြာခန IE မှာ စမ်းသပ်ပြီး Cross Browser compatible ဖြစ်အောင်ပြုလုပ်သင့်ပါတယ်။
conditional comments အသုံးပြုပါ
ဒီတစ်ခါလည်း Internet Explorer နဲ့ပတ်သက်ပြီးပြောရပါဦးမယ်။ IE က Version တစ်ခုနဲ့တစ်ခု CSS သက်မှတ်ပုံတွေက မတူဘူးဆိုတော့ IE Version တစ်ခုခြင်းစီအလိုက် CSS Style Value (Value လို့ခေါ်လား Attribute လို့ခေါ်လား သေသေချာချာမသိပါ) သက်မှတ်ပေးနိုင်ပါတယ်။ အောက်ကအတိုင်းဖြစ်ပါတယ်။
height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */
အထက်ကအတိုင်းရေးတာက အရမ်းအသုံးဝင်ပေမယ့် CSS Validation ဖြစ်မှာတော့မဟုတ်တော့ပါဘူး။ ဒါ့ကြောင့် အောက်ဖော်ပြပါအတိုင်း Conditional Comment နဲ့အသုံးပြုသင့်ပါတယ်။
<link href="style.css" rel="stylesheet" type="text/css" />
<!–[if lte IE 6]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
ဒါကတော့ IE 6 အတွက် Stylesheet ကို သီးသန့်သက်မှတ်ပေးတာဖြစ်ပါတယ်။ ၎င်း Stylesheet မှာ မပါတဲ့ Style တွေကိုတော့ သာမာန် Style ထဲက အတိုင်းပဲသက်မှတ်ပေးမှာဖြစ်ပါတယ်။
HTML ထဲမှာ CSS တွေရောမထားသင့်ပါ
HTML ထဲမှာ Style attribute တစ်ခုပါပါတယ်။ ၎င်းထဲမှာ CSS တွေထည့်ရေးနိုင်ပေမယ့် CSS Philosophy အရကြည့်မယ်ဆိုရင်တော့ ကောင်းတဲ့ အလေ့အထတစ်ခုတော့ မဟုတ်ပါဘူး။ ကြည့်ရတာလည်း အရမ်းရုပ်ဆိုးပါတယ်။
<div style=”color:#0066ff; font-size:16px; font-family:arial;text-decoration:underline”>Myanmar Tutorials</div>
HTML နဲ့ JavaScript ကိုရေးမထားသင့်ပါ။
CSS နဲ့ HTML မရောသင့်သလိုပဲ JavaScript တွေကိုလည်း ရောမထားသင့်ပါဘူး။ အောက်ဖော်ပြပါ Code ကတော့ Link ကို ကလစ်လိုက်ရင် Myanmar Tutorials! ဆိုတဲ့ Alert box ပြသပေးတာဖြစ်ပါတယ်။
<a id="mt" href="http://www.myanmarturorials.com" onclick="alert('Myanmar Tutorials!');">Myanmar Tutorials</a>
အထက်ကအတိုင်းမသုံးဘဲနဲ့ jQuery သုံးပြီး အောက်ပါအတိုင်းအသုံးပြုနိုင်ပါတယ်။
$(document).ready(function() {
$(‘#mt’).click(function() {
alert(‘Myanmar Tutorials!);
});
});
၎င်းကဲ့သို့အသုံးပြုခြင်းဖြင့် ရှင်းလင်းတဲ့ HTML လေးဖြစ်သွားမှာဖြစ်ပါတယ်။
Facebook comments:
2 Responses
Leave a comment
About the Author
Hein Zaw Htet
I am a regular author at MyanmarWebDev.com and MyanmarTutorials, web developer at MyanmarLinks and a student ( Second Year ) of English Specialization, Dagon University. You can follow me on Twitter@heinzawhtet or contact me at Facebook
Ads
အရမ်းကောင်းပါတယ် ဗဟုသုတရစေပါတယ်ဗျာ..။
ဂျီတော့လ်က CM ကလင့်လေးရလို့ဗျာ ပေ့စ်လေးကို ကူးထားတယ်ဗျာ..။
အနော်လည်း ၀က်ပိုင်းစိတ်ဝင်စားတဲ့ လူငယ်လေးတစ်ယောက်ပါဗျာ..။
အဲလောက်ထိတော့ မရသေးဘူးပေါ့ဗျာ..။
ဘယ်နားမေးရမှန်းမသိတာနဲ့ ဒီမှာပဲ မေးလိုက်ပါတယ်
Website တွေမှာ Contact Us ဆိုပြီးထည့်ကြပါတယ် ကျွန်တော့်ဆိုဒ်မှာလဲ ထည့်ချင်ပါတယ်
ကျွန်တော်က facebook က wall လိုမျိုး Comment Box လေး လုပ်ချင်ပါတယ် အဲဒါ code လေး ပြောပြ
လို့ ရမလားခင်ဗျာ user က comment ပေးလိုက်တာနဲ့ အချိန်စောင့်စရာမလို Reload(Refresh)
မလုပ်
ဘဲ အောက်မှာ below တန်းပေါ်လာတာလေးကို လိုချင်လို့ပါ တွေ့တဲ့သူများ ဖြေပေးကြပါဦး ဒီမှာရှာတာ
မတွေ့မိလို့ပါ