Css sıfırlama tekniği

Pazartesi, Åžubat 8, 2010 14:25

Yaptığınız tasarımlar her tarayıcıda farklı mı çıkıyor? Artık bu karşıtlığıa son… AÅŸağıda vereceÄŸim css kodu sayesinde, girilen css kodları her tarayıcıda aynı çıkıyor. Altını çizerek söylüyorum, düzgün çıkacak diye bir kural deÄŸil bu, o sizin kodlamanıza kalmış… EÄŸer hatalı bir kodlama yaptıysanız hata bütün tarayıcılarda aynı çıkar :D Anlatmaya çalıştığım ÅŸey; bu kod sayesinde girilen css kodları tüm tarayıcılarda aynı özellikte çalışıyor. Yani siz bir yazıya “h1″ dediyseniz, bu yazı her tarayıcıda aynı ölçüde açılacaktır. Bu kod olmadığını düşünürsek, yazının boyutu tüm tarayıcılarda aynı olabilir fakat, bazı tarayıcılarda altta üstte boÅŸluklar çıkabiliyor. Bu css kodu bunu önlüyor. Tabi dediÄŸim ÅŸey sadece h1 için deÄŸil, daha bir çok kod içinde geçerli.

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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Şu anda kullanılan en yaygın css sıfırlama kodu budur. Aşağıdaki kod ise bu kodun biraz daha basitleştirilmişi.


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, 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-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1;color:black;background:white;}
ol, ul {list-style:none;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

Benzer Yazılar

  • No Related Post
You can leave a response, or trackback from your own site.

Görüş bildirin


Küfür, argo ve düzgün Türkçe kullanılmamış içerikli yorumlar onaylanmayacaktır.