Skip to content

Latest commit

 

History

History
1194 lines (854 loc) · 36.8 KB

CSS e hizli bakis.md

File metadata and controls

1194 lines (854 loc) · 36.8 KB
Raw

CSS'e Hızlı Bakış

Modern web geliştirme dünyasında kullanıcı arayüzlerinin estetik, işlevsel ve erişilebilir bir şekilde tasarlanması kritik bir öneme sahiptir. Bu hedefe ulaşmanın temel araçlarından biri de CSS'tir. Cascading Style Sheets (CSS), bir web sayfasının görünümünü şekillendiren ve düzenleyen güçlü bir stil dilidir. HTML ile yapılandırılmış bir sayfayı, CSS ile zengin ve profesyonel bir görünüme dönüştürmek mümkündür. Bu makalede, CSS'in ne olduğunu ve web geliştirmedeki yerini ele alacak, CSS’in temel kavramlarını ve tekniklerini kısa ve öz bir şekilde inceleyeceğiz.

Konu Başlıkları

  1. CSS Nedir ve Ne İşe Yarar?

    • CSS’in tanımı ve amacı
    • HTML ile ilişkisi
    • Modern web tasarımındaki rolü

  2. CSS’in Temel Yapısı

    • Seçiciler (Selectors)
    • Bildirimler ve Kurallar (Declarations and Rules)
    • CSS’in çalışma mantığı

  3. Cascading (Basamaklanma) ve Spesifiklik

    • Stil çatışmalarının çözülmesi
    • Spesifiklik kuralları ve öncelik

  4. CSS’in Temel Kavramları

    • Kutu Modeli (Box Model)
    • Konumlandırma (Positioning)
    • Display ve Visibility

  5. Responsive Tasarım ve Medya Sorguları

    • Mobil uyumluluk
    • Medya sorgularının kullanımı

  6. CSS’in Gelişimi: Yeni Özellikler

    • CSS Grid ve Flexbox
    • Değişkenler (Variables)
    • Animasyonlar ve Geçişler (Transitions)

  7. Pratik Öneriler ve Kaynaklar

    • Daha iyi CSS yazma ipuçları
    • Öğrenme kaynakları ve araçlar

1. CSS Nedir ve Ne İşe Yarar?

CSS, İngilizce açılımı "Cascading Style Sheets" olan, Türkçeye "Basamaklı Stil Şablonları" olarak çevrilen bir stil dilidir. Web sayfalarının yalnızca içerik sunmakla kalmayıp görsel açıdan da etkileyici ve düzenli bir yapıya sahip olmasını sağlar. CSS, HTML ve JavaScript ile birlikte, modern web geliştirme sürecinin temel taşlarından biridir.

CSS’in Tanımı

CSS, HTML ile oluşturulan bir web sayfasının tasarımını şekillendiren bir araçtır. Bu dil, yazı tipleri, renkler, boşluklar, kenarlıklar ve düzen gibi stil öğelerini tanımlayarak bir web sitesinin görsel kimliğini oluşturur. CSS olmadan web sayfaları yalnızca düz metinlerden ve yapılandırılmamış içeriklerden ibaret kalır.

CSS Ne İşe Yarar?

  1. Görsel Tutarlılık Sağlar: CSS, bir web sitesinin farklı bölümlerinde aynı stil kurallarını uygulayarak tasarımda tutarlılık sağlar. Örneğin, tüm başlıklar için aynı yazı tipini belirlemek CSS ile kolayca yapılabilir.
  2. HTML’den Stili Ayırır: HTML, sayfanın yapısını ve içeriğini tanımlarken, CSS tamamen stil ile ilgilenir. Bu ayrım, kodun okunabilirliğini ve yönetilebilirliğini artırır.
  3. Kolay Güncelleme İmkanı Sunar: Bir web sitesinin tasarımında bir değişiklik yapmak istediğinizde, CSS dosyasındaki birkaç satır kodu değiştirerek tüm siteyi güncelleyebilirsiniz.
  4. Responsive Tasarım Sağlar: CSS, farklı cihazlara ve ekran boyutlarına uygun tasarımlar yapmayı kolaylaştırır.
  5. Hız ve Performans Artışı: Harici CSS dosyalarının kullanımı, kod tekrarını önler ve sayfanın yüklenme hızını artırır.

HTML ile İlişkisi

HTML, bir web sayfasının iskeletini oluşturur ve içeriği düzenler. CSS ise bu iskeleti giydirerek görsel açıdan çekici hale getirir. Örneğin:

HTML:

<h1>Merhaba Dünya</h1>
<p>Bu, basit bir web sayfasıdır.</p>

CSS:

h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}

p {
  color: gray;
  font-size: 16px;
  line-height: 1.5;
}

Bu iki kod parçası birleştirildiğinde, hem düzenli hem de göze hoş gelen bir görünüm elde edilir.

Modern Web Tasarımındaki Rolü

CSS, sadece estetik bir araç değil, aynı zamanda kullanıcı deneyimini geliştiren kritik bir teknolojidir. Animasyonlar, geçiş efektleri ve dinamik görseller gibi özelliklerle etkileşimli ve profesyonel web siteleri oluşturmayı mümkün kılar. CSS olmadan, modern web sitelerinin görsel olarak zenginleşmesi ve cihaz uyumluluğu sağlanması imkansız hale gelir.

2. CSS’in Temel Yapısı

CSS, sade ve anlaşılır bir sözdizimine sahiptir. Temel yapısı, seçiciler, özellikler ve değerlerden oluşur. Bu yapı, HTML elemanlarına stil uygulamak için kullanılan kuralları belirler. Aşağıda CSS’in temel yapısını ve çalışma mantığını açıklıyoruz.

CSS’in Temel Elemanları

  1. Seçiciler (Selectors)
    Seçiciler, stil uygulanacak HTML elemanlarını belirler. Örneğin, bir <p> etiketi veya bir sınıf (class) gibi HTML’deki belirli elemanları hedefler. Yaygın kullanılan seçiciler şunlardır:

    • Evrensel Seçici (*): Sayfadaki tüm elemanları seçer.
    • Tür Seçici (p, h1): Belirli bir HTML etiketine stil uygular.
    • Sınıf Seçici (.class): Belirli bir sınıfa sahip elemanları seçer.
    • ID Seçici (#id): Belirli bir ID’ye sahip tek bir elemanı seçer.
    • Bağlamsal Seçiciler: Bir elemanın başka bir eleman içindeki konumuna göre seçim yapar.

    Örnek:

    p {
  color: red;
}
.highlight {
  background-color: yellow;
}
#main {
  font-size: 20px;
}

  2. Bildirimler (Declarations)
    Bildirimler, bir stil özelliğini ve bu özelliğe atanmış değeri içerir. Her bildirim, şu iki bileşenden oluşur:

    • Özellik (Property): Değiştirilecek stil özelliği. Örneğin, color, font-size, margin.
    • Değer (Value): Özelliğin alacağı değer. Örneğin, red, 16px, 10px.

    Örnek:

    color: blue; /* Özellik: color, Değer: blue */

  3. Kurallar (Rules)
    Bir seçici ve bir veya daha fazla bildirimin birleşiminden oluşur. CSS kuralları şu şekilde yazılır:

    seçici {
  özellik1: değer1;
  özellik2: değer2;
}

    Örnek:

    h1 {
  color: green;
  text-align: center;
}

CSS’in Çalışma Mantığı

CSS, web sayfasında stil kurallarını yukarıdan aşağıya doğru işler. Stil çatışmalarını çözmek ve hangi kuralın uygulanacağını belirlemek için basamaklanma (cascading) ve spesifiklik gibi kurallara başvurur.

CSS Nasıl Uygulanır?

  1. Satır İçi (Inline) CSS: HTML elemanına doğrudan style özelliği kullanılarak uygulanır.

    <p style="color: blue; font-size: 16px;">Merhaba!</p>

  2. Dahili (Internal) CSS: <style> etiketi içinde, genellikle <head> bölümünde tanımlanır.

    <style>
  body {
    background-color: lightgray;
  }
</style>

  3. Harici (External) CSS: Ayrı bir .css dosyasına yazılır ve HTML’e <link> etiketiyle bağlanır.

    <link rel="stylesheet" href="styles.css" />

CSS’in Gücü

Bir web sitesinin farklı bölümlerine aynı stili kolayca uygulamak, CSS’in esnek ve etkili bir yapı sunmasının nedenlerinden biridir. Örneğin, bir web sitesinin temasını değiştirmek için yalnızca CSS dosyasını güncellemek yeterlidir.

3. Cascading (Basamaklanma) ve Spesifiklik

CSS'in güçlü yönlerinden biri, aynı HTML elemanlarına birden fazla stil kuralı uygulandığında hangi kuralın geçerli olacağını belirleyen Cascading (Basamaklanma) ve Spesifiklik sistemidir. Bu sistem, CSS’in okunabilirliğini ve esnekliğini artırırken stil çatışmalarını çözmeye yardımcı olur.

Cascading (Basamaklanma)

Basamaklanma, CSS’in stil kurallarını işlem sırasını ifade eder. Bir HTML elemanına birden fazla kural uygulanıyorsa, CSS şu sırayla karar verir:

  1. Öncelik Sırası (Importance):
    !important etiketi taşıyan bir kural, diğer tüm kurallardan üstün gelir. Ancak, bu özellik yalnızca gerçekten gerekli olduğunda kullanılmalıdır.

    p {
  color: red !important;
}

  2. Kaynak Türü:

    • Satır içi (Inline) CSS: Diğer tüm kaynaklardan daha yüksek önceliğe sahiptir.
    • Dahili ve Harici CSS: Dahili ve harici kurallar arasında öncelik farkı yoktur; spesifiklik ve kaynak sırasına göre değerlendirilir.

  3. Spesifiklik Değeri:
    Daha spesifik bir seçici, daha az spesifik bir seçiciden önce gelir. Örneğin, #id seçicisi bir class seçicisinden önceliklidir.

  4. Yazım Sırası (Source Order):
    Aynı spesifiklik düzeyinde olan kurallardan, daha sonra yazılan kural geçerli olur.

Spesifiklik (Specificity)

Spesifiklik, bir seçicinin ne kadar ayrıntılı olduğunu belirler. Spesifiklik puanı şu şekilde hesaplanır:

  1. Inline Stil: 1000 puan
  2. ID Seçicisi: 100 puan
  3. Sınıf, Pseudo-class veya Özellik Seçicisi: 10 puan
  4. Tür Seçicisi veya Pseudo-element: 1 puan

Örnek:

/* Spesifiklik puanı: 1 */
p {
  color: blue;
}

/* Spesifiklik puanı: 10 */
.highlight {
  color: green;
}

/* Spesifiklik puanı: 101 */
#main .highlight {
  color: red;
}

Yukarıdaki örnekte, <p class="highlight" id="main"> elemanına #main .highlight kuralı uygulanır çünkü en yüksek spesifiklik puanına sahiptir.

Basamaklanma ve Spesifiklik Örneği

HTML:

<p id="intro" class="highlight">Merhaba, dünya!</p>

CSS:

p {
  color: blue; /* Tür seçicisi: Spesifiklik 1 */
}

.highlight {
  color: green; /* Sınıf seçicisi: Spesifiklik 10 */
}

#intro {
  color: red; /* ID seçicisi: Spesifiklik 100 */
}

Sonuç: Paragrafın rengi kırmızı olacaktır. Çünkü #intro kuralı en yüksek spesifikliğe sahiptir.

Stil Çatışmalarını Çözmek

Stil çatışmalarında aşağıdaki kurallar işinize yarayabilir:

  • Mümkünse !important kullanımını azaltın.
  • Daha spesifik seçiciler yazmayı tercih edin.
  • CSS kodlarınızı modüler hale getirerek çatışmaları en aza indirin.

İyi Bir CSS Yönetimi İçin Öneriler

  • Kodunuzu Düzenli Yazın: Spesifikliği düşük ve anlaşılır kurallar yazmak, kodun okunabilirliğini artırır.
  • Küresel (Global) Stillerden Kaçının: Her şeyi etkileyen kurallar yerine, yalnızca gerektiğinde uygulanacak kurallar yazın.
  • Harici Stil Dosyaları Kullanın: Kodunuzu ayrı dosyalarda tutarak yönetimi kolaylaştırın.

4. CSS’in Temel Kavramları

CSS’in temel kavramlarını genişletilmiş açıklamalarla ele alalım. Bu bilgiler, CSS’in çalışma prensiplerini derinlemesine anlamanıza ve karmaşık tasarımlar oluşturmanıza yardımcı olacaktır.

4.1. Kutu Modeli (Box Model)

Web sayfasındaki tüm elemanlar, birer kutu olarak temsil edilir ve bu kutuların görsel düzenini anlamak kritik öneme sahiptir.

Kutu Modeli'nin Elemanları:

  • Content (İçerik): Elemanın içeriğini içerir, örneğin metin veya resim.
  • Padding (İç Dolgu): İçeriğin kutunun kenarlarına olan mesafesini belirler. Renkli bir arka plan uygularsanız, padding bu arka planı etkiler.
  • Border (Kenarlık): Kutunun dış kenarını çerçeveleyen alan. Kenarlığın boyutu, şekli ve rengi özelleştirilebilir.
  • Margin (Dış Boşluk): Kutunun diğer elemanlarla olan mesafesini belirler. Bu, elemanın çevresindeki alanı kontrol eder.

Örnek Kullanım:

.box {
  width: 200px; /* İçeriğin genişliği */
  height: 100px; /* İçeriğin yüksekliği */
  padding: 10px; /* İç dolgusu */
  border: 5px solid red; /* Kenarlığı */
  margin: 20px; /* Dış boşluk */
}

box-sizing Özelliği

Varsayılan olarak, CSS’de width ve height sadece content alanını kapsar. Ancak box-sizing ile bu davranış değiştirilebilir:

  • content-box (Varsayılan): width ve height, yalnızca içeriği kapsar.
  • border-box: width ve height, içerik, padding ve border’ı kapsar.
.box {
  box-sizing: border-box;
}

Bu, eleman boyutlarını kontrol etmeyi kolaylaştırır ve responsive tasarımlar için önerilir.

4.2. Konumlandırma (Positioning)

position Değerlerinin Detaylı İncelemesi:

  • Static: Varsayılan değerdir. Elemanlar belge akışına göre sıralanır.
  • Relative: Eleman, normal konumuna göre hareket ettirilir. 
    .relative {
  position: relative;
  top: 10px;
  left: 20px;
}
  • Absolute: Eleman, en yakın konumlandırılmış üst elemanına göre yerleştirilir. 
    .absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}
  • Fixed: Eleman, tarayıcı penceresine sabitlenir ve kaydırma sırasında hareket etmez. 
    .fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
  • Sticky: Eleman, belirli bir kaydırma noktasına kadar normal davranır, ardından sabitlenir. 
    .sticky {
  position: sticky;
  top: 0;
}

Konumlandırma, z-index ile birlikte kullanılarak elemanların yığılma sırasını kontrol etmenize olanak tanır.

4.3. Display ve Visibility

display Değerlerinin Detaylı İncelemesi:

  • inline: Eleman, sadece içeriği kadar genişlik kaplar ve blok elemanlarla aynı satırda olabilir.
  • block: Eleman, bir blok oluşturur ve yeni bir satıra geçer.
  • inline-block: Hem inline gibi davranır hem de block özelliklerini taşır (padding, margin, width, height destekler).
  • none: Eleman tamamen gizlenir ve yer kaplamaz.

Görselleştirme Örneği:

.inline {
  display: inline;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

visibility Kullanımı:

visibility: hidden; özelliğiyle eleman görünmez olur, ancak hala yer kaplar. display: none; ise elemanı tamamen kaldırır.

4.4. Z-Index ve Katmanlama

z-index Özelliği:

Elemanların diğer elemanların üstünde mi yoksa altında mı görüneceğini belirler. Negatif değerler, elemanı daha alt bir katmana taşır.

.box1 {
  position: absolute;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 2; /* box2, box1’in üstünde görünür */
}

4.5. Float ve Clear

Float Kullanımı:

Elemanların yan yana hizalanmasını sağlar. Ancak belge akışını etkilediği için dikkatle kullanılmalıdır.

.image {
  float: left;
  margin: 10px;
}

Clear Kullanımı:

float özellikli elemanların altına yerleşmesini sağlamak için kullanılır.

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4.6. Flexbox ve Grid Sistemi

Flexbox:

Elemanları yatay ve dikey olarak hizalamak için kullanılır. Daha dinamik ve responsive tasarımlar oluşturmak için idealdir.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid:

Daha karmaşık düzenler için tasarlanmıştır. Elemanları hem yatay hem de dikey eksende kolayca düzenler.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

4.7. Responsive Tasarım İçin Temel Teknikler

Medya Sorguları:

Farklı ekran boyutlarına uygun tasarımlar için kullanılır.

@media (max-width: 768px) {
  .box {
    width: 100%;
  }
}

5. Responsive Tasarım ve Medya Sorguları

Web kullanıcılarının cihaz çeşitliliği her geçen gün artarken, bir web sitesinin farklı ekran boyutlarına ve cihaz türlerine uyum sağlaması kritik hale gelmiştir. Responsive tasarım, bu ihtiyacı karşılayan bir yaklaşımdır ve CSS’in güçlü özellikleri sayesinde uygulanabilir.

Responsive Tasarım Nedir?

Responsive tasarım, bir web sitesinin, kullanıcının cihazına (masaüstü, tablet, telefon vb.) göre uygun şekilde görünmesini ve çalışmasını sağlayan bir tasarım metodolojisidir. Bu, ekran boyutuna göre düzenlerin, yazı tiplerinin, resimlerin ve diğer öğelerin yeniden şekillendirilmesini içerir.

Responsive tasarımın temel ilkeleri:

  1. Esnek Izgaralar (Flexible Grids): Tasarım, yüzde tabanlı genişliklerle oluşturulur.
  2. Esnek Görseller (Flexible Images): Görseller, cihaz ekran boyutlarına göre yeniden boyutlandırılır.
  3. Medya Sorguları (Media Queries): CSS ile belirli ekran boyutları için özel stil kuralları yazılır.

Medya Sorguları (Media Queries)

Medya sorguları, CSS ile farklı cihaz türleri veya ekran boyutlarına yönelik özel kurallar yazmayı sağlar. @media sözdizimi ile kullanılır.

Temel Kullanım:

@media (şart) {
  /* Stil kuralları */
}

Örnek:

/* Masaüstü için */
body {
  font-size: 16px;
}

/* Mobil cihazlar için */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Yaygın Medya Özellikleri:

  • max-width: Belirtilen genişlikten daha küçük ekranlar için.
  • min-width: Belirtilen genişlikten daha büyük ekranlar için.
  • orientation: Cihazın yönlendirilmesi (portrait veya landscape).
  • resolution: Cihazın çözünürlüğü (örneğin, Retina ekranlar).

Örnek:

/* Yalnızca portre modunda çalışan kurallar */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
  }
}

Esnek Izgaralar ve Yüzde Tabanlı Düzenler

Responsive tasarımda, elemanların boyutları genellikle yüzde cinsinden tanımlanır. Bu, elemanların ekran boyutuna göre uyarlanmasını sağlar.

.container {
  width: 100%; /* Tüm genişliği kaplar */
  max-width: 1200px; /* Ancak en fazla 1200px olur */
  margin: 0 auto; /* Ortalanır */
}

Esnek Görseller

Resimlerin ve diğer medyanın ekran boyutlarına uygun şekilde yeniden boyutlanması için aşağıdaki teknikler kullanılabilir:

  1. Maksimum Genişlik Ayarı:

    img {
  max-width: 100%;
  height: auto;
}

  2. CSS ile Arka Plan Görselleri:

    .hero {
  background-image: url("hero.jpg");
  background-size: cover; /* Görüntü orantılı şekilde kapsar */
  background-position: center;
}

Flexbox ve Grid ile Responsive Tasarım

Flexbox Kullanımı:

Flexbox, elemanların düzenlenmesinde esnek ve dinamik bir çözüm sunar.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 calc(33.333% - 20px); /* 3 sütun düzeni */
}

@media (max-width: 768px) {
  .item {
    flex: 1 1 100%; /* Mobilde tek sütun */
  }
}

CSS Grid Kullanımı:

Grid, karmaşık düzenleri kolayca oluşturmanıza olanak tanır.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
  gap: 20px;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* Mobilde tek sütun */
  }
}

Viewport Ayarları

Responsive tasarım için HTML’de viewport meta etiketini tanımlamak önemlidir:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Bu etiket, tarayıcıya sayfanın cihaz genişliğine göre ölçeklenmesi gerektiğini belirtir.

Örnek Uygulama

Aşağıda, medya sorgularını ve responsive tasarım ilkelerini birleştiren bir örnek bulunmaktadır:

HTML:

<div class="container">
  <header>Başlık</header>
  <main>İçerik</main>
  <aside>Kenar Çubuğu</aside>
  <footer>Alt Bilgi</footer>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* Masaüstü düzeni */
  gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Mobil düzen */
  }
}

Responsive Tasarım İpuçları

  1. Mobil Öncelikli Tasarım: Stillerinizi önce mobil için yazın, sonra daha büyük ekranlara uyarlayın.
  2. Karmaşık Medya Sorgularından Kaçının: Sade ve yönetilebilir medya sorguları oluşturun.
  3. Test Edin: Tasarımınızı farklı cihazlarda ve ekran boyutlarında test edin.

6. CSS’in Gelişimi: Yeni Özellikler

CSS, ilk günlerinden bu yana sürekli gelişerek modern web tasarımının temel bir parçası haline geldi. Bu bölümde, CSS’in son yıllarda kazandığı yeni özelliklere ve bunların nasıl kullanılabileceğine değineceğiz.

1. CSS Grid

CSS Grid, iki boyutlu (satır ve sütun) düzen oluşturmak için geliştirilmiş bir layout sistemidir. Karmaşık tasarımlar oluşturmayı kolaylaştırır ve düzenleri daha esnek hale getirir.

Özellikleri:

  • İki boyutlu düzenleme (hem yatay hem dikey).
  • Satır ve sütunlar arasında boşluk tanımlama.
  • Elemanların belirli bir hücreye yerleştirilmesi.

Kullanım Örneği:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
  grid-gap: 10px; /* Hücreler arasında boşluk */
}

.item {
  background-color: lightblue;
  padding: 10px;
}

2. Flexbox

Flexbox, tek bir boyutta (yatay veya dikey) elemanları hizalamak ve düzenlemek için geliştirilmiştir. Basit düzen ihtiyaçları için idealdir.

Örnek:

.container {
  display: flex;
  justify-content: space-between; /* Elemanlar arasında boşluk bırakır */
  align-items: center; /* Dikey hizalama */
}

3. CSS Değişkenleri (Variables)

CSS değişkenleri, stil kurallarında tekrar eden değerleri tanımlamayı ve yönetmeyi kolaylaştırır. Değişkenler -- ile tanımlanır ve var() fonksiyonu ile çağrılır.

Kullanım Örneği:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

button {
  background-color: var(--primary-color);
  color: white;
}

button:hover {
  background-color: var(--secondary-color);
}

4. Medya Sorguları için Yeni Düzeyler

CSS’in medya sorgularında artık çözünürlük, ışık modu ve kullanıcı tercihleri gibi daha fazla özellik kullanılabiliyor.

Örnek:

  • Dark Mode:

    @media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

  • Yavaş Bağlantı Algılama:

    @media (prefers-reduced-data: reduce) {
  img {
    display: none;
  }
}

5. CSS Animasyonları ve Geçişler

Geçişler (Transitions)

CSS geçişleri, elemanlar arasında yumuşak değişiklikler yapmanıza olanak tanır.

button {
  background-color: #3498db;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2ecc71;
}

Animasyonlar (Keyframes)

Daha karmaşık animasyonlar için @keyframes kullanılır.

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

6. Yeni Seçiciler

CSS, elemanları daha spesifik seçmek için yeni seçiciler sunmuştur.

  • :is() Birden fazla seçiciyi birleştirir:

    :is(h1, h2, h3) {
  color: blue;
}

  • :where() Benzer işlevsellik sunar ancak öncelik sıfırdır:

    :where(.class1, .class2) {
  margin: 0;
}

  • :not() Belirli elemanları hariç tutar:

    button:not(.disabled) {
  background-color: green;
}

7. Kapsayıcı Sorguları (Container Queries)

Container Queries, elemanların bulunduğu kapsayıcının boyutuna göre stil uygulamayı sağlar. Bu, eleman bazlı responsive tasarım için büyük bir yeniliktir.

Kullanım:

.container {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .item {
    font-size: 20px;
  }
}

8. Aspect-Ratio (En Boy Oranı)

Elemanların en-boy oranını ayarlamak için kullanılır.

Kullanım:

.image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

9. Yeni Renk Formatları

CSS, renk tanımlama konusunda daha fazla esneklik sunan yeni formatlar kazandı.

  • rgba(), hsl(), hsla() gibi eski formatların yanı sıra, CSS Color Level 4 ile lab() ve lch() renk formatları geldi.

10. Scoping ve Shadow DOM ile İzole Stiller

Shadow DOM, belirli bir bileşen için stil tanımlarını izole etmek amacıyla kullanılır. Bu, stil çakışmalarını önler.

7. Pratik Öneriler ve Kaynaklar

CSS, basit bir stil dili olarak başlasa da zamanla gelişerek güçlü bir araç haline gelmiştir. Ancak, etkili CSS yazmak, yalnızca özellikleri öğrenmekten daha fazlasını gerektirir. Bu bölümde, CSS yazarken dikkate alınması gereken pratik önerilere ve öğrenme sürecini kolaylaştıracak kaynaklara odaklanacağız.

Pratik Öneriler

  1. CSS Kodunuzu Yapılandırın

    • Anlamlı Sınıf İsimleri Kullanma:
      Sınıf isimlerini elemanın amacını veya işlevini yansıtacak şekilde seçin.

      /* Kötü örnek */
.blue-text {
  color: blue;
}

/* İyi örnek */
.error-message {
  color: red;
}

    • BEM (Block-Element-Modifier) Yaklaşımı:
      Bloklar, elemanlar ve değiştiriciler arasında net bir ayrım yaparak stil karmaşasını önler.

      .button {
  ...;
}
.button__icon {
  ...;
}
.button--disabled {
  ...;
}

  2. Küçük Spesifiklik Kullanın CSS kurallarınızı gereksiz yere karmaşıklaştırmaktan kaçının. Daha spesifik bir seçici yerine sınıf bazlı seçim tercih edin.

    /* Daha az spesifik ve okunabilir */
.navbar {
  background-color: black;
}

/* Aşırı spesifik (kaçınılması önerilir) */
body div.navbar {
  background-color: black;
}

  3. Tekrarları Azaltın Aynı stili birçok kez yazmak yerine, genel kurallar tanımlayın:

    .text {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.title {
  @extend .text; /* Sass kullanımı */
  font-size: 24px;
}

  4. Varsayılan Ayarları Sıfırlayın Farklı tarayıcıların varsayılan stillerini etkisiz hale getirmek için bir CSS reset veya normalize dosyası kullanın.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

  5. Responsive ve Modüler Olun Responsive tasarım için mobil öncelikli bir yaklaşım benimseyin ve CSS’inizi modüler hale getirin.
    Örneğin, her bileşenin kendi dosyasını oluşturun:

    components/
├── navbar.css
├── footer.css
├── card.css

  6. Performansı Optimize Edin

    • Çok büyük CSS dosyalarını minify (sıkıştırma) edin.
    • Harici CSS dosyalarını öncelikli olarak yükleyin: 
      <link rel="stylesheet" href="styles.css" />

Faydalı Araçlar ve Kaynaklar

  1. CSS Kodlama Araçları

    • Preprocessors (Önişlemciler): Sass veya LESS kullanarak CSS’inizi daha modüler ve okunabilir hale getirin.
    • PostCSS: CSS kodlarınızı otomatize eden ve modernleştiren bir araçtır.

  2. Tarayıcı Geliştirici Araçları Tarayıcıların (Chrome DevTools, Firefox Developer Tools vb.) geliştirici araçları, stil hatalarını bulmak ve düzenleme yapmak için idealdir.

  3. Öğrenim Kaynakları

    • MDN Web Docs: CSS özellikleri ve modern yöntemler hakkında en kapsamlı dokümantasyon. MDN CSS
    • CSS-Tricks: Farklı seviyelerde CSS tekniklerini öğrenmek için rehberler. CSS-Tricks
    • Can I Use: Tarayıcı uyumluluğunu kontrol etmek için mükemmel bir araç. Can I Use

  4. Online Dersler ve Uygulamalar

    • FreeCodeCamp: CSS’i sıfırdan öğrenmek isteyenler için ücretsiz bir platform. FreeCodeCamp
    • Frontend Mentor: Gerçek dünya projeleriyle CSS becerilerinizi geliştirin. Frontend Mentor

  5. CSS Animasyon Araçları

    • Animate.css: Hazır animasyon kütüphanesi. Animate.css
    • Keyframes App: Animasyonlar oluşturmak için görsel bir araç.

  6. Tarayıcı Uyumluluk ve Debugging Araçları

    • Autoprefixer: Tarayıcıya özel CSS ön eklerini otomatik ekler.
    • BrowserStack: Farklı cihaz ve tarayıcılar üzerinde test yapma imkanı.

Uygulamalı Örnek: Modüler Bir Proje Yapısı

Bir projede CSS’in düzenli ve modüler yapıda olması, bakımını kolaylaştırır. Örneğin, bir "Kart Bileşeni" için CSS:

/* card.css */
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 16px 0;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

Bunu bir components/card.css dosyasında tutarak hem tekrar eden stilleri önlersiniz hem de kodunuz daha düzenli olur.

Özet ve Sonuç

Özet

CSS, web dünyasının görsel yönünü şekillendiren temel bir araçtır. "CSS'e Hızlı Bakış" başlıklı bu makalede, CSS’in ne olduğu ve nasıl çalıştığından başlayarak, temel yapısı, kavramları, responsive tasarımın önemi ve modern CSS özellikleri gibi konuları ele aldık. Ayrıca, CSS yazarken nelere dikkat edilmesi gerektiği ve faydalanabileceğiniz araçlar ile kaynaklar üzerinde durduk.

Öne çıkan noktalar:

  • CSS’in Temel Rolü: HTML’in yapılandırılmış içeriğini görsel olarak düzenleyen CSS, modern web sitelerinin olmazsa olmazıdır.
  • Temel Kavramlar: Kutu modeli, konumlandırma ve display gibi kavramlar, CSS’in yapı taşlarıdır.
  • Responsive Tasarım: CSS’in medya sorguları ve esnek yapısıyla farklı cihazlara uyumlu tasarımlar yapılabilir.
  • Modern Özellikler: CSS Grid, Flexbox, değişkenler ve animasyonlar, modern web tasarımında büyük kolaylık sağlar.
  • Pratik Öneriler: İyi yapılandırılmış, modüler ve performans odaklı CSS kodu yazmak, uzun vadede işlerinizi kolaylaştırır.

Sonuç

CSS öğrenmek, başlangıçta basit görünebilir; ancak derinlemesine incelendiğinde, tasarım ve kullanıcı deneyimini birleştiren güçlü bir araç olduğu anlaşılır. Bu makale, hem yeni başlayanlar hem de deneyimli geliştiriciler için CSS’in temelini anlamaya yönelik bir rehber niteliği taşımaktadır.

CSS ile ilgili en önemli şey, sürekli olarak yeni özelliklerin eklenmesi ve bu özelliklerin kullanımına dair pratik yapma gerekliliğidir. Bir projede CSS yazarken her zaman şu prensibi aklınızda tutun: “Daha az kodla daha etkili sonuçlar.”

Son olarak, CSS öğrenim yolculuğunuzda kendinizi geliştirmek için pratik yapmayı ve gerçek dünya projelerinde CSS’i uygulamayı ihmal etmeyin. Unutmayın, CSS sadece bir araç değil; aynı zamanda bir sanat formudur.

İleri Okumalar: SASS, LESS, Stylus ve Daha Fazlası

CSS’i daha etkili ve verimli bir şekilde yazmanıza olanak tanıyan araçlar ve teknolojiler bulunmaktadır. Bu araçlar, özellikle büyük ölçekli projelerde, kodun daha düzenli ve sürdürülebilir olmasını sağlar. İşte en popüler CSS önişlemcilerinden bazıları:

1. SASS (Syntactically Awesome Stylesheets)

SASS, CSS yazımını daha güçlü ve esnek hale getiren bir önişlemcidir. Değişkenler, iç içe geçmiş kurallar, karışımlar (mixins) ve fonksiyonlar gibi özelliklerle CSS’i programlamaya benzer bir hale getirir.

Özellikleri:

  • Değişkenlerle tekrar eden değerleri yönetme.
  • İçe içe geçmiş kurallarla daha düzenli kod yazma.
  • Kod tekrarını önlemek için mixin kullanımı.

Örnek:

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Web Sitesi: SASS Resmi Sitesi

2. LESS (Leaner CSS)

LESS, CSS’e dinamik yetenekler ekleyen başka bir popüler önişlemcidir. LESS’in sözdizimi CSS’e çok benzediği için öğrenmesi oldukça kolaydır. LESS, değişkenler ve fonksiyonlarla daha sürdürülebilir bir kod yazımı sağlar.

Örnek:

@primary-color: #2ecc71;

.button {
  background-color: @primary-color;
  &:hover {
    background-color: darken(@primary-color, 10%);
  }
}

Web Sitesi: LESS Resmi Sitesi

3. Stylus

Stylus, CSS yazımında esneklik sağlayan minimalist bir önişlemcidir. Hem SASS hem de LESS ile benzer özelliklere sahiptir, ancak daha özgür bir sözdizimi sunar. Noktalı virgüller ve süslü parantezler isteğe bağlıdır, bu da kodu sadeleştirir.

Örnek:

primary-color = #e74c3c

.button
    background-color primary-color
    &:hover
        background-color darken(primary-color, 10%)

Web Sitesi: Stylus Resmi Sitesi

4. PostCSS

PostCSS, CSS’i işlemek ve geliştirmek için kullanılan bir araçtır. Bir önişlemci olmasa da, CSS’i modernleştiren ve tarayıcı uyumluluğunu kolaylaştıran eklentiler sunar.

Popüler Eklentiler:

  • Autoprefixer: Tarayıcı uyumluluğu için ön ekler ekler.
  • CSSnano: CSS kodunu sıkıştırır ve optimize eder.

Web Sitesi: PostCSS Resmi Sitesi

5. Tailwind CSS (Utility-First Framework)

Tailwind CSS, önişlemcilerden farklı olarak bir utility-first CSS framework’üdür. CSS’i sınıflar üzerinden yönetmenizi sağlar ve stil yazma ihtiyacını en aza indirir.

Örnek:

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
  Tıkla
</button>

Web Sitesi: Tailwind CSS Resmi Sitesi

Harika bir noktaya değindiniz! Bootstrap, CSS dünyasında gerçekten de bir dönüm noktasıdır ve CSS önişlemcileriyle birlikte "CSS Framework" başlığı altında ele alınabilir. Aşağıya, Bootstrap’ı ve CSS framework'lerini kapsayan bir bölüm ekledim:

6. CSS Framework’leri: Bootstrap ve Ötesi

CSS framework’leri, web projelerinde hızlı ve tutarlı bir tasarım oluşturmayı kolaylaştıran, hazır stil ve komponent setleri sunar. Bu framework’ler, özellikle prototip oluşturma veya büyük projelerde tutarlılık sağlama konusunda son derece faydalıdır.

Bootstrap

Bootstrap, 2011 yılında Twitter tarafından geliştirilen, CSS framework’leri arasında en popüler olanıdır. "Mobile-first" yaklaşımı, hazır grid sistemi ve kullanıma hazır bileşenleri ile CSS dünyasında bir devrim yaratmıştır.

Öne Çıkan Özellikler:
  1. Grid Sistemi: 12 sütunlu, responsive bir grid sistemiyle düzen oluşturmayı kolaylaştırır.
  2. Kullanıma Hazır Bileşenler: Butonlar, form elemanları, modallar, navbarlar gibi birçok hazır bileşen içerir.
  3. Responsive Tasarım: Mobil cihazlar için optimize edilmiştir ve medya sorgularını otomatik olarak yönetir.
  4. Eklenti Desteği: JavaScript tabanlı zengin bileşenlerle kullanıcı deneyimini artırır.
Örnek Kullanım:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-6">Sol Sütun</div>
    <div class="col-md-6">Sağ Sütun</div>
  </div>
</div>

CSS ile uğraşmadan hızlı bir şekilde düzen oluşturabilirsiniz.

Web Sitesi: Bootstrap Resmi Sitesi

Diğer Öne Çıkan Framework’ler

  • Foundation (Zurb): Bootstrap’a benzer şekilde responsive ve esnek bir framework sunar. Web Sitesi: Foundation

  • Bulma: Daha hafif bir alternatif arayanlar için sade bir framework. Web Sitesi: Bulma

  • Materialize: Google’ın Material Design yönergelerine dayanan bir framework. Web Sitesi: Materialize

  • Tailwind CSS: Utility-first yaklaşımıyla sadece ihtiyacınız olan sınıfları yazmanızı sağlar. Web Sitesi: Tailwind CSS

Neden Bootstrap Kullanmalıyım?

  1. Hızlı Başlangıç: Bootstrap, hızlı prototipler oluşturmak için idealdir.
  2. Geniş Topluluk: Geniş bir kullanıcı tabanına sahiptir, dolayısıyla dokümantasyon ve örnekler bolca bulunur.
  3. Özelleştirilebilir: Sass desteği sayesinde renkler, grid yapısı ve bileşenler özelleştirilebilir.

Bootstrap, CSS’in sınırlarını zorlayan bir framework olarak modern web tasarımında devrim yaratmıştır. Projelerinize hem hız hem de tutarlılık kazandırabilir.

CSS Framework’leri ve Önişlemcilerle İlgili Düşünceler

CSS önişlemcileri (Sass, LESS) ve framework’leri (Bootstrap, Tailwind CSS) birlikte kullanmak, projelerde esneklik ve hız sağlar. Örneğin, Bootstrap’ın grid sistemini kullanırken, Sass ile özel stiller oluşturabilirsiniz.

Neden Bu Araçları Kullanmalıyım?

  • Kod Modülerliği: Daha küçük ve yönetilebilir parçalar halinde stil yazma.
  • Daha Az Tekrar: Değişkenler ve mixin’ler sayesinde tekrar eden kod yazımı azalır.
  • Bakım Kolaylığı: Büyük projelerde stil yönetimi kolaylaşır.
  • Tarayıcı Uyumluluğu: Modern CSS özelliklerini güvenle kullanabilirsiniz.

Bu araçlar arasından ihtiyacınıza ve proje gereksinimlerinize en uygun olanını seçebilir ve detaylı bilgi için ilgili bağlantılara göz atabilirsiniz.