Web sitelerinizin tarayıcı ve işletim sistemi gözetmeksizin sorunsuz çalışabilmesi için işe önce CSS tarafından başlamak gerekir.
Html ve CSS kodlarınızı bir Reset CSS üzerine inşa etmeye başlayarak Crossbrowser* bir site için ilk adımı atmış olacaksınız.
Farklı internet tarayıcılarında bozukluk ve farklılık göstermeksizin bütün işlevlerin başarılı bir şekilde çalıştığı web siteleri için kullanılan yabancı bir terimdir.
İlk önce ne işe yaradıklarından bahsedelim :
/* daha tutarlı tam ekran görünümleri için bu satırı ekliyoruz */
html,body{height:100%;}</code>
/* bir çok html tagini tarayıclara göre farklılık gösteren iç ve dış boşluklarından arındırıyoruz */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{margin:0;padding:0;border:0;}
/* Sayfalarda kullanılacak temel font büyüklüğü ve satır yüksekliği oranını belirliyoruz. Fontun adını tanımlayarak tarayıcılar arasındaki font farklılığını ortadan kaldırıyoruz. Ubuntu üzerinde görüntülenecek sayfalar için şiddetle tavsiye edilir. */
body{font:12px/1.2em Arial, Verdana, sans-serif;font-style:normal;text-transform:none;}
/* heading taglarini özgürce tasarlayabilmek için onları sıfırlıyoruz, ayrıca imajlar için de bir kaç düzenleme daha yapıyoruz */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;display:block;}
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
/* burada form elemanlarını sıfırlıyoruz, sonradan tasarlayabilmek için gerekli fakat, form elemanları için bir tasarım yapmayacaksanız kullanmayabilirsiniz */
input,textarea,select{font-family:Arial, Verdana, sans-serif;outline:none;}
textarea{width:100%;resize:none;}
select{font-size:100%;font-family:inherit;font-weight:inherit;}
label{display:inline-block;}
/* parağraf öğelerinden bazılarını yine burada sıfırlıyoruz */
b,strong{font-weight:bold;}
sup{line-height:5px;vertical-align:top;}
blockquote, q{quotes:none;}
a,a:visited,a:active{text-decoration:none;cursor:pointer;}
a:focus{outline-style:none;}
/* html5 taglerini desteklemeyen tarayıcılar için bir kaç düzenleme yapıyoruz */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
svg{overflow:hidden;}
/* list elemanları için düzenlemeler, kullanmak opsiyoneldir */
ol,ul{list-style:none;}
li{display:list-item;}
/* div ve tableları sıfırlıyoruz. div için olan sıfırlamayı kullanmayabilirsiniz
fakat, IE6 için kesinlikle tavsiye ederim. */
div{overflow:hidden;}
table {border-collapse:collapse;border-spacing:0;}
th,td,caption{font-weight:normal;vertical-align:top;text-align:left;}
Sonra yorumları silerek paylaşalım :
html,body{height:100%;}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{margin:0;padding:0;border:0;}
body{font:12px/1.2em Arial, Verdana, sans-serif;font-style:normal;text-transform:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;display:block;}
img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic;}
input,textarea,select{font-family:Arial, Verdana, sans-serif;outline:none;}
textarea{width:100%;resize:none;}
select{font-size:100%;font-family:inherit;font-weight:inherit;}
label{display:inline-block;}
b,strong{font-weight:bold;}
sup{line-height:5px;vertical-align:top;}
blockquote, q{quotes:none;}
a,a:visited,a:active{text-decoration:none;cursor:pointer;}
a:focus{outline-style:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
svg{overflow:hidden;}
ol,ul{list-style:none;}
li{display:list-item;}
div{overflow:hidden;}
table {border-collapse:collapse;border-spacing:0;}
th,td,caption{font-weight:normal;vertical-align:top;text-align:left;}
