Modern web geli\u015ftirme d\u00fcnyas\u0131nda, yeniden kullan\u0131labilir ve kaps\u00fcllenmi\u015f kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) bile\u015fenleri olu\u015fturmak, uygulamalar\u0131n h\u0131zla geli\u015ftirilmesi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi a\u00e7\u0131s\u0131ndan hayati \u00f6nem ta\u015f\u0131r. Geleneksel olarak, bu t\u00fcr “\u00f6zel elementler” olu\u015fturmak i\u00e7in React, Vue, Angular gibi JavaScript framework’lerine veya Web Components API’sine ba\u015fvurulur. Ancak, her senaryo i\u00e7in tam te\u015fekk\u00fcll\u00fc bir JavaScript \u00e7\u00f6z\u00fcm\u00fc gerekli midir? Ya da daha hafif, daha performansl\u0131 ve daha basit bir yol var m\u0131d\u0131r? \u0130\u015fte tam bu noktada CSS-Only Custom Elements kavram\u0131 devreye giriyor. Bu makalede, JavaScript’e ba\u011f\u0131ml\u0131 kalmadan, yaln\u0131zca HTML ve CSS’in g\u00fcc\u00fcyle nas\u0131l \u00f6zel bile\u015fenler olu\u015fturabilece\u011fimizi, bu yakla\u015f\u0131m\u0131n avantajlar\u0131n\u0131, temel prensiplerini ve ger\u00e7ek d\u00fcnya uygulamalar\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Amac\u0131m\u0131z, hem yeni ba\u015flayanlar\u0131n konuya hakim olmas\u0131n\u0131 sa\u011flamak hem de deneyimli geli\u015ftiricilere ilham verecek ileri d\u00fczey teknikler sunmakt\u0131r.<\/p>\n
CSS-Only Custom Elements, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, JavaScript kullanmadan, sadece CSS ve HTML’in yerel yetenekleriyle tasarlanm\u0131\u015f, kendi i\u00e7inde kaps\u00fcllenmi\u015f ve yeniden kullan\u0131labilir UI par\u00e7ac\u0131klar\u0131d\u0131r. Bunlar, ger\u00e7ek bir Web Component (web bile\u015feni) de\u011fildirler \u00e7\u00fcnk\u00fc G\u00fcn\u00fcm\u00fcz web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z ve performans, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131d\u0131r. Her eklenen JavaScript kodu, sayfan\u0131n y\u00fcklenme s\u00fcresini art\u0131rabilir, taray\u0131c\u0131da daha fazla i\u015flem g\u00fcc\u00fc t\u00fcketebilir ve dolay\u0131s\u0131yla kullan\u0131c\u0131ya daha yava\u015f bir deneyim sunabilir. CSS-Only Custom Elements yakla\u015f\u0131m\u0131, bu noktada \u00f6nemli avantajlar sunarak, geli\u015ftiricilere daha hafif, daha h\u0131zl\u0131 ve daha s\u00fcrd\u00fcr\u00fclebilir \u00e7\u00f6z\u00fcmler \u00fcretme imkan\u0131 tan\u0131r. Bu yakla\u015f\u0131m\u0131n sundu\u011fu ba\u015fl\u0131ca faydalar\u0131 ve hangi senaryolarda tercih edilmesi gerekti\u011fini derinlemesine inceleyelim.<\/p>\n En belirgin avantajlardan biri, \u015f\u00fcphesiz performanst\u0131r. JavaScript dosyalar\u0131n\u0131n indirilmesi, ayr\u0131\u015ft\u0131r\u0131lmas\u0131 ve y\u00fcr\u00fct\u00fclmesi, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda \u00f6nemli gecikmelere neden olabilir. CSS-Only bile\u015fenler, neredeyse hi\u00e7 JavaScript gerektirmedi\u011fi i\u00e7in bu ek y\u00fckten tamamen kurtulur. Taray\u0131c\u0131, sadece HTML yap\u0131s\u0131n\u0131 ve CSS stil kurallar\u0131n\u0131 i\u015fler ki bu, \u00e7o\u011fu zaman JavaScript i\u015fleminden \u00e7ok daha h\u0131zl\u0131d\u0131r. Bu durum, \u00f6zellikle ilk sayfa y\u00fcklemesinde (First Contentful Paint, FCP) ve etkile\u015fime haz\u0131r olma s\u00fcresinde (Time to Interactive, TTI) g\u00f6zle g\u00f6r\u00fcl\u00fcr iyile\u015fmeler sa\u011flar. Daha h\u0131zl\u0131 y\u00fcklenen sayfalar, kullan\u0131c\u0131lar\u0131n sitenizde daha uzun s\u00fcre kalmas\u0131n\u0131 te\u015fvik eder ve arama motoru optimizasyonu (SEO) a\u00e7\u0131s\u0131ndan da pozitif bir etki yarat\u0131r.<\/p>\n JavaScript framework’leri g\u00fc\u00e7l\u00fc ara\u00e7lar olsa da, \u00f6\u011frenme e\u011frileri ve yap\u0131land\u0131rma karma\u015f\u0131kl\u0131klar\u0131 olabilir. CSS-Only yakla\u015f\u0131m\u0131, temel HTML ve CSS bilgisi olan herkesin h\u0131zla \u00f6zel bile\u015fenler olu\u015fturabilmesini sa\u011flar. Karma\u015f\u0131k bir build s\u00fcreci (derleme s\u00fcreci) veya \u00f6zel bir tooling (ara\u00e7 tak\u0131m\u0131) gerektirmez. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde veya prototipleme a\u015famalar\u0131nda geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131rabilir. Geli\u015ftiriciler, do\u011frudan taray\u0131c\u0131da \u00e7al\u0131\u015fabilen, anla\u015f\u0131lmas\u0131 ve \u00fczerinde de\u011fi\u015fiklik yap\u0131lmas\u0131 kolay kodlar yazabilirler.<\/p>\n Daha az JavaScript kodu, genellikle daha az hata ve daha kolay hata ay\u0131klama anlam\u0131na gelir. CSS kurallar\u0131, genellikle JavaScript mant\u0131\u011f\u0131ndan daha deterministiktir (belirleyicidir) ve \u00f6ng\u00f6r\u00fclebilirdir. Bir bile\u015fenin stilini de\u011fi\u015ftirmek veya k\u00fc\u00e7\u00fck bir d\u00fczenleme yapmak, yaln\u0131zca CSS dosyas\u0131nda ilgili kural\u0131 bulup d\u00fczenlemek kadar basittir. Bu, uzun vadede projenin bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr ve yeni ekip \u00fcyelerinin projeye adaptasyonunu kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, framework ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olmad\u0131\u011f\u0131 i\u00e7in, framework g\u00fcncellemeleri veya de\u011fi\u015fiklikleri nedeniyle bile\u015fenlerin yeniden yaz\u0131lmas\u0131 gibi durumlar ya\u015fanmaz.<\/p>\n Do\u011fru bir \u015fekilde uyguland\u0131\u011f\u0131nda, CSS-Only Custom Elements, m\u00fckemmel eri\u015filebilirlik sa\u011flayabilir. Bunun temel nedeni, genellikle semantik (anlamsal) HTML yap\u0131s\u0131na dayanmalar\u0131d\u0131r. \u00d6rne\u011fin, bir sekme men\u00fcs\u00fc olu\u015ftururken, JavaScript ile dinamik olarak Peki, bu yakla\u015f\u0131m hangi durumlarda parlayabilir? \u0130\u015fte baz\u0131 pratik \u00f6rnekler:<\/p>\n \u00d6zetle, CSS-Only Custom Elements, web geli\u015ftiricilerine daha performansl\u0131, daha basit ve daha y\u00f6netilebilir UI bile\u015fenleri olu\u015fturma konusunda g\u00fc\u00e7l\u00fc bir alternatif sunar. Her ne kadar karma\u015f\u0131k etkile\u015fimler i\u00e7in JavaScript’in yerini tutmasa da, bir\u00e7ok yayg\u0131n senaryoda m\u00fckemmel bir \u00e7\u00f6z\u00fcm olabilir ve web uygulamalar\u0131n\u0131z\u0131n genel kalitesini art\u0131rabilir.<\/p>\n CSS-Only Custom Elements yakla\u015f\u0131m\u0131n\u0131n temelinde, HTML ve CSS’in belirli \u00f6zelliklerinin ak\u0131ll\u0131ca kullan\u0131lmas\u0131 yatar. Bu \u00f6zellikler, JavaScript’in sa\u011flad\u0131\u011f\u0131 kaps\u00fclleme, yeniden kullan\u0131labilirlik ve dinamiklik hissini, taray\u0131c\u0131n\u0131n yerle\u015fik yetenekleriyle taklit etmemizi sa\u011flar. Bu b\u00f6l\u00fcmde, bu yakla\u015f\u0131m\u0131n yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturan anahtar CSS \u00f6zelliklerini ve kavramlar\u0131n\u0131 detayl\u0131ca inceleyece\u011fiz. Bu \u00f6zellikler, her ne kadar ayr\u0131 ayr\u0131 biliniyor olsa da, bir araya geldiklerinde ger\u00e7ekten d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc bir g\u00fc\u00e7 olu\u015ftururlar.<\/p>\n CSS de\u011fi\u015fkenleri, modern CSS’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir ve CSS-Only Custom Elements’in dinamik ve \u00f6zelle\u015ftirilebilir olmas\u0131n\u0131 sa\u011flar. Geleneksel olarak, bir bile\u015fenin rengini, boyutunu veya yaz\u0131 tipini de\u011fi\u015ftirmek istedi\u011finizde, do\u011frudan CSS dosyas\u0131nda ilgili kural\u0131 bulup d\u00fczenlemeniz gerekirdi. Ancak CSS de\u011fi\u015fkenleri ( CSS’in g\u00fc\u00e7l\u00fc se\u00e7ici mekanizmas\u0131, bile\u015fenlerin farkl\u0131 durumlara (state) g\u00f6re stil de\u011fi\u015ftirmesini sa\u011flar. Bu, JavaScript’in genellikle \u00fcstlendi\u011fi bir g\u00f6revi CSS’e aktar\u0131r:<\/p>\n Bu temel ta\u015flar bir araya geldi\u011finde, CSS-Only Custom Elements, JavaScript’in karma\u015f\u0131kl\u0131\u011f\u0131 olmadan, etkile\u015fimli, \u00f6zelle\u015ftirilebilir ve performansl\u0131 UI bile\u015fenleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir temel sunar. Her bir \u00f6zelli\u011fin derinlemesine anla\u015f\u0131lmas\u0131, bu yakla\u015f\u0131m\u0131n potansiyelini tam olarak kullanmak i\u00e7in anahtard\u0131r.<\/p>\n \u015eimdiye kadar CSS-Only Custom Elements’in teorik altyap\u0131s\u0131n\u0131 ve temel prensiplerini inceledik. Art\u0131k \u00f6\u011frendiklerimizi pratik bir \u00f6rnek \u00fczerinde uygulayarak, bu yakla\u015f\u0131m\u0131n g\u00fcc\u00fcn\u00fc somutla\u015ft\u0131ral\u0131m. Basit, ancak yayg\u0131n olarak kullan\u0131lan bir “uyar\u0131 mesaj\u0131” (alert message) bile\u015feni olu\u015fturaca\u011f\u0131z. Bu bile\u015fen, bir mesaj\u0131 g\u00f6r\u00fcnt\u00fcleyecek ve bir kapatma d\u00fc\u011fmesi i\u00e7erecektir. JavaScript olmadan bu etkile\u015fimi nas\u0131l sa\u011flayaca\u011f\u0131m\u0131z\u0131 g\u00f6rece\u011fiz.<\/p>\n Bir uyar\u0131 mesaj\u0131 i\u00e7in ihtiyac\u0131m\u0131z olan temel elemanlar: bir kapsay\u0131c\u0131, mesaj\u0131n kendisi ve bir kapatma d\u00fc\u011fmesi. Eri\u015filebilirlik ve semantik \u00f6nem ta\u015f\u0131d\u0131\u011f\u0131 i\u00e7in, m\u00fcmk\u00fcn oldu\u011funca anlaml\u0131 HTML etiketleri kullanmaya \u00f6zen g\u00f6sterece\u011fiz. Kapatma i\u015flevi i\u00e7in, gizli bir onay kutusu (checkbox) kullanaca\u011f\u0131z. Bu, CSS’in Yukar\u0131daki HTML yap\u0131s\u0131nda:<\/p>\n \u015eimdi, bu HTML yap\u0131s\u0131n\u0131 kullanarak uyar\u0131 mesaj\u0131m\u0131z\u0131 stilize edelim ve JavaScript olmadan kapatma i\u015flevini ekleyelim. Unutmay\u0131n, burada do\u011frudan CSS kodu yazm\u0131yoruz, ancak hangi CSS \u00f6zelliklerinin kullan\u0131laca\u011f\u0131n\u0131 ve etkilerini a\u00e7\u0131kl\u0131yoruz.<\/p>\n \u00d6ncelikle, uyar\u0131 mesaj\u0131n\u0131n ana kapsay\u0131c\u0131s\u0131na ( Kapatma d\u00fc\u011fmesi ( \u015eimdi gelelim can al\u0131c\u0131 noktaya: uyar\u0131y\u0131 gizleme mekanizmas\u0131. Burada gizli Bu basit \u00f6rnek, JavaScript’e ihtiya\u00e7 duymadan nas\u0131l etkile\u015fimli bir UI bile\u015feni olu\u015fturulabilece\u011fini g\u00f6stermektedir. Kullan\u0131c\u0131, kapatma d\u00fc\u011fmesine t\u0131klad\u0131\u011f\u0131nda, taray\u0131c\u0131 sadece HTML ve CSS kurallar\u0131n\u0131 i\u015fleyerek uyar\u0131 mesaj\u0131n\u0131 gizler. Bu, web uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar ve JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\n Bu y\u00f6ntemin temel avantaj\u0131, sadece HTML ve CSS kullanarak i\u015flevsellik sa\u011flamas\u0131d\u0131r. Bile\u015fen, JavaScript y\u00fcklenmeden \u00f6nce bile do\u011fru \u015fekilde \u00e7al\u0131\u015f\u0131r ve taray\u0131c\u0131n\u0131n yerle\u015fik mekanizmalar\u0131ndan faydalan\u0131r. Ayr\u0131ca, CSS de\u011fi\u015fkenleri sayesinde, farkl\u0131 uyar\u0131 tipleri (ba\u015far\u0131l\u0131, hata, bilgi) i\u00e7in kolayca farkl\u0131 renk \u015femalar\u0131 tan\u0131mlayabilirsiniz, sadece ilgili de\u011fi\u015fkenlerin de\u011ferlerini de\u011fi\u015ftirerek.<\/p>\n Basit bir uyar\u0131 mesaj\u0131 \u00f6rne\u011fi, CSS-Only Custom Elements’in temelini anlamak i\u00e7in iyi bir ba\u015flang\u0131\u00e7t\u0131. \u015eimdi, daha karma\u015f\u0131k bir etkile\u015fim olan “sekme (tab) men\u00fcs\u00fc” bile\u015fenini ele alarak, bu yakla\u015f\u0131m\u0131n s\u0131n\u0131rlar\u0131n\u0131 nas\u0131l geni\u015fletebilece\u011fimizi g\u00f6relim. Sekme men\u00fcleri, i\u00e7eri\u011fi d\u00fczenli bir \u015fekilde sunmak i\u00e7in yayg\u0131n olarak kullan\u0131l\u0131r ve genellikle JavaScript ile olu\u015fturulur. Ancak, do\u011fru HTML yap\u0131s\u0131 ve CSS se\u00e7icileriyle, bu i\u015flevselli\u011fi tamamen CSS ile sa\u011flayabiliriz.<\/p>\n Sekme men\u00fcs\u00fc i\u00e7in anahtar fikir, her sekme ba\u015fl\u0131\u011f\u0131n\u0131 bir Bu HTML yap\u0131s\u0131nda dikkat edilmesi gerekenler:<\/p>\n \u015eimdi bu HTML yap\u0131s\u0131n\u0131 stilize edelim ve sekme ge\u00e7i\u015flerini JavaScript olmadan nas\u0131l y\u00f6netece\u011fimizi g\u00f6relim. Yine, do\u011frudan CSS kodu yazm\u0131yoruz, ancak hangi \u00f6zelliklerin ve se\u00e7icilerin kullan\u0131laca\u011f\u0131n\u0131 a\u00e7\u0131kl\u0131yoruz.<\/p>\n \u0130lk olarak, t\u00fcm sekme i\u00e7eriklerini varsay\u0131lan olarak gizleyece\u011fiz:<\/p>\n Ard\u0131ndan, radyo d\u00fc\u011fmelerinin Sekme ba\u015fl\u0131klar\u0131n\u0131n ( CSS-Only sekme men\u00fcs\u00fc olu\u015ftururken eri\u015filebilirli\u011fi g\u00f6z ard\u0131 etmemeliyiz:<\/p>\n Bu sekme men\u00fcs\u00fc \u00f6rne\u011fi, CSS’in ne kadar g\u00fc\u00e7l\u00fc olabilece\u011fini ve JavaScript’in genellikle \u00fcstlendi\u011fi karma\u015f\u0131k etkile\u015fimleri bile nas\u0131l taklit edebilece\u011fini g\u00f6stermektedir. Bu teknik, \u00f6zellikle i\u00e7erik odakl\u0131 web sitelerinde veya statik dok\u00fcmantasyon sayfalar\u0131nda, performans ve basitlikten \u00f6d\u00fcn vermeden zengin bir kullan\u0131c\u0131 deneyimi sunmak i\u00e7in harika bir yoldur.<\/p>\n CSS-Only Custom Elements yakla\u015f\u0131m\u0131n\u0131n temelinde basitlik ve performans yatar. Ancak, bu bile\u015fenleri tasarlarken ve uygularken, kullan\u0131c\u0131 deneyiminin vazge\u00e7ilmez bir par\u00e7as\u0131 olan eri\u015filebilirli\u011fi ve uzun vadeli s\u00fcrd\u00fcr\u00fclebilirli\u011fi etkileyen performans fakt\u00f6rlerini g\u00f6z ard\u0131 etmemeliyiz. Bu b\u00f6l\u00fcmde, daha iyi ve daha kapsay\u0131c\u0131 CSS-Only bile\u015fenleri olu\u015fturmak i\u00e7in dikkat etmemiz gereken \u00f6nemli ipu\u00e7lar\u0131n\u0131 ve stratejileri ele alaca\u011f\u0131z.<\/p>\n CSS-Only yakla\u015f\u0131m\u0131n\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri, genellikle JavaScript framework’lerinin getirdi\u011fi DOM manip\u00fclasyonu ve karma\u015f\u0131k i\u00e7 i\u00e7e ge\u00e7mi\u015f Semantik HTML kullan\u0131m\u0131, bile\u015fenlerinizin varsay\u0131lan olarak daha eri\u015filebilir olmas\u0131n\u0131 sa\u011flar ve JavaScript olmadan bile temel etkile\u015fimlerin (\u00f6rne\u011fin, klavye ile odaklanma) \u00e7al\u0131\u015fmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n Web siteleri sadece fare ile de\u011fil, klavye ile de kullan\u0131labilmelidir. Sekme (Tab) tu\u015fu ile elemanlar aras\u0131nda gezinebilme ve Enter\/Space tu\u015flar\u0131 ile etkile\u015fim kurabilme yetene\u011fi, \u00f6zellikle motor becerileri k\u0131s\u0131tl\u0131 kullan\u0131c\u0131lar veya g\u00fc\u00e7 kullan\u0131c\u0131lar\u0131 i\u00e7in \u00e7ok \u00f6nemlidir. CSS-Only bile\u015fenler olu\u015ftururken:<\/p>\n ARIA (Accessible Rich Internet Applications) nitelikleri, semantik HTML’in yetersiz kald\u0131\u011f\u0131 durumlarda, ekran okuyuculara daha fazla bilgi sa\u011flamak i\u00e7in kullan\u0131l\u0131r. CSS-Only bile\u015fenlerde JavaScript olmad\u0131\u011f\u0131 i\u00e7in dinamik ARIA g\u00fcncellemeleri yapamay\u0131z. Ancak, statik ARIA niteliklerini yine de kullanabiliriz:<\/p>\n Performans, CSS-Only yakla\u015f\u0131m\u0131n\u0131n temel nedenlerinden biridir. Bu avantaj\u0131 korumak i\u00e7in:<\/p>\ncustomElements.define()<\/code> gibi JavaScript API’lerini kullanmazlar. Bunun yerine, HTML’in semantik yap\u0131s\u0131n\u0131, CSS’in g\u00fc\u00e7l\u00fc se\u00e7icilerini, pseudo-elementlerini, CSS de\u011fi\u015fkenlerini ve yeni nesil d\u00fczen \u00f6zelliklerini (Flexbox, Grid) ak\u0131ll\u0131ca birle\u015ftirerek, bir \u00f6zel bile\u015fen hissi yarat\u0131rlar. Bu yakla\u015f\u0131m, \u00f6zellikle basit etkile\u015fimlere sahip veya tamamen g\u00f6rsel tabanl\u0131 bile\u015fenler i\u00e7in idealdir. \u00d6rne\u011fin, bir kart bile\u015feni, bir uyar\u0131 mesaj\u0131, basit bir sekme men\u00fcs\u00fc veya bir d\u00fc\u011fme grubu gibi \u00f6\u011feler, bu y\u00f6ntemle \u015fa\u015f\u0131rt\u0131c\u0131 derecede g\u00fc\u00e7l\u00fc ve esnek bir \u015fekilde olu\u015fturulabilir. Bu teknik, web sitenizin y\u00fckleme s\u00fcresini k\u0131saltabilir, JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 azaltabilir ve projelerinizin bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rabilir. Peki, bu “yaln\u0131zca CSS” felsefesiyle neler ba\u015farabiliriz ve bu bize ne gibi kap\u0131lar a\u00e7ar?<\/p>\nNeden CSS-Only Yakla\u015f\u0131m\u0131 Tercih Edilmeli? Avantajlar\u0131 ve Kullan\u0131m Senaryolar\u0131 Nelerdir?<\/h2>\n
Performans ve Y\u00fckleme H\u0131z\u0131<\/h3>\n
Geli\u015ftirme Kolayl\u0131\u011f\u0131 ve H\u0131z<\/h3>\n
Bak\u0131m Maliyetlerinin D\u00fc\u015f\u00fckl\u00fc\u011f\u00fc<\/h3>\n
Eri\u015filebilirlik (Accessibility) Faydalar\u0131<\/h3>\n
div<\/code>‘ler olu\u015fturmak yerine, input type=\"radio\"<\/code> ve label<\/code> elementlerini kullanmak, ekran okuyucular i\u00e7in do\u011fal bir navigasyon ve etkile\u015fim deneyimi sunar. Bu, web sitenizin daha geni\u015f bir kitle taraf\u0131ndan kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar ve yasal eri\u015filebilirlik standartlar\u0131na uyumu kolayla\u015ft\u0131r\u0131r. JavaScript’in varl\u0131\u011f\u0131, bazen eri\u015filebilirlik katman\u0131n\u0131 karma\u015f\u0131kla\u015ft\u0131rabilirken, CSS-Only \u00e7\u00f6z\u00fcmler genellikle taray\u0131c\u0131n\u0131n yerle\u015fik eri\u015filebilirlik \u00f6zelliklerinden faydalan\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Kullan\u0131m Senaryolar\u0131<\/h3>\n
\n
:checked<\/code> veya :focus<\/code> gibi CSS pseudo-s\u0131n\u0131flar\u0131, bu elemanlar\u0131n durumlar\u0131na g\u00f6re stil de\u011fi\u015ftirmesine olanak tan\u0131r.<\/li>\n:hover<\/code>, :focus-within<\/code> veya gizli radyo d\u00fc\u011fmeleriyle kontrol edilebilir. Bu sayede, kullan\u0131c\u0131lar JavaScript olmadan farkl\u0131 i\u00e7erik panelleri aras\u0131nda ge\u00e7i\u015f yapabilir.<\/li>\nTemel Ta\u015flar: CSS-Only Custom Elements Nas\u0131l M\u00fcmk\u00fcn Olur?<\/h2>\n
display: contents<\/code> \u00d6zelli\u011fi: DOM Yap\u0131s\u0131n\u0131 Etkilemeden G\u00f6rsel D\u00fczenleme<\/h3>\ndisplay: contents<\/code>, CSS-Only Custom Elements i\u00e7in belki de en kritik \u00f6zelliklerden biridir. Bu \u00f6zellik, bir eleman\u0131n kutu modelini (box model) ortadan kald\u0131r\u0131r, ancak \u00e7ocuk elemanlar\u0131n\u0131n DOM a\u011fac\u0131ndaki yerini korur. Yani, eleman\u0131n kendisi g\u00f6rsel olarak yok olur, ancak \u00e7ocuklar\u0131, ebeveynlerinin do\u011frudan \u00e7ocuklar\u0131 gibi davran\u0131r. Bu ne anlama geliyor? Bir kapsay\u0131c\u0131 div<\/code>‘iniz oldu\u011funu ve bu div<\/code>‘in i\u00e7inde \u00fc\u00e7 tane daha div<\/code> oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn. E\u011fer d\u0131\u015ftaki div<\/code>‘e display: contents<\/code> verirseniz, bu d\u0131\u015ftaki div<\/code>‘in kenarl\u0131klar\u0131, dolgusu veya arka plan\u0131 g\u00f6r\u00fcnmez olur; ancak i\u00e7indeki \u00fc\u00e7 div<\/code>, d\u0131\u015ftaki div<\/code>‘in ebeveyninin do\u011frudan \u00e7ocuklar\u0131ym\u0131\u015f gibi d\u00fczenlenir. Bu, \u00f6zellikle Flexbox veya Grid gibi d\u00fczen sistemleriyle \u00e7al\u0131\u015f\u0131rken \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr. Bir bile\u015fenin i\u00e7 yap\u0131s\u0131n\u0131 korurken, d\u0131\u015far\u0131dan uygulanan d\u00fczen kurallar\u0131na uyum sa\u011flamas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir “kart” bile\u015feni olu\u015fturdunuz ve bu kart\u0131n i\u00e7inde ba\u015fl\u0131k, resim ve a\u00e7\u0131klama gibi farkl\u0131 k\u0131s\u0131mlar var. Kart\u0131n ana kapsay\u0131c\u0131s\u0131na display: contents<\/code> uygulayarak, kart\u0131n i\u00e7 elemanlar\u0131n\u0131, kart\u0131n yerle\u015ftirildi\u011fi bir Flexbox veya Grid konteynerinin do\u011frudan elemanlar\u0131 gibi d\u00fczenleyebilirsiniz. Bu, bile\u015fenin d\u0131\u015far\u0131dan esnek bir \u015fekilde konumland\u0131r\u0131lmas\u0131n\u0131 sa\u011flarken, i\u00e7 yap\u0131s\u0131n\u0131n b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korur.<\/p>\nCSS De\u011fi\u015fkenleri (Custom Properties): Dinamik Stil Y\u00f6netimi ve \u00d6zelle\u015ftirilebilirlik<\/h3>\n
--degisken-adi: deger;<\/code> \u015feklinde tan\u0131mlan\u0131r ve var(--degisken-adi)<\/code> ile kullan\u0131l\u0131r), bu s\u00fcreci \u00e7ok daha esnek hale getirir. Bir bile\u015fenin stil \u00f6zelliklerini, HTML \u00fczerinden veya JavaScript ile (ancak bu senaryoda JavaScript’i minimumda tutuyoruz) kolayca de\u011fi\u015ftirebilirsiniz. \u00d6rne\u011fin, bir bile\u015fenin ana rengini --ana-renk: #3498db;<\/code> olarak tan\u0131mlay\u0131p kullanabilir, daha sonra bu rengi farkl\u0131 bir yerde --ana-renk: #e74c3c;<\/code> olarak ge\u00e7ersiz k\u0131larak bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirsiniz. Bu, bile\u015fenlerin farkl\u0131 temalar veya durumlar i\u00e7in kolayca \u00f6zelle\u015ftirilebilmesini sa\u011flar ve daha mod\u00fcler bir stil mimarisi olu\u015fturur. Ayr\u0131ca, bir bile\u015fenin kullan\u0131c\u0131n\u0131n tercihine g\u00f6re (\u00f6rne\u011fin, koyu\/a\u00e7\u0131k mod) stilini dinamik olarak de\u011fi\u015ftirmesi i\u00e7in de temel olu\u015fturur.<\/p>\nPseudo-elementler (
::before<\/code>, ::after<\/code>): Ek G\u00f6rsel \u00d6\u011feler Ekleme<\/h3>\n::before<\/code> ve ::after<\/code> pseudo-elementleri, bir eleman\u0131n i\u00e7eri\u011finden ba\u011f\u0131ms\u0131z olarak ek g\u00f6rsel \u00f6\u011feler eklememizi sa\u011flar. Bu \u00f6\u011feler, DOM’da ger\u00e7ek bir eleman olarak yer almazlar, ancak CSS ile stilize edilebilirler. Bu, \u00f6zellikle bir bile\u015fene ek simgeler, dekoratif \u00e7izgiler, oklar veya kapatma d\u00fc\u011fmeleri eklemek istedi\u011fimizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir uyar\u0131 mesaj\u0131 bile\u015fenine bir “kapat” simgesi eklemek i\u00e7in, ana kapsay\u0131c\u0131n\u0131n ::after<\/code> pseudo-elementini kullanabilir ve ona bir \u00e7arp\u0131 i\u015fareti veya bir simge fontu atayabilirsiniz. Bu, HTML’i gereksiz div<\/code>‘lerden ar\u0131nd\u0131rarak daha temiz ve daha semantik kalmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, bu pseudo-elementler, bir bile\u015fenin \u00e7e\u015fitli durumlar\u0131n\u0131 (\u00f6rne\u011fin, aktif\/pasif) g\u00f6rsel olarak belirtmek i\u00e7in de kullan\u0131labilir.<\/p>\nGeli\u015fmi\u015f Se\u00e7iciler (
:has()<\/code>, :focus-within<\/code>, Karde\u015f Se\u00e7iciler): Duruma G\u00f6re Stil Uygulama<\/h3>\n\n
:has()<\/code> Se\u00e7icisi:<\/strong> Bu yeni ve g\u00fc\u00e7l\u00fc se\u00e7ici (hen\u00fcz t\u00fcm taray\u0131c\u0131larda tam desteklenmese de), bir eleman\u0131n belirli bir alt eleman\u0131 i\u00e7erip i\u00e7ermedi\u011fine g\u00f6re stil uygulaman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, div:has(p)<\/code> se\u00e7icisi, i\u00e7inde bir paragraf (p<\/code>) eleman\u0131 olan t\u00fcm div<\/code>‘leri se\u00e7er. Bu, bir bile\u015fenin i\u00e7indeki i\u00e7eri\u011fe g\u00f6re d\u0131\u015f g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek i\u00e7in inan\u0131lmaz derecede esnek bir yol sunar.<\/li>\n:focus-within<\/code> Se\u00e7icisi:<\/strong> Bir eleman veya onun herhangi bir alt eleman\u0131 odakland\u0131\u011f\u0131nda stil uygulaman\u0131z\u0131 sa\u011flar. Bu, \u00f6zellikle form elemanlar\u0131 veya a\u00e7\u0131l\u0131r men\u00fcler gibi etkile\u015fimli bile\u015fenlerde eri\u015filebilirli\u011fi ve kullan\u0131c\u0131 deneyimini art\u0131rmak i\u00e7in \u00e7ok \u00f6nemlidir. \u00d6rne\u011fin, bir form grubunun i\u00e7ine odaklan\u0131ld\u0131\u011f\u0131nda, t\u00fcm grubun kenarl\u0131\u011f\u0131n\u0131 vurgulayabilirsiniz.<\/li>\n+<\/code> ve General Sibling Selector ~<\/code>):<\/strong> Bu se\u00e7iciler, ayn\u0131 ebeveynin \u00e7ocuklar\u0131 olan elemanlar aras\u0131nda ili\u015fki kurman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, input:checked + label<\/code> se\u00e7icisi, i\u015faretlenmi\u015f bir input<\/code> eleman\u0131n\u0131n hemen ard\u0131ndan gelen label<\/code> eleman\u0131n\u0131 se\u00e7er. Bu, \u00f6zellikle radyo d\u00fc\u011fmeleri veya onay kutular\u0131 gibi form elemanlar\u0131n\u0131 \u00f6zelle\u015ftirirken ve JavaScript olmadan etkile\u015fimli bile\u015fenler olu\u015ftururken kritik \u00f6neme sahiptir. Sekme men\u00fcleri veya akordiyonlar (accordions) gibi karma\u015f\u0131k etkile\u015fimler, bu se\u00e7iciler ve gizli input<\/code> elemanlar\u0131 kullan\u0131larak tamamen CSS ile y\u00f6netilebilir.<\/li>\n<\/ul>\nAd\u0131m Ad\u0131m Uygulama: Basit Bir Uyar\u0131 Mesaj\u0131 Bile\u015feni Olu\u015fturma<\/h2>\n
HTML Yap\u0131s\u0131: Semantik ve Mod\u00fcler Bir Yakla\u015f\u0131m<\/h3>\n
:checked<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131 kullanarak uyar\u0131y\u0131 gizlememizi sa\u011flayacak.<\/p>\n\n<div class=\"uyari-mesaji-kapsayici\">\n <input type=\"checkbox\" id=\"uyari-kapat\" class=\"uyari-kapat-input\" hidden>\n <div class=\"uyari-mesaji\">\n <p>Bu, sadece CSS ile olu\u015fturulmu\u015f harika bir uyar\u0131 mesaj\u0131d\u0131r!<\/p>\n <label for=\"uyari-kapat\" class=\"uyari-kapat-dugmesi\">X<\/label>\n <\/div>\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\n\n
.uyari-mesaji-kapsayici<\/code>: T\u00fcm uyar\u0131 bile\u015fenini saran ana kapsay\u0131c\u0131d\u0131r.<\/li>\ninput type=\"checkbox\"<\/code>: Bu, uyar\u0131y\u0131 gizlemek i\u00e7in bir “anahtar” g\u00f6revi g\u00f6recek gizli bir onay kutusudur. id=\"uyari-kapat\"<\/code> ile bir etiketle ili\u015fkilendirilecektir. hidden<\/code> niteli\u011fi, bu input’un varsay\u0131lan olarak g\u00f6r\u00fcnmemesini sa\u011flar.<\/li>\n.uyari-mesaji<\/code>: As\u0131l uyar\u0131 i\u00e7eri\u011fini ve kapatma d\u00fc\u011fmesini bar\u0131nd\u0131ran elemand\u0131r. Bu, g\u00f6rsel olarak \u015fekillendirece\u011fimiz k\u0131s\u0131md\u0131r.<\/li>\np<\/code>: Uyar\u0131 mesaj\u0131n\u0131n metnini i\u00e7erir.<\/li>\nlabel for=\"uyari-kapat\"<\/code>: Bu etiket, gizli onay kutusunu tetiklemek i\u00e7in kullan\u0131l\u0131r. Kullan\u0131c\u0131 bu etikete t\u0131klad\u0131\u011f\u0131nda (ki bu bizim “kapatma d\u00fc\u011fmemiz” olacak), ilgili input<\/code> eleman\u0131n\u0131n checked<\/code> durumu de\u011fi\u015fir. \u0130\u00e7indeki “X” metni, kapatma d\u00fc\u011fmesinin g\u00f6rselini temsil eder.<\/li>\n<\/ul>\nCSS ile G\u00f6rselle\u015ftirme ve Etkile\u015fim<\/h3>\n
.uyari-mesaji<\/code>) temel stil \u00f6zelliklerini uygulayaca\u011f\u0131z. Buna bir arka plan rengi, metin rengi, dolgu (padding) ve kenarl\u0131k (border) verebiliriz. CSS de\u011fi\u015fkenlerini kullanarak renkleri ve dolgular\u0131 kolayca \u00f6zelle\u015ftirilebilir hale getirebiliriz:<\/p>\n\n
--uyari-arka-plan: #e0f7fa;<\/code> (A\u00e7\u0131k mavi arka plan)<\/li>\n--uyari-metin-rengi: #006064;<\/code> (Koyu metin rengi)<\/li>\n--uyari-kenarlik-rengi: #80deea;<\/code> (Mavi kenarl\u0131k)<\/li>\n--uyari-dikey-dolgusu: 15px;<\/code><\/li>\n--uyari-yatay-dolgusu: 20px;<\/code><\/li>\nbackground-color: var(--uyari-arka-plan);<\/code> gibi kullanarak bile\u015feni \u015fekillendiririz.<\/li>\nborder: 1px solid var(--uyari-kenarlik-rengi);<\/code> ve border-radius: 4px;<\/code> ile g\u00f6rsel bir \u00e7er\u00e7eve olu\u015ftururuz.<\/li>\npadding: var(--uyari-dikey-dolgusu) var(--uyari-yatay-dolgusu);<\/code> ile i\u00e7 bo\u015fluklar\u0131 ayarlar\u0131z.<\/li>\ndisplay: flex;<\/code> ve justify-content: space-between;<\/code> ile mesaj ve kapatma d\u00fc\u011fmesini ayn\u0131 hizaya getiririz.<\/li>\nalign-items: center;<\/code> ile dikey hizalamay\u0131 sa\u011flar\u0131z.<\/li>\n<\/ul>\n.uyari-kapat-dugmesi<\/code>) i\u00e7in de benzer \u015fekilde stil tan\u0131mlamalar\u0131 yapar\u0131z:<\/p>\n\n
cursor: pointer;<\/code> ile \u00fczerine gelindi\u011finde t\u0131klanabilir oldu\u011funu belirtiriz.<\/li>\nfont-weight: bold;<\/code> ve font-size: 1.2em;<\/code> ile “X” i\u015faretini belirginle\u015ftiririz.<\/li>\ncolor: var(--uyari-metin-rengi);<\/code> ile metin rengini ayarlar\u0131z.<\/li>\n:hover<\/code> ve :focus<\/code> pseudo-s\u0131n\u0131flar\u0131n\u0131 kullan\u0131r\u0131z, \u00f6rne\u011fin rengini biraz koyula\u015ft\u0131r\u0131r\u0131z.<\/li>\n<\/ul>\ninput type=\"checkbox\"<\/code> ve onun :checked<\/code> pseudo-s\u0131n\u0131f\u0131n\u0131 kullanaca\u011f\u0131z. Kullan\u0131c\u0131 kapatma d\u00fc\u011fmesine (label<\/code>) t\u0131klad\u0131\u011f\u0131nda, input#uyari-kapat<\/code> eleman\u0131 :checked<\/code> durumuna ge\u00e7er. Bu durumu kullanarak, .uyari-mesaji<\/code> eleman\u0131n\u0131n g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc de\u011fi\u015ftirebiliriz:<\/p>\n\n
.uyari-kapat-input:checked ~ .uyari-mesaji<\/code> se\u00e7icisi, i\u015faretlenmi\u015f input<\/code> eleman\u0131n\u0131n hemen ard\u0131ndan gelen .uyari-mesaji<\/code> eleman\u0131n\u0131 hedefler.<\/li>\ndisplay: none;<\/code> veya opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out;<\/code> gibi \u00f6zellikler uygulayarak uyar\u0131 mesaj\u0131n\u0131 gizleyebiliriz. \u0130kinci y\u00f6ntem, daha yumu\u015fak bir ge\u00e7i\u015f sa\u011flar.<\/li>\n<\/ul>\nDaha Karma\u015f\u0131k Bile\u015fenler: CSS-Only Sekme (Tab) Men\u00fcs\u00fc Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
HTML Yap\u0131s\u0131: Radyo D\u00fc\u011fmeleri ve Etiketlerin G\u00fcc\u00fc<\/h3>\n
label<\/code> eleman\u0131 ile ili\u015fkilendirilmi\u015f gizli bir input type=\"radio\"<\/code> eleman\u0131na ba\u011flamakt\u0131r. Radyo d\u00fc\u011fmeleri, do\u011fas\u0131 gere\u011fi yaln\u0131zca bir tanesinin se\u00e7ili olabilece\u011fi bir grup olu\u015fturur. Bu \u00f6zellik, sekme men\u00fcs\u00fcn\u00fcn “bir anda yaln\u0131zca bir sekme aktif olabilir” mant\u0131\u011f\u0131na m\u00fckemmel bir \u015fekilde uyar. Her sekme i\u00e7eri\u011fi de, ilgili radyo d\u00fc\u011fmesinin durumuna g\u00f6re g\u00f6r\u00fcn\u00fcr hale getirilecektir.<\/p>\n\n<div class=\"sekme-kapsayici\">\n <div class=\"sekme-basliklari\">\n <input type=\"radio\" name=\"sekme-grubu\" id=\"sekme1\" checked hidden>\n <label for=\"sekme1\">Sekme 1<\/label>\n\n <input type=\"radio\" name=\"sekme-grubu\" id=\"sekme2\" hidden>\n <label for=\"sekme2\">Sekme 2<\/label>\n\n <input type=\"radio\" name=\"sekme-grubu\" id=\"sekme3\" hidden>\n <label for=\"sekme3\">Sekme 3<\/label>\n <\/div>\n\n <div class=\"sekme-icerikleri\">\n <div class=\"sekme-icerik\" id=\"icerik1\">\n <h3>Sekme 1 \u0130\u00e7eri\u011fi<\/h3>\n <p>Bu, Sekme 1'e ait bilgileri i\u00e7eren b\u00f6l\u00fcmd\u00fcr. CSS ile y\u00f6netiliyor!<\/p>\n <\/div>\n\n <div class=\"sekme-icerik\" id=\"icerik2\">\n <h3>Sekme 2 \u0130\u00e7eri\u011fi<\/h3>\n <p>Sekme 2'nin detayl\u0131 i\u00e7eri\u011fi burada yer al\u0131yor. Performans odakl\u0131 bir \u00e7\u00f6z\u00fcm.<\/p>\n <\/div>\n\n <div class=\"sekme-icerik\" id=\"icerik3\">\n <h3>Sekme 3 \u0130\u00e7eri\u011fi<\/h3>\n <p>Son sekmemizin i\u00e7eri\u011fi. JavaScript'e veda edin!<\/p>\n <\/div>\n <\/div>\n<\/div>\n <\/code><\/pre>\n<\/p><\/div>\n\n
.sekme-kapsayici<\/code>: T\u00fcm sekme bile\u015fenini saran ana kapsay\u0131c\u0131.<\/li>\n.sekme-basliklari<\/code>: Sekme ba\u015fl\u0131klar\u0131n\u0131 (label<\/code> elemanlar\u0131n\u0131) i\u00e7eren b\u00f6l\u00fcm.<\/li>\ninput type=\"radio\"<\/code>: Her sekme i\u00e7in bir tane olmak \u00fczere gizli radyo d\u00fc\u011fmeleri.\n\n
name<\/code> niteli\u011fi ayn\u0131 olmal\u0131 (\u00f6rne\u011fin, sekme-grubu<\/code>) ki sadece bir tanesi ayn\u0131 anda se\u00e7ili olabilsin.<\/li>\nid<\/code> (sekme1<\/code>, sekme2<\/code> vb.) verilir.<\/li>\nchecked<\/code> niteli\u011fi, ba\u015flang\u0131\u00e7ta hangi sekmenin aktif olaca\u011f\u0131n\u0131 belirler.<\/li>\nhidden<\/code> niteli\u011fi, radyo d\u00fc\u011fmelerinin kendilerinin g\u00f6r\u00fcnmemesini sa\u011flar.<\/li>\n<\/ul>\n<\/li>\nlabel for=\"sekmeX\"<\/code>: Her radyo d\u00fc\u011fmesiyle ili\u015fkilendirilmi\u015f sekme ba\u015fl\u0131\u011f\u0131. Kullan\u0131c\u0131 bu etikete t\u0131klad\u0131\u011f\u0131nda, ilgili radyo d\u00fc\u011fmesi se\u00e7ili hale gelir.<\/li>\n.sekme-icerikleri<\/code>: T\u00fcm sekme i\u00e7eriklerini bar\u0131nd\u0131ran kapsay\u0131c\u0131.<\/li>\n.sekme-icerik<\/code>: Her bir sekmenin ger\u00e7ek i\u00e7eri\u011fini bar\u0131nd\u0131ran b\u00f6l\u00fcm. id<\/code> nitelikleri, ilgili radyo d\u00fc\u011fmelerinin id<\/code>‘leri ile e\u015fle\u015fecek \u015fekilde ayarlanabilir (bu, CSS se\u00e7icilerinde yard\u0131mc\u0131 olabilir).<\/li>\n<\/ul>\nCSS ile Sekme Ge\u00e7i\u015f Mant\u0131\u011f\u0131 ve G\u00f6rsel Stilizasyon<\/h3>\n
\n
.sekme-icerik { display: none; }<\/code> veya visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out;<\/code> ile i\u00e7erikleri gizleriz. Ge\u00e7i\u015fli y\u00f6ntem, daha yumu\u015fak bir kullan\u0131c\u0131 deneyimi sunar.<\/li>\n<\/ul>\n:checked<\/code> durumunu kullanarak hangi i\u00e7eri\u011fin g\u00f6sterilece\u011fini belirleyece\u011fiz. Burada genel karde\u015f se\u00e7ici (~<\/code>) kritik rol oynar:<\/p>\n\n
#sekme1:checked ~ .sekme-icerikleri #icerik1 { display: block; }<\/code> (veya visibility: visible; opacity: 1;<\/code>) se\u00e7icisi, id=\"sekme1\"<\/code> radyo d\u00fc\u011fmesi i\u015faretlendi\u011finde, onun karde\u015f eleman\u0131 olan .sekme-icerikleri<\/code> i\u00e7indeki id=\"icerik1\"<\/code> eleman\u0131n\u0131 g\u00f6r\u00fcn\u00fcr hale getirir. Bu kural\u0131 her sekme i\u00e7in tekrarlayarak, se\u00e7ili radyo d\u00fc\u011fmesine kar\u015f\u0131l\u0131k gelen i\u00e7eri\u011fi g\u00f6sterebiliriz.<\/li>\n<\/ul>\nlabel<\/code>) stilini de ayarlamam\u0131z gerekiyor. Se\u00e7ili sekmeyi g\u00f6rsel olarak vurgulamak i\u00e7in yine :checked<\/code> durumunu kullanabiliriz:<\/p>\n\n
.sekme-basliklari label { cursor: pointer; padding: 10px 20px; border: 1px solid #ccc; border-bottom: none; }<\/code> gibi temel stiller tan\u0131mlar\u0131z.<\/li>\n#sekme1:checked + label { background-color: #fff; border-color: #3498db; color: #3498db; }<\/code> gibi bir kural kullan\u0131r\u0131z. Burada biti\u015fik karde\u015f se\u00e7ici (+<\/code>) kullanmak \u00f6nemlidir, \u00e7\u00fcnk\u00fc label<\/code> eleman\u0131, input<\/code> eleman\u0131n\u0131n hemen ard\u0131ndan gelir.<\/li>\n--aktif-sekme-rengi: #3498db;<\/code>, --pasif-sekme-rengi: #ccc;<\/code>) ile renkleri ve di\u011fer \u00f6zellikleri kolayca y\u00f6netebiliriz.<\/li>\n.sekme-basliklari<\/code> eleman\u0131n\u0131n i\u00e7indeki etiketleri yan yana d\u00fczenleyebiliriz.<\/li>\n<\/ul>\nEri\u015filebilirlik \u0130pu\u00e7lar\u0131<\/h3>\n
\n
aria<\/code> Nitelikleri:<\/strong> Geli\u015fmi\u015f eri\u015filebilirlik i\u00e7in role=\"tablist\"<\/code>, role=\"tab\"<\/code> ve role=\"tabpanel\"<\/code> gibi ARIA nitelikleri eklenebilir. Ancak, bu nitelikler HTML’e eklense bile, JavaScript olmadan dinamik aria-selected<\/code> veya aria-controls<\/code> g\u00fcncellemeleri yap\u0131lamayaca\u011f\u0131n\u0131 unutmamak gerekir. Bu nedenle, CSS-Only yakla\u015f\u0131m\u0131nda temel semantik HTML’e g\u00fcvenmek daha yayg\u0131nd\u0131r.<\/li>\n<\/ul>\nEri\u015filebilirlik ve Performans \u0130pu\u00e7lar\u0131: Daha \u0130yi CSS-Only Bile\u015fenleri \u0130\u00e7in<\/h2>\n
Semantik HTML’in \u00d6nemi<\/h3>\n
div<\/code> yap\u0131lar\u0131ndan ka\u00e7\u0131narak, daha temiz ve semantik HTML kullanmaya te\u015fvik etmesidir. Semantik HTML, web i\u00e7eri\u011finin anlam\u0131n\u0131 taray\u0131c\u0131lara, arama motorlar\u0131na ve ekran okuyucular\u0131na do\u011fru bir \u015fekilde iletir. \u00d6rne\u011fin:<\/p>\n\n
<nav><\/code> ve <ul><li><\/code> kullanmak, sadece bir dizi <div><\/code> kullanmaktan \u00e7ok daha iyidir.<\/li>\n<button><\/code> eleman\u0131 kullanmak, bir <div><\/code> veya <span><\/code> eleman\u0131na t\u0131klama olay\u0131 atamaktan daha eri\u015filebilirdir, \u00e7\u00fcnk\u00fc <button><\/code> eleman\u0131 klavye etkile\u015fimlerini ve ekran okuyucu rollerini do\u011fal olarak destekler.<\/li>\n<input><\/code> ve <label><\/code> elemanlar\u0131n\u0131 do\u011fru \u015fekilde ili\u015fkilendirmek, kullan\u0131c\u0131lara ve ekran okuyucular\u0131na do\u011fru ba\u011flam\u0131 sa\u011flar.<\/li>\n<\/ul>\nKlavye Navigasyonu ve Odak Y\u00f6netimi<\/h3>\n
\n
:focus<\/code> ve :focus-visible<\/code> pseudo-s\u0131n\u0131flar\u0131n\u0131 kullanarak odaklanm\u0131\u015f elemanlar\u0131 g\u00f6rsel olarak belirginle\u015ftirin. Bu, kullan\u0131c\u0131lar\u0131n o an hangi elemana odakland\u0131klar\u0131n\u0131 anlamalar\u0131na yard\u0131mc\u0131 olur.<\/li>\ntabindex<\/code> niteli\u011fini dikkatli kullan\u0131n. Genellikle, tabindex=\"0\"<\/code> ile elemanlar\u0131 odaklanabilir yapmak veya tabindex=\"-1\"<\/code> ile programatik olarak odaklanabilir hale getirmek m\u00fcmk\u00fcnd\u00fcr, ancak varsay\u0131lan odaklanma s\u0131ras\u0131n\u0131 bozmaktan ka\u00e7\u0131n\u0131n.<\/li>\n<\/ul>\nEkran Okuyucular \u0130\u00e7in ARIA Nitelikleri<\/h3>\n
\n
role=\"menu\"<\/code> ve role=\"menuitem\"<\/code> gibi nitelikler ekleyebiliriz.<\/li>\nrole=\"alert\"<\/code> veya aria-live=\"polite\"<\/code> gibi nitelikler, ekran okuyucular\u0131n i\u00e7eri\u011fi hemen veya uygun bir zamanda duyurmas\u0131n\u0131 sa\u011flayabilir.<\/li>\naria-expanded<\/code> veya aria-selected<\/code> gibi dinamik durumlar\u0131 yans\u0131tan nitelikler, JavaScript olmadan g\u00fcncellenemeyece\u011fi i\u00e7in, bu t\u00fcr bile\u015fenlerde tam ARIA deste\u011fi s\u0131n\u0131rl\u0131 kalacakt\u0131r. Bu durumda, tasar\u0131m\u0131n basitli\u011fine ve semantik HTML’in do\u011fal eri\u015filebilirli\u011fine daha fazla g\u00fcvenmek gerekir.<\/li>\n<\/ul>\nPerformans: Gereksiz DOM Elemanlar\u0131ndan Ka\u00e7\u0131nma ve Minimal \u0130\u015faretleme<\/h3>\n
\n
::before<\/code>, ::after<\/code>) bu konuda harika bir \u00e7\u00f6z\u00fcmd\u00fcr, \u00e7\u00fcnk\u00fc DOM’a ger\u00e7ek eleman eklemeden g\u00f6rsel \u00f6\u011feler olu\u015ftururlar.<\/li>\n