CSS \u00f6n i\u015flemciler (Sass, Less gibi), de\u011fi\u015fkenler ve i\u00e7 i\u00e7e yaz\u0131m gibi \u00f6zellikleriyle stil geli\u015ftirmeyi kolayla\u015ft\u0131rd\u0131. Ancak modern CSS, bu imkanlar\u0131n \u00e7o\u011funu do\u011frudan taray\u0131c\u0131da sunmaya ba\u015flad\u0131. Bu makalede, g\u00fcncel CSS \u00f6zelliklerini inceleyerek, \u00f6n i\u015flemcilere olan ihtiyac\u0131m\u0131z\u0131n ger\u00e7ekten azal\u0131p azalmad\u0131\u011f\u0131n\u0131 ve hatta tamamen ortadan kalk\u0131p kalkmad\u0131\u011f\u0131n\u0131 tart\u0131\u015faca\u011f\u0131z.<\/p>\n
Web teknolojileri s\u00fcrekli evriliyor ve CSS de bu de\u011fi\u015fimin merkezinde yer al\u0131yor. Bir zamanlar sadece \u00f6n i\u015flemcilerle m\u00fcmk\u00fcn olan bir\u00e7ok \u00f6zellik, art\u0131k taray\u0131c\u0131lar taraf\u0131ndan do\u011fal olarak destekleniyor. Bu durum, geli\u015ftiricilere daha sade, daha performansl\u0131 ve daha az ba\u011f\u0131ml\u0131l\u0131\u011fa sahip projeler olu\u015fturma f\u0131rsat\u0131 sunuyor.<\/p>\n
Sass’taki <\/code><\/p>\n Bu \u00f6zellik, tema y\u00f6netimi, dinamik stil de\u011fi\u015fiklikleri ve tutarl\u0131 tasar\u0131m sistemleri olu\u015fturmak i\u00e7in muazzam bir esneklik sunar.<\/p>\n Sass'\u0131n en sevilen \u00f6zelliklerinden biri olan i\u00e7 i\u00e7e yaz\u0131m, nihayet modern CSS'e de geldi. Bu \u00f6zellik sayesinde, se\u00e7icileri birbirinin i\u00e7ine yazarak daha okunakl\u0131 ve mod\u00fcler stil bloklar\u0131 olu\u015fturabiliriz. Bu, stil sayfalar\u0131n\u0131z\u0131n yap\u0131s\u0131n\u0131 HTML yap\u0131n\u0131za daha uygun hale getirerek okunabilirli\u011fi art\u0131r\u0131r ve tekrar eden se\u00e7ici tan\u0131mlamalar\u0131n\u0131 azalt\u0131r.<\/p>\n <\/code><\/p>\n \u0130\u00e7 i\u00e7e yaz\u0131m, \u00f6zellikle b\u00fcy\u00fck projelerde stil \u00e7at\u0131\u015fmalar\u0131n\u0131 azaltmaya ve belirli bir bile\u015fenin t\u00fcm stillerini tek bir yerde toplamaya yard\u0131mc\u0131 olur.<\/p>\n CSS'in CSS Custom Properties, sadece statik de\u011ferler tan\u0131mlamakla kalmaz, ayn\u0131 zamanda dinamik ve etkile\u015fimli stil y\u00f6netimi i\u00e7in de g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Preprocessor de\u011fi\u015fkenlerinin aksine, Custom Properties DOM'un bir par\u00e7as\u0131d\u0131r ve JavaScript arac\u0131l\u0131\u011f\u0131yla \u00e7al\u0131\u015fma zaman\u0131nda okunabilir ve de\u011fi\u015ftirilebilir.<\/p>\n Custom Properties, herhangi bir CSS se\u00e7icisinin i\u00e7inde tan\u0131mlanabilir. Genellikle global de\u011fi\u015fkenler i\u00e7in <\/code><\/p>\n Custom Properties, CSS'in standart basamaklama (cascading) ve miras alma kurallar\u0131na uyar. Bu, bir de\u011fi\u015fkenin bir \u00fcst elementte tan\u0131mlan\u0131p alt elementlerde kullan\u0131labilmesi veya alt elementlerde \u00fczerine yaz\u0131labilmesi anlam\u0131na gelir. Bu sayede, belirli bir bile\u015fen veya tema i\u00e7in \u00f6zel de\u011fi\u015fken setleri olu\u015fturmak \u00e7ok kolayla\u015f\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Custom Properties'in en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, JavaScript ile kolayca okunabilmesi ve de\u011fi\u015ftirilebilmesidir. Bu, dinamik tema ge\u00e7i\u015fleri, kullan\u0131c\u0131 tercihlerine g\u00f6re stil ayarlamalar\u0131 veya animasyonlar gibi bir\u00e7ok etkile\u015fimli senaryoyu do\u011frudan CSS ve JS ile \u00e7\u00f6zmemizi sa\u011flar.<\/p>\n <\/code><\/p>\n Bu yetenek, preprocessor'lar\u0131n sundu\u011fu de\u011fi\u015fken y\u00f6netimini \u00e7ok daha \u00f6tesine ta\u015f\u0131yarak, \u00e7al\u0131\u015fma zaman\u0131nda stil manip\u00fclasyonuna olanak tan\u0131r.<\/p>\n CSS'te i\u00e7 i\u00e7e yaz\u0131m (nesting), stil sayfalar\u0131n\u0131z\u0131n okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran, Sass gibi \u00f6n i\u015flemcilerden gelen kritik bir \u00f6zelliktir. Modern CSS, bu \u00f6zelli\u011fi do\u011frudan destekleyerek, geli\u015ftiricilerin daha d\u00fczenli ve sezgisel kod yazmas\u0131na olanak tan\u0131r.<\/p>\n Modern CSS'teki i\u00e7 i\u00e7e yaz\u0131m, Sass'taki kullan\u0131m\u0131na olduk\u00e7a benzerdir. Bir se\u00e7iciyi ba\u015fka bir se\u00e7icinin i\u00e7ine yerle\u015ftirerek, \u00fcst se\u00e7icinin ba\u011flam\u0131nda stil tan\u0131mlayabilirsiniz. Bu, \u00f6zellikle bile\u015fen tabanl\u0131 mimarilerde \u00e7ok faydal\u0131d\u0131r.<\/p>\n <\/code><\/p>\n Bu yap\u0131, bir bile\u015fene ait t\u00fcm stilleri tek bir blok alt\u0131nda toplar, b\u00f6ylece ilgili stilleri bulmak ve de\u011fi\u015ftirmek \u00e7ok daha kolay hale gelir.<\/p>\n \u0130\u00e7 i\u00e7e yaz\u0131m, stil \u00e7at\u0131\u015fmalar\u0131n\u0131 (collision) azaltmaya yard\u0131mc\u0131 olur. \u00c7\u00fcnk\u00fc se\u00e7iciler daha spesifik hale gelir ve global kapsamda \u00e7ak\u0131\u015fma olas\u0131l\u0131\u011f\u0131 d\u00fc\u015fer. Ayr\u0131ca, HTML yap\u0131n\u0131zdaki de\u011fi\u015fiklikler do\u011frudan CSS yap\u0131n\u0131za yans\u0131t\u0131labilir, bu da bak\u0131m s\u00fcrecini basitle\u015ftirir.<\/p>\n CSS i\u00e7 i\u00e7e yaz\u0131m \u00f6zelli\u011fi, Chromium tabanl\u0131 taray\u0131c\u0131lar (Chrome, Edge), Firefox ve Safari gibi modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu taraf\u0131ndan desteklenmektedir. Bu, \u00f6zelli\u011fi g\u00fcvenle kullanabilece\u011finiz anlam\u0131na gelir. Taray\u0131c\u0131 deste\u011fi s\u00fcrekli geli\u015fti\u011fi i\u00e7in, caniuse.com gibi kaynaklardan g\u00fcncel durumu kontrol etmek her zaman iyi bir pratiktir.<\/p>\n CSS, sadece stil tan\u0131mlamaktan \u00f6teye ge\u00e7erek, art\u0131k daha karma\u015f\u0131k hesaplamalar ve mant\u0131ksal i\u015flemler yapabilen g\u00fc\u00e7l\u00fc fonksiyonlar sunuyor. Bu fonksiyonlar, Sass'taki mixin'ler veya fonksiyonlar gibi dinamik de\u011ferler olu\u015fturma ihtiyac\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kar\u015f\u0131l\u0131yor.<\/p>\n Bu d\u00f6rt fonksiyon, duyarl\u0131 tasar\u0131m ve esnek d\u00fczenler olu\u015fturmak i\u00e7in vazge\u00e7ilmezdir:<\/p>\n <\/code><\/p>\n <\/code><\/p>\n Bunun yan\u0131 s\u0131ra, renk manip\u00fclasyonu i\u00e7in CSS se\u00e7icileri de \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015fti. Bu yeni se\u00e7iciler, karma\u015f\u0131k se\u00e7imleri daha k\u0131sa ve okunabilir hale getirir:<\/p>\n <\/code><\/p>\n Bu se\u00e7iciler, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde kod tekrar\u0131n\u0131 azalt\u0131r ve stil sayfalar\u0131n\u0131 daha mod\u00fcler hale getirir.<\/p>\n B\u00fcy\u00fck projelerde stilleri y\u00f6netmek, mod\u00fcler bir yakla\u015f\u0131m gerektirir. Modern CSS, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in \u00e7e\u015fitli mekanizmalar sunar ve preprocessor'lar\u0131n sundu\u011fu dosya b\u00f6lme ve birle\u015ftirme yeteneklerini farkl\u0131 yollarla ele al\u0131r.<\/p>\n Geleneksel olarak, <\/code><\/p>\n Bu yakla\u015f\u0131m, stilleri mant\u0131ksal olarak farkl\u0131 dosyalara ay\u0131rman\u0131za ve projenizin yap\u0131s\u0131n\u0131 d\u00fczenli tutman\u0131za olanak tan\u0131r.<\/p>\n JavaScript framework'leri (React, Vue, Angular) ile birlikte kullan\u0131lan CSS Mod\u00fclleri, stillerin yerel (scoped) olmas\u0131n\u0131 sa\u011flayarak global \u00e7ak\u0131\u015fmalar\u0131 engeller. Her bile\u015fenin kendi stil dosyas\u0131 vard\u0131r ve bu stiller yaln\u0131zca o bile\u015fene uygulan\u0131r. Web Bile\u015fenleri ise (Shadow DOM kullanarak), stilleri bile\u015fenin i\u00e7inden tamamen izole eder.<\/p>\n Bu yakla\u015f\u0131mlar, \u00f6zellikle b\u00fcy\u00fck ekiplerle \u00e7al\u0131\u015f\u0131rken veya yeniden kullan\u0131labilir bile\u015fen k\u00fct\u00fcphaneleri olu\u015ftururken kritik \u00f6neme sahiptir. Preprocessor'lar\u0131n sa\u011flad\u0131\u011f\u0131 kapsama ve mod\u00fclerlik, bu ara\u00e7larla \u00e7ok daha g\u00fc\u00e7l\u00fc bir \u015fekilde y\u00f6netilebilir.<\/p>\n <\/code><\/p>\n Katmanlar, tan\u0131mland\u0131klar\u0131 s\u0131raya g\u00f6re \u00f6ncelik kazan\u0131r. Bu, preprocessor'larda mixin'ler veya import s\u0131ras\u0131 ile sa\u011flanan \u00f6ncelik y\u00f6netimini daha yap\u0131sal bir hale getirir.<\/p>\n CSS \u00f6n i\u015flemcilerin en b\u00fcy\u00fck avantajlar\u0131ndan biri, geli\u015ftirici deneyimini iyile\u015ftirmeleriydi. Ancak modern CSS ve g\u00fcncel geli\u015ftirme ara\u00e7lar\u0131, bu deneyimi ek bir derleme ad\u0131m\u0131na ihtiya\u00e7 duymadan sunabiliyor.<\/p>\n Modern taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131, CSS Custom Properties'i, i\u00e7 i\u00e7e yaz\u0131m\u0131 ve di\u011fer yeni \u00f6zellikleri m\u00fckemmel bir \u015fekilde destekler. Stilleri do\u011frudan taray\u0131c\u0131da d\u00fczenleyebilir, de\u011fi\u015fken de\u011ferlerini an\u0131nda de\u011fi\u015ftirebilir ve de\u011fi\u015fikliklerinizi canl\u0131 olarak g\u00f6rebilirsiniz. Bu, hata ay\u0131klama ve stil denemeleri i\u00e7in olduk\u00e7a verimli bir ortam sunar.<\/p>\n Ayr\u0131ca, taray\u0131c\u0131lar art\u0131k CSS kaynak haritalar\u0131n\u0131 (source maps) da destekleyerek, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f veya birle\u015ftirilmi\u015f CSS dosyalar\u0131n\u0131n orijinal kaynak koduna geri d\u00f6n\u00fclmesini sa\u011flar. Bu, preprocessor'lar i\u00e7in \u00f6nemli bir \u00f6zellikti ve art\u0131k modern CSS ile de m\u00fcmk\u00fcn.<\/p>\n CSS \u00f6n i\u015flemciler, CSS yazmadan \u00f6nce kodu d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken, PostCSS gibi ara\u00e7lar, CSS kodunu yazd\u0131ktan sonra d\u00f6n\u00fc\u015ft\u00fcr\u00fcr (post-processing). PostCSS, modern CSS \u00f6zelliklerini hen\u00fcz tam taray\u0131c\u0131 deste\u011fi olmayan ortamlarda kullanman\u0131za olanak tan\u0131yan eklentilerle (\u00f6rne\u011fin, Autoprefixer ile taray\u0131c\u0131 \u00f6nekleri ekleme veya CSSnano ile s\u0131k\u0131\u015ft\u0131rma) g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu, preprocessor'lar\u0131n yapt\u0131\u011f\u0131 baz\u0131 g\u00f6revleri, saf CSS ile yaz\u0131lm\u0131\u015f kod \u00fczerinde yapabilir.<\/p>\n \u00d6zellikle Vite veya Webpack gibi modern bundler'lar, CSS'i otomatik olarak i\u015fleyerek, taray\u0131c\u0131 uyumlulu\u011funu sa\u011flamak ve performans\u0131 optimize etmek i\u00e7in PostCSS eklentilerini kullan\u0131r. Bu, geli\u015ftiricinin ek bir yap\u0131land\u0131rma yapmas\u0131na gerek kalmadan, en g\u00fcncel CSS \u00f6zelliklerini kullanabilmesini sa\u011flar.<\/p>\n CSS \u00f6n i\u015flemci kullanmak, projenize ek bir ba\u011f\u0131ml\u0131l\u0131k ve derleme ad\u0131m\u0131 ekler. Bu, geli\u015ftirme ortam\u0131n\u0131n kurulumunu karma\u015f\u0131kla\u015ft\u0131rabilir ve derleme s\u00fcrelerini uzatabilir. Modern CSS'e ge\u00e7i\u015f yapmak, bu ek ad\u0131m\u0131 ortadan kald\u0131rarak geli\u015ftirme s\u00fcrecini basitle\u015ftirir ve proje boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/p>\n Do\u011frudan taray\u0131c\u0131da desteklenen CSS \u00f6zellikleri kullanmak, daha h\u0131zl\u0131 geli\u015ftirme d\u00f6ng\u00fcleri, daha az ba\u011f\u0131ml\u0131l\u0131k ve genellikle daha k\u00fc\u00e7\u00fck nihai dosya boyutlar\u0131 anlam\u0131na gelir. Bu da hem geli\u015ftirici verimlili\u011fini hem de son kullan\u0131c\u0131 deneyimini olumlu y\u00f6nde etkiler.<\/p>\n CSS \u00f6n i\u015flemciler, web geli\u015ftirme d\u00fcnyas\u0131nda uzun y\u0131llar boyunca kritik bir rol oynad\u0131 ve CSS'in eksikliklerini gidererek geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131rd\u0131. Ancak modern CSS standartlar\u0131n\u0131n h\u0131zla geli\u015fmesiyle birlikte, de\u011fi\u015fkenler, i\u00e7 i\u00e7e yaz\u0131m, geli\u015fmi\u015f fonksiyonlar ve se\u00e7iciler gibi bir\u00e7ok \u00f6n i\u015flemci \u00f6zelli\u011fi art\u0131k do\u011frudan taray\u0131c\u0131lar taraf\u0131ndan destekleniyor.<\/p>\n Bu durum, CSS \u00f6n i\u015flemcilere olan ihtiyac\u0131m\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131yor ve hatta bir\u00e7ok projede tamamen ortadan kald\u0131r\u0131yor. Modern CSS, daha sade bir geli\u015ftirme s\u00fcreci, daha az ba\u011f\u0131ml\u0131l\u0131k, daha iyi performans ve daha g\u00fc\u00e7l\u00fc yerel yetenekler sunarak, stil y\u00f6netimini daha verimli ve s\u00fcrd\u00fcr\u00fclebilir hale getiriyor. Elbette, \u00e7ok eski taray\u0131c\u0131lar\u0131 desteklemeniz gereken veya \u00f6zel, karma\u015f\u0131k mant\u0131k gerektiren ni\u015f durumlar hala \u00f6n i\u015flemcileri gerekli k\u0131labilir. Ancak \u00e7o\u011fu modern web projesi i\u00e7in, saf CSS'in sundu\u011fu imkanlar fazlas\u0131yla yeterli ve gelece\u011fe y\u00f6nelik daha sa\u011flam bir temel sunmaktad\u0131r.<\/p>\n Hay\u0131r, tamamen gereksiz de\u011filler. Ancak modern CSS'in sundu\u011fu yetenekler sayesinde, bir\u00e7ok projenin \u00f6n i\u015flemcilere olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azald\u0131. \u00d6zel durumlar, \u00e7ok eski taray\u0131c\u0131 deste\u011fi veya karma\u015f\u0131k matematiksel i\u015flemler hala \u00f6n i\u015flemcileri tercih etmeyi gerektirebilir.<\/p>\n B\u00fcy\u00fck projelerde mod\u00fclerlik ve s\u00fcrd\u00fcr\u00fclebilirlik kritik \u00f6neme sahiptir. Modern CSS, Custom Properties, Nested CSS, CSS Layers ve CSS Mod\u00fclleri gibi \u00f6zelliklerle bu ihtiya\u00e7lar\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kar\u015f\u0131lar. Hatta<\/p>\n","protected":false},"excerpt":{"rendered":"CSS \u00f6n i\u015flemciler (Sass, Less gibi), de\u011fi\u015fkenler ve i\u00e7 i\u00e7e yaz\u0131m gibi \u00f6zellikleriyle stil geli\u015ftirmeyi kolayla\u015ft\u0131rd\u0131. Ancak modern CSS, bu imkanl…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-38816","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n$degisken<\/code> veya Less’teki @degisken<\/code> yap\u0131lar\u0131n\u0131n yerini, CSS’in kendi b\u00fcnyesinde bulunan \u00f6zel \u00f6zellikler (custom properties) yani de\u011fi\u015fkenler ald\u0131. --degisken-adi: deger;<\/code> \u015feklinde tan\u0131mlanan bu de\u011fi\u015fkenler, elementlerin kapsam\u0131na g\u00f6re miras al\u0131nabilir ve JavaScript ile kolayca manip\u00fcle edilebilir.<\/p>\n:root {\n --ana-renk: #3498db;\n --yazi-boyutu: 16px;\n}\n\n.kutu {\n background-color: var(--ana-renk);\n font-size: var(--yazi-boyutu);\n padding: 1em;\n}\n\n.alt-kutu {\n --ana-renk: #e74c3c; \/* Kapsam i\u00e7inde de\u011feri de\u011fi\u015ftirebiliriz *\/\n color: var(--ana-renk);\n}\n<\/pre>\nNested CSS (\u0130\u00e7 \u0130\u00e7e Yaz\u0131m)<\/h4>\n
\/* Eski Y\u00f6ntem *\/\n.nav {\n background-color: #f0f0f0;\n}\n.nav ul {\n list-style: none;\n}\n.nav ul li {\n display: inline-block;\n}\n\n\/* Modern CSS ile Nested Yaz\u0131m *\/\n.nav {\n background-color: #f0f0f0;\n\n ul {\n list-style: none;\n padding: 0;\n\n li {\n display: inline-block;\n margin-right: 10px;\n\n a {\n text-decoration: none;\n color: #333;\n\n &:hover {\n color: #007bff;\n }\n }\n }\n }\n}\n<\/pre>\n@import Kural\u0131n\u0131n Evrimi ve Mod\u00fcler Yakla\u015f\u0131mlar<\/h4>\n
@import<\/code> kural\u0131, uzun zamand\u0131r var olsa da, performans sorunlar\u0131 nedeniyle pek tercih edilmezdi. Ancak modern geli\u015ftirme ortamlar\u0131nda, bundler'lar (Webpack, Vite vb.) sayesinde CSS dosyalar\u0131n\u0131 mod\u00fcler bir \u015fekilde y\u00f6netmek \u00e7ok daha kolay hale geldi. Ayr\u0131ca, CSS Mod\u00fclleri ve Web Bile\u015fenleri gibi yakla\u015f\u0131mlar, stillerin kapsam\u0131n\u0131 ve mod\u00fclerli\u011fini daha etkili bir \u015fekilde kontrol etmemizi sa\u011fl\u0131yor.<\/p>\n\n
De\u011fi\u015fken Y\u00f6netimi: Custom Properties ile Dinamik Stiller<\/h3>\n
Tan\u0131mlama ve Kullan\u0131m Kolayl\u0131\u011f\u0131<\/h4>\n
:root<\/code> se\u00e7icisi kullan\u0131l\u0131rken, bile\u015fen bazl\u0131 de\u011fi\u015fkenler i\u00e7in ilgili bile\u015fenin se\u00e7icisi tercih edilir. Kullan\u0131m\u0131 ise var()<\/code> fonksiyonu ile olduk\u00e7a basittir.<\/p>\n:root {\n --birincil-renk: #007bff;\n --ikincil-renk: #6c757d;\n}\n\n.button {\n background-color: var(--birincil-renk);\n color: white;\n padding: 10px 15px;\n border-radius: 5px;\n}\n\n.alert {\n border: 1px solid var(--ikincil-renk);\n color: var(--ikincil-renk);\n padding: 10px;\n}\n<\/pre>\nKapsam ve Miras Alma<\/h4>\n
.tema-koyu {\n --arka-plan: #333;\n --yazi-renk: #eee;\n}\n\n.tema-acik {\n --arka-plan: #f8f9fa;\n --yazi-renk: #212529;\n}\n\nbody {\n background-color: var(--arka-plan);\n color: var(--yazi-renk);\n}\n<\/pre>\nbody<\/code> etiketine .tema-koyu<\/code> veya .tema-acik<\/code> s\u0131n\u0131f\u0131 ekleyerek t\u00fcm sayfan\u0131n temas\u0131n\u0131 an\u0131nda de\u011fi\u015ftirebiliriz.<\/p>\nJavaScript ile Etkile\u015fim<\/h4>\n
\/\/ Bir CSS de\u011fi\u015fkeninin de\u011ferini okuma\nconst primaryColor = getComputedStyle(document.documentElement)\n .getPropertyValue('--birincil-renk');\nconsole.log(primaryColor); \/\/ #007bff\n\n\/\/ Bir CSS de\u011fi\u015fkeninin de\u011ferini de\u011fi\u015ftirme\ndocument.documentElement.style.setProperty('--birincil-renk', '#ff6347');\n<\/pre>\nKod Yap\u0131s\u0131 ve Okunabilirlik: Nested CSS ile Temiz Kod<\/h3>\n
Sass Benzeri \u0130\u00e7 \u0130\u00e7e Yaz\u0131m<\/h4>\n
.card {\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n\n .card-header {\n font-size: 1.2em;\n font-weight: bold;\n margin-bottom: 10px;\n }\n\n .card-body {\n line-height: 1.6;\n color: #555;\n }\n\n .card-footer {\n margin-top: 15px;\n text-align: right;\n\n button {\n background-color: var(--birincil-renk);\n color: white;\n border: none;\n padding: 8px 12px;\n border-radius: 4px;\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n }\n }\n}\n<\/pre>\n\u00c7ak\u0131\u015fmalar\u0131 Azaltma ve Bak\u0131m Kolayl\u0131\u011f\u0131<\/h4>\n
\n
Taray\u0131c\u0131 Deste\u011fi ve Gelecek<\/h4>\n
Fonksiyonlar ve Mant\u0131k: CSS'in G\u00fc\u00e7lenen Hesaplama Yetenekleri<\/h3>\n
calc()<\/code>, min()<\/code>, max()<\/code>, clamp()<\/code><\/h4>\n\n
calc()<\/code>:<\/strong> Farkl\u0131 birimlerdeki de\u011ferleri toplayabilir, \u00e7\u0131karabilir, \u00e7arpabilir veya b\u00f6lebilirsiniz. \u00d6rne\u011fin, width: calc(100% - 20px);<\/code><\/li>\nmin()<\/code>:<\/strong> Verilen de\u011ferler aras\u0131ndan en k\u00fc\u00e7\u00fc\u011f\u00fcn\u00fc se\u00e7er. \u00d6rne\u011fin, width: min(50vw, 500px);<\/code> (ekran geni\u015fli\u011finin %50'si veya 500px, hangisi daha k\u00fc\u00e7\u00fckse).<\/li>\nmax()<\/code>:<\/strong> Verilen de\u011ferler aras\u0131ndan en b\u00fcy\u00fc\u011f\u00fcn\u00fc se\u00e7er. \u00d6rne\u011fin, width: max(20vw, 300px);<\/code> (ekran geni\u015fli\u011finin %20'si veya 300px, hangisi daha b\u00fcy\u00fckse).<\/li>\nclamp()<\/code>:<\/strong> Bir de\u011feri belirli bir aral\u0131kta tutar (minimum, tercih edilen, maksimum). \u00d6rne\u011fin, font-size: clamp(1rem, 2.5vw, 2rem);<\/code> (yaz\u0131 boyutu 1rem ile 2rem aras\u0131nda, tercih edilen 2.5vw).<\/li>\n<\/ul>\n.responsive-box {\n width: clamp(300px, 80vw, 1000px); \/* Geni\u015flik 300px-1000px aras\u0131nda, tercih 80vw *\/\n height: calc(100vh - 60px); \/* Ekran y\u00fcksekli\u011finden 60px \u00e7\u0131kar *\/\n margin-top: max(20px, 2vw); \/* \u00dcst bo\u015fluk minimum 20px, tercih 2vw *\/\n}\n<\/pre>\nvar()<\/code> ve Di\u011fer Fonksiyonlar<\/h4>\nvar()<\/code> fonksiyonu, Custom Properties'i kullanmam\u0131z\u0131 sa\u011flarken, ayn\u0131 zamanda yedek (fallback) de\u011ferler tan\u0131mlama yetene\u011fi sunar. Bu, de\u011fi\u015fkenin tan\u0131ml\u0131 olmamas\u0131 durumunda bir varsay\u0131lan de\u011ferin kullan\u0131lmas\u0131n\u0131 sa\u011flar.<\/p>\n.element {\n color: var(--tanimli-renk, #333); \/* --tanimli-renk yoksa #333 kullan *\/\n}\n<\/pre>\nrgb()<\/code>, hsl()<\/code>, lch()<\/code>, oklch()<\/code> gibi geli\u015fmi\u015f renk fonksiyonlar\u0131 ve url()<\/code>, image()<\/code> gibi di\u011fer fonksiyonlar, stil yaz\u0131m\u0131na daha fazla g\u00fc\u00e7 katmaktad\u0131r.<\/p>\nGeli\u015fmi\u015f Se\u00e7iciler (
:is()<\/code>, :where()<\/code>, :has()<\/code>)<\/h4>\n\n
:is()<\/code>:<\/strong> Birden fazla se\u00e7iciyi tek bir arg\u00fcman olarak al\u0131r ve bu se\u00e7icilerden herhangi birine uyan elementleri hedefler. \u00d6zg\u00fcll\u00fc\u011f\u00fc, en spesifik arg\u00fcman\u0131na e\u015fittir.<\/li>\n:where()<\/code>:<\/strong> :is()<\/code> ile benzerdir ancak \u00f6zg\u00fcll\u00fc\u011f\u00fc her zaman s\u0131f\u0131rd\u0131r. Bu, stillerin \u00fczerine yaz\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n:has()<\/code>:<\/strong> Bir elementin belirli bir alt \u00f6\u011feye sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etmenizi sa\u011flar. \u00d6rne\u011fin, a:has(img)<\/code>, i\u00e7inde resim olan t\u00fcm ba\u011flant\u0131lar\u0131 se\u00e7er. Bu, \"parent selector\" olarak da bilinen, uzun zamand\u0131r beklenen bir \u00f6zelliktir.<\/li>\n<\/ul>\n\/* :is() \u00f6rne\u011fi *\/\n:is(h1, h2, h3) + p {\n margin-top: 0.5em;\n}\n\n\/* :where() \u00f6rne\u011fi *\/\n:where(.sidebar, .main-content) a {\n color: blue;\n}\n\n\/* :has() \u00f6rne\u011fi *\/\n.card:has(.badge) {\n border-color: gold; \/* \u0130\u00e7inde .badge s\u0131n\u0131f\u0131na sahip bir element olan .card'\u0131 se\u00e7 *\/\n}\n<\/pre>\nMod\u00fclerlik ve Proje Y\u00f6netimi: @import ve Daha Fazlas\u0131<\/h3>\n
@import Kural\u0131n\u0131n G\u00fcncel Kullan\u0131m\u0131<\/h4>\n
@import<\/code> kural\u0131 performans\u0131 olumsuz etkiledi\u011fi i\u00e7in pek \u00f6nerilmezdi (her @import<\/code> yeni bir HTTP iste\u011fi demekti). Ancak modern geli\u015ftirme ortamlar\u0131nda, bundler'lar (Webpack, Vite, Rollup vb.) sayesinde CSS dosyalar\u0131 derleme a\u015famas\u0131nda birle\u015ftirilir. Bu sayede, @import<\/code> kural\u0131n\u0131 mod\u00fclerli\u011fi art\u0131rmak i\u00e7in kullanmak, performans kayb\u0131na yol a\u00e7maz.<\/p>\n\/* main.css *\/\n@import url('base\/_reset.css');\n@import url('components\/_button.css');\n@import url('layout\/_grid.css');\n@import url('themes\/_dark-theme.css') layer(themes); \/* Katmanl\u0131 CSS ile *\/\n\n\/* Di\u011fer stiller *\/\nbody {\n font-family: sans-serif;\n}\n<\/pre>\nCSS Mod\u00fclleri ve Web Bile\u015fenleri<\/h4>\n
Katmanl\u0131 CSS (CSS Layers)<\/h4>\n
@layer<\/code> kural\u0131, CSS'e yeni eklenen ve stillerin \u00f6nceliklerini y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunan bir \u00f6zelliktir. Bu sayede, stil sayfalar\u0131n\u0131z\u0131 farkl\u0131 katmanlara ay\u0131rarak, varsay\u0131lan stiller, bile\u015fen stilleri, tema stilleri ve yard\u0131mc\u0131 stiller gibi farkl\u0131 \u00f6ncelik seviyeleri tan\u0131mlayabilirsiniz. Bu, \u00f6zg\u00fcll\u00fck sava\u015flar\u0131n\u0131 azaltmaya ve stillerin daha \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde uygulanmas\u0131n\u0131 sa\u011flamaya yard\u0131mc\u0131 olur.<\/p>\n@layer reset, base, components, utilities, themes;\n\n@layer reset {\n * { margin: 0; padding: 0; box-sizing: border-box; }\n}\n\n@layer components {\n .button { \/* ... *\/ }\n .card { \/* ... *\/ }\n}\n\n@layer themes {\n .dark-mode { \/* ... *\/ }\n}\n<\/pre>\nGeli\u015ftirici Deneyimi ve Ara\u00e7lar: Ek Bir Derleme Ad\u0131m\u0131na Gerek Kalmadan<\/h3>\n
Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131<\/h4>\n
PostCSS ve Di\u011fer Derleme Sonras\u0131 Ara\u00e7lar<\/h4>\n
Performans ve Basitlik<\/h4>\n
Sonu\u00e7<\/h3>\n
SSS (S\u0131k Sorulan Sorular)<\/h3>\n
1. CSS \u00f6n i\u015flemciler tamamen gereksiz mi oldu?<\/h4>\n
2. B\u00fcy\u00fck projelerde hala \u00f6n i\u015flemci kullanmak daha m\u0131 iyi?<\/h4>\n