{"id":33191,"date":"2025-10-30T23:41:04","date_gmt":"2025-10-30T20:41:04","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33191"},"modified":"2025-10-30T23:41:04","modified_gmt":"2025-10-30T20:41:04","slug":"saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/","title":{"rendered":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"<p><body><\/p>\n<h2>Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber<\/h2>\n<p>Web sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren, i\u00e7eri\u011fi d\u00fczenli ve okunabilir k\u0131lan \u00f6nemli UI bile\u015fenlerinden biri de &#8220;katlanabilir i\u00e7erikler&#8221;dir (collapsibles veya accordions). Bu yap\u0131lar, ba\u015flang\u0131\u00e7ta gizli olan bir i\u00e7eri\u011fi, bir ba\u015fl\u0131\u011fa veya butona t\u0131klanmas\u0131yla g\u00f6r\u00fcn\u00fcr hale getirir ve tekrar t\u0131klanmas\u0131yla gizler. Genellikle JavaScript (vanilla JS, jQuery veya \u00e7e\u015fitli k\u00fct\u00fcphaneler) kullan\u0131larak uygulansa da, modern CSS yetenekleri sayesinde bu i\u015flevselli\u011fi tamamen JavaScript&#8217;ten ba\u011f\u0131ms\u0131z, yani &#8220;saf CSS&#8221; ile ger\u00e7ekle\u015ftirmek m\u00fcmk\u00fcnd\u00fcr. Bu makalede, saf CSS ile katlanabilir i\u00e7eriklerin nas\u0131l uygulanaca\u011f\u0131n\u0131, temel prensiplerini, ad\u0131m ad\u0131m kod \u00f6rneklerini, geli\u015fmi\u015f teknikleri, eri\u015filebilirlik (accessibility) hususlar\u0131n\u0131 ve bu yakla\u015f\u0131m\u0131n avantajlar\u0131 ile s\u0131n\u0131rlamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n<h3>Giri\u015f: Katlanabilir \u0130\u00e7eriklerin \u00d6nemi ve Neden Saf CSS?<\/h3>\n<p>Katlanabilir i\u00e7erikler, \u00f6zellikle uzun metinlerin, S\u0131k\u00e7a Sorulan Sorular (SSS) b\u00f6l\u00fcmlerinin, men\u00fclerin veya detayl\u0131 bilgi kutular\u0131n\u0131n bulundu\u011fu sayfalarda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc sadele\u015ftirmek i\u00e7in hayati bir rol oynar. Kullan\u0131c\u0131lar\u0131n ilgilendikleri bilgiye odaklanmalar\u0131n\u0131 sa\u011flayarak sayfa karma\u015fas\u0131n\u0131 azalt\u0131r ve genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n<p>Geleneksel olarak, bu t\u00fcr etkile\u015fimler JavaScript ile y\u00f6netilir. JavaScript, DOM&#8217;u manip\u00fcle ederek elemanlar\u0131n <code>display<\/code> \u00f6zelli\u011fini de\u011fi\u015ftirebilir, <code>height<\/code> veya <code>max-height<\/code> de\u011ferlerini dinamik olarak ayarlayabilir veya CSS s\u0131n\u0131flar\u0131 ekleyip \u00e7\u0131karabilir. Ancak, bu yakla\u015f\u0131m\u0131n baz\u0131 dezavantajlar\u0131 olabilir:<\/p>\n<p>*   <strong>Performans:<\/strong> K\u00fc\u00e7\u00fck etkile\u015fimler i\u00e7in bile bir JavaScript k\u00fct\u00fcphanesi veya \u00e7er\u00e7evesi y\u00fcklemek, sayfa y\u00fckleme s\u00fcresini art\u0131rabilir ve \u00f6zellikle mobil cihazlarda performans\u0131 olumsuz etkileyebilir.<br \/>\n*   <strong>Ba\u011f\u0131ml\u0131l\u0131k:<\/strong> Projenin JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. JavaScript&#8217;in devre d\u0131\u015f\u0131 b\u0131rak\u0131ld\u0131\u011f\u0131 veya y\u00fcklenemedi\u011fi durumlarda i\u015flevsellik tamamen kaybolur.<br \/>\n*   <strong>Karma\u015f\u0131kl\u0131k:<\/strong> Basit bir katlanabilir i\u00e7erik i\u00e7in bile bazen gereksiz yere karma\u015f\u0131k JavaScript kodlar\u0131 yazmak gerekebilir.<\/p>\n<p>Saf CSS ile katlanabilir i\u00e7erik uygulamak ise bu dezavantajlar\u0131 ortadan kald\u0131r\u0131r. JavaScript&#8217;e ihtiya\u00e7 duymad\u0131\u011f\u0131 i\u00e7in daha h\u0131zl\u0131 y\u00fcklenir, daha performansl\u0131d\u0131r ve taray\u0131c\u0131da JavaScript&#8217;in devre d\u0131\u015f\u0131 b\u0131rak\u0131lmas\u0131 durumunda bile \u00e7al\u0131\u015fmaya devam eder. Ayr\u0131ca, HTML ve CSS&#8217;i ay\u0131rman\u0131n getirdi\u011fi kod temizli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirlik avantajlar\u0131n\u0131 da sunar.<\/p>\n<h3>Saf CSS Katlanabilir \u0130\u00e7eri\u011fin Temel Prensibi<\/h3>\n<p>Saf CSS ile katlanabilir i\u00e7erik olu\u015fturman\u0131n arkas\u0131ndaki temel &#8220;numara&#8221;, bir <code>input<\/code> etiketinin (genellikle <code>checkbox<\/code> veya <code>radio<\/code> tipi) <code>:checked<\/code> s\u00f6zde s\u0131n\u0131f\u0131n\u0131 kullanmakt\u0131r. Bu <code>:checked<\/code> durumu, CSS se\u00e7icileri arac\u0131l\u0131\u011f\u0131yla di\u011fer HTML elemanlar\u0131n\u0131 hedefleyerek stil de\u011fi\u015fiklikleri yapmam\u0131z\u0131 sa\u011flar.<\/p>\n<p>\u0130\u015fleyi\u015f ad\u0131mlar\u0131 \u015f\u00f6yledir:<\/p>\n<p>1.  <strong>G\u00f6r\u00fcnmez Bir Tetikleyici:<\/strong> Kullan\u0131c\u0131ya g\u00f6r\u00fcnmeyen bir <code>input[type=\"checkbox\"]<\/code> veya <code>input[type=\"radio\"]<\/code> etiketi olu\u015fturulur. Bu input, i\u00e7eri\u011fin a\u00e7\u0131k veya kapal\u0131 durumunu tutan bir anahtar g\u00f6revi g\u00f6r\u00fcr.<br \/>\n2.  <strong>Etkile\u015fimli Bir Etiket (<code><label><\/code>):<\/strong> Bu input ile ili\u015fkilendirilmi\u015f bir <code><label><\/code> etiketi olu\u015fturulur. Kullan\u0131c\u0131 bu <code>label<\/code>&#8216;a t\u0131klad\u0131\u011f\u0131nda, ili\u015fkili <code>input<\/code>&#8216;un <code>:checked<\/code> durumu de\u011fi\u015fir (i\u015faretlenir veya i\u015fareti kald\u0131r\u0131l\u0131r). Bu <code>label<\/code>, katlanabilir i\u00e7eri\u011fin ba\u015fl\u0131\u011f\u0131 veya a\u00e7ma\/kapama butonu olarak i\u015flev g\u00f6r\u00fcr.<br \/>\n3.  <strong>Karde\u015f Se\u00e7iciler:<\/strong> CSS&#8217;te <code>+<\/code> (biti\u015fik karde\u015f se\u00e7ici) veya <code>~<\/code> (genel karde\u015f se\u00e7ici) kullan\u0131larak, <code>input<\/code> etiketi <code>:checked<\/code> durumdayken, onunla ayn\u0131 seviyede (sibling) olan i\u00e7erik eleman\u0131n\u0131 hedef al\u0131n\u0131r.<br \/>\n4.  <strong>\u0130\u00e7eri\u011fi Gizleme\/G\u00f6sterme:<\/strong> Ba\u015flang\u0131\u00e7ta i\u00e7erik eleman\u0131 <code>max-height: 0; overflow: hidden;<\/code> gibi CSS \u00f6zellikleri kullan\u0131larak gizlenir. <code>input<\/code> <code>:checked<\/code> oldu\u011funda ise <code>max-height<\/code> de\u011feri i\u00e7eri\u011fi g\u00f6sterecek kadar b\u00fcy\u00fck bir de\u011fere ayarlan\u0131r.<br \/>\n5.  <strong>Animasyonlu Ge\u00e7i\u015fler:<\/strong> <code>transition<\/code> \u00f6zelli\u011fi kullan\u0131larak <code>max-height<\/code> de\u011fi\u015fikli\u011fi yumu\u015fak bir animasyonla ger\u00e7ekle\u015ftirilir.<\/p>\n<p>Bu y\u00f6ntem, taray\u0131c\u0131lar\u0131n yerle\u015fik form eleman\u0131 davran\u0131\u015flar\u0131n\u0131 kullanarak herhangi bir JavaScript kodu olmadan etkile\u015fimli bir UI bile\u015feni olu\u015fturmam\u0131z\u0131 sa\u011flar.<\/p>\n<h3>Ad\u0131m Ad\u0131m Uygulama: Temel Saf CSS Katlanabilir \u0130\u00e7erik<\/h3>\n<p>\u015eimdi, basit bir saf CSS katlanabilir i\u00e7eri\u011fi ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 g\u00f6relim.<\/p>\n<h4>1. HTML Yap\u0131s\u0131<\/h4>\n<p>\u0130lk olarak, katlanabilir i\u00e7eri\u011fimizin temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Bir <code>input<\/code> (checkbox), bir <code>label<\/code> (ba\u015fl\u0131k\/tetikleyici) ve i\u00e7eri\u011fi bar\u0131nd\u0131ran bir <code>div<\/code>&#8216;e ihtiyac\u0131m\u0131z var.<\/p>\n<pre><code class=\"language-html\"><div class=\"collapsible-container\">\n    <input type=\"checkbox\" id=\"collapsible-toggle-1\" class=\"collapsible-toggle\">\n    <label for=\"collapsible-toggle-1\" class=\"collapsible-header\">\n        Ba\u015fl\u0131k 1: Saf CSS Nedir?\n    <\/label>\n    <div class=\"collapsible-content\">\n        <p>Saf CSS, web sayfalar\u0131na stil vermek i\u00e7in kullan\u0131lan, herhangi bir JavaScript kodu veya harici k\u00fct\u00fcphane gerektirmeyen, yaln\u0131zca CSS \u00f6zelliklerine dayal\u0131 teknikler b\u00fct\u00fcn\u00fcd\u00fcr. Bu yakla\u015f\u0131m, performans, eri\u015filebilirlik ve kodun basitli\u011fi a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sunar.<\/p>\n        <p>Bu y\u00f6ntemle, interaktif bile\u015fenler olu\u015fturmak i\u00e7in taray\u0131c\u0131n\u0131n yerle\u015fik davran\u0131\u015flar\u0131 kullan\u0131l\u0131r.<\/p>\n    <\/div>\n<\/div>\n\n<div class=\"collapsible-container\">\n    <input type=\"checkbox\" id=\"collapsible-toggle-2\" class=\"collapsible-toggle\">\n    <label for=\"collapsible-toggle-2\" class=\"collapsible-header\">\n        Ba\u015fl\u0131k 2: Neden Saf CSS Tercih Edilmeli?\n    <\/label>\n    <div class=\"collapsible-content\">\n        <p>Saf CSS, daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, daha az a\u011f iste\u011fi ve JavaScript'in devre d\u0131\u015f\u0131 b\u0131rak\u0131ld\u0131\u011f\u0131 durumlarda bile i\u015flevselli\u011fin korunmas\u0131 gibi nedenlerle tercih edilmelidir. Ayr\u0131ca, daha az ba\u011f\u0131ml\u0131l\u0131k, kodun bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve genel proje karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\n        <p>\u00d6zellikle basit etkile\u015fimler i\u00e7in JavaScript kullanmak yerine, CSS'in g\u00fc\u00e7l\u00fc yeteneklerinden faydalanmak ak\u0131ll\u0131ca bir yakla\u015f\u0131md\u0131r.<\/p>\n    <\/div>\n<\/div><\/code><\/pre>\n<p><strong>A\u00e7\u0131klama:<\/strong><\/p>\n<p>*   <code>collapsible-container<\/code>: T\u00fcm katlanabilir bile\u015feni sarmalayan bir div.<br \/>\n*   <code>input[type=\"checkbox\"]<\/code>: Bu, i\u00e7eri\u011fin a\u00e7\u0131k\/kapal\u0131 durumunu kontrol eden gizli anahtar\u0131m\u0131zd\u0131r. Her bir katlanabilir i\u00e7erik i\u00e7in benzersiz bir <code>id<\/code>&#8216;ye sahip olmal\u0131d\u0131r (\u00f6rn. <code>collapsible-toggle-1<\/code>).<br \/>\n*   <code>label<\/code>: Bu, kullan\u0131c\u0131n\u0131n t\u0131klayaca\u011f\u0131 ve g\u00f6rsel olarak ba\u015fl\u0131k gibi g\u00f6r\u00fcnecek olan elemand\u0131r. <code>for<\/code> niteli\u011fi, ilgili <code>input<\/code>&#8216;un <code>id<\/code>&#8216;si ile e\u015fle\u015fmelidir. Bu e\u015fle\u015fme, <code>label<\/code>&#8216;a t\u0131kland\u0131\u011f\u0131nda <code>input<\/code>&#8216;un durumunu de\u011fi\u015ftirmesini sa\u011flar ve eri\u015filebilirlik a\u00e7\u0131s\u0131ndan kritiktir.<br \/>\n*   <code>collapsible-content<\/code>: \u0130\u00e7erik metnini veya di\u011fer HTML elemanlar\u0131n\u0131 bar\u0131nd\u0131ran <code>div<\/code>. Bu <code>div<\/code>, ba\u015flang\u0131\u00e7ta gizli olacak ve <code>input<\/code> i\u015faretlendi\u011finde g\u00f6r\u00fcnecektir.<\/p>\n<p><strong>\u00d6nemli Not:<\/strong> <code>input<\/code> ve <code>label<\/code> ile <code>collapsible-content<\/code> elemanlar\u0131n\u0131n ayn\u0131 seviyede (sibling) olmas\u0131, CSS&#8217;teki karde\u015f se\u00e7icileri (<code>+<\/code> veya <code>~<\/code>) kullanabilmemiz i\u00e7in zorunludur.<\/p>\n<h4>2. Temel CSS Stilleri<\/h4>\n<p>\u015eimdi bu HTML yap\u0131s\u0131n\u0131 i\u015flevsel ve g\u00f6rsel olarak ho\u015f bir katlanabilir i\u00e7erik haline getirecek CSS stillerini ekleyelim.<\/p>\n<pre><code class=\"language-css\">\/<em> Genel Stil Resetleri ve Temel Ayarlar <\/em>\/\nbody {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    padding: 20px;\n    background-color: #f4f4f4;\n    color: #333;\n}\n\n.collapsible-container {\n    background-color: #fff;\n    border: 1px solid #ddd;\n    margin-bottom: 10px;\n    border-radius: 8px;\n    box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n    overflow: hidden; \/<em> \u0130\u00e7erik gizlenirken ta\u015fmay\u0131 \u00f6nler <\/em>\/\n}\n\n\/<em> Checkbox'\u0131 gizle <\/em>\/\n.collapsible-toggle {\n    display: none; \/<em> Checkbox'\u0131 tamamen gizler <\/em>\/\n}\n\n\/<em> Ba\u015fl\u0131k (Label) Stilleri <\/em>\/\n.collapsible-header {\n    display: block; \/<em> Label'\u0131 blok seviye yapar <\/em>\/\n    padding: 15px 20px;\n    background-color: #007bff;\n    color: white;\n    cursor: pointer; \/<em> Fare imlecini el i\u015fareti yapar <\/em>\/\n    font-weight: bold;\n    font-size: 1.1em;\n    position: relative; \/<em> \u0130kon i\u00e7in konumland\u0131rma <\/em>\/\n    user-select: none; \/<em> Metin se\u00e7meyi engeller <\/em>\/\n}\n\n\/<em> Ba\u015fl\u0131k \u00fczerine gelindi\u011finde renk de\u011fi\u015fimi <\/em>\/\n.collapsible-header:hover {\n    background-color: #0056b3;\n}\n\n\/<em> Ba\u015fl\u0131k ikonu (a\u00e7\u0131k\/kapal\u0131 durumu g\u00f6stermek i\u00e7in) <\/em>\/\n.collapsible-header::after {\n    content: '+'; \/<em> Kapal\u0131 durumda '+' ikonu <\/em>\/\n    position: absolute;\n    right: 20px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 1.5em;\n    line-height: 1;\n    transition: transform 0.3s ease; \/<em> \u0130kon d\u00f6n\u00fc\u015f\u00fcm\u00fc i\u00e7in ge\u00e7i\u015f efekti <\/em>\/\n}\n\n\/<em> \u0130\u00e7erik Stilleri - Ba\u015flang\u0131\u00e7ta gizli <\/em>\/\n.collapsible-content {\n    max-height: 0; \/<em> \u0130\u00e7eri\u011fi gizler <\/em>\/\n    overflow: hidden; \/<em> Ta\u015fmay\u0131 gizler <\/em>\/\n    transition: max-height 0.4s ease-out, padding 0.4s ease-out; \/<em> Yumu\u015fak ge\u00e7i\u015f efekti <\/em>\/\n    padding: 0 20px; \/<em> \u0130\u00e7erik gizliyken padding 0 <\/em>\/\n}\n\n\/<em> Checkbox i\u015faretlendi\u011finde (a\u00e7\u0131k durum) <\/em>\/\n.collapsible-toggle:checked ~ .collapsible-content {\n    max-height: 500px; \/<em> \u0130\u00e7eri\u011fi g\u00f6sterecek kadar b\u00fcy\u00fck bir de\u011fer <\/em>\/\n    padding: 15px 20px; \/<em> A\u00e7\u0131kken padding ekle <\/em>\/\n}\n\n\/<em> Checkbox i\u015faretlendi\u011finde ba\u015fl\u0131k ikonunu de\u011fi\u015ftir <\/em>\/\n.collapsible-toggle:checked ~ .collapsible-header::after {\n    content: '\u2212'; \/<em> A\u00e7\u0131k durumda '\u2212' ikonu <\/em>\/\n    transform: translateY(-50%) rotate(0deg); \/<em> \u0130konu d\u00f6nd\u00fcrme <\/em>\/\n}<\/code><\/pre>\n<p><strong>A\u00e7\u0131klama:<\/strong><\/p>\n<p>*   <strong><code>.collapsible-toggle { display: none; }<\/code><\/strong>: Bu sat\u0131r, checkbox input&#8217;unu tamamen gizler. Kullan\u0131c\u0131 onun yerine <code>label<\/code>&#8216;a t\u0131klayarak etkile\u015fim kuracakt\u0131r.<br \/>\n*   <strong><code>.collapsible-header<\/code><\/strong>: <code>label<\/code> etiketini bir ba\u015fl\u0131k gibi stilize ederiz. <code>cursor: pointer;<\/code> ile t\u0131klanabilir oldu\u011funu belirtiriz.<br \/>\n*   <strong><code>.collapsible-header::after<\/code><\/strong>: <code>label<\/code>&#8216;\u0131n sonuna bir <code>+<\/code> i\u015fareti ekleriz. Bu, i\u00e7eri\u011fin kapal\u0131 oldu\u011funu g\u00f6steren bir ikon g\u00f6revi g\u00f6r\u00fcr. <code>position: absolute;<\/code> ve <code>transform: translateY(-50%);<\/code> ile dikey olarak ortalar\u0131z.<br \/>\n*   <strong><code>.collapsible-content<\/code><\/strong>: Bu, katlanabilir i\u00e7eri\u011fin kendisidir.<br \/>\n    *   <code>max-height: 0;<\/code>: \u0130\u00e7eri\u011fi ba\u015flang\u0131\u00e7ta tamamen gizler. <code>height: 0;<\/code> yerine <code>max-height<\/code> kullanmak, i\u00e7eri\u011fin boyutu bilinmedi\u011finde veya de\u011fi\u015fti\u011finde animasyonun d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<br \/>\n    *   <code>overflow: hidden;<\/code>: <code>max-height: 0;<\/code> oldu\u011funda i\u00e7eri\u011fin ta\u015fmas\u0131n\u0131 engeller.<br \/>\n    *   <code>transition: max-height 0.4s ease-out, padding 0.4s ease-out;<\/code>: \u0130\u00e7erik a\u00e7\u0131l\u0131p kapan\u0131rken <code>max-height<\/code> ve <code>padding<\/code> de\u011ferlerinin yumu\u015fak bir \u015fekilde de\u011fi\u015fmesini sa\u011flar.<br \/>\n    *   <code>padding: 0 20px;<\/code>: \u0130\u00e7erik gizliyken dikey padding&#8217;i s\u0131f\u0131r yapar\u0131z. Bu, <code>max-height: 0<\/code> ile birlikte i\u00e7eri\u011fin tamamen g\u00f6r\u00fcnmez olmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong><code>.collapsible-toggle:checked ~ .collapsible-content<\/code><\/strong>: Bu se\u00e7ici anahtar k\u0131s\u0131md\u0131r.<br \/>\n    *   <code>:checked<\/code>: <code>collapsible-toggle<\/code> input&#8217;u i\u015faretli oldu\u011funda (yani kullan\u0131c\u0131 <code>label<\/code>&#8216;a t\u0131klam\u0131\u015f ve i\u00e7erik a\u00e7\u0131lm\u0131\u015fsa).<br \/>\n    *   <code>~<\/code>: Genel karde\u015f se\u00e7ici. <code>collapsible-toggle<\/code> ile ayn\u0131 seviyede olan t\u00fcm <code>collapsible-content<\/code> elemanlar\u0131n\u0131 hedefler.<br \/>\n    *   <code>max-height: 500px;<\/code>: \u0130\u00e7eri\u011fi g\u00f6stermek i\u00e7in <code>max-height<\/code> de\u011ferini yeterince b\u00fcy\u00fck bir de\u011fere ayarlar\u0131z. \u0130\u00e7eri\u011finizin en uzun halinden daha b\u00fcy\u00fck bir de\u011fer se\u00e7ti\u011finizden emin olun, aksi takdirde i\u00e7erik kesilebilir.<br \/>\n    *   <code>padding: 15px 20px;<\/code>: \u0130\u00e7erik a\u00e7\u0131ld\u0131\u011f\u0131nda dikey padding&#8217;i geri ekleriz.<br \/>\n*   <strong><code>.collapsible-toggle:checked ~ .collapsible-header::after<\/code><\/strong>: <code>input<\/code> i\u015faretli oldu\u011funda, <code>label<\/code>&#8216;daki <code>+<\/code> ikonunu <code>\u2212<\/code> i\u015faretine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr\u00fcz.<\/p>\n<p>Bu temel yap\u0131 ile tamamen i\u015flevsel ve animasyonlu bir saf CSS katlanabilir i\u00e7eri\u011fe sahip olursunuz.<\/p>\n<h3>Geli\u015fmi\u015f Teknikler ve \u0130yile\u015ftirmeler<\/h3>\n<p>Temel yap\u0131n\u0131n \u00fczerine in\u015fa ederek, saf CSS katlanabilir i\u00e7eri\u011fi daha kullan\u0131\u015fl\u0131 ve estetik hale getirebiliriz.<\/p>\n<h4>1. Akordiyon (Accordion) Yap\u0131s\u0131: Tek Seferde Sadece Birini A\u00e7ma<\/h4>\n<p>Bazen birden fazla katlanabilir i\u00e7erik oldu\u011funda, kullan\u0131c\u0131lar\u0131n ayn\u0131 anda yaln\u0131zca birini a\u00e7\u0131k tutmas\u0131n\u0131 isteyebiliriz. Bu, &#8220;akordiyon&#8221; olarak bilinir. Saf CSS ile akordiyon olu\u015fturmak i\u00e7in <code>input[type=\"checkbox\"]<\/code> yerine <code>input[type=\"radio\"]<\/code> kullan\u0131r\u0131z.<\/p>\n<p><strong>HTML Yap\u0131s\u0131:<\/strong><\/p>\n<p>T\u00fcm radyo butonlar\u0131n\u0131n <code>name<\/code> niteli\u011fi ayn\u0131 olmal\u0131d\u0131r. Bu, taray\u0131c\u0131n\u0131n ayn\u0131 anda yaln\u0131zca bir radyo butonunun se\u00e7ili olmas\u0131na izin vermesini sa\u011flar.<\/p>\n<pre><code class=\"language-html\"><div class=\"accordion-group\">\n    <div class=\"collapsible-container\">\n        <input type=\"radio\" id=\"accordion-toggle-1\" name=\"accordion\" class=\"collapsible-toggle\">\n        <label for=\"accordion-toggle-1\" class=\"collapsible-header\">\n            Akordiyon Ba\u015fl\u0131k 1\n        <\/label>\n        <div class=\"collapsible-content\">\n            <p>Bu, akordiyon grubunun ilk i\u00e7eri\u011fidir. Sadece bir radyo butonu se\u00e7ili olabilece\u011fi i\u00e7in, di\u011ferini a\u00e7t\u0131\u011f\u0131n\u0131zda bu otomatik olarak kapanacakt\u0131r.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"collapsible-container\">\n        <input type=\"radio\" id=\"accordion-toggle-2\" name=\"accordion\" class=\"collapsible-toggle\">\n        <label for=\"accordion-toggle-2\" class=\"collapsible-header\">\n            Akordiyon Ba\u015fl\u0131k 2\n        <\/label>\n        <div class=\"collapsible-content\">\n            <p>Bu, akordiyon grubunun ikinci i\u00e7eri\u011fidir. Radyo butonlar\u0131 sayesinde, her zaman sadece bir b\u00f6l\u00fcm a\u00e7\u0131k kal\u0131r.<\/p>\n        <\/div>\n    <\/div>\n\n    <div class=\"collapsible-container\">\n        <input type=\"radio\" id=\"accordion-toggle-3\" name=\"accordion\" class=\"collapsible-toggle\">\n        <label for=\"accordion-toggle-3\" class=\"collapsible-header\">\n            Akordiyon Ba\u015fl\u0131k 3\n        <\/label>\n        <div class=\"collapsible-content\">\n            <p>Akordiyon yap\u0131s\u0131, SSS b\u00f6l\u00fcmleri veya kategorize edilmi\u015f i\u00e7erikler i\u00e7in idealdir. Kullan\u0131c\u0131lar her seferinde sadece ilgili b\u00f6l\u00fcme odaklanabilir.<\/p>\n        <\/div>\n    <\/div>\n<\/div><\/code><\/pre>\n<p><strong>CSS:<\/strong><\/p>\n<p>CSS ayn\u0131 kal\u0131r. \u00c7\u00fcnk\u00fc hem <code>checkbox<\/code> hem de <code>radio<\/code> input&#8217;lar\u0131 <code>:checked<\/code> s\u00f6zde s\u0131n\u0131f\u0131n\u0131 destekler ve <code>~<\/code> se\u00e7icisi ile karde\u015f elemanlar\u0131 hedefleme mant\u0131\u011f\u0131 de\u011fi\u015fmez. Tek fark, <code>radio<\/code> butonlar\u0131n\u0131n do\u011fas\u0131 gere\u011fi, ayn\u0131 <code>name<\/code> niteli\u011fine sahip olanlardan sadece birinin <code>:checked<\/code> olabilmesidir.<\/p>\n<h4>2. Eri\u015filebilirlik (Accessibility &#8211; A11y)<\/h4>\n<p>Saf CSS \u00e7\u00f6z\u00fcmleri, JavaScript&#8217;e ba\u011f\u0131ml\u0131 olmad\u0131klar\u0131 i\u00e7in varsay\u0131lan olarak belirli bir eri\u015filebilirlik seviyesine sahiptir:<\/p>\n<p>*   <strong>Klavye Eri\u015fimi:<\/strong> <code>label<\/code> ve <code>input<\/code> aras\u0131ndaki <code>for<\/code> niteli\u011fi sayesinde, kullan\u0131c\u0131lar <code>label<\/code>&#8216;a t\u0131klayarak veya klavyedeki <code>Tab<\/code> tu\u015fu ile <code>label<\/code>&#8216;a odaklan\u0131p <code>Space<\/code> tu\u015funa basarak i\u00e7eri\u011fi a\u00e7\u0131p kapatabilirler. Bu, temel klavye etkile\u015fimini sa\u011flar.<br \/>\n*   <strong>Ekran Okuyucular:<\/strong> <code>label<\/code> etiketi, ili\u015fkili <code>input<\/code>&#8216;un amac\u0131n\u0131 ekran okuyuculara iletir. \u00d6rne\u011fin, ekran okuyucu &#8220;Ba\u015fl\u0131k 1: Saf CSS Nedir? checkbox&#8221; \u015feklinde bir bildirimde bulunabilir.<\/p>\n<p>Ancak, JavaScript ile sa\u011flanan dinamik <code>aria<\/code> nitelikleri (\u00f6rn. <code>aria-expanded=\"true\/false\"<\/code>, <code>aria-controls=\"content-id\"<\/code>) saf CSS ile do\u011frudan y\u00f6netilemez. Bu nitelikler, ekran okuyuculara bir bile\u015fenin o anki durumu hakk\u0131nda daha zengin bilgi sa\u011flar. Tam eri\u015filebilirlik i\u00e7in genellikle hafif bir JavaScript katman\u0131 \u00f6nerilir. Ancak saf CSS \u00e7\u00f6z\u00fcm\u00fc bile, \u00f6zellikle <code>label<\/code> ve <code>input<\/code> ili\u015fkisi do\u011fru kuruldu\u011funda, JavaScript&#8217;siz durumlarda iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n<p>Eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in HTML&#8217;e <code>aria-labelledby<\/code> ve <code>aria-controls<\/code> gibi nitelikler ekleyebiliriz. Ancak bu niteliklerin de\u011ferleri dinamik olarak de\u011fi\u015fmeyece\u011fi i\u00e7in, sadece ilk durum i\u00e7in bir ba\u011flam sa\u011flayacakt\u0131r. \u00d6rne\u011fin:<\/p>\n<pre><code class=\"language-html\"><div class=\"collapsible-container\">\n    <input type=\"checkbox\" id=\"collapsible-toggle-1\" class=\"collapsible-toggle\" aria-labelledby=\"collapsible-header-1\">\n    <label for=\"collapsible-toggle-1\" id=\"collapsible-header-1\" class=\"collapsible-header\">\n        Ba\u015fl\u0131k 1: Saf CSS Nedir?\n    <\/label>\n    <div id=\"collapsible-content-1\" class=\"collapsible-content\" role=\"region\" aria-labelledby=\"collapsible-header-1\">\n        <p>\u0130\u00e7erik...<\/p>\n    <\/div>\n<\/div><\/code><\/pre>\n<p>Burada <code>role=\"region\"<\/code> ve <code>aria-labelledby<\/code> ile i\u00e7eri\u011fin ne ile ilgili oldu\u011funu belirtiyoruz. <code>aria-expanded<\/code> gibi dinamik durumlar i\u00e7in yine de JS gereklidir.<\/p>\n<h4>3. <code>max-height<\/code> De\u011ferinin Y\u00f6netimi ve S\u0131n\u0131rlamalar\u0131<\/h4>\n<p><code>max-height<\/code> \u00f6zelli\u011fi, i\u00e7eri\u011fin a\u00e7\u0131l\u0131p kapanma animasyonunu sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir. Ancak do\u011fru de\u011feri se\u00e7mek \u00f6nemlidir:<\/p>\n<p>*   <strong>Yeterince B\u00fcy\u00fck Bir De\u011fer:<\/strong> <code>max-height<\/code> de\u011feri, i\u00e7eri\u011finizin alabilece\u011fi en b\u00fcy\u00fck y\u00fcksekli\u011fi kar\u015f\u0131layacak kadar b\u00fcy\u00fck olmal\u0131d\u0131r. E\u011fer i\u00e7eri\u011finizin y\u00fcksekli\u011fi <code>max-height<\/code> de\u011ferini a\u015farsa, i\u00e7erik kesilir ve tamamen g\u00f6r\u00fcnmez.<br \/>\n*   <strong>Performans:<\/strong> \u00c7ok b\u00fcy\u00fck bir <code>max-height<\/code> de\u011feri (\u00f6rn. <code>9999px<\/code>) animasyon \u00fczerinde hafif bir etkiye sahip olabilir, ancak modern taray\u0131c\u0131larda genellikle fark edilmez. <code>max-height<\/code> de\u011feri ne kadar b\u00fcy\u00fck olursa, animasyonun &#8220;biti\u015f&#8221; noktas\u0131na ula\u015fmas\u0131 o kadar uzun s\u00fcrebilir, ancak <code>ease-out<\/code> gibi ge\u00e7i\u015f fonksiyonlar\u0131 bu etkiyi azalt\u0131r.<br \/>\n*   <strong>Dinamik \u0130\u00e7erik:<\/strong> Saf CSS \u00e7\u00f6z\u00fcmlerinde <code>max-height<\/code> sabittir. E\u011fer i\u00e7eri\u011finiz dinamik olarak y\u00fckleniyor veya y\u00fcksekli\u011fi s\u00fcrekli de\u011fi\u015fiyorsa, bu sabit <code>max-height<\/code> de\u011feri sorunlara yol a\u00e7abilir. Bu gibi durumlarda JavaScript, i\u00e7eri\u011fin ger\u00e7ek y\u00fcksekli\u011fini hesaplay\u0131p <code>max-height<\/code> de\u011ferini dinamik olarak ayarlayarak daha esnek bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n<h4>4. Ba\u015fl\u0131k \u0130konunun Geli\u015ftirilmesi<\/h4>\n<p>Yukar\u0131daki \u00f6rnekte <code>::after<\/code> pseudo-elementi ile basit bir <code>+<\/code> \/ <code>\u2212<\/code> ikonu kulland\u0131k. Bunu daha geli\u015fmi\u015f hale getirebiliriz:<\/p>\n<p>*   <strong>SVG veya Font \u0130konlar\u0131:<\/strong> <code>content<\/code> \u00f6zelli\u011fi yerine, SVG veya font ikonlar\u0131n\u0131 (Font Awesome gibi) kullanabiliriz. Bunun i\u00e7in <code>::after<\/code> yerine <code><i><\/code> gibi bir etiket kullan\u0131p CSS ile gizleyip g\u00f6sterebilir veya CSS <code>mask<\/code> ya da <code>background-image<\/code> kullanarak ikonlar\u0131 de\u011fi\u015ftirebiliriz.<br \/>\n*   <strong>D\u00f6n\u00fc\u015f\u00fcm Animasyonlar\u0131:<\/strong> \u0130konun d\u00f6nerek a\u00e7\u0131lma\/kapanma efekti vermesi kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/p>\n<pre><code class=\"language-css\">\/<em> \u00d6rnek: Ok ikonu ile d\u00f6n\u00fc\u015f\u00fcm <\/em>\/\n.collapsible-header::after {\n    content: ''; \/<em> Bo\u015f i\u00e7erik <\/em>\/\n    position: absolute;\n    right: 20px;\n    top: 50%;\n    transform: translateY(-50%) rotate(0deg); \/<em> Ba\u015flang\u0131\u00e7ta 0 derece <\/em>\/\n    width: 12px; \/<em> Ok geni\u015fli\u011fi <\/em>\/\n    height: 12px; \/<em> Ok y\u00fcksekli\u011fi <\/em>\/\n    border-right: 2px solid white;\n    border-bottom: 2px solid white;\n    transform-origin: center center;\n    transition: transform 0.3s ease;\n}\n\n.collapsible-toggle:checked ~ .collapsible-header::after {\n    transform: translateY(-50%) rotate(45deg); \/<em> A\u00e7\u0131kken 45 derece d\u00f6nd\u00fcr <\/em>\/\n}<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>::after<\/code> ile basit bir ok ikonu olu\u015fturup <code>rotate<\/code> transformasyonu ile y\u00f6n\u00fcn\u00fc de\u011fi\u015ftiriyoruz.<\/p>\n<h3>Saf CSS Katlanabilir \u0130\u00e7eriklerin S\u0131n\u0131rlamalar\u0131<\/h3>\n<p>Saf CSS \u00e7\u00f6z\u00fcmleri bir\u00e7ok avantaj sunsa da, baz\u0131 s\u0131n\u0131rlamalara sahiptir:<\/p>\n<p>*   <strong>Dinamik \u0130\u00e7erik Y\u00fcksekli\u011fi:<\/strong> \u0130\u00e7erik y\u00fcksekli\u011fi \u00f6nceden bilinmiyorsa veya \u00e7al\u0131\u015fma zaman\u0131nda de\u011fi\u015fiyorsa, <code>max-height<\/code> de\u011ferini do\u011fru ayarlamak zorla\u015f\u0131r. \u00c7ok b\u00fcy\u00fck bir <code>max-height<\/code> performans\u0131 etkileyebilir, \u00e7ok k\u00fc\u00e7\u00fck bir de\u011fer ise i\u00e7eri\u011fi kesebilir.<br \/>\n*   <strong>Karma\u015f\u0131k Etkile\u015fimler:<\/strong><br \/>\n    *   <strong>D\u0131\u015far\u0131 T\u0131klayarak Kapatma:<\/strong> Kullan\u0131c\u0131n\u0131n katlanabilir i\u00e7eri\u011fin d\u0131\u015f\u0131na t\u0131klayarak kapatmas\u0131 gibi etkile\u015fimler sadece JavaScript ile m\u00fcmk\u00fcnd\u00fcr.<br \/>\n    *   <strong>T\u00fcm\u00fcn\u00fc Kapat\/A\u00e7 D\u00fc\u011fmesi:<\/strong> T\u00fcm katlanabilir i\u00e7erikleri ayn\u0131 anda a\u00e7an veya kapatan bir d\u00fc\u011fme olu\u015fturmak i\u00e7in JavaScript gereklidir.<br \/>\n    *   <strong>\u0130\u00e7erik Y\u00fcklendi\u011finde Otomatik A\u00e7ma:<\/strong> Belirli bir katlanabilir i\u00e7eri\u011fin sayfa y\u00fcklendi\u011finde otomatik olarak a\u00e7\u0131lmas\u0131n\u0131 sa\u011flamak (radyo butonlar\u0131 hari\u00e7) i\u00e7in JavaScript gerekebilir.<br \/>\n*   <strong>Eri\u015filebilirlik (Dinamik ARIA Nitelikleri):<\/strong> <code>aria-expanded<\/code> gibi dinamik ARIA niteliklerinin de\u011ferlerini CSS ile de\u011fi\u015ftirmek m\u00fcmk\u00fcn de\u011fildir. Bu, ekran okuyucu kullan\u0131c\u0131lar\u0131 i\u00e7in bile\u015fenin o anki durumu hakk\u0131nda tam bilgi eksikli\u011fine yol a\u00e7abilir.<br \/>\n*   <strong>Odak Y\u00f6netimi:<\/strong> \u0130\u00e7erik a\u00e7\u0131ld\u0131\u011f\u0131nda oda\u011f\u0131 i\u00e7eri\u011fe ta\u015f\u0131mak veya i\u00e7eri\u011fin belirli bir b\u00f6l\u00fcm\u00fcne kayd\u0131rmak gibi geli\u015fmi\u015f odak y\u00f6netimi senaryolar\u0131 JavaScript gerektirir.<br \/>\n*   <strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong> Modern taray\u0131c\u0131lar bu CSS \u00f6zelliklerini iyi desteklese de, \u00e7ok eski taray\u0131c\u0131larda baz\u0131 animasyonlar veya se\u00e7iciler beklendi\u011fi gibi \u00e7al\u0131\u015fmayabilir. (Ancak bu durum g\u00fcn\u00fcm\u00fczde nadirdir.)<\/p>\n<h3>Ne Zaman Saf CSS Katlanabilir Kullan\u0131lmal\u0131?<\/h3>\n<p>Saf CSS katlanabilir i\u00e7erikler, belirli senaryolar i\u00e7in m\u00fckemmel bir se\u00e7imdir:<\/p>\n<p>*   <strong>Sabit \u0130\u00e7erikli SSS B\u00f6l\u00fcmleri:<\/strong> \u0130\u00e7eri\u011fin nadiren de\u011fi\u015fti\u011fi veya y\u00fcksekli\u011finin \u00f6ng\u00f6r\u00fclebilir oldu\u011fu SSS veya &#8220;Hakk\u0131m\u0131zda&#8221; sayfalar\u0131 gibi b\u00f6l\u00fcmlerde idealdir.<br \/>\n*   <strong>Basit Men\u00fcler veya Navigasyon \u00d6\u011feleri:<\/strong> Alt men\u00fcleri gizlemek\/g\u00f6stermek i\u00e7in kullan\u0131labilir.<br \/>\n*   <strong>JavaScript Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 Azaltmak \u0130steyen Projeler:<\/strong> \u00d6zellikle JavaScript dosya boyutunu k\u00fc\u00e7\u00fcltmek ve sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131rmak isteyen projelerde tercih edilir.<br \/>\n*   <strong>Performans\u0131n Kritik Oldu\u011fu Durumlar:<\/strong> \u00d6zellikle mobil cihazlarda veya d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip a\u011flarda performans\u0131 \u00f6n planda tutan uygulamalar i\u00e7in caziptir.<br \/>\n*   <strong>Geriye D\u00f6n\u00fck Uyumluluk Gerektirmeyen Durumlar:<\/strong> Modern taray\u0131c\u0131lar\u0131 hedefleyen projelerde sorunsuz \u00e7al\u0131\u015f\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Saf CSS ile katlanabilir i\u00e7erik uygulamak, web geli\u015ftiricilerine g\u00fc\u00e7l\u00fc ve verimli bir alternatif sunar. JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 ortadan kald\u0131rarak daha h\u0131zl\u0131, daha g\u00fcvenilir ve daha bak\u0131m\u0131 kolay bile\u015fenler olu\u015fturma imkan\u0131 tan\u0131r. <code>input[type=\"checkbox\"]<\/code> veya <code>input[type=\"radio\"]<\/code> ile <code>:checked<\/code> s\u00f6zde s\u0131n\u0131f\u0131n\u0131 ve karde\u015f se\u00e7icileri (<code>~<\/code>) ustaca kullanarak, animasyonlu ve etkile\u015fimli katlanabilir i\u00e7erikleri tamamen CSS ile hayata ge\u00e7irebiliriz.<\/p>\n<p>Ancak, bu yakla\u015f\u0131m\u0131n s\u0131n\u0131rlamalar\u0131n\u0131 anlamak ve ne zaman JavaScript&#8217;in daha uygun bir \u00e7\u00f6z\u00fcm olaca\u011f\u0131n\u0131 bilmek de \u00f6nemlidir. Dinamik i\u00e7erik, karma\u015f\u0131k etkile\u015fimler veya tam eri\u015filebilirlik (dinamik ARIA nitelikleri dahil) gerektiren senaryolarda, hafif bir JavaScript katman\u0131 eklemek daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flayabilir.<\/p>\n<p>\u00d6zetle, basit ve statik katlanabilir i\u00e7erikler i\u00e7in saf CSS yakla\u015f\u0131m\u0131 m\u00fckemmel bir se\u00e7imdir. Performans, basitlik ve ba\u011f\u0131ml\u0131l\u0131ks\u0131zl\u0131k avantajlar\u0131ndan faydalanarak web projelerinizi daha verimli hale getirebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber\nWeb sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren, i\u00e7eri\u011fi d\u00fczenli ve okuna","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-33191","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber Web sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren, i\u00e7eri\u011fi d\u00fczenli ve okuna\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-30T20:41:04+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-30T20:41:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\"},\"wordCount\":2426,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\",\"name\":\"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-30T20:41:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber","og_description":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber Web sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren, i\u00e7eri\u011fi d\u00fczenli ve okuna","og_url":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-30T20:41:04+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-30T20:41:04+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/"},"wordCount":2426,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/","name":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-30T20:41:04+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/saf-css-ile-katlanabilir-icerik-uygulamak-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Saf CSS ile Katlanabilir \u0130\u00e7erik Uygulamak: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33191"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33191\/revisions"}],"predecessor-version":[{"id":33192,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33191\/revisions\/33192"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}