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 ေပါင္းထည္႕ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္ပါအတိုင္းအသံုးျပဳႏိုင္ပါတယ္။
@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 အရၾကည္႕မယ္ဆိုရင္ေတာ့ ေကာင္းတဲ့ အေလ့အထတစ္ခုေတာ့ မဟုတ္ပါဘူး။ ၾကည္႕ရတာလည္း အရမ္းရုပ္ဆိုးပါတယ္။
font-family:arial;text-decoration:underline”>Myanmar ICT Network</div>
HTML နဲ႔ JavaScript ကိုေရးမထားသင့္ပါ။
CSS နဲ႔ HTML မေရာသင့္သလိုပဲ JavaScript ေတြကိုလည္း ေရာမထားသင့္ပါဘူး။ ေအာက္ေဖာ္ျပပါ Code ကေတာ့ Link ကို ကလစ္လိုက္ရင္ Myanmar ICT Network! ဆိုတဲ့ Alert box ျပသေပးတာျဖစ္ပါတယ္။
<a id=”mt” href=”http://www.myanmarturorials.com“
onclick=”alert(‘Myanmar ICT Network!’);”>Myanmar ICT Network</a>
အထက္ကအတိုင္းမသံုးဘဲနဲ႔ jQuery သံုးၿပီး ေအာက္ပါအတိုင္းအသံုးျပဳႏိုင္ပါတယ္။
$(document).ready(function() {
$(‘#mictn’).click(function() {
alert(‘Myanmar ICT Network!);
});
});
၄င္းကဲ့သို႔အသံုးျပဳျခင္းျဖင့္ ရွင္းလင္းတဲ့ HTML ေလးျဖစ္သြားမွာျဖစ္ပါတယ္။
ဥပမာ - <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 ေပါင္းထည္႕ခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္ပါအတိုင္းအသံုးျပဳႏိုင္ပါတယ္။
@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 အရၾကည္႕မယ္ဆိုရင္ေတာ့ ေကာင္းတဲ့ အေလ့အထတစ္ခုေတာ့ မဟုတ္ပါဘူး။ ၾကည္႕ရတာလည္း အရမ္းရုပ္ဆိုးပါတယ္။
0066ff; font-size:16px;
font-family:arial;text-decoration:underline”>Myanmar ICT Network</div>
HTML နဲ႔ JavaScript ကိုေရးမထားသင့္ပါ။
CSS နဲ႔ HTML မေရာသင့္သလိုပဲ JavaScript ေတြကိုလည္း ေရာမထားသင့္ပါဘူး။ ေအာက္ေဖာ္ျပပါ Code ကေတာ့ Link ကို ကလစ္လိုက္ရင္ Myanmar ICT Network! ဆိုတဲ့ Alert box ျပသေပးတာျဖစ္ပါတယ္။
<a id=”mt” href=”http://www.myanmarturorials.com“
onclick=”alert(‘Myanmar ICT Network!’);”>Myanmar ICT Network</a>
အထက္ကအတိုင္းမသံုးဘဲနဲ႔ jQuery သံုးၿပီး ေအာက္ပါအတိုင္းအသံုးျပဳႏိုင္ပါတယ္။
$(document).ready(function() {
$(‘#mictn’).click(function() {
alert(‘Myanmar ICT Network!);
});
});
၄င္းကဲ့သို႔အသံုးျပဳျခင္းျဖင့္ ရွင္းလင္းတဲ့ HTML ေလးျဖစ္သြားမွာျဖစ္ပါတယ္။
မွတ္ခ်က္// ေမးလ္ထဲမွရတာေလးကို ျပန္လည္သိမ္းဆည္းထားျခင္းျဖစ္ပါတယ္ 
0 comments:
Post a Comment