CSS Academy · Ders

PostCSS Ne Yapar ve Nasıl Çalışır

PostCSS'nin JavaScript eklentileriyle çalışan bir CSS dönüştürme aracı olduğunu öğrenin.

PostCSS Ne Yapar ve Nasıl Çalışır, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.

PostCSS nedir?

PostCSS, bir dil uzantısı değil, Sass gibi bir araçtır; plugin'ler aracılığıyla standart CSS'yi dönüştüren, JavaScript destekli bir işlemcidir. Plugin mimarisi, onu farklı parçaların kolayca birleştirilebildiği bir araç haline getirir.

PostCSS ve Sass Karşılaştırması

Sass, kendine özgü dil özellikleri bulunan bir ön işlemcidir. PostCSS ise standart CSS üzerinde çalışan bir dönüşüm işlem hattıdır. İkisi birlikte kullanılabilir: Önce Sass derlenir, ardından PostCSS ek dönüşümler uygular.

PostCSS Nasıl Çalışır

PostCSS, CSS'yi bir AST'ye (Soyut Sözdizimi Ağacı) ayrıştırır; plugin'ler AST'yi dönüştürür ve PostCSS bunu yeniden CSS olarak serileştirir. Plugin'ler herhangi bir CSS düğümünü ekleyebilir, kaldırabilir veya değiştirebilir.

PostCSS'i Yükleme

PostCSS en yaygın olarak Vite, webpack veya postcss CLI aracılığıyla kullanılır:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

Standart PostCSS yapılandırma dosyası:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS'i Derleme İşlem Hattısında Bir Adım Olarak Kullanma

Vite'ta PostCSS yerleşik olarak bulunur. Yapılandırmayı vite.config.js veya postcss.config.js dosyasına ekleyin:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

PostCSS Düğüm Türleri

PostCSS'in AST'sinde dört ana düğüm türü vardır:

Root: CSS dosyasının tamamı
Rule: bir seçici + bildirim bloğu
Declaration: bir özellik: değer çifti
AtRule: at kuralları (@media, @keyframes vb.)

Popüler PostCSS Plugin'leri

PostCSS ekosisteminde yüzlerce plugin bulunur:

autoprefixer: üretici ön ekleri ekler
cssnano: CSS'yi küçültür
postcss-preset-env: modern CSS'yi tarayıcılarla uyumlu CSS'ye dönüştürür
postcss-import: @import ifadelerini satır içine yerleştirir
purgecss: kullanılmayan CSS'yi kaldırır

Kaynak Eşlemeleri

PostCSS, hata ayıklamayı kolaylaştırmak için küçültülmüş çıktıyı tarayıcı DevTools'unda özgün CSS'ye eşleyen kaynak eşlemeleri oluşturabilir.

PostCSS ve CSS-in-JS Karşılaştırması

PostCSS, statik CSS dosyalarını dönüştürür. CSS-in-JS, çalışma zamanında JavaScript'te dinamik olarak CSS üretir. Bunlar farklı kullanım alanlarına yönelik farklı araçlardır: PostCSS geleneksel stil sayfaları için, CSS-in-JS ise bileşen kapsamındaki dinamik stiller için daha uygundur.

PostCSS'i CLI ile Çalıştırma

Bir dosyayı CLI ile işleyin:

npx postcss input.css -o output.css --use autoprefixer cssnano

Hızlı Kontrol

PostCSS, CSS'yi dönüşüm için temsil etmek üzere ne kullanır?

Özet

PostCSS, CSS'yi bir plugin işlem hattı aracılığıyla işleyen bir CSS dönüşüm aracıdır. CSS'yi bir AST'ye ayrıştırır, plugin'ler bunu dönüştürür ve yeniden CSS olarak serileştirir. Otomatik ön ek ekleme, küçültme, modern CSS çoklu dolguları ve özel dönüşümler için kullanın. Vite ve webpack derleme araçlarıyla yerel olarak bütünleşir.

Sıkça Sorulan Sorular

“PostCSS Ne Yapar ve Nasıl Çalışır” dersi ücretsiz mi?

Evet — “PostCSS Ne Yapar ve Nasıl Çalışır” 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.

“PostCSS Ne Yapar ve Nasıl Çalışır” dersinde ne öğreneceğim?

PostCSS'nin JavaScript eklentileriyle çalışan bir CSS dönüştürme aracı olduğunu öğrenin. 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 1. dersidir.

“PostCSS Ne Yapar ve Nasıl Çalışır” 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