pillinetwork hesabınızla giriş yapın.

IE-Firefox arasındaki farklar için Reset.css

Benim gibi HTML / XHTML arayüz kodlama yapan kişilerin; IE ve Firefox arasınki farklılık herzaman canını sıkmıştır.
Reset.css yada ieHack kullanarak fix etmek mümkün fakat gerek impression gerekse performans açısından, css tag'larına default değer vermek en sağlıklı yol olacaktır.

Bu konuda oluşturduğum css modelinin üzerinden layout'a devam edebilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
/*=========================================================================== */
/* CSS Document Stylesheet
============================================================================= */
/* ========================================================================== */
/* ---------->>> RESET CSS
/* ============================w============================================= */
/*reset.css*/
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:11px;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
/*fonts.css*/
body{font-size:11px; font-family:Tahoma,Arial;color:#333333;}
select, input, textarea {font-size:11px; font-family:Tahoma,Arial;}
body * {line-height:16px;}
/* ========================================================================== */
/* ---------->>> BOX CONTROL
/* ========================================================================== */
.aCenter { text-align:center; }
.aRight { text-align:right; }
.aLeft { text-align:left;}
.vCenter { vertical-align:middle; }
.vTop { vertical-align:top; }
.vBottom { vertical-align:bottom; }
.vTopLeft { vertical-align:top; text-align:left; }
.clear { clear:both; }
.fLeft { float:left; }
.fRight { float:right; }
.fix { display:block; }
.posab { position:absolute; }
.b { font-weight:bold; }
.pointer { cursor:pointer; }
.noBorder { border-color:transparent; }
.noBG { background:transparent; }
/* ========================================================================== */
/* ---------->>> FORM OBJECT STARTING
/* ========================================================================== */
input {border:1px solid #d6d6d6; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; padding:4px; }
input:hover {border:#dcb56b 1px solid}
.button {background:#000 none repeat scroll 0%;border:1px solid #494949;color:#fff;font-family:Tahoma, Arial;
font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal; padding:2px 4px 2px 4px; cursor:pointer}
.button:hover { background:#494949; }
/* ========================================================================== */
/* ---------->>> WİDTH STARTING
/* ========================================================================== */
.w5 { width:5px; }
.w10 { width:10px; }
.w15 { width:15px; }
.w20 { width:20px; }
.w25 { width:25px; }
.w30 { width:30px; }
.w35 { width:35px; }
.w40 { width:40px; }
.w45 { width:45px; }
.w50 { width:50px; }
.w60 { width:60px; }
.w70 { width:70px; }
.w80 { width:80px; }
.w90 { width:90px; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w175 { width:175px; }
.w190 { width:190px; }
.w200 { width:200px; }
.w210 { width:210px; }
.w215 { width:215px; }
.w225 { width:225px; }
.w250 { width:250px; }
.w275 { width:275px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w450 { width:450px; }
.w500 { width:500px; }
.w550 { width:550px; }
.w600 { width:600px; }
.w700 { width:700px; }
.w750 { width:750px; }
.w760 { width:760px; }
.w900 { width:900px; }
.wauto { width:auto; }
/* Width end */
/* ========================================================================== */
/* ---------->>> HEIGHT STARTING
/* ========================================================================== */
.h5 { height:5px; }
.h10 { height:10px; }
.h15 { height:15px; }
.h20 { height:20px; }
.h25 { height:25px; }
.h30 { height:30px; }
.h35 { height:35px; }
.h40 { height:40px; }
.h45 { height:45px; }
.h50 { height:50px; }
.h75 { height:75px; }
.h85 { height:85px; }
.h100 { height:100px; }
.h125 { height:125px; }
.h150 { height:150px; }
.h175 { height:175px; }
.h200 { height:200px; }
/* height end */
/* ========================================================================== */
/* ---------->>> PADDING STARTING
/* ========================================================================== */
/* padding style start */
.nopad {padding:0px; }
.pad1 {padding:1px; }
.pad2 {padding:2px; }
.pad3 {padding:3px; }
.pad4 {padding:4px; }
.pad5 {padding:5px; }
.pad10 {padding:10px; }
.pad15 {padding:15px; }
/* padding style end */
/* padding-left style start */
.padL1 {padding-left:1px; }
.padL2 {padding-left:2px; }
.padL3 {padding-left:3px; }
.padL4 {padding-left:4px; }
.padL5 {padding-left:5px; }
.padL10 {padding-left:10px; }
.padL15 {padding-left:15px; }
.padL20 {padding-left:20px; }
/* padding-left style end */
/* padding-right style start */
.padR1 {padding-right:1px; }
.padR2 {padding-right:2px; }
.padR3 {padding-right:3px; }
.padR4 {padding-right:4px; }
.padR5 {padding-right:5px; }
.padR10 {padding-right:10px; }
.padR15 {padding-right:15px; }
.padR20 {padding-right:20px; }
/* padding-right style end */
/* padding-top style start */
.padT1 {padding-top:1px; }
.padT2 {padding-top:2px; }
.padT3 {padding-top:3px; }
.padT4 {padding-top:4px; }
.padT5 {padding-top:5px; }
.padT7 {padding-top:7px; }
.padT10 {padding-top:10px; }
.padT15 {padding-top:15px; }
.padT20 {padding-top:20px; }
/* padding-top style end */
/* padding-bottom style start */
.padB1 {padding-bottom:1px; }
.padB2 {padding-bottom:2px; }
.padB3 {padding-bottom:3px; }
.padB4 {padding-bottom:4px; }
.padB5 {padding-bottom:5px; }
.padB10 {padding-bottom:10px; }
.padB15 {padding-bottom:15px; }
/* padding-bottom style start */
/* PADDING END */
/* ========================================================================== */
/* ---------->>> MARGIN STARTING
/* ========================================================================== */
/* margin style start */
.marLRauto { margin-left:auto; margin-right:auto; }
.nomar {margin:0px; }
.mar1 {margin:1px; }
.mar2 {margin:2px; }
.mar3 {margin:3px; }
.mar4 {margin:4px; }
.mar5 {margin:5px; }
.mar6 {margin:6px; }
.mar10 {margin:10px; }
.mar15 {margin:15px; }
.mar30 {margin:30px; }
/* margin style end */
/* margin-left style start */
.marL1 {margin-left:1px; }
.marL2 {margin-left:2px; }
.marL3 {margin-left:3px; }
.marL4 {margin-left:4px; }
.marL5 {margin-left:5px; }
.marL10 {margin-left:10px; }
.marL15 {margin-left:15px; }
.marL20 {margin-left:20px; }
.marL30 {margin-left:30px; }
.marL40 {margin-left:40px; }
.marL100 {margin-left:100px; }
/* margin-left style end */
/* margin-right style start */
.marR1 {margin-right:1px; }
.marR2 {margin-right:2px; }
.marR3 {margin-right:3px; }
.marR4 {margin-right:4px; }
.marR5 {margin-right:5px; }
.marR7 {margin-right:7px; }
.marR10 {margin-right:10px; }
.marR15 {margin-right:15px; }
.marR20 {margin-right:20px; }
/* margin-right style end */
/* margin-top style start */
.marT1 {margin-top:1px; }
.marT2 {margin-top:2px; }
.marT3 {margin-top:3px; }
.marT4 {margin-top:4px; }
.marT5 {margin-top:5px; }
.marT10 {margin-top:10px; }
.marT15 {margin-top:15px; }
.marT20 {margin-top:20px; }
/* margin-top style end */
/* margin-bottom style start */
.marB1 {margin-bottom:1px; }
.marB2 {margin-bottom:2px; }
.marB3 {margin-bottom:3px; }
.marB4 {margin-bottom:4px; }
.marB5 {margin-bottom:5px; }
.marB10 {margin-bottom:10px; }
.marB15 {margin-bottom:15px; }
/* margin-bottom style start */
/* margin END */

/* Etiketler: , , , */
/* Mrate yazdı. 09 Ocak 2009 11:02. 25 yorum var */

Yorumlar

Hmm raset?

Arayüz kodlama yapan ve boxmodel çalışan herkezin resetcss kullanmak zorunda. Böylece IE, Mozilla yada diğer browserların başlangıç değerlerini sıfırlayarak aynı görünümü sağlayacaksınız.

kodları deneme fırsatım yok ama birşey soracağım yazara! Örneğin bir div çizelim bordürleri 1 px olsun ve 50px'lik bir kare olsun. ie bu div'e toplamda 52px yer kaplattırırken, firefox tam 50px yer kaplattırıyor. Yani buna benzer bir problem yaşıyorduk. örneğe yine de tam takılmayın, hatalı olabilir, ama genel hatlarıyla böyle bir taşırma problemimiz vardı. Kod bunu çözebilmekte mi?

/* if life="" then call BatsinBuDunya() */

@lazaronnie merhaba,

50x50px bir div'e verilecek border daima div'i 52x52px' yapar,
standartı budur.

evet iE ve FF border-side in/out olarak farklı yorumlamakta,
fakat bu durum tamamiyle doctype girilmemesinden kaynaklanır.

ilk içerikte bulunan css.'i aşağıdaki örnekte olduğu gibi bir salt html dosyasına tanımlayıp, üzerinden arayüzüne devam edersen, border ve benzeri browserlar arası saçmalama sorununu minimuma indirmiş olacaksın.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
<head>
<title>kodaman.org</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<meta http-equiv="content-language" content="TR" />
<link href="raset.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
içerik
</body>


bir de
buraya tıklayarak w3 standartlarına uygunluğunu kontrol edebilirsin.

yinede bir sorun yaşadığında yardımcı olmaya çalışırım

Güzel Dokuman bunları birarada gormek cok guzel oldu.

web tasarimdan sogumamin tek nedeni bu ie ve firefox 'da yaptigim sitenin hep farkli cikmasiydi tesekkurler :)

alt tarafında genel kullanılan class'lar bulunmakta,
kişisel yada küçük çapta işler için çok gerekli değil, hatta gereksiz yere css'i şişirmiş olucak fakat portal çalışmasın da böyle bir içerik yaratmanın birçok faydası war,

- her box için yeni id/class yaratmak yerine mevcut classların class="marR5 pad10 fs11px" şeklinde kullanmalı.
Böylece, zamanla css dosyasının kb olarak artmasını, her yeni id gördüğünde browserın, css dosyasını okumasının önüne geçmiş olunur..

Diğer bir avantajı ise,
css dosyasına daha az müdahale edersiniz, böylece son kullanıcı tarafında cache'lenen css dosyaları tekrar tekrar çekilmemiş olur ve site geliş hızını pozitif yönde etkilemiş olunur.

tarayıcı için reset ve sık kullanılan değerlerin birarada toplandığı 8KB'lik bir css olmuş..whitespaceleri atıp boyutunu daha da küçültebilirmiyiz acaba? :) (evet optimizasyon takıntılıyım)

"Arayüz kodlama yapan ve boxmodel çalışan herkezin resetcss kullanmak zorunda. "

bu biraz fazla iddaalı bir cümle olmuş. Ben şimdiye kadar hiç kullanmadım, kodlarken sorunda yaşamadım. biraz daha kolaya kaçmak bu reset.css sadece. yoksa reset.css olmadanda arada fark olmadan kod yazılabiliyor. sadece doğru yazmayı bilmek yeterli.

yukarda yorumların biri benımde gözume carptı;

web tasarimdan sogumamin tek nedeni bu ie ve firefox 'da yaptigim sitenin hep farkli cikmasiydi tesekkurler :)

aynı konudan bende şikayetçiyim ne yapmamız lazım her web broeser tarayıcısındada desteklemesi için arkdaslar bilgisi olan paylaşailirmi acaba

Hiç de kullanmak zorunda değilsiniz. Reset kullanıyorsanız eğer hemen altına kendi sınıflarınızı oluşturmak zorundasınız yoksa istediğiniz verimi elde edemezsiniz.

Resetten ziyade css framework kullanmak lazım :)

Reset css i kullanarak birçok kez çözemedim problemlerimi, artık şöyle bir mantık yürütüyorum müşteri sitelerini ie6 ve ie7 de çalışıyorum firefoxta açmıyorum... bazen ie7 dede problemler oluyor onlarıda küçük css hileleri ile çözüyorum... sonuçta mevcut müşterilerimin çoğu hala ie6 ve ie7 kullanıyor firefoxu kullanan oranı neredeyse hiç :))

@kadirgunay buraya bakmanı tavsiye ederim.
Dünya browser istatistiklerini görebilirsin

Bu reset.css "kullanmak zorunda" olmamızı neye göre söylüyorlar çok merak ediyorum. Şu ana kadar tek bir kere kullanmadım ki hayatımda da böyle bir saçmalık görmedim kusura bakmayın. Neymiş tarayıcıların varsayılan değerlerini sıfırlıyormuşuz.

DOC TYPE verdiğiniz zaman arada sorunlar olsa da tüm tarayıcılar aynı render motoruna geçiyor zaten. O ufak tefek sorunlar da "ay aman h5'in margini 0 olmamış bak sen gördün mü o yüzden patladı demek" gibi şeyler olmuyor zaten.

Bir de üzerine w900, h300 gibi sınıflar eklenmiş ki 'class="w900 h300"' yazmanın 'style="width: 900; height 300"' yazmaktan hiç bir farkı kalmıyor. Hatta bir de bir sürü gereksiz sınıf yartarak işi iyice yokuşa sürmüş oluyor.

Evet var mı bu söylediklerime "hayır yanlış şeyler söylüyorsun madBYK, reset.css böyle böyle çok faydalı" diyecek? =)

Kadirim & madBYK, browser reset zorunlu bir şey olmuş durumda. sebebiyeti ise bazı browser arkadaşlarımızın kafalarına göre standartları olması. Bu konuda sadece IE çalışırım veya sadece FF çalışırım gerisini tınmam diyorsan sana kalmış tabiki. Ben doctype tanımı olduğu halde bir çok sorunla karşılaşıyorum.

Şahsen ben Eric abimizin reset dosyasını bu konuda başarılı bir örnek olarak alıyorum herhalde bir bildiği vardır... En düz mantıkla.

/* Günce: http://www.murat-beser.com */

Güzel bir derleme olmuş ellerine sağlık, tasarımda işe yarar olduğuna inanıyorum ,)

@BYK

o saçma bulduğun yazıyı yazan benim,

doctype 'ı strict'e alır paşalar gibi noktasına vürgülüne dikkat edersen,
ne ii'de ne ff'ne sitede en ufak bi sorun yaşamazsın.

Fakat bu durum kişisel yada firma tanıtımları yapılacak basit salt HTML arayüzleri için geçerli değil midir?

Peki o yazımda neden insanlara "reset.CSS kullanmak zorundasınız" dedim?
Çünkü kullanmak zorundalar.

Açıklıyım..

Eğer sen complike sistemlerin arayüz kodlamasını yapıyorsan,
blogda eklediğim benzer CSS framework yapısını kullanmak zorundasın.

.w100 { width:100px; }
.padL10 {padding-left:10px; }

height, weight, padding, margin gibi genel tanımları eklersen,
her div'e yeni id verip senin paddingin bu margin bu height bu demezsin.
bunu bir kere tanımlar heryerde kullanırsın, her defasında box yada table'a yeni id verip, browserın bu yeni id'yi gördüğünde CSS dosyasına gidip " bu neydi, hee bıd bıd bıd yapımış gidip table'ı yapayım " gibi browserı saçmalatmamış olursun.

içeriğide margin-width-height'den oluşan bir div düşün

Kod:
style="height:100px;width:200px;margin-left:10px;padding-top:10px"
bir bunu kullanmak var.

birde böyle..

class="h100 w200 marL10 padT10"

ama sen diyorsunki

id="box5"
böylede kullanabilirim, hayır kardeşim zaten CSS sınıflarında mevcut etiketler var neden tekrardan id oluşturuyor gereksiz yere CSS'i şişiriyorsun?

Yukarıdakilerden hangisi sence daha kolay? hangisi daha sağlıklı?

arayüz'de benim bahsettiğim şekilde gitmen HTML dosyasının ortalama %60 optimize etmen anlamına gelmezmi?

yada browsera tanımlamış olduğun CSS framework 'u, cachelerine aldığın da performans olarak daha hızlı yüklenmesini sağlamış olmazmısın ?

anlık 1.000 kullanıcının çağırdığı bir arayüzün daha hızlı yüklenmesi, server side tarafında işlemcinin daha az yorulmasına neden olmaz mı?

her defasında yeni style yada id tanımlaman browserı yormazmı?

ve tekrar söylüyorumki, bahsettiğim CSS framework 'unu kullanmadan arayüz kodlama yapılabilir, hiçde browserlar arasında kayma cortlama yaşamazsın, fakat complike sistemlerin arayüz kodlamasını yapıyorsan zorundasın.

Sen "Ben xhtml'in ustasıyım, reset'de kullanmam CSS framework 'de diyemezsin, başarılı arayüz sistemi en az yoran en hızlı sayfa yüklenmesini sağlamaktır. Bunu başarmanın yoluda olabildiğince pagingi .CSS 'den yükletmektir."

Türkiye'nin sektöründeki lider web sayfalarının yazılımını yapıyorum, daha iyi performans için emin ol hepsini denedim, farklı makinalardan testini yaptım, en iyi performans almanın yolu bu.

Bende eskiden senin gibi doctype 'ı girdiğimde herşey güzel olacak diye düşünüyordum,
yaptığım arayüz yazılımları %100 valid olunca, Microsoft'a mail attım,
Dediğim şeyde şuydu;
Kardeşim ben xhtml standartlarında valid arayüz yazılımı yapıyorum, bakın örnek sitelerimde bunlar, inceleyin.
tüm browserlarda düzgün görüntülenirken neden internet Explorer'da bu sorunlarla karşılaşıyorum

gibisinden bir mail atmıştım, gelen cevap doctype girin değil "browserlar arasında uyum sorunu yaşanabilmektedir bu konuda düzeltme çalışmaları yapıyoruz" oldu

neymiş? Microsoft bu sorunun doctype'tan kaynaklanmadığının farkında...

Sunulan düşünceye, yetersiz bilgi ile kendine doğru gelen önermeyi alaycı bir tavırla "saçmalık" diyeceğine araştırsan, önerilen düşüncenin mantığını nedenini öğrenmek istesen, savunulan şey doğru ise kendi yanlışını düzeltmek, yanlış ise doğruyu göstermek sanıyorumki en iyi sonuca götürecektir herkesi.

takıldığın nokta olursa yardımcı olayım.

Tartışmanın tamamı ve devamına şuradan ulaşılabilir: http://www.zoque.net/css/31595-reset-css-muammasi

reset.css nedir neden kullanılması gerektiğinden tutun,
crossbrowser, css cache, performans gereksinimlerine kadar neler yapılması gerektiği ve buna karşı karşıt görüşlerin havada uçuştuğu harika bir tartışma oldu, zoque üyesi olmasanız dahi sırf bu konu için üye olmanızı tavsiye ederim.

Teşekkürler madBYK oldukça yararlı bir tartışma oldu, fakat hala reset css'in gerekliliğini kabul ettiremedim :)

Kullanıyorum ve memnunum :)

/* / oguzozcan.com / */

reset.css kullanmak "zorunda" değiliz eğer kodladığınız arayüz tüm browserlarda sorunsuz render ediliyorsa bence sorun yok demektir işi zorunluluk olarak adlandırmak yanlış bence :) ha kullanmanın sakıncası varmı tabiki yok neden olsun reset.css dediğinizde basit bi hileden ibaret.

/* Maymundan gelmedik ama maymuna gittiğimiz kesin :))) */

reset.css
Kullanmazsanız ölmezsiniz. Zira bırakın reset.css yi sayfada css stilleri kullanmayan bir sürü insan var tanıdığım. Ve bu bahsettiğim kişiler profesyönel anlamda (yani ticari olarak para kazanıyor) iş yapıyorlar.

Tasarımlarınızda reset.css ya da css kullanmak biraz rahatsızlık durumunuz ile alakalı. "Ben bu işi adam akıllı yapıcam, eli ayağı her ortamda düzgün dursun" diye yola çıktı iseniz zati kaçınılmazdır css ye bulaşmanız.

Bir kıyas gerekirse stil kullanmak ucağa binmek gibidir.
Size sağladığı konforu ve kolaylığı yaşamadan bilemezsiniz.

@ZZombie o css style kullanmadan arayüz hazırlayan profesyonel insanlara,
buradaki yazımı okumalarını tavsiye ediyorum :) css reset sadece browser farklılıklarını default ayarlamaktan daha fazlasını yapabiliyor.

yazının sonunda cnn.com örneği var bunu en basit açıklayan

@LefilsdeDieu, boşver sen kullanan kullansın. Sağ elle sol kulağı kafanın arkasından kullanmak dedikleri olay belki onlar için budur. Belki de benim, onun bunun hoşuna gitmiştir ama bikaç kişinin hoşuna gitmemiştir. Sen boşver @LefilsdeDieu, yazmaya devam et.
İyi çalışmalar ,)

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

son yorumlar

arama

pillinetwork