wmaraci reklam

CSS Reset - CSS Sıfırlama

10 Mesajlar 24.047 Okunma
advertseo
wmaraci reklam

Rastider Rastider WM Aracı Kullanıcı
  • Üyelik 14.06.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek İşsiz
  • Konum İstanbul Anadolu
  • Ad Soyad M** U**
  • Mesajlar 58
  • Beğeniler 2 / 4
  • Ticaret 3, (%100)
Arkadaşlar bildiğiniz gibi yazdığımız kodların her tarayıcı tarafından farklı yorumlanması büyük sıkıntı. Bu konuda standardizasyonu sağlamak için yapılan çalışmalar ve pratik çözümler var. Bunlardan biri de tarayıcıların varsayılan CSS değerlerini sıfırlamaktır. Her geçen gün daha da çok kullanılan bu yöntemi kullanmanız size çalışmalarınızda büyük kolaylık sağlayacaktır.

CSS Reset için en çok kullanılanlar Eric Meyer'in yazdığı versiyon ile YUI CSS Reset versiyonlarıdır. Ben Eric Meyer versiyonunu tercih ediyorum.

CSS dosyalarınızın en başına ekleyeceğiniz bu kodlar sizi gereksiz kodlamalardan kurtaracaktır. Örneğin margin, padding gibi değerleri sıfırlaması size büyük kolaylıklar sağlar.

Eric Meyer - Css reset:
http://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


YUI Reset CSS
http://developer.yahoo.com/yui/reset/

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

 

wmaraci
reklam

LadyArch3r LadyArch3r Web Developer Kullanıcı
  • Üyelik 02.04.2011
  • Yaş/Cinsiyet 33 / E
  • Meslek Web Developer
  • Konum Antalya
  • Ad Soyad B** K**
  • Mesajlar 930
  • Beğeniler 60 / 102
  • Ticaret 3, (%100)
Fatih Hayrioğlunun mu daha iyi Eric Meyerinkimi ?
 

 

FatihToprak FatihToprak www.fatihtoprak.com Kimlik Onayı
  • Üyelik 13.06.2011
  • Yaş/Cinsiyet 38 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad F** T**
  • Mesajlar 577
  • Beğeniler 65 / 67
  • Ticaret 0, (%0)
Ben padding sıfırlama tarftarı değilim aslında. Çünkü atıyorum p classında padding değeri sıfırlandığında yazılar çorba gibi görünür, daha sonradan ayrı bir tanımlama yapmak zorunda kalmaz mıyız ?

yok efendim line height değeri veririz gibi ?
 

 

Rastider Rastider WM Aracı Kullanıcı
  • Üyelik 14.06.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek İşsiz
  • Konum İstanbul Anadolu
  • Ad Soyad M** U**
  • Mesajlar 58
  • Beğeniler 2 / 4
  • Ticaret 3, (%100)

LadyArch3r adlı üyeden alıntı

Fatih Hayrioğlunun mu daha iyi Eric Meyerinkimi ?


Fatih Hayrioğlu'nun böyle bir kod yazdığını bilmiyordum? Hatırladığım kadarıyla Eric Meyer'inkini değiştirip kullanıyordu. Tabi varsa eğer öyle bir çalışması link verirseniz bir göz atmak isterim :)

Dünya çapında en çok kullanılanın Meyer versiyonu olduğunu söyleyebiliriz. Tabii siz ihtiyaçlarınıza göre uyarlamalısınız. Fatih'in de bahsettiği olaya kısmen katılıyorum. Ama büyük projeler için herşeye sıfırdan başlamak gerektiği kanaatindeyim.

Tabii birçok CSS Reset çalışması mevcut. Bunlardan öne çıkanlardan size uygun olanını şu siteden seçebilirsiniz: http://www.cssresetr.com
 

 

wmaraci
wmaraci

Adil Adil Sms Onayı Gerekli Banlı Kullanıcı
  • Üyelik 26.11.2010
  • Yaş/Cinsiyet 28 / E
  • Meslek Yazılım
  • Konum İstanbul Avrupa
  • Ad Soyad A** Ö**
  • Mesajlar 1217
  • Beğeniler 99 / 125
  • Ticaret 3, (%100)
Bu hazır sıfırlamaları hiç kullanmadım. Düşünmüyorumda bir tasarımı kodlarken sıfırlama gerekn şeyler karşına çıkıyor ve sıfırlıyorum :D Gerek yok bence böyle bir şeye.
 

 

FatihToprak FatihToprak www.fatihtoprak.com Kimlik Onayı
  • Üyelik 13.06.2011
  • Yaş/Cinsiyet 38 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad F** T**
  • Mesajlar 577
  • Beğeniler 65 / 67
  • Ticaret 0, (%0)
yada şu var ;

diyelim uzun uzadıya döküm olacak bir sayfaya sahipsiniz.

Atıyorum 1000. satırı kodlayacaksınız.Bu şekildeki bir sayfaya feci şekilde tartışılır zaten de varsayım sonuçta. Veya bol div li olan bir kod yapısına sahip bir sayfanız var
örneğin;







  • // Kodlar başlamış saydık...
    // Classler burda kapanmaya başlasın


    bu yapıdaki betiği sonlandırdıktan sonra;







    Temizle id si için css tanımlaması ;



    #temizle {clear:both; }



    hem ilgili alandan başlar sıfırlamaya herşeyi hem de en azından istediğimizi yapmış olmaz mıyız ?
 

 

Rastider Rastider WM Aracı Kullanıcı
  • Üyelik 14.06.2011
  • Yaş/Cinsiyet 36 / E
  • Meslek İşsiz
  • Konum İstanbul Anadolu
  • Ad Soyad M** U**
  • Mesajlar 58
  • Beğeniler 2 / 4
  • Ticaret 3, (%100)

Fatih Toprak adlı üyeden alıntı



Temizle id si için css tanımlaması ;

#temizle { clear:both; }

hem ilgili alandan başlar sıfırlamaya herşeyi hem de en azından istediğimizi yapmış olmaz mıyız ?


Bahsettiğin CSS değerlerini tamamen temizlemek mi bilmiyorum Fatih ama bu kod yalnızca "float"ları temizler.

Web tarayıcıları bir web sayfası görüntülendiğinde kendi varsayılan değerlerini sayfaya entegre ederler. CSS Reset'teki amaç tarayıcının varsayılan bütün değerlerini sıfırlamaktır. Ha bazen bu saçma olmaz mı? Olur.

Örneğin: ol için atanmış "list-style: none" satırı birçoğumuza saçma gelebilir. Dolayısıyla CSS Reset'i kendinize uyarlamanız en doğrusu. Ama hazır bir taslak olarak elinizin altında bulunması kodlamanızı hızlandırabilir ;)
 

 

FatihToprak FatihToprak www.fatihtoprak.com Kimlik Onayı
  • Üyelik 13.06.2011
  • Yaş/Cinsiyet 38 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad F** T**
  • Mesajlar 577
  • Beğeniler 65 / 67
  • Ticaret 0, (%0)
Yok @ahmet değerleri tamamen temizlemek için değil elbette. Senin yaklaşımın doğrudur. Ben konuyu yeniden bir kez daha okudum. Ben yanlış algılamışım. Yani o anlatmak istediğim konuyla alakasız tamamen saçma bir post olmuş (:

Neyseki görmüş olman yanlış bilgilendirmeye yol açmayacaktır.

Ayrıca dün konuştuğumuz iş için ben hazırlanmaya başladım :)
 

 

Kraladam Kraladam Deli Gibi Deliyim Kullanıcı
  • Üyelik 05.04.2011
  • Yaş/Cinsiyet 34 / E
  • Meslek phpsever
  • Konum
  • Ad Soyad ** **
  • Mesajlar 142
  • Beğeniler 15 / 37
  • Ticaret 0, (%0)
bootstrap sayesinde böyle şeylere gerek yok diye düşünüyorum.
 

 

https://git.io/vyrHQ ~ True Legend

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)

Kraladam adlı üyeden alıntı

bootstrap sayesinde böyle şeylere gerek yok diye düşünüyorum.


Konuyu hortlatmışsınız :) Bende yorumumu belirteyim, css sıfırlamaları hem tarayıcı uyumluluğu açısından hem de kodlama kolaylığı açısından çok faydalı oluyorlar. Kullanmanızı tavsiye ederim.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)