CSS Academy · Ders

Autoprefixer ve cssnano

Autoprefixer ile satıcı ön eklerini otomatik olarak ekleyin ve CSS çıktısını cssnano ile küçültün.

Autoprefixer ve cssnano, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Autoprefixer nedir?

Autoprefixer, desteklemeniz gereken tarayıcılara ilişkin Can I Use verilerini kullanarak CSS özelliklerine otomatik olarak üretici ön ekleri (-webkit-, -moz-, -ms-) ekleyen bir PostCSS plugin'idir.

Autoprefixer Nasıl Çalışır

Ön ekler olmadan standart CSS yazarsınız. Autoprefixer, Browserslist yapılandırmanızı okur ve derleme işlemi sırasında hedef tarayıcılarınız için gerekli ön ekleri ekler.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist Yapılandırması

Autoprefixer, hedef tarayıcıları belirlemek için Browserslist'i kullanır. Yapılandırmayı .browserslistrc veya package.json içinde tanımlayın:

# .browserslistrc
> 1%
last 2 versions
not dead

Modern CSS Az Sayıda Ön Ek Gerektirir

2024 itibarıyla modern CSS'nin çoğu (Grid, Flexbox, özel özellikler ve dönüşümler) hiç ön ek gerektirmez veya çok az ön ek gerektirir. Autoprefixer özellikle appearance, user-select ve daha yeni programlama arayüzleri gibi en yeni özellikler için kullanışlıdır.

PostCSS'ye Autoprefixer Ekleme

PostCSS yapılandırmanıza autoprefixer ekleyin:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

cssnano nedir?

cssnano, boşlukları, yorumları ve gereksiz bildirimleri kaldırarak ve güvenli optimizasyonlar uygulayarak CSS'yi küçülten, böylece mümkün olan en küçük CSS dosyasını oluşturan bir PostCSS plugin'idir.

cssnano Ön Ayarları

cssnano, optimizasyon ön ayarları sunar:

default: güvenli küçültmeler (boşlukları, yorumları ve yinelenenleri kaldırır)
advanced: özgüllüğü değiştirebilecek agresif optimizasyonlar (dikkatli kullanın)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

cssnano Ne Yapar

cssnano optimizasyonları şunları içerir:

Boşlukları ve yorumları kaldırma
Renkleri en kısa biçime dönüştürme (#ffffff → #fff)
Özdeş kuralları birleştirme
Gereksiz özellikleri kaldırma
Sıfır değerlerini kısaltma (0px → 0)

İkisini Yapılandırmada Birleştirme

Her iki plugin'i içeren bir üretim PostCSS yapılandırması:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

Küçültmeyle Kaynak Eşlemeleri

Geliştirme derlemelerinde cssnano kullanırken her zaman kaynak eşlemeleri oluşturun. Bunlar, hata ayıklama için küçültülmüş çıktıyı kaynak CSS'ye eşler ve DevTools'ta kullanılabilir.

cssnano Alternatifleri

Diğer CSS küçültücüler arasında clean-css, lightningcss (Rust tabanlı ve çok hızlı) ve Vite'ın dahili CSS küçültücüsü gibi derleme araçlarının yerleşik küçültücüleri (esbuild kullanır) bulunur.

Hızlı Kontrol

Autoprefixer'ın CSS'nize hangi üretici ön eklerini ekleyeceğini ne belirler?

Özet

Autoprefixer, Browserslist hedef tarayıcılarınıza göre üretici ön eklerini otomatik olarak ekleyerek bunları elle yazma gereğini ortadan kaldırır. cssnano, boşlukları ve yorumları kaldırarak ve güvenli optimizasyonlar uygulayarak CSS'yi küçültür. Üretim PostCSS işlem hatlarında ikisini de kullanın. Modern CSS artık eskisine göre daha az ön ek gerektirir; gerçek tarayıcı hedeflerinizle doğrulama yapın.

Sıkça Sorulan Sorular

“Autoprefixer ve cssnano” dersi ücretsiz mi?

Evet — “Autoprefixer ve cssnano” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Autoprefixer ve cssnano” dersinde ne öğreneceğim?

Autoprefixer ile satıcı ön eklerini otomatik olarak ekleyin ve CSS çıktısını cssnano ile küçültün. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Autoprefixer ve cssnano” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön