Dinozorus.com - Web Tasarım & Geliştirme

Müziğin evrensel bir iletişim aracı olması gibi tasarımın da evrenselliği erişilebilir olmasından kaynaklanıyor. Farklı tarayıcılarda farklı görünen, dağılan, bölünen, rahatsızlık veren tasarımlar kullanıcılarda eksi(k) intiba yaratabileceği gibi ziyaretçi kaybına da neden olacaktır.

Standartlar tasarım dünyasının olmazsa olmazlarındandır. Standartlara uyum çerçevesinde “reset.css” olarak adlandırılan, son zamanlar da oldukça popülerleşen bir tasarımcı anahtarının sizlere en çok tercih edilen 6 (altı) farklı metodunu sunacağım.

Jenerik “Reset.css” Tekniği

* {
	padding: 0;
	margin: 0;
	border: 0;
	}

Yukarıdaki css kodlarında en basit, en yalın haliyle kullanabileceğiniz teknik bulunmaktadır. En sık kullanılan hizalama, kenar boşlukları, çerçeve kenarlıklarını sıfırlayan tekniğin varyasyonları ise aşağıdaki gibidir:

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

Chris Poteet’in Tekniği

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
	}
body {
	padding: 5px;
	}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
	margin: 20px 0;
	}
li, dd, blockquote {
	margin-left: 40px;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

Chris‘in tekniğini inceleyecek olursak body değerindeki padding değerini 5px ile değerlendirdiğini ve h1, h2, h3 vb seçicilere, blockquote gibi alıntı seçicilerini margin-left yoluyla kenar boşluğu kazandırıp kendine has bir standart oluşturmuş olduğunu görebiliriz.

Yahoo’nun kullanıma sunduğu Reset Css Tekniği

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p
,blockquote,th,td {
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img {
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}

Tasarımcılar tarafından Yahoo UI Library tarafından kullanıma sunulan bu teknik, oldukça tercih edilen bir tekniktir. Benim de kullanmış olduğum, oldukça verim aldığım bir tekniktir. Kullanmanızı kesinlikle tavsiye ederim.

Eric Meyers tekniği

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th,
td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	background: white;
	line-height: 1;
	color: black;
	}
ol, ul {
	list-style: none;
	}
/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	font-weight: normal;
	text-align: left;
	}
/* remove possible quote marks (") from <q> &
<blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

Eric Meyers oldukça tanınmış bir web tasarım danışmanı ve tasarımcısıdır. Kullandığı teknik bir çok tasarımcı tarafından tercih edilen ve tasarımcı kitlesi tarafından kullanılmaktadır.

5. Yoğunlaştırılmış Meyers Tekniği

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	}
fieldset, img {
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before, q:after {
	content: '';
	}
abbr, acronym {
	border: 0;
	}

Meyers abimizin tekniğini yoğunlaştırılmış sürümünü kullanımını da tercih edebilirsiniz.

Tantek’in Tekniği

:link, :visited {
	text-decoration: none;
	}
ul, ol {
	list-style: none;
	}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
	}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	}
a img, :link img, :visited img {
	border: none;
	}
address {
	font-style: normal;
	}

Son olarak Tantek’in tekniğini görüyoruz. Reset Css tekniği oldukça kullanıcı dostu, tasarımcıların vazgeçilmezi bir yöntemdir. Bu hususa yeni başlayanların ya da tekniğini geliştirmek isteyenlere yardımcı olur düşüncesiyle makalemizi hazırlamış bulunuyoruz. Umarım faydalı olmuştur. Huzurlu, mutlu kodlamalar…

Benzer makale yok.