Modern web geli\u015ftirme d\u00fcnyas\u0131nda, kullan\u0131c\u0131 deneyimini ve sayfa performans\u0131n\u0131 optimize etmek i\u00e7in her ge\u00e7en g\u00fcn yeni ara\u00e7lar ve yakla\u015f\u0131mlar ortaya \u00e7\u0131kmaktad\u0131r. CSS, web sitelerinin g\u00f6rsel esteti\u011fini belirleyen temel bir dil olmas\u0131na ra\u011fmen, kendi ba\u015f\u0131na baz\u0131 s\u0131n\u0131rlamalara sahiptir. Bu s\u0131n\u0131rlamalar\u0131 a\u015fmak ve CSS geli\u015ftirme s\u00fcrecini daha verimli hale getirmek i\u00e7in Sass, Less gibi CSS \u00f6ni\u015flemcileri uzun s\u00fcredir pop\u00fclerli\u011fini korumu\u015ftur. Ancak son y\u0131llarda, CSS d\u00f6n\u00fc\u015f\u00fcm ara\u00e7lar\u0131 ekosisteminde yeni bir oyuncu, PostCSS, kendine sa\u011flam bir yer edinmi\u015ftir. PostCSS, bir \u00f6ni\u015flemci olmaktan ziyade, CSS’i ayr\u0131\u015ft\u0131r\u0131p bir soyut s\u00f6zdizimi a\u011fac\u0131na (AST) d\u00f6n\u00fc\u015ft\u00fcren ve bu AST \u00fczerinde \u00e7e\u015fitli i\u015flemler yap\u0131lmas\u0131na olanak tan\u0131yan bir ara\u00e7t\u0131r. Bu makalede, PostCSS’in ne oldu\u011funu, neden bu kadar g\u00fc\u00e7l\u00fc ve esnek oldu\u011funu inceleyecek, ard\u0131ndan \u00f6zellikle cssnext (\u015fimdiki ad\u0131yla postcss-preset-env) ve cssnano gibi iki \u00f6nemli eklentisiyle modern CSS geli\u015ftirme pratiklerini nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fc detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n
PostCSS, temelde JavaScript tabanl\u0131 bir ara\u00e7t\u0131r ve CSS kodunuzu ayr\u0131\u015ft\u0131rarak bir dizi JavaScript eklentisi arac\u0131l\u0131\u011f\u0131yla d\u00f6n\u00fc\u015ft\u00fcrmenizi sa\u011flar. Ad\u0131ndaki “Post” kelimesi, onun bir “son i\u015flemci” (post-processor) oldu\u011funu ima eder; yani taray\u0131c\u0131ya g\u00f6nderilmeden \u00f6nce CSS \u00fczerinde \u00e7e\u015fitli i\u015flemler yapar. Ancak bu tan\u0131m, PostCSS’in yeteneklerini tam olarak a\u00e7\u0131klamaz. PostCSS, bir \u00f6ni\u015flemci (preprocessor) de\u011fildir, \u00e7\u00fcnk\u00fc Sass veya Less gibi kendi \u00f6zel s\u00f6zdizimini dayatmaz. Bunun yerine, do\u011frudan standart CSS s\u00f6zdizimiyle \u00e7al\u0131\u015f\u0131r ve bu CSS’i bir soyut s\u00f6zdizimi a\u011fac\u0131na (Abstract Syntax Tree – AST) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu AST, CSS kodunun yap\u0131sal bir temsilidir ve eklentilerin bu yap\u0131 \u00fczerinde de\u011fi\u015fiklikler yapmas\u0131na olanak tan\u0131r. \u0130\u015flemler tamamland\u0131ktan sonra, PostCSS bu AST’yi tekrar standart CSS koduna d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n
PostCSS’in temel i\u015fleyi\u015fi \u015fu ad\u0131mlardan olu\u015fur:<\/p>\n
1. Ayr\u0131\u015ft\u0131rma (Parsing):<\/strong> PostCSS, girdi olarak ald\u0131\u011f\u0131 CSS kodunu ayr\u0131\u015ft\u0131r\u0131r ve bir AST olu\u015fturur. Bu AST, CSS kurallar\u0131n\u0131n, se\u00e7icilerin, \u00f6zelliklerin ve de\u011ferlerin hiyerar\u015fik bir temsilidir. Bu mod\u00fcler yap\u0131, PostCSS’i inan\u0131lmaz derecede esnek k\u0131lar. \u0130htiya\u00e7lar\u0131n\u0131za g\u00f6re sadece belirli eklentileri kullanarak projenize \u00f6zg\u00fc bir CSS d\u00f6n\u00fc\u015ft\u00fcrme zinciri olu\u015fturabilirsiniz.<\/p>\n PostCSS, modern web geli\u015ftiricilerine bir dizi \u00f6nemli avantaj sunar ve geleneksel CSS \u00f6ni\u015flemcilerine k\u0131yasla farkl\u0131 bir yakla\u015f\u0131m benimser. \u0130\u015fte PostCSS kullanman\u0131n ba\u015fl\u0131ca nedenleri:<\/p>\n CSS, s\u00fcrekli geli\u015fen bir dildir ve yeni \u00f6zellikler taray\u0131c\u0131larda standartla\u015fmadan veya tam destek g\u00f6rmeden \u00f6nce uzun bir s\u00fcre\u00e7ten ge\u00e7er. PostCSS, Sass veya Less gibi \u00f6ni\u015flemciler, genellikle “her \u015feyi yapabilen” monolitik \u00e7\u00f6z\u00fcmler sunar. PostCSS ise tamamen mod\u00fcler bir yap\u0131ya sahiptir. Sadece ihtiyac\u0131n\u0131z olan eklentileri se\u00e7erek projenizin gereksinimlerine \u00f6zel bir ara\u00e7 zinciri olu\u015fturabilirsiniz. Bu, daha hafif bir ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131, daha h\u0131zl\u0131 derleme s\u00fcreleri ve daha az \u015fi\u015fkinlik anlam\u0131na gelir. \u00d6rne\u011fin, sadece taray\u0131c\u0131 \u00f6n eklerini eklemek istiyorsan\u0131z Mod\u00fcler yap\u0131, performans avantajlar\u0131n\u0131 da beraberinde getirir. PostCSS, sadece aktif olan eklentilerin i\u015flemlerini ger\u00e7ekle\u015ftirdi\u011fi i\u00e7in, gereksiz d\u00f6n\u00fc\u015f\u00fcmlerden ka\u00e7\u0131n\u0131r ve derleme s\u00fcre\u00e7lerini h\u0131zland\u0131rabilir. B\u00fcy\u00fck projelerde bu h\u0131z fark\u0131 \u00f6nemli olabilir. Ayr\u0131ca, \u00e7\u0131kt\u0131 CSS’in boyutunu k\u00fc\u00e7\u00fcltmek i\u00e7in PostCSS, geli\u015ftiricilerin kendi \u00f6zel eklentilerini yazmalar\u0131n\u0131 kolayla\u015ft\u0131ran basit ve g\u00fc\u00e7l\u00fc bir API’ye sahiptir. Bu durum, PostCSS etraf\u0131nda h\u0131zla b\u00fcy\u00fcyen ve \u00e7ok \u00e7e\u015fitli ihtiya\u00e7lara cevap veren zengin bir eklenti ekosisteminin olu\u015fmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r. Linting’den (Stylelint), import i\u015flemlerine (postcss-import), resim boyutland\u0131rmadan (postcss-assets) hatta CSS i\u00e7inde JavaScript kullanmaya (postcss-js) kadar y\u00fczlerce eklenti bulunmaktad\u0131r.<\/p>\n PostCSS’in en b\u00fcy\u00fck avantajlar\u0131ndan biri, do\u011frudan standart CSS ile \u00e7al\u0131\u015fmas\u0131d\u0131r. Bu, \u00f6\u011frenme e\u011frisinin daha d\u00fc\u015f\u00fck oldu\u011fu anlam\u0131na gelir, \u00e7\u00fcnk\u00fc yeni bir \u00f6ni\u015flemci dilinin s\u00f6zdizimini \u00f6\u011frenmek zorunda kalmazs\u0131n\u0131z. Geli\u015ftiriciler, zaten bildikleri CSS s\u00f6zdizimini kullanarak PostCSS’in sundu\u011fu t\u00fcm avantajlardan faydalanabilirler. Bu ayn\u0131 zamanda, gelecekte PostCSS’ten vazge\u00e7me karar\u0131 alsan\u0131z bile, yazd\u0131\u011f\u0131n\u0131z CSS’in standartlara uygun kalaca\u011f\u0131 ve kolayca ta\u015f\u0131nabilece\u011fi anlam\u0131na gelir.<\/p>\n PostCSS, Node.js tabanl\u0131 bir ara\u00e7 oldu\u011fu i\u00e7in, sisteminizde Node.js ve npm (veya yarn) kurulu olmas\u0131 gerekmektedir. Kurulum ve temel kullan\u0131m ad\u0131mlar\u0131 olduk\u00e7a basittir:<\/p>\n \u00d6ncelikle, projenizin k\u00f6k dizininde bir * PostCSS eklentilerini ve yap\u0131land\u0131rmas\u0131n\u0131 tan\u0131mlamak i\u00e7in genellikle projenizin k\u00f6k dizininde Basit bir Bu \u00f6rnekte, Ard\u0131ndan, Bu komut, \u00c7o\u011fu modern web projesi, Webpack, Gulp veya Rollup gibi bir build arac\u0131 kullan\u0131r. PostCSS, bu ara\u00e7larla sorunsuz bir \u015fekilde entegre olabilir.<\/p>\n * Webpack:<\/strong> Bu entegrasyonlar, PostCSS’i mevcut build s\u00fcre\u00e7lerinize dahil etmenizi ve geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 optimize etmenizi sa\u011flar.<\/p>\n CSS de\u011fi\u015fkenleri, bir de\u011feri bir kez tan\u0131mlay\u0131p birden \u00e7ok yerde kullanman\u0131z\u0131 sa\u011flar. Bu, tema olu\u015fturma veya renk paletlerini y\u00f6netme gibi durumlarda olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n Sass gibi \u00f6ni\u015flemcilerde g\u00f6rmeye al\u0131\u015f\u0131k oldu\u011fumuz i\u00e7 i\u00e7e yaz\u0131m yetene\u011fi, CSS spesifikasyonlar\u0131na da girmeye ba\u015flam\u0131\u015ft\u0131r. Bu, a\u015fa\u011f\u0131daki gibi standart CSS’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr:<\/p>\n S\u0131k kullan\u0131lan medya sorgular\u0131n\u0131 tan\u0131mlay\u0131p bir de\u011fi\u015fkene atayarak tekrar tekrar yazmaktan kurtulabilirsiniz.<\/p>\n D\u00f6n\u00fc\u015f\u00fcm sonras\u0131:<\/p>\n Ard\u0131ndan, Gereksiz bo\u015fluklar, yeni sat\u0131rlar, girintiler ve yorumlar kald\u0131r\u0131l\u0131r. Bu, genellikle dosya boyutunda en b\u00fcy\u00fck d\u00fc\u015f\u00fc\u015f\u00fc sa\u011flar.<\/p>\n * Renk isimlerini hex kodlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr (\u00f6rn. Ayn\u0131 se\u00e7icilere sahip kurallar\u0131 birle\u015ftirir.<\/p>\n Gereksiz yere b\u00fcy\u00fck Benzer Ard\u0131ndan, PostCSS'in g\u00fcc\u00fc, eklentilerinizi nas\u0131l yap\u0131land\u0131rd\u0131\u011f\u0131n\u0131z ve build s\u00fcrecinizle nas\u0131l entegre etti\u011finizde yatar.<\/p>\n 1. D\u00f6n\u00fc\u015f\u00fcm eklentileri:<\/strong> CSS s\u00f6zdizimini de\u011fi\u015ftiren veya yeni \u00f6zellikler ekleyen eklentiler (\u00f6rn. \u00d6rnek bir s\u0131ralama:<\/p>\n PostCSS ekosistemi olduk\u00e7a geni\u015ftir. \u0130\u015fte baz\u0131 di\u011fer pop\u00fcler ve kullan\u0131\u015fl\u0131 eklentiler:<\/p>\n * PostCSS'i modern build ara\u00e7lar\u0131yla entegre etmek, geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 sorunsuz hale getirir.<\/p>\n * Webpack ile:<\/strong> * Gulp ile:<\/strong> Bu \u00f6rnekte, eklentileri do\u011frudan Gulp g\u00f6revinde tan\u0131mlad\u0131k. Alternatif olarak, \u015eimdi, PostCSS'i 1. Proje Kurulumu:<\/strong><\/p>\n 2. 3. Not:<\/strong> 4. 5. \u00c7al\u0131\u015ft\u0131rma:<\/strong><\/p>\n 6.
\n2. Eklenti \u0130\u015fleme (Plugin Processing):<\/strong> Geli\u015ftiricinin yap\u0131land\u0131rd\u0131\u011f\u0131 bir dizi PostCSS eklentisi, bu AST \u00fczerinde s\u0131rayla \u00e7al\u0131\u015f\u0131r. Her eklenti, AST’yi manip\u00fcle edebilir: yeni d\u00fc\u011f\u00fcmler ekleyebilir, mevcut d\u00fc\u011f\u00fcmleri de\u011fi\u015ftirebilir veya silebilir.
\n3. Dizgile\u015ftirme (Stringifying):<\/strong> T\u00fcm eklentiler i\u015flerini bitirdikten sonra, PostCSS son haliyle olu\u015fan AST’yi alarak tekrar okunabilir bir CSS dizesine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\nNeden PostCSS Kullanmal\u0131y\u0131z?<\/h2>\n
Gelece\u011fin CSS’ini Bug\u00fcn Kullanma<\/h3>\n
postcss-preset-env<\/code> (eski ad\u0131yla cssnext<\/code>) gibi eklentiler arac\u0131l\u0131\u011f\u0131yla, hen\u00fcz t\u00fcm taray\u0131c\u0131larda desteklenmeyen CSS \u00f6zelliklerini (\u00f6rne\u011fin, CSS de\u011fi\u015fkenleri, i\u00e7 i\u00e7e kurallar, \u00f6zel medya sorgular\u0131) bug\u00fcnden kullanman\u0131za olanak tan\u0131r. Bu eklentiler, yeni s\u00f6zdizimini eski taray\u0131c\u0131lar\u0131n anlayabilece\u011fi standart CSS’e d\u00f6n\u00fc\u015ft\u00fcr\u00fcr, b\u00f6ylece geli\u015ftiriciler en yeni \u00f6zelliklerden faydalan\u0131rken uyumluluk endi\u015fesi ta\u015f\u0131mazlar.<\/p>\nMod\u00fclerlik ve Esneklik<\/h3>\n
autoprefixer<\/code> eklentisini, sadece CSS’i s\u0131k\u0131\u015ft\u0131rmak istiyorsan\u0131z cssnano<\/code> eklentisini kullanabilirsiniz.<\/p>\nPerformans<\/h3>\n
cssnano<\/code> gibi optimizasyon eklentileriyle birle\u015fti\u011finde, hem geli\u015ftirme hem de \u00fcretim ortam\u0131nda genel performans\u0131 art\u0131r\u0131r.<\/p>\n\u00d6zelle\u015ftirilebilirlik ve Geni\u015f Eklenti Ekosistemi<\/h3>\n
Standart CSS ile \u00c7al\u0131\u015fma<\/h3>\n
PostCSS Kurulumu ve Temel Kullan\u0131m<\/h2>\n
Kurulum<\/h3>\n
package.json<\/code> dosyas\u0131 olu\u015fturman\u0131z (e\u011fer yoksa npm init -y<\/code> komutuyla) ve ard\u0131ndan PostCSS ile gerekli eklentileri kurman\u0131z gerekir:<\/p>\nnpm install --save-dev postcss postcss-cli<\/code><\/pre>\npostcss<\/code>: PostCSS’in temel motorudur.
\n* postcss-cli<\/code>: Komut sat\u0131r\u0131ndan PostCSS \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Bu, genellikle ba\u015flang\u0131\u00e7 i\u00e7in veya basit projelerde tercih edilir. Daha karma\u015f\u0131k projelerde Webpack, Gulp gibi build ara\u00e7lar\u0131n\u0131n PostCSS entegrasyonlar\u0131 kullan\u0131l\u0131r.<\/p>\nYap\u0131land\u0131rma Dosyas\u0131:
postcss.config.js<\/code><\/h3>\npostcss.config.js<\/code> ad\u0131nda bir dosya olu\u015fturulur. Bu dosya, PostCSS’e hangi eklentileri hangi s\u0131rayla kullanaca\u011f\u0131n\u0131 s\u00f6yler.<\/p>\npostcss.config.js<\/code> \u00f6rne\u011fi:<\/p>\nmodule.exports = {\n plugins: [\n require('autoprefixer') \/\/ \u00d6rnek olarak bir eklenti\n ]\n};<\/code><\/pre>\nautoprefixer<\/code> eklentisini kullanmak i\u00e7in onu plugins<\/code> dizisine ekledik. autoprefixer<\/code> taray\u0131c\u0131 \u00f6n eklerini otomatik olarak ekleyen pop\u00fcler bir PostCSS eklentisidir.<\/p>\nCLI ile Kullan\u0131m<\/h3>\n
postcss-cli<\/code> paketi sayesinde, PostCSS’i komut sat\u0131r\u0131ndan \u00e7al\u0131\u015ft\u0131rabilirsiniz. package.json<\/code> dosyan\u0131zdaki scripts<\/code> b\u00f6l\u00fcm\u00fcne bir komut eklemek en yayg\u0131n yakla\u015f\u0131md\u0131r:<\/p>\n\/\/ package.json\n{\n \"name\": \"my-postcss-project\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"build:css\": \"postcss src\/input.css -o dist\/output.css\"\n },\n \"devDependencies\": {\n \"autoprefixer\": \"^10.4.19\",\n \"postcss\": \"^8.4.38\",\n \"postcss-cli\": \"^11.0.0\"\n }\n}<\/code><\/pre>\nsrc\/input.css<\/code> dosyan\u0131z\u0131 dist\/output.css<\/code> olarak d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in \u015fu komutu \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\nnpm run build:css<\/code><\/pre>\npostcss.config.js<\/code> dosyas\u0131nda tan\u0131mlad\u0131\u011f\u0131n\u0131z eklentileri kullanarak input.css<\/code> dosyas\u0131n\u0131 i\u015fler ve output.css<\/code> olarak kaydeder.<\/p>\nBuild Ara\u00e7lar\u0131yla Entegrasyon<\/h3>\n
postcss-loader<\/code> paketi arac\u0131l\u0131\u011f\u0131yla entegre edilir. Webpack yap\u0131land\u0131rman\u0131zda CSS dosyalar\u0131n\u0131 i\u015flemek i\u00e7in postcss-loader<\/code>‘\u0131 kullan\u0131rs\u0131n\u0131z.
\n* Gulp:<\/strong> gulp-postcss<\/code> paketi ile entegre edilir. Gulp g\u00f6revlerinizde CSS dosyalar\u0131n\u0131 i\u015flemek i\u00e7in bu paketi kullan\u0131rs\u0131n\u0131z.<\/p>\ncssnext (\u015eimdi postcss-preset-env) Nedir?<\/h2>\n
cssnext<\/code>, PostCSS ekosisteminin en g\u00fc\u00e7l\u00fc ve pop\u00fcler eklentilerinden biriydi. Amac\u0131, geli\u015ftiricilerin gelece\u011fin CSS s\u00f6zdizimini bug\u00fcnden kullanmalar\u0131n\u0131 sa\u011flamakt\u0131. Bu, hen\u00fcz t\u00fcm taray\u0131c\u0131larda tam olarak desteklenmeyen veya spesifikasyon a\u015famas\u0131nda olan CSS \u00f6zelliklerini, mevcut taray\u0131c\u0131lar\u0131n anlayabilece\u011fi standart CSS’e d\u00f6n\u00fc\u015ft\u00fcrmek anlam\u0131na geliyordu. cssnext<\/code> projesi, daha sonra yerini postcss-preset-env<\/code>‘e b\u0131rakt\u0131. postcss-preset-env<\/code>, cssnext<\/code>‘in felsefesini devam ettiren ve CSS spesifikasyonlar\u0131ndaki de\u011fi\u015fikliklere daha h\u0131zl\u0131 adapte olabilen bir “preset” (\u00f6nceden ayarlanm\u0131\u015f eklenti paketi) olarak kar\u015f\u0131m\u0131za \u00e7\u0131kt\u0131.<\/p>\nNeden postcss-preset-env Kullanmal\u0131y\u0131z?<\/h3>\n
postcss-preset-env<\/code>, geli\u015ftiricilere taray\u0131c\u0131 uyumlulu\u011fu endi\u015fesi olmadan en yeni ve en geli\u015fmi\u015f CSS \u00f6zelliklerini kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. Bu, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, daha temiz ve daha mod\u00fcler CSS kodu yaz\u0131lmas\u0131na olanak tan\u0131r ve gelecekteki CSS standartlar\u0131na ge\u00e7i\u015fi kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, CSS de\u011fi\u015fkenleri veya i\u00e7 i\u00e7e kurallar gibi \u00f6zellikler, kod tekrar\u0131n\u0131 azalt\u0131r ve okunabilirli\u011fi art\u0131r\u0131r.<\/p>\nTemel \u00d6zellikleri<\/h3>\n
postcss-preset-env<\/code>, bir\u00e7ok farkl\u0131 CSS \u00f6zelli\u011fini destekler. \u0130\u015fte baz\u0131 \u00f6nemli \u00f6rnekler:<\/p>\nCSS De\u011fi\u015fkenleri (Custom Properties)<\/h4>\n
\/ input.css <\/em>\/\n:root {\n --main-color: #3498db;\n --text-color: #2c3e50;\n}\n\nbody {\n color: var(--text-color);\n}\n\n.button {\n background-color: var(--main-color);\n color: white;\n}<\/code><\/pre>\npostcss-preset-env<\/code>, bu de\u011fi\u015fkenleri desteklemeyen taray\u0131c\u0131lar i\u00e7in yedek de\u011ferlere d\u00f6n\u00fc\u015ft\u00fcrebilir veya do\u011frudan de\u011ferleri inline olarak ekleyebilir.<\/p>\n\u0130\u00e7 \u0130\u00e7e Kurallar (Nesting Rules)<\/h4>\n
postcss-preset-env<\/code>, bu s\u00f6zdizimini destekleyerek daha okunabilir ve yap\u0131sal CSS yazman\u0131z\u0131 sa\u011flar.<\/p>\n\/ input.css <\/em>\/\n.card {\n padding: 1rem;\n border: 1px solid #eee;\n\n &__header {\n font-size: 1.2rem;\n color: var(--text-color);\n }\n\n &__body {\n line-height: 1.5;\n }\n}<\/code><\/pre>\n\/ output.css <\/em>\/\n.card {\n padding: 1rem;\n border: 1px solid #eee;\n}\n\n.card__header {\n font-size: 1.2rem;\n color: #2c3e50; \/ De\u011fi\u015fken de\u011feri <\/em>\/\n}\n\n.card__body {\n line-height: 1.5;\n}<\/code><\/pre>\n\u00d6zel Medya Sorgular\u0131 (Custom Media Queries)<\/h4>\n
\/ input.css <\/em>\/\n@custom-media --viewport-medium (width <= 50rem);\n@custom-media --viewport-large (width >= 80rem);\n\n.container {\n max-width: 960px;\n}\n\n@media (--viewport-medium) {\n .container {\n padding: 0 1rem;\n }\n}<\/code><\/pre>\n\/ output.css <\/em>\/\n.container {\n max-width: 960px;\n}\n\n@media (width <= 50rem) {\n .container {\n padding: 0 1rem;\n }\n}<\/code><\/pre>\nDi\u011fer Gelecek \u00d6zellikler<\/h4>\n
postcss-preset-env<\/code> ayr\u0131ca @import<\/code> at-rules, renk fonksiyonlar\u0131 (color-mod), \u00f6zel se\u00e7iciler (custom selectors) ve daha bir\u00e7ok yeni veya deneysel CSS \u00f6zelli\u011fini destekler. Hangi \u00f6zelliklerin d\u00f6n\u00fc\u015ft\u00fcr\u00fclece\u011fi, eklentinin yap\u0131land\u0131rmas\u0131ndaki stage<\/code> se\u00e7ene\u011fi ile kontrol edilebilir. stage<\/code> de\u011feri, CSS \u00f6zelliklerinin W3C standardizasyon s\u00fcrecindeki olgunluk seviyesini belirtir.<\/p>\nKurulum ve Kullan\u0131m<\/h3>\n
postcss-preset-env<\/code>'i kurmak i\u00e7in:<\/p>\nnpm install --save-dev postcss-preset-env<\/code><\/pre>\npostcss.config.js<\/code> dosyan\u0131za ekleyin:<\/p>\n\/\/ postcss.config.js\nmodule.exports = {\n plugins: [\n require('postcss-preset-env')({\n stage: 3, \/\/ Hangi olgunluktaki CSS \u00f6zelliklerini kullanmak istedi\u011finizi belirtir.\n features: {\n 'custom-properties': {\n preserve: false \/\/ De\u011fi\u015fkenleri korumak yerine direkt de\u011ferlere d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.\n }\n }\n })\n ]\n};<\/code><\/pre>\nstage<\/code> se\u00e7ene\u011fi, hangi CSS \u00f6zelliklerinin d\u00f6n\u00fc\u015ft\u00fcr\u00fclece\u011fini kontrol eder. stage: 0<\/code> en deneysel \u00f6zellikleri i\u00e7erirken, stage: 4<\/code> neredeyse standartla\u015fm\u0131\u015f \u00f6zellikleri i\u00e7erir. Varsay\u0131lan olarak stage: 2<\/code> kullan\u0131l\u0131r. features<\/code> se\u00e7ene\u011fi ile belirli \u00f6zelliklerin davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirebilirsiniz. \u00d6rne\u011fin, custom-properties<\/code> \u00f6zelli\u011fini preserve: false<\/code> yaparak, --main-color<\/code> gibi de\u011fi\u015fkenlerin \u00e7\u0131kt\u0131da do\u011frudan #3498db<\/code> gibi de\u011ferlere d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesini sa\u011flayabilirsiniz.<\/p>\ncssnano Nedir?<\/h2>\n
cssnano<\/code>, \u00fcretim ortam\u0131 i\u00e7in CSS dosyalar\u0131n\u0131 optimize eden, s\u0131k\u0131\u015ft\u0131ran ve boyutunu k\u00fc\u00e7\u00fclten g\u00fc\u00e7l\u00fc bir PostCSS eklentisidir. Ad\u0131, \"CSS nano\" kelimelerinin birle\u015fiminden gelir ve CSS'i \"nano\" boyutlara indirme amac\u0131n\u0131 ta\u015f\u0131r. Web performans\u0131n\u0131n her zamankinden daha kritik oldu\u011fu g\u00fcn\u00fcm\u00fczde, dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek, y\u00fckleme s\u00fcrelerini h\u0131zland\u0131rmak ve bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 azaltmak i\u00e7in cssnano<\/code> vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\nNeden cssnano Kullanmal\u0131y\u0131z?<\/h3>\n
cssnano<\/code>, bir web sitesinin veya uygulaman\u0131n genel performans\u0131n\u0131 art\u0131rmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. CSS dosyalar\u0131 ne kadar k\u00fc\u00e7\u00fck olursa, taray\u0131c\u0131n\u0131n indirme ve ayr\u0131\u015ft\u0131rma s\u00fcresi o kadar k\u0131sa olur. Bu, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. cssnano<\/code>, sadece bo\u015fluklar\u0131 kald\u0131rmakla kalmaz, ayn\u0131 zamanda CSS kodunu ak\u0131ll\u0131ca analiz eder ve g\u00fcvenli bir \u015fekilde optimize eder.<\/p>\nTemel Optimizasyonlar<\/h3>\n
cssnano<\/code>, bir\u00e7ok farkl\u0131 optimizasyon tekni\u011fini bir araya getirir:<\/p>\nBo\u015fluklar\u0131 Kald\u0131rma<\/h4>\n
\/ input.css <\/em>\/\n\/ Bu bir yorumdur <\/em>\/\nbody {\n margin: 0; \/ Sayfa kenar bo\u015flu\u011fu <\/em>\/\n padding: 0;\n}<\/code><\/pre>\n\/ output.css (cssnano sonras\u0131) <\/em>\/\nbody{margin:0;padding:0}<\/code><\/pre>\nDe\u011ferleri K\u0131saltma<\/h4>\n
red<\/code> -> #f00<\/code>).
\n* S\u0131f\u0131r birimlerini kald\u0131r\u0131r (\u00f6rn. 0px<\/code> -> 0<\/code>, 0em<\/code> -> 0<\/code>).
\n* Ondal\u0131k say\u0131lar\u0131 k\u0131salt\u0131r (\u00f6rn. 0.5<\/code> -> .5<\/code>).<\/p>\n\/ input.css <\/em>\/\n.element {\n background-color: red;\n margin: 0px 0em 0.5rem 0%;\n font-weight: bold;\n}<\/code><\/pre>\n\/ output.css <\/em>\/\n.element{background-color:#f00;margin:0 0 .5rem 0;font-weight:700}<\/code><\/pre>\nKural Birle\u015ftirme<\/h4>\n
\/ input.css <\/em>\/\nh1 {\n color: blue;\n}\nh1 {\n font-size: 2em;\n}<\/code><\/pre>\n\/ output.css <\/em>\/\nh1{color:blue;font-size:2em}<\/code><\/pre>\nZ-index S\u0131k\u0131\u015ft\u0131rma<\/h4>\n
z-index<\/code> de\u011ferlerini g\u00fcvenli bir \u015fekilde optimize eder.<\/p>\n\u00d6n Ekleri Kald\u0131rma\/Ekleme<\/h4>\n
autoprefixer<\/code> ile birlikte kullan\u0131ld\u0131\u011f\u0131nda, sadece gerekli olan taray\u0131c\u0131 \u00f6n eklerini korur veya ekler, gereksizleri kald\u0131r\u0131r.<\/p>\nFont Y\u00fcz\u00fc ve Anahtar Kare Kurallar\u0131n\u0131 Birle\u015ftirme<\/h4>\n
@font-face<\/code> veya @keyframes<\/code> kurallar\u0131n\u0131 tek bir kuralda toplayarak tekrar\u0131 azalt\u0131r.<\/p>\nKurulum ve Kullan\u0131m<\/h3>\n
cssnano<\/code>'yu kurmak i\u00e7in:<\/p>\nnpm install --save-dev cssnano<\/code><\/pre>\npostcss.config.js<\/code> dosyan\u0131za ekleyin. Genellikle, cssnano<\/code> gibi optimizasyon eklentileri, di\u011fer d\u00f6n\u00fc\u015f\u00fcm eklentilerinden sonra \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n\/\/ postcss.config.js\nmodule.exports = {\n plugins: [\n require('postcss-preset-env')({\n \/\/ ... yap\u0131land\u0131rma\n }),\n require('cssnano')({\n preset: 'default', \/\/ Varsay\u0131lan optimizasyon ayarlar\u0131n\u0131 kullan\u0131r\n }),\n ]\n};<\/code><\/pre>\npreset<\/code> se\u00e7ene\u011fi ile cssnano<\/code>'nun farkl\u0131 optimizasyon seviyelerini belirleyebilirsiniz. default<\/code> preset, \u00e7o\u011fu proje i\u00e7in uygun olan kapsaml\u0131 bir optimizasyon k\u00fcmesi sunar.<\/p>\nPostCSS ile Geli\u015fmi\u015f Yap\u0131land\u0131rma ve Entegrasyon<\/h2>\n
postcss.config.js<\/code> Detaylar\u0131 ve Eklenti S\u0131ralamas\u0131<\/h3>\npostcss.config.js<\/code> dosyas\u0131ndaki plugins<\/code> dizisinin s\u0131ras\u0131 \u00f6nemlidir. Eklentiler, dizide belirtildikleri s\u0131rayla \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Genel bir kural olarak:<\/p>\npostcss-preset-env<\/code>, postcss-import<\/code>). Bunlar genellikle ilk s\u0131rada yer al\u0131r.
\n2. Taray\u0131c\u0131 \u00f6n ekleri:<\/strong> autoprefixer<\/code> gibi eklentiler, d\u00f6n\u00fc\u015f\u00fcmlerden sonra \u00e7al\u0131\u015ft\u0131r\u0131lmal\u0131d\u0131r ki yeni eklenen veya d\u00f6n\u00fc\u015ft\u00fcr\u00fclen CSS'e de \u00f6n ekler eklenebilsin.
\n3. Optimizasyon eklentileri:<\/strong> cssnano<\/code> gibi s\u0131k\u0131\u015ft\u0131rma ve optimizasyon eklentileri en sonda \u00e7al\u0131\u015ft\u0131r\u0131lmal\u0131d\u0131r. B\u00f6ylece t\u00fcm d\u00f6n\u00fc\u015f\u00fcmler tamamland\u0131ktan sonra nihai \u00e7\u0131kt\u0131 optimize edilir.<\/p>\n\/\/ postcss.config.js\nmodule.exports = {\n plugins: [\n require('postcss-import'), \/\/ CSS dosyalar\u0131n\u0131 birle\u015ftir\n require('postcss-preset-env')({\n stage: 3\n }), \/\/ Gelece\u011fin CSS'ini d\u00f6n\u00fc\u015ft\u00fcr\n require('autoprefixer'), \/\/ Taray\u0131c\u0131 \u00f6n eklerini ekle\n require('cssnano')({\n preset: 'default'\n }), \/\/ CSS'i s\u0131k\u0131\u015ft\u0131r ve optimize et\n ]\n};<\/code><\/pre>\nDi\u011fer Pop\u00fcler PostCSS Eklentileri<\/h3>\n
autoprefixer<\/code><\/strong>: Taray\u0131c\u0131 \u00f6n eklerini (\u00f6rn. -webkit-<\/code>, -moz-<\/code>) otomatik olarak ekler. postcss-preset-env<\/code> genellikle autoprefixer<\/code>'\u0131 i\u00e7erir, ancak ba\u011f\u0131ms\u0131z olarak da kullan\u0131labilir.
\n* postcss-import<\/code><\/strong>: @import<\/code> kurallar\u0131n\u0131 kullanarak birden fazla CSS dosyas\u0131n\u0131 tek bir dosyada birle\u015ftirir.
\n* postcss-nested<\/code> veya postcss-nesting<\/code><\/strong>: Sadece i\u00e7 i\u00e7e CSS kurallar\u0131 i\u00e7in \u00f6zel eklentiler. postcss-preset-env<\/code> zaten bu \u00f6zelli\u011fi kapsar.
\n* stylelint<\/code><\/strong>: CSS kodunuzu linting (statik analiz) yaparak hatalar\u0131, stil tutars\u0131zl\u0131klar\u0131n\u0131 ve potansiyel sorunlar\u0131 bulman\u0131za yard\u0131mc\u0131 olur.
\n* postcss-url<\/code><\/strong>: CSS'deki URL'leri yeniden yazar (\u00f6rn. resimlerin veya fontlar\u0131n yollar\u0131n\u0131 de\u011fi\u015ftirir).
\n* postcss-flexbugs-fixes<\/code><\/strong>: Flexbox ile ilgili bilinen taray\u0131c\u0131 hatalar\u0131n\u0131 d\u00fczeltir.<\/p>\nBuild S\u00fcre\u00e7leriyle Entegrasyon<\/h3>\n
postcss-loader<\/code> paketini kurup webpack.config.js<\/code> dosyan\u0131zda CSS dosyalar\u0131n\u0131 i\u015flemek i\u00e7in kullan\u0131rs\u0131n\u0131z.<\/p>\n\/\/ webpack.config.js\n module.exports = {\n \/\/ ...\n module: {\n rules: [\n {\n test: \/\\.css$\/,\n use: [\n 'style-loader', \/\/ veya MiniCssExtractPlugin.loader\n 'css-loader',\n 'postcss-loader' \/\/ PostCSS'i burada kullan\u0131r\u0131z\n ]\n }\n ]\n }\n };<\/code><\/pre>\npostcss-loader<\/code>, otomatik olarak projenizin k\u00f6k dizinindeki postcss.config.js<\/code> dosyas\u0131n\u0131 arar ve yap\u0131land\u0131rmay\u0131 kullan\u0131r.<\/p>\ngulp-postcss<\/code> paketini kullanarak Gulp g\u00f6revlerinizde PostCSS'i entegre edebilirsiniz.<\/p>\n\/\/ gulpfile.js\n const gulp = require('gulp');\n const postcss = require('gulp-postcss');\n const autoprefixer = require('autoprefixer');\n const cssnano = require('cssnano');\n\n gulp.task('css', () => {\n const plugins = [\n autoprefixer(),\n cssnano()\n ];\n return gulp.src('.\/src\/<\/em>\/*.css')\n .pipe(postcss(plugins))\n .pipe(gulp.dest('.\/dist'));\n });<\/code><\/pre>\ngulp-postcss<\/code> de postcss.config.js<\/code> dosyas\u0131n\u0131 kullanabilir.<\/p>\nPratik Bir \u00d6rnek<\/h2>\n
postcss-preset-env<\/code> ve cssnano<\/code> ile birlikte kullanarak pratik bir \u00f6rnek olu\u015ftural\u0131m.<\/p>\nmkdir postcss-demo\ncd postcss-demo\nnpm init -y\nnpm install --save-dev postcss postcss-cli postcss-preset-env cssnano<\/code><\/pre>\npostcss.config.js<\/code> Dosyas\u0131:<\/strong><\/p>\n\/\/ postcss.config.js\nmodule.exports = {\n plugins: [\n require('postcss-preset-env')({\n stage: 3,\n features: {\n 'custom-properties': {\n preserve: false \/\/ De\u011fi\u015fkenleri nihai \u00e7\u0131kt\u0131da d\u00fcz de\u011ferlere d\u00f6n\u00fc\u015ft\u00fcr\n },\n 'nesting-rules': true \/\/ \u0130\u00e7 i\u00e7e kurallar\u0131 etkinle\u015ftir\n }\n }),\n require('cssnano')({\n preset: 'default', \/\/ Varsay\u0131lan optimizasyonlar\u0131 uygula\n }),\n ]\n};<\/code><\/pre>\nsrc\/input.css<\/code> Dosyas\u0131:<\/strong><\/p>\n\/ src\/input.css <\/em>\/\n\/ Bu bir demo CSS dosyas\u0131d\u0131r <\/em>\/\n\n:root {\n --primary-color: #007bff;\n --secondary-color: #6c757d;\n --spacing-unit: 1rem;\n}\n\nbody {\n font-family: Arial, sans-serif;\n margin: 0px;\n padding: 0;\n background-color: #f8f9fa;\n color: var(--secondary-color);\n}\n\n.container {\n max-width: 960px;\n margin: 0 auto;\n padding: var(--spacing-unit);\n\n @media (min-width: 768px) {\n padding: calc(var(--spacing-unit) * 2);\n }\n}\n\n.button {\n display: inline-block;\n padding: 10px 20px;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: darken(var(--primary-color), 10%); \/ Bu \u00f6zellik preset-env taraf\u0131ndan i\u015flenmez, hata verir veya oldu\u011fu gibi kal\u0131r. Sadece \u00f6rnek i\u00e7in. <\/em>\/\n }\n}<\/code><\/pre>\ndarken()<\/code> gibi fonksiyonlar Sass'a \u00f6zg\u00fcd\u00fcr. postcss-preset-env<\/code> bu t\u00fcr fonksiyonlar\u0131 do\u011frudan desteklemez. E\u011fer bu t\u00fcr fonksiyonlar\u0131 kullanmak istiyorsan\u0131z, postcss-color-function<\/code> gibi ayr\u0131 bir PostCSS eklentisi eklemeniz gerekir. \u00d6rne\u011fimizde bu sat\u0131r\u0131n oldu\u011fu gibi kalaca\u011f\u0131n\u0131 veya hata verece\u011fini varsayal\u0131m. postcss-preset-env<\/code> kendi renk fonksiyonlar\u0131n\u0131 (\u00f6rn. color-mod<\/code>) destekler.<\/p>\npackage.json<\/code>'a Script Ekleme:<\/strong><\/p>\n\/\/ package.json\n{\n \"name\": \"postcss-demo\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"build:css\": \"postcss src\/input.css -o dist\/output.css\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"cssnano\": \"^6.1.2\",\n \"postcss\": \"^8.4.38\",\n \"postcss-cli\": \"^11.0.0\",\n \"postcss-preset-env\": \"^9.5.10\"\n }\n}<\/code><\/pre>\nnpm run build:css<\/code><\/pre>\n