Çarşamba 25 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Reset CSS ve Normalize CSS Farkları
 Reset CSS ve Normalize CSS Farkları
Arayüz CSS

Reset CSS ve Normalize CSS Farkları

Yazar : Bilal UÇAR 17 Mart 2017 2 Comments

İçindekiler

  • [mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Vital CSS Nedir ? Basit Web Framework

  • Reset CSS Nedir?

  • Normalize CSS Nedir?

  • Reset.CSS ve Normalize.CSS Arasındaki Farklar Nelerdir?

HTML bir projeyi sıfırdan yazanların muhtemelen karşılaştığı sıkıntılardan bir tanesi de sitenin kenar boşluklarının tarayıcıdan tarayıcıya değişmesidir. Her tarayıcının kendine göre varsayılan biçimlendirmesi vardır. Bu durum projenizin her tarayıcıda farklı görünmesine neden olur. Bu durum sonucunda Reset CSS ve Normalize CSS çözümleri doğmuştur.

[mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Vital CSS Nedir ? Basit Web Framework

Siz olsanız bu sorunu nasıl çözerdiniz?

Reset CSS Nedir?

Reset CSS tüm tarayıcıların varsayılan değerlerini sıfırlamaya yarar. Örnekle anlatmam gerekirse Firefox site kenar boşluğu için 5px verdiğini düşünelim. Safari ise 10 px veriyor olsun. Reset CSS alıyor bunu sıfırlıyor. Her iki tarayıcı da aynı şekilde görmüş oluyor.

Normalize CSS Nedir?

Reset CSS’de tüm değerlerin sıfırlanması sıkıntı çıkarabiliyordu. Bunun üzerine Normalize CSS çıkarıldı. Normalize CSS tüm özellikleri sıfırlamak yerine bunlara bir değer atıyordu. Örneğin site kenar boşluğuna 5 px atıyordu. Bu sayede her tarayıcı kenar boşluğunu 5 px olarak gösteriyordu.

Kodlar uzun olduğu için siteye eklemedim. Gist adresimden Normalize.CSS Örneğini inceleyebilirsiniz.
GitHub Normalize.css sayfasından son sürüme erişebilirsiniz.

Reset.CSS ve Normalize.CSS Arasındaki Farklar Nelerdir?

  • Normalize.css her şeyi sıfırlamaz. Gerekli özellikleri sizin belirlediğiniz kadar değiştir.
  • Normalize.css, reset.css kapsamının dışında kalan bazı hataları düzeltir.
  • Normalize.css modüler bir yapıdadır. Örneğin projenizde form kullanmayacaksanız form normalizasyonu bölümünü kolayca kaldırabilmenizi sağlar. Yani normalizasyonda bölümler bağımsızdır diyebiliriz.
  • Normalize.css ‘in dokümantasyonu daha gelişmiştir. Normalize.css kodu Github’da kapsamlı olarak belgelenmiştir. Her kod satırının ne işe yaradığı anlatılmaktadır. Yalnızca ne işe yaradığıyla kalmayıp tarayıcılar arasındaki farkın ne olduğunu da gösteriyor.

Karar yine tabiki sizlerin. Ancak bana sorarsanız hem dokümantasyon hem özellik açısından Normalize.CSS diyorum. Bu konudaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Etiketler: normalize css nasıl kullanılır normalize css nedir normalize css örneği normalize css ve reset css arasındaki farklar reset css nasıl kullanılır reset css nedir reset css örneği
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

2 Yorumlar

  • Vital CSS Nedir ? Basit Web Framework | Webmaster.Kitchen says:
    25 Mart 2017 at 13:49

    […] Okuma Önerisi: Reset CSS ve Normalize CSS Farkları […]

    Reply
  • es says:
    12 Haziran 2017 at 03:30

    Nested, Hub and Spoke, gibi Navigation tiplerini açıklayan bir yazı yayımlarsanız çok faydalı olabilir.

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.