Web geli\u015ftirme d\u00fcnyas\u0131nda, s\u00fcrekli artan karma\u015f\u0131kl\u0131k ve JavaScript tabanl\u0131 framework’lerin y\u00fckseli\u015fiyle birlikte, aray\u00fcz geli\u015ftirmede neredeyse her \u015feyin JavaScript \u00fczerinden yap\u0131ld\u0131\u011f\u0131 bir d\u00f6neme girdik. Peki ya daha basit, daha performansl\u0131 ve “web’in \u00f6z\u00fcne” daha sad\u0131k bir yol olsayd\u0131? \u0130\u015fte tam da bu noktada, web’in temel s\u00f6zle\u015fmesini yeniden ele almay\u0131 hedefleyen, saf CSS tabanl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc motoru olan Selur sahneye \u00e7\u0131k\u0131yor. Modern web’in y\u00fck\u00fcn\u00fc hafifletmek, eri\u015filebilirli\u011fi art\u0131rmak ve geli\u015ftiricilere daha \u00f6zerk bir kontrol sunmak i\u00e7in CSS’in inan\u0131lmaz g\u00fcc\u00fcn\u00fc nas\u0131l kullanabilece\u011fimizi ke\u015ffetmeye haz\u0131r m\u0131s\u0131n\u0131z?<\/p>\n
G\u00fcn\u00fcm\u00fcz web geli\u015ftirme pratikleri, maalesef, \u00e7o\u011fu zaman bir JavaScript \u015fi\u015fkinli\u011fiyle karakterize ediliyor. K\u00fc\u00e7\u00fck etkile\u015fimler, basit g\u00f6rsel de\u011fi\u015fiklikler veya durum y\u00f6netimi i\u00e7in bile devasa JavaScript k\u00fct\u00fcphaneleri ve framework’ler kullanmak, sayfa y\u00fckleme s\u00fcrelerini uzat\u0131yor, performans sorunlar\u0131na yol a\u00e7\u0131yor ve hatta eri\u015filebilirlik konusunda s\u0131k\u0131nt\u0131lar yaratabiliyor. Selur, bu durumu k\u00f6kten de\u011fi\u015ftirmeyi hedefleyen bir felsefe ve bu felsefeyi ger\u00e7e\u011fe d\u00f6n\u00fc\u015ft\u00fcren bir “saf CSS UI motoru” konseptidir. Adeta bir dijital k\u0131l\u0131\u00e7 gibi, web’in temel i\u015flevselli\u011fini olu\u015fturan HTML, CSS ve JavaScript aras\u0131ndaki “web s\u00f6zle\u015fmesini” keskin bir \u015fekilde yeniden tan\u0131ml\u0131yor.<\/p>\n
Geleneksel web s\u00f6zle\u015fmesi kabaca \u015f\u00f6yle i\u015fler: HTML i\u00e7eri\u011fi ve yap\u0131y\u0131 sa\u011flar, CSS i\u00e7eri\u011fi \u015fekillendirir ve sunar, JavaScript ise etkile\u015fimi ve dinamik davran\u0131\u015flar\u0131 ekler. Ancak son y\u0131llarda JavaScript’in yetki alan\u0131 o kadar geni\u015fledi ki, \u00e7o\u011fu zaman CSS’in veya hatta HTML’in do\u011fal olarak halledebilece\u011fi g\u00f6revleri bile \u00fcstlenmeye ba\u015flad\u0131. \u0130\u015fte Selur’un temel iddias\u0131 tam da bu noktada devreye giriyor: Web’in g\u00f6rsel sunumu ve temel etkile\u015fimleri, JavaScript’e gerek kalmadan, yaln\u0131zca ve yaln\u0131zca CSS ile y\u00f6netilmelidir. Bu, JavaScript’in tamamen ortadan kalkt\u0131\u011f\u0131 anlam\u0131na gelmiyor; aksine, JavaScript’i ger\u00e7ekten karma\u015f\u0131k i\u015f mant\u0131\u011f\u0131, veri y\u00f6netimi veya sunucuyla ileti\u015fim gibi y\u00fcksek de\u011ferli g\u00f6revler i\u00e7in ayr\u0131lm\u0131\u015f, “son \u00e7are” bir ara\u00e7 haline getirmek anlam\u0131na geliyor.<\/p>\n
Selur, modern CSS’in sundu\u011fu geli\u015fmi\u015f yetenekleri (Flexbox, Grid, CSS De\u011fi\u015fkenleri, Pseudo-s\u0131n\u0131flar, Saf CSS yakla\u015f\u0131m\u0131, sadece kod yazma bi\u00e7imimizle ilgili bir tercih olman\u0131n \u00f6tesinde, web projelerinin temel ta\u015flar\u0131n\u0131 etkileyen bir dizi derin fayda sunar. \u00d6ncelikle, performans, g\u00fcn\u00fcm\u00fcz web siteleri i\u00e7in kritik bir ba\u015far\u0131 fakt\u00f6r\u00fcd\u00fcr ve Selur’un savundu\u011fu saf CSS, bu alanda \u00e7\u0131\u011f\u0131r a\u00e7ar. Taray\u0131c\u0131lar, JavaScript’i ayr\u0131\u015ft\u0131rmak, y\u00fcr\u00fctmek ve DOM’u manip\u00fcle etmek i\u00e7in \u00f6nemli bir zaman harcarlar. Bu s\u00fcre\u00e7ler, \u00f6zellikle d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Saf CSS tabanl\u0131 bir UI motoru, JavaScript y\u00fck\u00fcn\u00fc azaltarak veya tamamen ortadan kald\u0131rarak, taray\u0131c\u0131n\u0131n bu karma\u015f\u0131k i\u015flemleri yapma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu durum, sayfalar\u0131n daha h\u0131zl\u0131 y\u00fcklenmesine, etkile\u015fimlerin daha ak\u0131c\u0131 olmas\u0131na ve genel yan\u0131t s\u00fcrelerinin iyile\u015fmesine yol a\u00e7ar. Bir e-ticaret sitesinde \u00fcr\u00fcn listelemeleri aras\u0131ndaki h\u0131zl\u0131 ge\u00e7i\u015fler veya bir haber portal\u0131ndaki makaleler aras\u0131nda an\u0131nda gezinme gibi senaryolarda, bu performans art\u0131\u015f\u0131 do\u011frudan kullan\u0131c\u0131 memnuniyetine d\u00f6n\u00fc\u015f\u00fcr.<\/p>\n Eri\u015filebilirlik (Accessibility – A11y) ise, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve saf CSS burada da \u00f6nemli avantajlar sunar. JavaScript’in a\u015f\u0131r\u0131 kullan\u0131m\u0131, ekran okuyucular ve di\u011fer yard\u0131mc\u0131 teknolojilerle uyumluluk sorunlar\u0131na yol a\u00e7abilir. \u00d6rne\u011fin, JavaScript ile olu\u015fturulmu\u015f karma\u015f\u0131k modal pencereler veya custom select kutular\u0131, d\u00fczg\u00fcn bir \u015fekilde WAI-ARIA nitelikleriyle donat\u0131lmazsa, klavye navigasyonu veya ekran okuyucular i\u00e7in birer kabusa d\u00f6n\u00fc\u015febilir. Saf CSS \u00e7\u00f6z\u00fcmleri ise, genellikle HTML’in semantik yap\u0131s\u0131n\u0131 daha az bozar ve bu sayede yard\u0131mc\u0131 teknolojilerle daha do\u011fal bir \u015fekilde uyum sa\u011flar. CSS ile bir men\u00fcy\u00fc a\u00e7\u0131p kapat\u0131rken, sadece g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc de\u011fi\u015ftirmek, temel HTML yap\u0131s\u0131n\u0131 ve odak y\u00f6netimini etkilemez. Bu da, g\u00f6rme engelliler, motor engelliler veya bili\u015fsel engelliler gibi farkl\u0131 ihtiya\u00e7lar\u0131 olan kullan\u0131c\u0131lar i\u00e7in daha kapsay\u0131c\u0131 bir deneyim yarat\u0131r. Bir web formunda hata mesajlar\u0131n\u0131n CSS ile dinamik olarak g\u00f6sterilmesi, input elementinin oda\u011f\u0131n\u0131 korurken ve ekran okuyucu taraf\u0131ndan do\u011fru bir \u015fekilde okunurken, kullan\u0131c\u0131ya an\u0131nda geri bildirim sa\u011flar.<\/p>\n Son olarak, geli\u015ftirici deneyimi (Developer Experience – DX) a\u00e7\u0131s\u0131ndan da Selur benzeri bir yakla\u015f\u0131m \u00f6nemli farklar yarat\u0131r. JavaScript k\u00fct\u00fcphanelerinin ve framework’lerinin s\u00fcrekli de\u011fi\u015fen ekosistemi, geli\u015ftiriciler i\u00e7in s\u00fcrekli bir \u00f6\u011frenme ve adaptasyon s\u00fcreci anlam\u0131na gelir. Yeni bir proje ba\u015flad\u0131\u011f\u0131nda, hangi framework’\u00fc se\u00e7ece\u011finize karar vermek, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmek ve performans optimizasyonlar\u0131yla u\u011fra\u015fmak bile ba\u015fl\u0131 ba\u015f\u0131na bir i\u015ftir. Saf CSS, bu karma\u015f\u0131kl\u0131\u011f\u0131 ortadan kald\u0131rarak, geli\u015ftiricilerin daha temel ve evrensel bir web teknolojisine odaklanmas\u0131n\u0131 sa\u011flar. CSS, taray\u0131c\u0131lar taraf\u0131ndan do\u011frudan anla\u015f\u0131lan ve yorumlanan bir dildir; ekstra bir derleme veya d\u00f6n\u00fc\u015ft\u00fcrme ad\u0131m\u0131 gerektirmez (Sass\/Less gibi pre-processor’lar ayr\u0131 tutulursa). Bu, daha h\u0131zl\u0131 geli\u015ftirme d\u00f6ng\u00fcleri, daha az hata ay\u0131klama ve daha kolay bak\u0131m anlam\u0131na gelir. \u00d6zellikle uzun \u00f6m\u00fcrl\u00fc projelerde, CSS’in kararl\u0131l\u0131\u011f\u0131 ve standartla\u015fm\u0131\u015f yap\u0131s\u0131, kod taban\u0131n\u0131n zaman i\u00e7inde daha y\u00f6netilebilir kalmas\u0131na yard\u0131mc\u0131 olur. Yeni bir geli\u015ftirici ekibe kat\u0131ld\u0131\u011f\u0131nda, framework’e \u00f6zel bilgileri \u00f6\u011frenmek yerine do\u011frudan CSS’e odaklanarak daha h\u0131zl\u0131 adapte olabilir. Dolay\u0131s\u0131yla, saf CSS’in sundu\u011fu bu \u00fc\u00e7l\u00fc fayda (performans, eri\u015filebilirlik, geli\u015ftirici deneyimi) Selur’u modern web geli\u015ftirme manzaras\u0131nda g\u00f6rmezden gelinemez bir akt\u00f6r haline getiriyor.<\/p>\n Selur felsefesini benimseyen bir geli\u015ftirici olarak, temel UI bile\u015fenlerini sadece CSS kullanarak nas\u0131l hayata ge\u00e7irebilece\u011finizi merak ediyor olmal\u0131s\u0131n\u0131z. Modern CSS’in sundu\u011fu imkanlar, art\u0131k JavaScript’e ihtiya\u00e7 duymadan bir\u00e7ok etkile\u015fimli \u00f6\u011feyi tasarlamam\u0131za olanak tan\u0131yor. Bu b\u00f6l\u00fcmde, basit bir a\u00e7\u0131l\u0131r men\u00fc (dropdown) ve bir modal pencereyi saf CSS ile nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyelim. Bu \u00f6rnekler, Selur’un g\u00fcc\u00fcn\u00fc ve web s\u00f6zle\u015fmesini yeniden tan\u0131mlama potansiyelini a\u00e7\u0131k\u00e7a g\u00f6sterecektir.<\/p>\n A\u00e7\u0131l\u0131r men\u00fcler, web sitelerinde gezinmeyi kolayla\u015ft\u0131ran yayg\u0131n bir UI \u00f6\u011fesidir. Geleneksel olarak JavaScript ile y\u00f6netilse de, CSS’in \u0130lk olarak HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Bir \u00fcst men\u00fc \u00f6\u011fesi ve onun i\u00e7inde gizlenmi\u015f alt men\u00fc \u00f6\u011feleri i\u00e7in i\u00e7 i\u00e7e listeler kullanaca\u011f\u0131z:<\/p>\n::before<\/code>\/::after<\/code>, :has()<\/code> se\u00e7ici, @container<\/code> sorgular\u0131 ve daha fazlas\u0131) bir araya getirerek, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini ve etkile\u015fimleri \u015fa\u015f\u0131rt\u0131c\u0131 bir \u00e7eviklik ve performansla olu\u015fturmay\u0131 m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir modal pencerenin a\u00e7\u0131l\u0131p kapanmas\u0131, bir men\u00fcn\u00fcn geni\u015fleyip daralmas\u0131 veya bir tab yap\u0131s\u0131n\u0131n sekme de\u011fi\u015ftirmesi gibi yayg\u0131n UI bile\u015fenleri, \u00e7o\u011fu zaman sadece CSS kullanarak ve HTML’deki uygun yap\u0131sal i\u015faretlemelerle elde edilebilir. Bu yakla\u015f\u0131m, sayfa y\u00fckleme h\u0131z\u0131n\u0131 dramatik bir \u015fekilde iyile\u015ftirir \u00e7\u00fcnk\u00fc taray\u0131c\u0131n\u0131n daha az JavaScript kodu i\u015flemesi gerekir. Ayr\u0131ca, daha az JavaScript, daha az g\u00fcvenlik a\u00e7\u0131\u011f\u0131 ve daha kolay bak\u0131m anlam\u0131na da gelebilir. Selur, web’in h\u0131z, eri\u015filebilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik gibi temel prensiplerine geri d\u00f6nerek, geli\u015ftiricilere daha minimalist ve g\u00fc\u00e7l\u00fc bir ara\u00e7 seti sunar. Bu, ger\u00e7ekten de web geli\u015ftirmenin gelece\u011fi i\u00e7in d\u00fc\u015f\u00fcn\u00fclmesi gereken radikal ama bir o kadar da mant\u0131kl\u0131 bir yakla\u015f\u0131md\u0131r. Web’in orijinal s\u00f6zle\u015fmesine sad\u0131k kalarak, daha sa\u011flam ve esnek deneyimler yaratabiliriz.<\/p>\nNeden Saf CSS? Performans, Eri\u015filebilirlik ve Geli\u015ftirici Deneyimi \u0130\u00e7in Nas\u0131l Bir Fark Yarat\u0131r?<\/h2>\n
Selur ile Temel UI Bile\u015fenleri Nas\u0131l Olu\u015fturulur? Pratik \u00d6rneklerle Ad\u0131m Ad\u0131m Rehber<\/h2>\n
1. Saf CSS ile A\u00e7\u0131l\u0131r Men\u00fc (Dropdown) Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n
:hover<\/code> ve opacity<\/code> gibi \u00f6zelliklerini kullanarak etkileyici bir a\u00e7\u0131l\u0131r men\u00fc olu\u015fturabiliriz.<\/p>\n\n