{"id":39276,"date":"2026-02-18T01:40:48","date_gmt":"2026-02-17T22:40:48","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39276"},"modified":"2026-02-18T01:40:48","modified_gmt":"2026-02-17T22:40:48","slug":"javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/","title":{"rendered":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu"},"content":{"rendered":"

<\/p>\n

JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu<\/h2>\n

Web sitelerinde kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmek, ziyaret\u00e7ilerin sitede daha uzun s\u00fcre kalmas\u0131n\u0131 sa\u011flamak ve i\u00e7erikle etkile\u015fimlerini art\u0131rmak i\u00e7in bir\u00e7ok farkl\u0131 teknik ve ara\u00e7 kullan\u0131l\u0131r. Bu ara\u00e7lardan biri de sayfa ilerleme \u00e7ubu\u011fudur. \u00d6zellikle uzun makaleler, teknik dok\u00fcmantasyonlar veya \u00e7ok sayfal\u0131 formlar gibi i\u00e7eriklerde, kullan\u0131c\u0131n\u0131n sayfada ne kadar ilerledi\u011fini g\u00f6rsel olarak g\u00f6steren bir ilerleme \u00e7ubu\u011fu, kullan\u0131c\u0131n\u0131n mevcut konumunu anlamas\u0131na yard\u0131mc\u0131 olur ve okuma deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirir. Bu makalede, modern web geli\u015ftirme tekniklerini kullanarak, yani JavaScript ve CSS de\u011fi\u015fkenlerinin g\u00fcc\u00fcn\u00fc birle\u015ftirerek nas\u0131l dinamik ve performansl\u0131 bir sayfa ilerleme \u00e7ubu\u011fu olu\u015fturulaca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Sayfa \u0130lerleme \u00c7ubu\u011fu Neden \u00d6nemlidir?<\/h3>\n

Kullan\u0131c\u0131 deneyimi, bir web sitesinin ba\u015far\u0131s\u0131nda kritik bir fakt\u00f6rd\u00fcr. Sayfa ilerleme \u00e7ubuklar\u0131, bu deneyimi geli\u015ftirmek i\u00e7in \u00e7e\u015fitli faydalar sunar:<\/p>\n

* G\u00f6rsel Geri Bildirim:<\/strong> Kullan\u0131c\u0131lara sayfada ne kadar ilerlediklerine dair an\u0131nda g\u00f6rsel geri bildirim sa\u011flar. Bu, \u00f6zellikle uzun i\u00e7eriklerde okuyucunun motivasyonunu art\u0131rabilir. “Daha ne kadar kald\u0131?” sorusuna yan\u0131t vererek belirsizli\u011fi ortadan kald\u0131r\u0131r.
\n* Beklenti Y\u00f6netimi:<\/strong> Bir makalenin veya formun ne kadar uzun oldu\u011funu ba\u015ftan bilmek, kullan\u0131c\u0131n\u0131n zihinsel olarak haz\u0131rlanmas\u0131na yard\u0131mc\u0131 olur. Bu, kullan\u0131c\u0131n\u0131n sayfay\u0131 terk etme olas\u0131l\u0131\u011f\u0131n\u0131 azaltabilir.
\n* Geli\u015fmi\u015f Navigasyon:<\/strong> Baz\u0131 durumlarda, ilerleme \u00e7ubu\u011fu sadece bir g\u00f6sterge olmakla kalmaz, ayn\u0131 zamanda t\u0131klanabilir bir \u00f6\u011fe haline getirilerek sayfa i\u00e7inde h\u0131zl\u0131 gezinme (\u00f6rne\u011fin, belirli bir y\u00fczdeye atlama) imkan\u0131 da sunabilir. Ancak bu makalede temel ilerleme \u00e7ubu\u011funa odaklanaca\u011f\u0131z.
\n* Profesyonel G\u00f6r\u00fcn\u00fcm:<\/strong> \u0130yi tasarlanm\u0131\u015f bir ilerleme \u00e7ubu\u011fu, sitenize modern ve profesyonel bir dokunu\u015f katarak genel marka alg\u0131s\u0131n\u0131 g\u00fc\u00e7lendirebilir.
\n* Performans Alg\u0131s\u0131:<\/strong> Sayfan\u0131n y\u00fcklenmesi s\u0131ras\u0131nda veya bir i\u015flem devam ederken kullan\u0131lan ilerleme \u00e7ubuklar\u0131, kullan\u0131c\u0131n\u0131n bekleme s\u00fcresini daha katlan\u0131labilir hale getirir. Bu makaledeki ilerleme \u00e7ubu\u011fu ise sayfa i\u00e7eri\u011fi tamamen y\u00fcklendikten sonra kayd\u0131rma ilerlemesini g\u00f6sterir.<\/p>\n

Geleneksel Yakla\u015f\u0131mlar ve CSS De\u011fi\u015fkenlerinin G\u00fcc\u00fc<\/h3>\n

Sayfa ilerleme \u00e7ubuklar\u0131 olu\u015fturmak i\u00e7in ge\u00e7mi\u015fte farkl\u0131 yakla\u015f\u0131mlar benimsenmi\u015ftir. En yayg\u0131n y\u00f6ntemlerden biri, JavaScript kullanarak bir HTML \u00f6\u011fesinin width<\/code> \u00f6zelli\u011fini do\u011frudan manip\u00fcle etmekti. \u00d6rne\u011fin, sayfan\u0131n kayd\u0131rma y\u00fczdesi hesaplan\u0131r ve bu y\u00fczde do\u011frudan bir div<\/code> \u00f6\u011fesinin style.width<\/code> \u00f6zelli\u011fine atanarak ilerleme \u00e7ubu\u011fu g\u00fcncellenirdi.<\/p>\n

\/\/ Geleneksel Yakla\u015f\u0131m \u00d6rne\u011fi\nconst progressBar = document.getElementById('progressBar');\nconst updateProgress = () => {\n    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;\n    const scrollTop = document.documentElement.scrollTop;\n    const scrollPercentage = (scrollTop \/ scrollHeight) * 100;\n    progressBar.style.width = ${scrollPercentage}%<\/code>;\n};\nwindow.addEventListener('scroll', updateProgress);<\/code><\/pre>\n
Bu yakla\u015f\u0131m i\u015flevsel olsa da, baz\u0131 dezavantajlar\u0131 bulunmaktad\u0131r:<\/p>\n
*   CSS ve JavaScript Aras\u0131ndaki Ba\u011f\u0131ml\u0131l\u0131k:<\/strong> Stil do\u011frudan JavaScript taraf\u0131ndan belirlendi\u011fi i\u00e7in, CSS dosyas\u0131nda tan\u0131mlanan stillerle \u00e7ak\u0131\u015fmalar ya\u015fanabilir veya stilin y\u00f6netimi karma\u015f\u0131kla\u015fabilir.
\n*   Performans Sorunlar\u0131:<\/strong> Her kayd\u0131rma olay\u0131nda DOM’a do\u011frudan stil de\u011fi\u015fikli\u011fi yapmak, \u00f6zellikle eski taray\u0131c\u0131larda veya karma\u015f\u0131k sayfalarda performans darbo\u011fazlar\u0131na yol a\u00e7abilir. Taray\u0131c\u0131n\u0131n her seferinde d\u00fczeni yeniden hesaplamas\u0131 (reflow) ve yeniden \u00e7izmesi (repaint) gerekebilir.
\n*   Tema Y\u00f6netimi:<\/strong> \u0130lerleme \u00e7ubu\u011funun rengini veya di\u011fer g\u00f6rsel \u00f6zelliklerini de\u011fi\u015ftirmek istedi\u011finizde, ya JavaScript kodunu g\u00fcncellemeniz ya da CSS’de !important<\/code> gibi kurallar kullanman\u0131z gerekebilir, bu da kodun esnekli\u011fini azalt\u0131r.<\/p>\n
CSS de\u011fi\u015fkenleri (CSS Custom Properties) ise modern web geli\u015ftirme i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r ve yukar\u0131da bahsedilen sorunlara zarif \u00e7\u00f6z\u00fcmler sunar. CSS de\u011fi\u015fkenleri, bir CSS dosyas\u0131nda tan\u0131mlanan ve di\u011fer CSS kurallar\u0131nda kullan\u0131labilen \u00f6zel \u00f6zelliklerdir. JavaScript arac\u0131l\u0131\u011f\u0131yla bu de\u011fi\u015fkenlerin de\u011ferlerini dinamik olarak de\u011fi\u015ftirebiliriz. Bu yakla\u015f\u0131m\u0131n faydalar\u0131 \u015funlard\u0131r:<\/p>\n
*   Temiz Ayr\u0131m:<\/strong> CSS, stil tan\u0131mlamalar\u0131ndan sorumlu olurken, JavaScript sadece de\u011ferleri g\u00fcncelleyerek bu stilleri tetikler. Bu, “ilgi alanlar\u0131n\u0131n ayr\u0131lmas\u0131” prensibine m\u00fckemmel bir \u00f6rnektir.
\n*   Daha \u0130yi Performans:<\/strong> JavaScript yaln\u0131zca bir CSS de\u011fi\u015fkeninin de\u011ferini de\u011fi\u015ftirir. Taray\u0131c\u0131, bu de\u011fi\u015fikli\u011fi alg\u0131lar ve yaln\u0131zca ilgili CSS kurallar\u0131n\u0131 yeniden de\u011ferlendirir. Bu, do\u011frudan DOM manip\u00fclasyonuna g\u00f6re genellikle daha performansl\u0131d\u0131r, \u00e7\u00fcnk\u00fc taray\u0131c\u0131 optimizasyonlar\u0131 devreye girer. \u00d6zellikle transform<\/code> veya opacity<\/code> gibi \u00f6zellikler yerine width<\/code> \u00f6zelli\u011fini g\u00fcncellerken bile, CSS de\u011fi\u015fkenleri arac\u0131l\u0131\u011f\u0131yla yap\u0131lan de\u011fi\u015fiklikler taray\u0131c\u0131ya daha fazla esneklik sunar.
\n*   Kolay Tema Y\u00f6netimi:<\/strong> \u0130lerleme \u00e7ubu\u011funun rengini veya boyutunu de\u011fi\u015ftirmek istedi\u011finizde, CSS de\u011fi\u015fkenlerini kullanarak bunu kolayca yapabilirsiniz. JavaScript kodunu de\u011fi\u015ftirmeye gerek kalmaz.
\n*   Dinamik ve Esnek Tasar\u0131m:<\/strong> CSS de\u011fi\u015fkenleri, responsive tasar\u0131mlar ve dinamik UI elemanlar\u0131 i\u00e7in m\u00fckemmel bir temel sa\u011flar.<\/p>\n
Bu makalede, CSS de\u011fi\u015fkenlerinin bu avantajlar\u0131ndan yararlanarak nas\u0131l daha temiz, daha performansl\u0131 ve daha y\u00f6netilebilir bir sayfa ilerleme \u00e7ubu\u011fu olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6rece\u011fiz.<\/p>\n
Temel Teknolojiler: HTML, CSS ve JavaScript<\/h3>\n
\u0130lerleme \u00e7ubu\u011fumuzu olu\u015fturmak i\u00e7in \u00fc\u00e7 temel web teknolojisini kullanaca\u011f\u0131z:<\/p>\n
HTML Yap\u0131s\u0131<\/h4>\n
HTML, sayfam\u0131z\u0131n iskeletini olu\u015fturur. \u0130lerleme \u00e7ubu\u011fu i\u00e7in \u00e7ok basit bir yap\u0131ya ihtiyac\u0131m\u0131z var: genellikle sayfan\u0131n en \u00fcst\u00fcnde sabit duracak tek bir div<\/code> \u00f6\u011fesi.<\/p>\n
\n\n\n    \n    \n    Sayfa \u0130lerleme \u00c7ubu\u011fu \u00d6rne\u011fi<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <div id=\"progressBar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n\n    <header>\n        \n        <p>Bu, sayfa ilerleme \u00e7ubu\u011funu test etmek i\u00e7in uzun bir makale i\u00e7eri\u011fidir.<\/p>\n    <\/header>\n\n    <main class=\"content\">\n        <section>\n            <h2>Giri\u015f<\/h2>\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n            <p>Mauris id enim id odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n            <!-- ... Daha fazla uzun i\u00e7erik buraya gelecek ... -->\n        <\/section>\n\n        <section>\n            <h2>B\u00f6l\u00fcm 1: JavaScript'in Rol\u00fc<\/h2>\n            <p>JavaScript, web sayfalar\u0131na dinamizm katan g\u00fc\u00e7l\u00fc bir betik dilidir. \u0130lerleme \u00e7ubu\u011fu \u00f6rne\u011fimizde, sayfan\u0131n kayd\u0131rma konumunu tespit etmek, bu konumu y\u00fczdeye \u00e7evirmek ve ard\u0131ndan CSS de\u011fi\u015fkenini g\u00fcncellemek i\u00e7in JavaScript'i kullanaca\u011f\u0131z.<\/p>\n            <p>Bu s\u00fcrecin temel ad\u0131mlar\u0131 \u015funlard\u0131r:<\/p>\n            <ul>\n                <li>Kayd\u0131rma olay\u0131n\u0131 dinlemek (<code>scroll<\/code> event listener).<\/li>\n                <li>Sayfan\u0131n toplam kayd\u0131r\u0131labilir y\u00fcksekli\u011fini hesaplamak.<\/li>\n                <li>Mevcut kayd\u0131rma konumunu almak.<\/li>\n                <li>Bu iki de\u011feri kullanarak kayd\u0131rma y\u00fczdesini belirlemek.<\/li>\n                <li>Belirlenen y\u00fczdeyi bir CSS de\u011fi\u015fkenine atamak.<\/li>\n            <\/ul>\n            <p>Bu ad\u0131mlar, \u00e7ubu\u011fun dinamik olarak g\u00fcncellenmesini sa\u011flar ve kullan\u0131c\u0131ya ger\u00e7ek zamanl\u0131 geri bildirim sunar.<\/p>\n            <!-- ... Daha fazla i\u00e7erik ... -->\n        <\/section>\n\n        <section>\n            <h2>B\u00f6l\u00fcm 2: CSS De\u011fi\u015fkenleri ve Stiller<\/h2>\n            <p>CSS de\u011fi\u015fkenleri, modern web tasar\u0131m\u0131nda esneklik ve s\u00fcrd\u00fcr\u00fclebilirlik sa\u011flamak i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. \u0130lerleme \u00e7ubu\u011fumuzda, \u00e7ubu\u011fun geni\u015fli\u011fini kontrol etmek i\u00e7in bir CSS de\u011fi\u015fkeni kullanaca\u011f\u0131z.<\/p>\n            <p>\u00d6ncelikle, CSS de\u011fi\u015fkenini <code>:root<\/code> se\u00e7icisi i\u00e7inde tan\u0131mlayaca\u011f\u0131z. Bu, de\u011fi\u015fkenin t\u00fcm belgeye genel olarak eri\u015filebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n            <pre><code>:root {\n    --progress-width: 0%; \/<em> Ba\u015flang\u0131\u00e7 de\u011feri <\/em>\/\n}<\/code><\/pre>\n<p>Ard\u0131ndan, ilerleme \u00e7ubu\u011fu \u00f6\u011femizin (<code>#progressBar<\/code>) stilini tan\u0131mlarken bu de\u011fi\u015fkeni kullanaca\u011f\u0131z. <code>width<\/code> \u00f6zelli\u011fine <code>var(--progress-width)<\/code> atayarak, JavaScript'in bu de\u011fi\u015fkeni de\u011fi\u015ftirmesiyle \u00e7ubu\u011fun geni\u015fli\u011finin dinamik olarak g\u00fcncellenmesini sa\u011flayaca\u011f\u0131z.<\/p>\n<p>Ayr\u0131ca, \u00e7ubu\u011fun sayfan\u0131n \u00fcst\u00fcnde sabit kalmas\u0131 i\u00e7in <code>position: fixed<\/code> ve di\u011fer g\u00f6rsel \u00f6zellikler (y\u00fckseklik, arka plan rengi, z-index) de tan\u0131mlanacakt\u0131r.<\/p>\n<p>            <!-- ... Daha fazla i\u00e7erik ... --><br \/>\n        <\/section>\n<section>\n<h2>B\u00f6l\u00fcm 3: Performans ve Optimizasyon<\/h2>\n<p>Kayd\u0131rma olaylar\u0131, \u00e7ok s\u0131k tetiklenebilen olaylard\u0131r. Bu, her kayd\u0131rma olay\u0131nda JavaScript kodunun \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na ve DOM'un g\u00fcncellenmesine neden olabilir. Performans\u0131 art\u0131rmak i\u00e7in <code>requestAnimationFrame<\/code> ve <code>debouncing<\/code> veya <code>throttling<\/code> gibi teknikleri kullanmak \u00f6nemlidir.<\/p>\n<p><code>requestAnimationFrame<\/code>, taray\u0131c\u0131n\u0131n bir sonraki yeniden \u00e7iziminden \u00f6nce belirli bir fonksiyonu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in optimize edilmi\u015f bir yoldur. Bu, animasyonlar\u0131n ve g\u00f6rsel g\u00fcncellemelerin daha p\u00fcr\u00fczs\u00fcz olmas\u0131n\u0131 sa\u011flar ve taray\u0131c\u0131n\u0131n i\u015f y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n<p>Bu makalede, <code>requestAnimationFrame<\/code> kullanarak kayd\u0131rma olaylar\u0131n\u0131 optimize edece\u011fiz. Bu sayede, ilerleme \u00e7ubu\u011fu g\u00fcncellemeleri taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131yla senkronize olacak ve daha ak\u0131c\u0131 bir deneyim sunacakt\u0131r.<\/p>\n<p>            <!-- ... Daha fazla i\u00e7erik ... --><br \/>\n        <\/section>\n<section>\n<h2>B\u00f6l\u00fcm 4: Eri\u015filebilirlik<\/h2>\n<p>Web siteleri herkes i\u00e7in eri\u015filebilir olmal\u0131d\u0131r. \u0130lerleme \u00e7ubu\u011fu gibi g\u00f6rsel \u00f6\u011feler i\u00e7in eri\u015filebilirlik, ekran okuyucular\u0131 kullanan veya di\u011fer yard\u0131mc\u0131 teknolojilere ihtiya\u00e7 duyan kullan\u0131c\u0131lar i\u00e7in \u00f6nemlidir. HTML'de <code>role=\"progressbar\"<\/code> ve <code>aria-valuenow<\/code>, <code>aria-valuemin<\/code>, <code>aria-valuemax<\/code> gibi ARIA (Accessible Rich Internet Applications) \u00f6zniteliklerini kullanarak ilerleme \u00e7ubu\u011funun anlamsal anlam\u0131n\u0131 art\u0131rabiliriz.<\/p>\n<p><code>role=\"progressbar\"<\/code>, \u00f6\u011fenin bir ilerleme \u00e7ubu\u011fu oldu\u011funu belirtir. <code>aria-valuemin<\/code> ve <code>aria-valuemax<\/code>, ilerleme \u00e7ubu\u011funun minimum ve maksimum de\u011ferlerini (genellikle 0 ve 100) tan\u0131mlar. <code>aria-valuenow<\/code> ise mevcut ilerleme de\u011ferini g\u00f6sterir ve JavaScript taraf\u0131ndan dinamik olarak g\u00fcncellenmelidir.<\/p>\n<p>            <!-- ... Daha fazla i\u00e7erik ... --><br \/>\n        <\/section>\n<section>\n<h2>Sonu\u00e7<\/h2>\n<p>JavaScript ve CSS de\u011fi\u015fkenlerini kullanarak olu\u015fturdu\u011fumuz bu sayfa ilerleme \u00e7ubu\u011fu, modern web geli\u015ftirme prensiplerini bir araya getirerek hem g\u00f6rsel olarak \u00e7ekici hem de performans a\u00e7\u0131s\u0131ndan optimize edilmi\u015f bir \u00e7\u00f6z\u00fcm sunar. Kullan\u0131c\u0131 deneyimini art\u0131ran bu t\u00fcr k\u00fc\u00e7\u00fck dokunu\u015flar, bir web sitesinin genel kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde y\u00fckseltebilir.<\/p>\n<p>Bu makalede sunulan teknikler, sadece bir ilerleme \u00e7ubu\u011fu olu\u015fturmakla kalmaz, ayn\u0131 zamanda CSS de\u011fi\u015fkenlerinin dinamik stil y\u00f6netimi ve JavaScript'in DOM manip\u00fclasyonu \u00fczerindeki kontrol\u00fcn\u00fc nas\u0131l kullanabilece\u011fimize dair genel bir \u00e7er\u00e7eve sunar. Bu prensipleri di\u011fer dinamik UI \u00f6\u011feleri i\u00e7in de uygulayabilir ve daha esnek, s\u00fcrd\u00fcr\u00fclebilir web uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/p>\n<p>Deney yapmaktan \u00e7ekinmeyin! Renkleri de\u011fi\u015ftirin, animasyonlar\u0131 ayarlay\u0131n veya ilerleme \u00e7ubu\u011funun davran\u0131\u015f\u0131n\u0131 farkl\u0131 senaryolar i\u00e7in optimize edin. Web geli\u015ftirmenin g\u00fczelli\u011fi, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n s\u0131n\u0131r tan\u0131mamas\u0131ndad\u0131r.<\/p>\n<p>            <!-- ... Daha fazla i\u00e7erik ... --><br \/>\n        <\/section>\n<footer>\n<p>© 2023 Sayfa \u0130lerleme \u00c7ubu\u011fu \u00d6rne\u011fi. T\u00fcm haklar\u0131 sakl\u0131d\u0131r.<\/p>\n<\/footer>\n<p>    <\/main><\/p>\n<p>    <script src=\"script.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/code><\/p>\n<p><code>#progressBar<\/code> div’i, sayfan\u0131n en \u00fcst\u00fcnde sabit bir ilerleme \u00e7ubu\u011fu olarak i\u015flev g\u00f6recek. <code>role=\"progressbar\"<\/code> ve <code>aria-valuenow<\/code> gibi ARIA \u00f6znitelikleri, ekran okuyucular gibi yard\u0131mc\u0131 teknolojiler i\u00e7in eri\u015filebilirlik sa\u011flar. <code>aria-valuenow<\/code> de\u011feri JavaScript taraf\u0131ndan g\u00fcncellenecektir. <code>main.content<\/code> ise, ilerleme \u00e7ubu\u011funun \u00e7al\u0131\u015fmas\u0131n\u0131 g\u00f6rmek i\u00e7in yeterince uzun olmas\u0131 gereken \u00f6rnek i\u00e7eri\u011fi bar\u0131nd\u0131r\u0131r.<\/p>\n<h4>CSS Stilleri<\/h4>\n<p>CSS, ilerleme \u00e7ubu\u011fumuzun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 tan\u0131mlar. Burada, CSS de\u011fi\u015fkenlerinin g\u00fcc\u00fcn\u00fc kullanarak \u00e7ubu\u011fun geni\u015fli\u011fini dinamik olarak ayarlayaca\u011f\u0131z.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css <\/em>\/\n\n\/<em> CSS De\u011fi\u015fkeni Tan\u0131mlamas\u0131 <\/em>\/\n:root {\n    --progress-width: 0%; \/<em> \u0130lerleme \u00e7ubu\u011funun ba\u015flang\u0131\u00e7 geni\u015fli\u011fi <\/em>\/\n}\n\n\/<em> Temel S\u0131f\u0131rlamalar ve V\u00fccut Stilleri <\/em>\/\nbody {\n    margin: 0;\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    color: #333;\n    background-color: #f4f4f4;\n}\n\n\/<em> Ba\u015fl\u0131k ve Ana \u0130\u00e7erik Stilleri <\/em>\/\nheader {\n    background-color: #fff;\n    padding: 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    margin-bottom: 20px;\n}\n\nheader h1 {\n    color: #007bff;\n    margin-top: 0;\n}\n\n.content {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 20px;\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    min-height: 200vh; \/<em> \u0130lerleme \u00e7ubu\u011funun \u00e7al\u0131\u015fmas\u0131 i\u00e7in yeterince uzun i\u00e7erik <\/em>\/\n    box-sizing: border-box; \/<em> Padding'in geni\u015fli\u011fi etkilememesi i\u00e7in <\/em>\/\n}\n\nsection {\n    margin-bottom: 40px;\n}\n\nsection h2 {\n    color: #0056b3;\n    border-bottom: 2px solid #eee;\n    padding-bottom: 10px;\n    margin-top: 30px;\n}\n\np, ul, pre {\n    margin-bottom: 1em;\n}\n\npre {\n    background-color: #eee;\n    padding: 15px;\n    border-radius: 5px;\n    overflow-x: auto;\n}\n\ncode {\n    font-family: 'Courier New', Courier, monospace;\n    background-color: #e9e9e9;\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\nfooter {\n    text-align: center;\n    padding: 20px;\n    margin-top: 30px;\n    background-color: #333;\n    color: #fff;\n}\n\n\/<em> \u0130lerleme \u00c7ubu\u011fu Stilleri <\/em>\/\n#progressBar {\n    position: fixed; \/<em> Sayfan\u0131n en \u00fcst\u00fcnde sabit kal\u0131r <\/em>\/\n    top: 0;\n    left: 0;\n    width: var(--progress-width); \/<em> Geni\u015flik CSS de\u011fi\u015fkeni taraf\u0131ndan kontrol edilir <\/em>\/\n    height: 5px; \/<em> \u00c7ubu\u011fun y\u00fcksekli\u011fi <\/em>\/\n    background-color: #007bff; \/<em> Mavi renkli ilerleme \u00e7ubu\u011fu <\/em>\/\n    z-index: 9999; \/<em> Di\u011fer t\u00fcm \u00f6\u011felerin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flar <\/em>\/\n    transition: width 0.1s linear; \/<em> Geni\u015flik de\u011fi\u015fimine yumu\u015fak bir ge\u00e7i\u015f ekler <\/em>\/\n    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); \/<em> Hafif bir g\u00f6lge efekti <\/em>\/\n}\n\n\/<em> K\u00fc\u00e7\u00fck ekranlar i\u00e7in responsive ayarlar <\/em>\/\n@media (max-width: 768px) {\n    .content {\n        padding: 15px;\n    }\n}<\/code><\/pre>\n<p>Burada dikkat etmemiz gereken ana nokta, <code>:root<\/code> i\u00e7indeki <code>--progress-width<\/code> de\u011fi\u015fkenidir. Bu de\u011fi\u015fken, ilerleme \u00e7ubu\u011funun geni\u015fli\u011fini kontrol eder. <code>#progressBar<\/code> \u00f6\u011fesinin <code>width<\/code> \u00f6zelli\u011fi, <code>var(--progress-width)<\/code> ile bu de\u011fi\u015fkene ba\u011flanm\u0131\u015ft\u0131r. JavaScript, bu de\u011fi\u015fkenin de\u011ferini g\u00fcncelledi\u011finde, ilerleme \u00e7ubu\u011funun geni\u015fli\u011fi de otomatik olarak de\u011fi\u015fecektir. <code>transition: width 0.1s linear;<\/code> \u00f6zelli\u011fi ise geni\u015flik de\u011fi\u015fimini daha yumu\u015fak ve estetik hale getirir.<\/p>\n<h4>JavaScript Mant\u0131\u011f\u0131<\/h4>\n<p>JavaScript, sayfan\u0131n kayd\u0131rma konumunu izleyecek, ilerleme y\u00fczdesini hesaplayacak ve CSS de\u011fi\u015fkenini g\u00fcncelleyecektir. Performans i\u00e7in <code>requestAnimationFrame<\/code> kullanaca\u011f\u0131z.<\/p>\n<pre><code class=\"language-javascript\">\/\/ script.js\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ progressBar \u00f6\u011fesini DOM'dan se\u00e7meye gerek yok, \u00e7\u00fcnk\u00fc do\u011frudan :root de\u011fi\u015fkenini g\u00fcncelleyece\u011fiz.\n    \/\/ Ancak eri\u015filebilirlik i\u00e7in aria-valuenow'u g\u00fcncellemek isteyebiliriz.\n    const progressBarElement = document.getElementById('progressBar');\n\n    let ticking = false; \/\/ requestAnimationFrame i\u00e7in bir bayrak\n\n    const updateProgressBar = () => {\n        \/\/ Sayfan\u0131n toplam kayd\u0131r\u0131labilir y\u00fcksekli\u011fini hesapla\n        \/\/ document.documentElement.scrollHeight: Sayfan\u0131n toplam y\u00fcksekli\u011fi\n        \/\/ window.innerHeight: G\u00f6r\u00fcn\u00fcr pencerenin y\u00fcksekli\u011fi\n        \/\/ Bu ikisi aras\u0131ndaki fark, kullan\u0131c\u0131n\u0131n kayd\u0131rabilece\u011fi toplam mesafedir.\n        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;\n\n        \/\/ Mevcut kayd\u0131rma konumunu al\n        const scrollTop = document.documentElement.scrollTop;\n\n        \/\/ Kayd\u0131rma y\u00fczdesini hesapla\n        \/\/ E\u011fer scrollHeight 0 ise (sayfa kayd\u0131r\u0131lamazsa), y\u00fczde 0 olarak kal\u0131r.\n        const scrollPercentage = scrollHeight > 0 ? (scrollTop \/ scrollHeight) * 100 : 0;\n\n        \/\/ CSS de\u011fi\u015fkenini g\u00fcncelle\n        \/\/ document.documentElement, <html> \u00f6\u011fesini temsil eder.\n        \/\/ setProperty ile --progress-width de\u011fi\u015fkeninin de\u011ferini ayarlar\u0131z.\n        document.documentElement.style.setProperty('--progress-width', <code>${scrollPercentage}%<\/code>);\n\n        \/\/ Eri\u015filebilirlik i\u00e7in aria-valuenow \u00f6zniteli\u011fini g\u00fcncelle\n        if (progressBarElement) {\n            progressBarElement.setAttribute('aria-valuenow', Math.round(scrollPercentage));\n        }\n\n        ticking = false; \/\/ Bayra\u011f\u0131 s\u0131f\u0131rla, bir sonraki kare i\u00e7in haz\u0131r ol\n    };\n\n    \/\/ Kayd\u0131rma olay\u0131n\u0131 dinle\n    window.addEventListener('scroll', () => {\n        \/\/ E\u011fer daha \u00f6nce bir g\u00fcncelleme iste\u011fi g\u00f6nderilmediyse\n        if (!ticking) {\n            \/\/ Taray\u0131c\u0131n\u0131n bir sonraki yeniden \u00e7iziminden \u00f6nce updateProgressBar fonksiyonunu \u00e7al\u0131\u015ft\u0131r\n            window.requestAnimationFrame(updateProgressBar);\n            ticking = true; \/\/ Bayra\u011f\u0131 ayarla, yeni bir istek g\u00f6nderilmesini engelle\n        }\n    });\n\n    \/\/ Sayfa y\u00fcklendi\u011finde veya yenilendi\u011finde ilk g\u00fcncellemeyi yap\n    \/\/ Bu, kullan\u0131c\u0131n\u0131n sayfa ortas\u0131nda yenileme yapmas\u0131 durumunda \u00e7ubu\u011fun do\u011fru g\u00f6r\u00fcnmesini sa\u011flar.\n    updateProgressBar();\n});<\/code><\/pre>\n<p>JavaScript kodunda <code>DOMContentLoaded<\/code> olay\u0131n\u0131 dinleyerek, HTML belgesi tamamen y\u00fcklendi\u011finde kodumuzun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011fl\u0131yoruz. <code>updateProgressBar<\/code> fonksiyonu, kayd\u0131rma y\u00fczdesini hesaplar ve <code>--progress-width<\/code> CSS de\u011fi\u015fkenini g\u00fcnceller.<\/p>\n<p><strong>Performans Optimizasyonu (<code>requestAnimationFrame<\/code>):<\/strong><\/p>\n<p><code>window.addEventListener('scroll', ...)<\/code> k\u0131sm\u0131nda <code>requestAnimationFrame<\/code> kullan\u0131m\u0131 kritik \u00f6neme sahiptir. Kayd\u0131rma olaylar\u0131 \u00e7ok s\u0131k tetiklenebilir (saniyede onlarca kez). Her tetiklenmede DOM’u g\u00fcncellemek (CSS de\u011fi\u015fkeni olsa bile) taray\u0131c\u0131y\u0131 yava\u015flatabilir. <code>requestAnimationFrame<\/code> taray\u0131c\u0131ya, bir sonraki ekran yenilemesinden hemen \u00f6nce <code>updateProgressBar<\/code> fonksiyonunu \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 s\u00f6yler. Bu, g\u00fcncellemelerin taray\u0131c\u0131n\u0131n ekran yenileme d\u00f6ng\u00fcs\u00fcyle senkronize olmas\u0131n\u0131 sa\u011flar ve daha ak\u0131c\u0131 animasyonlar ve daha iyi performans sunar. <code>ticking<\/code> bayra\u011f\u0131 ise, ayn\u0131 anda birden fazla <code>requestAnimationFrame<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131lmas\u0131n\u0131 \u00f6nleyerek gereksiz hesaplamalar\u0131 engeller.<\/p>\n<p><strong>Kayd\u0131rma Y\u00fczdesi Hesaplamas\u0131:<\/strong><\/p>\n<p>*   <code>document.documentElement.scrollHeight<\/code>: T\u00fcm sayfan\u0131n (kayd\u0131r\u0131labilir alan dahil) toplam y\u00fcksekli\u011fini verir.<br \/>\n*   <code>window.innerHeight<\/code>: Kullan\u0131c\u0131n\u0131n taray\u0131c\u0131 penceresinin (viewport) g\u00f6r\u00fcn\u00fcr y\u00fcksekli\u011fini verir.<br \/>\n*   <code>scrollHeight - window.innerHeight<\/code>: Kullan\u0131c\u0131n\u0131n kayd\u0131rabilece\u011fi ger\u00e7ek piksel miktar\u0131n\u0131 verir. Sayfan\u0131n en alt\u0131na ula\u015f\u0131ld\u0131\u011f\u0131nda, <code>scrollTop<\/code> bu de\u011fere e\u015fit olur.<br \/>\n*   <code>document.documentElement.scrollTop<\/code>: Sayfan\u0131n \u015fu anda ne kadar kayd\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/p>\n<p>Bu de\u011ferler kullan\u0131larak <code>(scrollTop \/ scrollHeight) * 100<\/code> form\u00fcl\u00fcyle kayd\u0131rma y\u00fczdesi hesaplan\u0131r.<\/p>\n<h3>Geli\u015fmi\u015f D\u00fc\u015f\u00fcnceler ve \u0130yile\u015ftirmeler<\/h3>\n<p>Temel ilerleme \u00e7ubu\u011funu olu\u015fturduktan sonra, onu daha sa\u011flam, eri\u015filebilir ve estetik hale getirmek i\u00e7in baz\u0131 geli\u015fmi\u015f konular\u0131 ele alabiliriz.<\/p>\n<h4>1. Performans: Debouncing ve Throttling<\/h4>\n<p>Yukar\u0131daki \u00f6rnekte <code>requestAnimationFrame<\/code> kullanarak bir \u00e7e\u015fit throttling uygulad\u0131k. Bu, kayd\u0131rma olaylar\u0131n\u0131n taray\u0131c\u0131n\u0131n yenileme h\u0131z\u0131na senkronize edilmesini sa\u011flar ve performans\u0131 art\u0131r\u0131r. Ancak, \u00e7ok karma\u015f\u0131k veya \u00e7ok s\u0131k g\u00fcncelleme gerektiren durumlarda, daha genel debouncing veya throttling desenlerini de d\u00fc\u015f\u00fcnebilirsiniz. \u00d6rne\u011fin, <code>lodash<\/code> gibi k\u00fct\u00fcphanelerden <code>debounce<\/code> veya <code>throttle<\/code> fonksiyonlar\u0131n\u0131 kullanarak:<\/p>\n<pre><code class=\"language-javascript\">\/\/ \u00d6rnek Throttling (lodash olmadan basit hali)\nconst throttle = (func, limit) => {\n    let inThrottle;\n    return function() {\n        const args = arguments;\n        const context = this;\n        if (!inThrottle) {\n            func.apply(context, args);\n            inThrottle = true;\n            setTimeout(() => inThrottle = false, limit);\n        }\n    }\n};\n\n\/\/ ...\n\/\/ window.addEventListener('scroll', throttle(updateProgressBar, 100)); \/\/ Her 100ms'de bir g\u00fcncelle<\/code><\/pre>\n<p>Ancak, g\u00f6rsel g\u00fcncellemeler i\u00e7in <code>requestAnimationFrame<\/code> genellikle en iyi ve en p\u00fcr\u00fczs\u00fcz sonucu verir, \u00e7\u00fcnk\u00fc taray\u0131c\u0131n\u0131n dahili optimizasyonlar\u0131yla uyumludur.<\/p>\n<h4>2. Eri\u015filebilirlik (ARIA Attributes)<\/h4>\n<p>Yukar\u0131daki HTML ve JavaScript kodunda ARIA \u00f6zniteliklerini zaten dahil ettik:<\/p>\n<p>*   <code>role=\"progressbar\"<\/code>: Ekran okuyuculara bu \u00f6\u011fenin bir ilerleme \u00e7ubu\u011fu oldu\u011funu bildirir.<br \/>\n*   <code>aria-valuenow<\/code>: \u0130lerleme \u00e7ubu\u011funun mevcut de\u011ferini (y\u00fczde cinsinden) belirtir. JavaScript taraf\u0131ndan dinamik olarak g\u00fcncellenmelidir.<br \/>\n*   <code>aria-valuemin=\"0\"<\/code> ve <code>aria-valuemax=\"100\"<\/code>: \u0130lerleme \u00e7ubu\u011funun minimum ve maksimum de\u011fer aral\u0131\u011f\u0131n\u0131 tan\u0131mlar.<\/p>\n<p>Bu \u00f6znitelikler, g\u00f6rsel olarak ilerleme \u00e7ubu\u011funu g\u00f6remeyen kullan\u0131c\u0131lar i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Ekran okuyucular, bu bilgileri kullanarak kullan\u0131c\u0131ya sayfa ilerlemesi hakk\u0131nda sesli geri bildirim sa\u011flayabilir.<\/p>\n<h4>3. Dinamik \u0130\u00e7erik Y\u00f6netimi<\/h4>\n<p>Baz\u0131 web sayfalar\u0131, AJAX \u00e7a\u011fr\u0131lar\u0131 veya sonsuz kayd\u0131rma (infinite scroll) gibi y\u00f6ntemlerle dinamik olarak i\u00e7erik y\u00fckler. Bu durumda, <code>document.documentElement.scrollHeight<\/code> de\u011feri i\u00e7eri\u011fin y\u00fcklenmesiyle birlikte de\u011fi\u015fecektir. E\u011fer <code>scrollHeight<\/code> dinamik olarak de\u011fi\u015fiyorsa, <code>updateProgressBar<\/code> fonksiyonunun her i\u00e7erik y\u00fcklendi\u011finde veya DOM’da \u00f6nemli bir de\u011fi\u015fiklik oldu\u011funda tekrar \u00e7a\u011fr\u0131ld\u0131\u011f\u0131ndan emin olmal\u0131s\u0131n\u0131z.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Dinamik i\u00e7erik y\u00fcklendi\u011finde scrollHeight'\u0131 yeniden hesaplamak i\u00e7in\nconst handleDynamicContentLoad = () => {\n    \/\/ \u0130\u00e7erik y\u00fcklendikten veya DOM de\u011fi\u015fti\u011finde\n    updateProgressBar();\n};\n\n\/\/ \u00d6rne\u011fin, bir AJAX \u00e7a\u011fr\u0131s\u0131ndan sonra:\n\/\/ fetch('\/api\/more-content')\n\/\/     .then(response => response.text())\n\/\/     .then(html => {\n\/\/         document.querySelector('.content').insertAdjacentHTML('beforeend', html);\n\/\/         handleDynamicContentLoad(); \/\/ \u0130lerleme \u00e7ubu\u011funu g\u00fcncelle\n\/\/     });<\/code><\/pre>\n<h4>4. Farkl\u0131 Stil Se\u00e7enekleri<\/h4>\n<p>CSS de\u011fi\u015fkenlerini kullanarak ilerleme \u00e7ubu\u011funu \u00e7ok \u00e7e\u015fitli \u015fekillerde \u00f6zelle\u015ftirebiliriz:<\/p>\n<p>*   <strong>Renkler ve Gradyanlar:<\/strong><\/p>\n<pre><code class=\"language-css\">:root {\n        --progress-color-start: #007bff;\n        --progress-color-end: #00bcd4;\n    }\n    #progressBar {\n        background: linear-gradient(to right, var(--progress-color-start), var(--progress-color-end));\n        \/<em> ... di\u011fer stiller ... <\/em>\/\n    }<\/code><\/pre>\n<p>*   <strong>Y\u00fckseklik ve K\u00f6\u015fe Yuvarlakl\u0131\u011f\u0131:<\/strong><\/p>\n<pre><code class=\"language-css\">:root {\n        --progress-height: 8px;\n        --progress-border-radius: 4px;\n    }\n    #progressBar {\n        height: var(--progress-height);\n        border-radius: var(--progress-border-radius);\n        \/<em> ... di\u011fer stiller ... <\/em>\/\n    }<\/code><\/pre>\n<p>*   <strong>Animasyonlar:<\/strong> <code>transition<\/code> \u00f6zelli\u011fini kullanarak geni\u015flik de\u011fi\u015fimini yumu\u015fatabiliriz. Yukar\u0131daki \u00f6rnekte zaten <code>transition: width 0.1s linear;<\/code> kullan\u0131lm\u0131\u015ft\u0131r. Farkl\u0131 <code>transition-timing-function<\/code> de\u011ferleri (\u00f6rne\u011fin, <code>ease-out<\/code>, <code>cubic-bezier(...)<\/code>) ile daha ilgin\u00e7 animasyonlar elde edilebilir.<\/p>\n<h4>5. Taray\u0131c\u0131 Uyumlulu\u011fu<\/h4>\n<p>CSS de\u011fi\u015fkenleri (Custom Properties) ve <code>requestAnimationFrame<\/code> modern taray\u0131c\u0131larda (Chrome, Firefox, Safari, Edge) olduk\u00e7a iyi desteklenmektedir. Ancak, \u00e7ok eski taray\u0131c\u0131lar (\u00f6rne\u011fin, Internet Explorer) i\u00e7in bu \u00f6zellikler desteklenmeyebilir. Bu t\u00fcr durumlarda, ya polyfill’ler kullanman\u0131z ya da ilerleme \u00e7ubu\u011funu bu taray\u0131c\u0131larda devre d\u0131\u015f\u0131 b\u0131rakman\u0131z gerekebilir. Genellikle, modern web projeleri bu eski taray\u0131c\u0131lar\u0131 hedeflemedi\u011fi i\u00e7in bu bir sorun te\u015fkil etmez.<\/p>\n<h3>Yakla\u015f\u0131m\u0131n Avantajlar\u0131 ve Dezavantajlar\u0131<\/h3>\n<p>Bu yakla\u015f\u0131m\u0131n sundu\u011fu avantajlar\u0131 ve olas\u0131 dezavantajlar\u0131 \u00f6zetleyelim:<\/p>\n<h4>Avantajlar:<\/h4>\n<p>*   <strong>Temiz Kod ve Sorumluluk Ayr\u0131m\u0131:<\/strong> HTML yap\u0131y\u0131, CSS g\u00f6rselle\u015ftirmeyi ve JavaScript mant\u0131\u011f\u0131 y\u00f6netir. Bu, kodun daha okunabilir, s\u00fcrd\u00fcr\u00fclebilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<br \/>\n*   <strong>Y\u00fcksek \u00d6zelle\u015ftirilebilirlik:<\/strong> CSS de\u011fi\u015fkenleri sayesinde, ilerleme \u00e7ubu\u011funun renklerini, boyutunu, animasyon h\u0131z\u0131n\u0131 ve di\u011fer g\u00f6rsel \u00f6zelliklerini CSS dosyas\u0131ndan kolayca de\u011fi\u015ftirebiliriz. JavaScript koduna dokunmaya gerek kalmaz.<br \/>\n*   <strong>Performans Odakl\u0131:<\/strong> <code>requestAnimationFrame<\/code> kullan\u0131m\u0131 sayesinde, ilerleme \u00e7ubu\u011fu g\u00fcncellemeleri taray\u0131c\u0131n\u0131n render d\u00f6ng\u00fcs\u00fcyle senkronize olur. Bu, p\u00fcr\u00fczs\u00fcz animasyonlar ve genel olarak daha iyi performans sa\u011flar. Do\u011frudan DOM stili manip\u00fclasyonundan daha verimlidir.<br \/>\n*   <strong>Eri\u015filebilirlik:<\/strong> ARIA \u00f6zniteliklerinin entegrasyonu, ilerleme \u00e7ubu\u011funun yard\u0131mc\u0131 teknolojilerle uyumlu olmas\u0131n\u0131 sa\u011flar ve daha geni\u015f bir kullan\u0131c\u0131 kitlesine ula\u015f\u0131r.<br \/>\n*   <strong>Modern Web Standartlar\u0131na Uygunluk:<\/strong> CSS de\u011fi\u015fkenleri ve ES6+ JavaScript \u00f6zellikleri, modern web geli\u015ftirme uygulamalar\u0131n\u0131 yans\u0131t\u0131r.<\/p>\n<h4>Dezavantajlar:<\/h4>\n<p>*   <strong>JavaScript Ba\u011f\u0131ml\u0131l\u0131\u011f\u0131:<\/strong> \u0130lerleme \u00e7ubu\u011funun \u00e7al\u0131\u015fmas\u0131 i\u00e7in JavaScript’in etkin olmas\u0131 gerekir. JavaScript devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015fsa, \u00e7ubuk g\u00f6r\u00fcnmez veya i\u015flevsiz kal\u0131r. Ancak, modern web sitelerinin b\u00fcy\u00fck \u00e7o\u011funlu\u011fu i\u00e7in bu bir sorun de\u011fildir.<br \/>\n*   <strong>Eski Taray\u0131c\u0131 Deste\u011fi:<\/strong> CSS de\u011fi\u015fkenleri ve baz\u0131 modern JavaScript \u00f6zellikleri eski taray\u0131c\u0131larda (\u00f6zellikle Internet Explorer) desteklenmez. Bu, geni\u015f bir eski taray\u0131c\u0131 deste\u011fi gerektiren projelerde ek \u00f6nlemler (polyfill’ler veya fallback’ler) gerektirebilir.<br \/>\n*   <strong>Dinamik \u0130\u00e7erik Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> Sayfa y\u00fcksekli\u011finin dinamik olarak de\u011fi\u015fti\u011fi durumlarda (\u00f6rne\u011fin, sonsuz kayd\u0131rma), <code>scrollHeight<\/code>‘\u0131 do\u011fru bir \u015fekilde yeniden hesaplamak ve ilerleme \u00e7ubu\u011funu g\u00fcncellemek i\u00e7in ek mant\u0131k gerekebilir. Bu, uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 bir miktar art\u0131rabilir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>JavaScript ve CSS de\u011fi\u015fkenlerinin birle\u015fimiyle olu\u015fturulan sayfa ilerleme \u00e7ubu\u011fu, modern web geli\u015ftirme pratiklerinin harika bir \u00f6rne\u011fidir. Kullan\u0131c\u0131 deneyimini art\u0131ran bu k\u00fc\u00e7\u00fck ama etkili bile\u015fen, sayfada ne kadar ilerlendi\u011fini g\u00f6rsel olarak g\u00f6stererek kullan\u0131c\u0131n\u0131n i\u00e7erikle olan etkile\u015fimini derinle\u015ftirir. Sorumluluklar\u0131n net bir \u015fekilde ayr\u0131lmas\u0131 (HTML yap\u0131, CSS stil, JavaScript mant\u0131k), y\u00fcksek \u00f6zelle\u015ftirilebilirlik, performans optimizasyonlar\u0131 ve eri\u015filebilirlik standartlar\u0131na uyum, bu yakla\u015f\u0131m\u0131n temel avantajlar\u0131d\u0131r.<\/p>\n<p>Bu makalede sunulan kod \u00f6rnekleri ve a\u00e7\u0131klamalar, kendi projelerinizde benzer bir ilerleme \u00e7ubu\u011funu uygulamak i\u00e7in sa\u011flam bir temel sa\u011flamal\u0131d\u0131r. CSS de\u011fi\u015fkenlerinin esnekli\u011fi sayesinde, ilerleme \u00e7ubu\u011funuzu markan\u0131z\u0131n veya projenizin esteti\u011fine m\u00fckemmel bir \u015fekilde uyacak \u015fekilde kolayca \u00f6zelle\u015ftirebilirsiniz. Unutmay\u0131n ki, k\u00fc\u00e7\u00fck detaylar genellikle b\u00fcy\u00fck fark yarat\u0131r ve iyi tasarlanm\u0131\u015f bir ilerleme \u00e7ubu\u011fu, web sitenizin kullan\u0131c\u0131 dostu alg\u0131s\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Deney yapmaktan \u00e7ekinmeyin ve bu teknikleri kendi yarat\u0131c\u0131 \u00e7\u00f6z\u00fcmlerinizde kullan\u0131n!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu\nWeb sitelerinde kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmek, ziyaret\u00e7ilerin sitede d","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":[129],"tags":[],"class_list":{"0":"post-39276","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","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>JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu - 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\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu\" \/>\n<meta property=\"og:description\" content=\"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu Web sitelerinde kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmek, ziyaret\u00e7ilerin sitede d\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-17T22:40:48+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=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu\",\"datePublished\":\"2026-02-17T22:40:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\"},\"wordCount\":2749,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\",\"name\":\"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-17T22:40:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu\"}]},{\"@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":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu - 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\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu","og_description":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu Web sitelerinde kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmek, ziyaret\u00e7ilerin sitede d","og_url":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-17T22:40:48+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu","datePublished":"2026-02-17T22:40:48+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/"},"wordCount":2749,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/","url":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/","name":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-17T22:40:48+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-ve-css-degiskenleri-ile-bir-sayfa-ilerleme-cubugu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript ve CSS De\u011fi\u015fkenleri ile Bir Sayfa \u0130lerleme \u00c7ubu\u011fu"}]},{"@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\/39276","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=39276"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39276\/revisions"}],"predecessor-version":[{"id":39277,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39276\/revisions\/39277"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}