{"id":32639,"date":"2025-10-24T05:40:51","date_gmt":"2025-10-24T02:40:51","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32639"},"modified":"2025-10-24T05:40:51","modified_gmt":"2025-10-24T02:40:51","slug":"tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/","title":{"rendered":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber<\/h2>\n

Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi ile kullan\u0131c\u0131 deneyimi (UX) aras\u0131ndaki denge, modern web tasar\u0131m\u0131n\u0131n temel ta\u015flar\u0131ndan biridir. Bu denklemin genellikle g\u00f6z ard\u0131 edilen, ancak \u00f6nemli bir par\u00e7as\u0131, taray\u0131c\u0131lar\u0131n varsay\u0131lan kayd\u0131rma \u00e7ubuklar\u0131d\u0131r. \u00c7o\u011fu taray\u0131c\u0131, standart ve genellikle gri tonlar\u0131nda, basit g\u00f6r\u00fcn\u00fcml\u00fc kayd\u0131rma \u00e7ubuklar\u0131 sunar. Bu varsay\u0131lan tasar\u0131mlar i\u015flevsel olsa da, web sitesinin genel esteti\u011fi ve marka kimli\u011fi ile uyum sa\u011flamayabilir. \u0130\u015fte tam bu noktada CSS ile kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesi devreye girer. Bu makalede, taray\u0131c\u0131 kayd\u0131rma \u00e7ubuklar\u0131n\u0131 CSS kullanarak nas\u0131l ba\u015ftan sona \u00f6zelle\u015ftirebilece\u011finizi, farkl\u0131 taray\u0131c\u0131lar aras\u0131ndaki uyumluluk farkl\u0131l\u0131klar\u0131n\u0131 ve en iyi uygulama y\u00f6ntemlerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Giri\u015f: Kayd\u0131rma \u00c7ubuklar\u0131n\u0131n \u00d6nemi ve \u00d6zelle\u015ftirme \u0130htiyac\u0131<\/h3>\n

Kayd\u0131rma \u00e7ubuklar\u0131, i\u00e7eri\u011fin ekran boyutundan daha b\u00fcy\u00fck oldu\u011fu durumlarda kullan\u0131c\u0131lar\u0131n web sayfas\u0131nda veya belirli bir element i\u00e7inde gezinmesini sa\u011flayan temel UI (Kullan\u0131c\u0131 Aray\u00fcz\u00fc) bile\u015fenleridir. \u0130\u015flevsellikleri tart\u0131\u015f\u0131lmaz olsa da, g\u00f6rsel a\u00e7\u0131dan genellikle tekd\u00fcze kal\u0131rlar. Modern web tasar\u0131m\u0131, her detay\u0131n marka kimli\u011fini yans\u0131tmas\u0131n\u0131 ve kullan\u0131c\u0131ya b\u00fct\u00fcnc\u00fcl bir deneyim sunmas\u0131n\u0131 hedefler. Varsay\u0131lan kayd\u0131rma \u00e7ubuklar\u0131 bu hedefle \u00e7eli\u015febilir. \u00d6rne\u011fin, koyu tema kullanan bir web sitesinde parlak gri bir kayd\u0131rma \u00e7ubu\u011fu, g\u00f6rsel bir uyumsuzluk yaratabilir.<\/p>\n

CSS ile kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek, tasar\u0131mc\u0131lara ve geli\u015ftiricilere, sitelerinin genel g\u00f6r\u00fcn\u00fcm\u00fcne ve hissine m\u00fckemmel bir \u015fekilde uyan kayd\u0131rma \u00e7ubuklar\u0131 olu\u015fturma yetene\u011fi sunar. Bu, sadece estetik bir iyile\u015ftirme olmakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini de olumlu y\u00f6nde etkileyebilir. \u00d6rne\u011fin, daha belirgin veya markal\u0131 renklere sahip bir kayd\u0131rma \u00e7ubu\u011fu, kullan\u0131c\u0131n\u0131n sayfan\u0131n kayd\u0131r\u0131labilir oldu\u011funu daha kolay anlamas\u0131na yard\u0131mc\u0131 olabilir. Ancak, bu \u00f6zelle\u015ftirme s\u00fcrecinde taray\u0131c\u0131 uyumlulu\u011fu \u00f6nemli bir fakt\u00f6rd\u00fcr, \u00e7\u00fcnk\u00fc farkl\u0131 taray\u0131c\u0131 motorlar\u0131 kayd\u0131rma \u00e7ubu\u011fu stilini farkl\u0131 \u015fekillerde ele al\u0131r.<\/p>\n

Webkit Tabanl\u0131 Taray\u0131c\u0131lar \u0130\u00e7in \u00d6zelle\u015ftirme (Chrome, Safari, Edge, Opera)<\/h3>\n

G\u00fcn\u00fcm\u00fczde web taray\u0131c\u0131 pazar\u0131n\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 olu\u015fturan Chrome, Safari, Edge (Chromium tabanl\u0131), Opera ve di\u011fer Webkit\/Blink motorlar\u0131n\u0131 kullanan taray\u0131c\u0131lar, kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in \u00f6zel pseudo-element’ler sunar. Bu pseudo-element’ler sayesinde kayd\u0131rma \u00e7ubu\u011funun her bir par\u00e7as\u0131na ayr\u0131 ayr\u0131 stil verebiliriz. Bu, en kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7eneklerini sunan y\u00f6ntemdir.<\/p>\n

Webkit Pseudo-Element’leri ve \u0130\u015flevleri<\/h4>\n

Webkit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesi, a\u015fa\u011f\u0131daki pseudo-element’ler arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r:<\/p>\n

* ::-webkit-scrollbar<\/code>: T\u00fcm kayd\u0131rma \u00e7ubu\u011funu temsil eder. Geni\u015fli\u011fini veya y\u00fcksekli\u011fini (dikey veya yatay kayd\u0131rma \u00e7ubu\u011funa g\u00f6re) ayarlamak i\u00e7in kullan\u0131l\u0131r.
\n* ::-webkit-scrollbar-track<\/code>: Kayd\u0131rma \u00e7ubu\u011funun “yolu” veya arka plan\u0131d\u0131r. S\u00fcr\u00fckleyici (thumb) bu yol \u00fczerinde hareket eder.
\n* ::-webkit-scrollbar-thumb<\/code>: Kayd\u0131rma \u00e7ubu\u011funun s\u00fcr\u00fckleyicisi, yani kullan\u0131c\u0131n\u0131n tutup s\u00fcr\u00fckledi\u011fi veya kayd\u0131rma hareketini g\u00f6steren k\u0131s\u0131md\u0131r.
\n* ::-webkit-scrollbar-corner<\/code>: Hem dikey hem de yatay kayd\u0131rma \u00e7ubuklar\u0131n\u0131n kesi\u015fti\u011fi k\u00f6\u015feyi temsil eder. Genellikle her iki kayd\u0131rma \u00e7ubu\u011fu da g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde ortaya \u00e7\u0131kar.
\n* ::-webkit-scrollbar-button<\/code>: Kayd\u0131rma \u00e7ubu\u011funun ucunda bulunan ok butonlar\u0131n\u0131 temsil eder. \u00c7o\u011fu modern tasar\u0131mda bu butonlar gizlenir veya stilize edilmez.<\/p>\n

\u015eimdi bu pseudo-element’lerin her birini detayl\u0131 olarak inceleyelim ve \u00f6rneklerle nas\u0131l kullan\u0131lacaklar\u0131n\u0131 g\u00f6sterelim.<\/p>\n

::-webkit-scrollbar<\/code> Pseudo-Elementi<\/h4>\n

Bu pseudo-element, kayd\u0131rma \u00e7ubu\u011funun genel boyutunu belirlemek i\u00e7in kullan\u0131l\u0131r. Dikey kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in width<\/code> \u00f6zelli\u011fini, yatay kayd\u0131rma \u00e7ubuklar\u0131 i\u00e7in ise height<\/code> \u00f6zelli\u011fini ayarlars\u0131n\u0131z.<\/p>\n

\/ T\u00fcm sayfa kayd\u0131rma \u00e7ubu\u011fu i\u00e7in <\/em>\/\nbody::-webkit-scrollbar {\n    width: 12px; \/ Dikey kayd\u0131rma \u00e7ubu\u011funun geni\u015fli\u011fi <\/em>\/\n    height: 12px; \/ Yatay kayd\u0131rma \u00e7ubu\u011funun y\u00fcksekli\u011fi <\/em>\/\n}\n\n\/ Belirli bir elementin kayd\u0131rma \u00e7ubu\u011fu i\u00e7in <\/em>\/\n.scrollable-content::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}<\/code><\/pre>\n
Bu \u00f6rnekte, body<\/code> elementi i\u00e7in kayd\u0131rma \u00e7ubu\u011funun varsay\u0131lan geni\u015fli\u011fini 12 piksel olarak ayarlad\u0131k. .scrollable-content<\/code> s\u0131n\u0131f\u0131na sahip bir elementin kayd\u0131rma \u00e7ubu\u011fu ise daha ince olacak.<\/p>\n
::-webkit-scrollbar-track<\/code> Pseudo-Elementi<\/h4>\n
Bu, kayd\u0131rma \u00e7ubu\u011funun arka plan\u0131d\u0131r. Genellikle kayd\u0131rma \u00e7ubu\u011fu s\u00fcr\u00fckleyicisinin (thumb) \u00fczerinde hareket etti\u011fi alan\u0131 temsil eder. background<\/code>, border-radius<\/code>, box-shadow<\/code> gibi CSS \u00f6zelliklerini uygulayarak bu alan\u0131 stilize edebilirsiniz.<\/p>\n
body::-webkit-scrollbar-track {\n    background: #f1f1f1; \/ A\u00e7\u0131k gri bir arka plan <\/em>\/\n    border-radius: 10px; \/ K\u00f6\u015feleri yuvarla <\/em>\/\n    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); \/ Hafif i\u00e7 g\u00f6lge <\/em>\/\n}\n\n.scrollable-content::-webkit-scrollbar-track {\n    background: #333; \/ Koyu tema i\u00e7in koyu arka plan <\/em>\/\n    border-radius: 5px;\n}<\/code><\/pre>\n
Burada, body<\/code> i\u00e7in a\u00e7\u0131k renkli, yuvarlak k\u00f6\u015feli bir yol ve hafif bir g\u00f6lge ekledik. .scrollable-content<\/code> i\u00e7in ise daha koyu bir tema uygulad\u0131k.<\/p>\n
::-webkit-scrollbar-thumb<\/code> Pseudo-Elementi<\/h4>\n
Kayd\u0131rma \u00e7ubu\u011funun en \u00f6nemli ve en \u00e7ok stilize edilen par\u00e7as\u0131d\u0131r. Kullan\u0131c\u0131n\u0131n do\u011frudan etkile\u015fimde bulundu\u011fu k\u0131s\u0131md\u0131r. background<\/code>, border-radius<\/code>, box-shadow<\/code> gibi \u00f6zelliklerle g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen de\u011fi\u015ftirebilirsiniz. Ayr\u0131ca, hover<\/code> ve active<\/code> durumlar\u0131 i\u00e7in de stil tan\u0131mlayarak etkile\u015fimli bir deneyim sunabilirsiniz.<\/p>\n
body::-webkit-scrollbar-thumb {\n    background-color: #888; \/ Orta gri renk <\/em>\/\n    border-radius: 10px; \/ K\u00f6\u015feleri yuvarla <\/em>\/\n    border: 3px solid #f1f1f1; \/ Yoldan biraz daha i\u00e7eride g\u00f6r\u00fcnmesini sa\u011fla <\/em>\/\n}\n\n\/ S\u00fcr\u00fckleyici \u00fczerine gelindi\u011finde <\/em>\/\nbody::-webkit-scrollbar-thumb:hover {\n    background-color: #555; \/ Daha koyu gri <\/em>\/\n}\n\n\/ S\u00fcr\u00fckleyici t\u0131kland\u0131\u011f\u0131nda\/s\u00fcr\u00fcklenirken <\/em>\/\nbody::-webkit-scrollbar-thumb:active {\n    background-color: #333; \/ En koyu gri <\/em>\/\n}\n\n.scrollable-content::-webkit-scrollbar-thumb {\n    background: linear-gradient(to bottom, #007bff, #0056b3); \/ Mavi gradyan <\/em>\/\n    border-radius: 5px;\n    border: 1px solid #004085;\n}\n\n.scrollable-content::-webkit-scrollbar-thumb:hover {\n    background: linear-gradient(to bottom, #0056b3, #007bff);\n}<\/code><\/pre>\n
Bu \u00f6rneklerde, body<\/code> kayd\u0131rma \u00e7ubu\u011fu i\u00e7in basit renk ge\u00e7i\u015fleri ve etkile\u015fim durumlar\u0131 tan\u0131mlad\u0131k. .scrollable-content<\/code> i\u00e7in ise bir gradyan arka plan kullanarak daha modern bir g\u00f6r\u00fcn\u00fcm elde ettik. border<\/code> \u00f6zelli\u011fi, s\u00fcr\u00fckleyicinin yoldan biraz daha k\u00fc\u00e7\u00fck g\u00f6r\u00fcnmesini sa\u011flayarak estetik bir bo\u015fluk yarat\u0131r.<\/p>\n
::-webkit-scrollbar-corner<\/code> Pseudo-Elementi<\/h4>\n
Bu pseudo-element, hem dikey hem de yatay kayd\u0131rma \u00e7ubuklar\u0131n\u0131n ayn\u0131 anda g\u00f6r\u00fcnd\u00fc\u011f\u00fc durumlarda olu\u015fan k\u00f6\u015feyi stilize etmek i\u00e7in kullan\u0131l\u0131r. Genellikle basit bir arka plan rengiyle stilize edilir.<\/p>\n
body::-webkit-scrollbar-corner {\n    background: #ccc; \/ Gri k\u00f6\u015fe <\/em>\/\n}<\/code><\/pre>\n
\u00c7o\u011fu tasar\u0131mda bu k\u00f6\u015fe alan\u0131 \u00e7ok dikkat \u00e7ekmez veya nadiren kullan\u0131l\u0131r, bu y\u00fczden genellikle basit bir renk yeterlidir.<\/p>\n
::-webkit-scrollbar-button<\/code> Pseudo-Elementi<\/h4>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131n u\u00e7lar\u0131ndaki ok butonlar\u0131n\u0131 temsil eder. Modern web tasar\u0131mlar\u0131nda bu butonlar genellikle gizlenir veya stilize edilmez, \u00e7\u00fcnk\u00fc kayd\u0131rma deneyimi genellikle fare tekerle\u011fi, dokunmatik hareketler veya s\u00fcr\u00fckleyiciyi do\u011frudan kullanma yoluyla ger\u00e7ekle\u015fir.<\/p>\n
\/ Butonlar\u0131 tamamen gizlemek i\u00e7in <\/em>\/\nbody::-webkit-scrollbar-button {\n    display: none;\n}\n\n\/ E\u011fer stilize etmek isterseniz (nadir durumlar i\u00e7in) <\/em>\/\n\/* body::-webkit-scrollbar-button {\n    background-color: #eee;\n    border-radius: 2px;\n    height: 15px;\n    width: 15px;\n} *\/<\/code><\/pre>\n
Genellikle display: none;<\/code> kullan\u0131larak tamamen gizlenirler.<\/p>\n
Kapsaml\u0131 Webkit \u00d6zelle\u015ftirme \u00d6rne\u011fi<\/h4>\n
T\u00fcm bu pseudo-element’leri bir araya getirerek, Webkit tabanl\u0131 taray\u0131c\u0131larda kayd\u0131rma \u00e7ubuklar\u0131n\u0131 tamamen \u00f6zelle\u015ftirebiliriz:<\/p>\n
\/ T\u00fcm sayfa kayd\u0131rma \u00e7ubu\u011funu \u00f6zelle\u015ftir <\/em>\/\nbody::-webkit-scrollbar {\n    width: 15px;\n    height: 15px;\n}\n\nbody::-webkit-scrollbar-track {\n    background-color: #f0f0f0;\n    border-radius: 8px;\n    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);\n}\n\nbody::-webkit-scrollbar-thumb {\n    background-color: #a8a8a8;\n    border-radius: 8px;\n    border: 3px solid #f0f0f0;\n}\n\nbody::-webkit-scrollbar-thumb:hover {\n    background-color: #7a7a7a;\n}\n\nbody::-webkit-scrollbar-thumb:active {\n    background-color: #555;\n}\n\nbody::-webkit-scrollbar-corner {\n    background-color: #dcdcdc;\n}\n\nbody::-webkit-scrollbar-button {\n    display: none;\n}\n\n\/ Belirli bir div elementi i\u00e7in farkl\u0131 bir stil <\/em>\/\n.custom-scroll-div {\n    width: 300px;\n    height: 200px;\n    overflow: auto;\n    border: 1px solid #ddd;\n    padding: 15px;\n    margin: 20px;\n    background-color: #282c34; \/ Koyu arka plan <\/em>\/\n    color: #f8f8f2;\n}\n\n.custom-scroll-div::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n}\n\n.custom-scroll-div::-webkit-scrollbar-track {\n    background-color: #3a3f4b;\n    border-radius: 5px;\n}\n\n.custom-scroll-div::-webkit-scrollbar-thumb {\n    background-color: #61afef; \/ Mavi renk <\/em>\/\n    border-radius: 5px;\n    border: 2px solid #3a3f4b;\n}\n\n.custom-scroll-div::-webkit-scrollbar-thumb:hover {\n    background-color: #52a0da;\n}\n\n.custom-scroll-div::-webkit-scrollbar-corner {\n    background-color: #282c34;\n}<\/code><\/pre>\n
Bu \u00f6rnek, hem genel sayfa kayd\u0131rma \u00e7ubu\u011funu hem de belirli bir div<\/code> elementinin kayd\u0131rma \u00e7ubu\u011funu farkl\u0131 temalarla nas\u0131l \u00f6zelle\u015ftirebilece\u011finizi g\u00f6stermektedir. Webkit tabanl\u0131 taray\u0131c\u0131larda bu y\u00f6ntem, kayd\u0131rma \u00e7ubu\u011fu \u00fczerinde neredeyse tam kontrol sa\u011flar.<\/p>\n
Firefox \u0130\u00e7in \u00d6zelle\u015ftirme<\/h3>\n
Firefox, Webkit tabanl\u0131 taray\u0131c\u0131lardan farkl\u0131 bir yakla\u015f\u0131m benimser ve kendi vendor prefix’li veya standartla\u015fma yolundaki \u00f6zelliklerini kullan\u0131r. Firefox’un kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirme se\u00e7enekleri, Webkit’e g\u00f6re daha s\u0131n\u0131rl\u0131d\u0131r ancak daha standartla\u015fm\u0131\u015f bir yoldad\u0131r.<\/p>\n
scrollbar-width<\/code> \u00d6zelli\u011fi<\/h4>\n
Bu \u00f6zellik, kayd\u0131rma \u00e7ubu\u011funun geni\u015fli\u011fini ayarlamak i\u00e7in kullan\u0131l\u0131r ve \u00fc\u00e7 ana de\u011fer al\u0131r:
\n*   auto<\/code>: Taray\u0131c\u0131n\u0131n varsay\u0131lan geni\u015fli\u011fini kullan\u0131r.
\n*   thin<\/code>: Daha ince bir kayd\u0131rma \u00e7ubu\u011fu kullan\u0131r (genellikle 8 piksel civar\u0131).
\n*   none<\/code>: Kayd\u0131rma \u00e7ubu\u011funu gizler ancak i\u00e7eri\u011fin kayd\u0131r\u0131labilir kalmas\u0131n\u0131 sa\u011flar. (Bu de\u011fer, Webkit’teki display: none;<\/code> veya width: 0;<\/code> ile ayn\u0131 i\u015flevi g\u00f6r\u00fcr.)<\/p>\n
\/ T\u00fcm sayfa kayd\u0131rma \u00e7ubu\u011fu i\u00e7in <\/em>\/\nbody {\n    scrollbar-width: thin; \/ Daha ince bir kayd\u0131rma \u00e7ubu\u011fu <\/em>\/\n}\n\n\/ Belirli bir element i\u00e7in kayd\u0131rma \u00e7ubu\u011funu gizle <\/em>\/\n.hidden-scrollbar-div {\n    scrollbar-width: none;\n}<\/code><\/pre>\n
scrollbar-color<\/code> \u00d6zelli\u011fi<\/h4>\n
Bu \u00f6zellik, kayd\u0131rma \u00e7ubu\u011funun s\u00fcr\u00fckleyicisinin (thumb) ve yolunun (track) renklerini belirlemek i\u00e7in kullan\u0131l\u0131r. \u0130ki renk de\u011feri al\u0131r: ilki s\u00fcr\u00fckleyici i\u00e7in, ikincisi yol i\u00e7in.<\/p>\n
\/ T\u00fcm sayfa kayd\u0131rma \u00e7ubu\u011fu i\u00e7in <\/em>\/\nbody {\n    scrollbar-color: #888 #f1f1f1; \/ S\u00fcr\u00fckleyici gri, yol a\u00e7\u0131k gri <\/em>\/\n}\n\n\/ Koyu tema i\u00e7in <\/em>\/\n.dark-theme-div {\n    scrollbar-color: #61afef #3a3f4b; \/ S\u00fcr\u00fckleyici mavi, yol koyu gri <\/em>\/\n}<\/code><\/pre>\n
Firefox’un bu \u00f6zellikleri, kayd\u0131rma \u00e7ubu\u011funun temel renklerini ve geni\u015fli\u011fini ayarlamak i\u00e7in basit ve etkili bir yol sunar. Ancak, Webkit’in sundu\u011fu gibi border-radius<\/code>, box-shadow<\/code> veya hover<\/code> efektleri gibi detayl\u0131 stilizasyon se\u00e7enekleri mevcut de\u011fildir.<\/p>\n
Firefox \u00d6zelle\u015ftirme \u00d6rne\u011fi<\/h4>\n
\/ Firefox i\u00e7in genel kayd\u0131rma \u00e7ubu\u011fu stili <\/em>\/\nbody {\n    scrollbar-width: thin; \/ Daha ince <\/em>\/\n    scrollbar-color: #a8a8a8 #f0f0f0; \/ Gri s\u00fcr\u00fckleyici, a\u00e7\u0131k gri yol <\/em>\/\n}\n\n\/ Belirli bir div i\u00e7in Firefox stili <\/em>\/\n.custom-scroll-div-firefox {\n    width: 300px;\n    height: 200px;\n    overflow: auto;\n    border: 1px solid #ddd;\n    padding: 15px;\n    margin: 20px;\n    background-color: #282c34;\n    color: #f8f8f2;\n    scrollbar-width: auto; \/ Varsay\u0131lan geni\u015flik <\/em>\/\n    scrollbar-color: #61afef #3a3f4b; \/ Mavi s\u00fcr\u00fckleyici, koyu yol <\/em>\/\n}<\/code><\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Firefox i\u00e7in \u00f6zelle\u015ftirme daha s\u0131n\u0131rl\u0131d\u0131r ve sadece renk ve geni\u015flik \u00fczerinde temel kontrol sa\u011flar.<\/p>\n
Internet Explorer \u0130\u00e7in \u00d6zelle\u015ftirme (Eski Y\u00f6ntemler ve Neden Ka\u00e7\u0131n\u0131lmal\u0131)<\/h3>\n
Internet Explorer (IE), kendi \u00f6zel kayd\u0131rma \u00e7ubu\u011fu \u00f6zelliklerini sunuyordu (scrollbar-base-color<\/code>, scrollbar-face-color<\/code>, scrollbar-track-color<\/code> vb.). Ancak, IE’nin kullan\u0131m oran\u0131 art\u0131k ihmal edilebilir d\u00fczeydedir ve Microsoft Edge’in Chromium tabanl\u0131 yeni s\u00fcr\u00fcm\u00fc Webkit pseudo-element’lerini desteklemektedir. Bu nedenle, IE’ye \u00f6zel kayd\u0131rma \u00e7ubu\u011fu stilizasyonuna odaklanmak, modern web geli\u015ftirme pratikleri a\u00e7\u0131s\u0131ndan gereksizdir ve ka\u00e7\u0131n\u0131lmal\u0131d\u0131r. Bu eski \u00f6zellikler hi\u00e7bir modern taray\u0131c\u0131 taraf\u0131ndan desteklenmemektedir.<\/p>\n
Kayd\u0131rma \u00c7ubu\u011funu Tamamen Gizleme<\/h3>\n
Baz\u0131 tasar\u0131m senaryolar\u0131nda, kayd\u0131rma \u00e7ubu\u011funun g\u00f6rsel olarak tamamen gizlenmesi istenebilir ancak i\u00e7eri\u011fin yine de kayd\u0131r\u0131labilir olmas\u0131 gereklidir. Bu, \u00f6zellikle \u00f6zel kayd\u0131rma \u00e7\u00f6z\u00fcmleri veya minimalist tasar\u0131mlar i\u00e7in ge\u00e7erlidir. Ancak, kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizlemenin eri\u015filebilirlik \u00fczerindeki potansiyel olumsuz etkileri g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r.<\/p>\n
Webkit Tabanl\u0131 Taray\u0131c\u0131lar \u0130\u00e7in Gizleme<\/h4>\n
Webkit tabanl\u0131 taray\u0131c\u0131larda kayd\u0131rma \u00e7ubu\u011funu gizlemenin birka\u00e7 yolu vard\u0131r:<\/p>\n
\/ Y\u00f6ntem 1: Geni\u015fli\u011fi 0 yaparak gizle <\/em>\/\n.hidden-scrollbar-webkit::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n}\n\n\/ Y\u00f6ntem 2: Display none kullanarak gizle (daha yayg\u0131n) <\/em>\/\n.hidden-scrollbar-webkit-alt::-webkit-scrollbar {\n    display: none;\n}<\/code><\/pre>\n
width: 0;<\/code> veya height: 0;<\/code> kullanmak, kayd\u0131rma \u00e7ubu\u011funu g\u00f6rsel olarak kald\u0131r\u0131rken, kayd\u0131rma alan\u0131n\u0131 etkilemez. display: none;<\/code> da benzer bir etki yarat\u0131r ve s\u0131kl\u0131kla tercih edilir.<\/p>\n
Firefox \u0130\u00e7in Gizleme<\/h4>\n
Firefox’ta kayd\u0131rma \u00e7ubu\u011funu gizlemek i\u00e7in scrollbar-width: none;<\/code> \u00f6zelli\u011fi kullan\u0131l\u0131r:<\/p>\n
.hidden-scrollbar-firefox {\n    scrollbar-width: none; \/ Kayd\u0131rma \u00e7ubu\u011funu gizler <\/em>\/\n}<\/code><\/pre>\n
Alternatif: overflow: hidden;<\/code><\/h4>\n
overflow: hidden;<\/code> \u00f6zelli\u011fi, bir elementin i\u00e7eri\u011fi ta\u015f\u0131d\u0131\u011f\u0131nda ta\u015fan k\u0131sm\u0131n gizlenmesini sa\u011flar ve kayd\u0131rma \u00e7ubuklar\u0131n\u0131 tamamen devre d\u0131\u015f\u0131 b\u0131rak\u0131r. Ancak bu, i\u00e7eri\u011fin kayd\u0131r\u0131lmas\u0131n\u0131 da engeller. Dolay\u0131s\u0131yla, kayd\u0131rma i\u015flevselli\u011fini korurken sadece \u00e7ubu\u011fu gizlemek istiyorsan\u0131z, yukar\u0131daki y\u00f6ntemleri kullanmal\u0131s\u0131n\u0131z.<\/p>\n
\/ Bu, kayd\u0131rma \u00e7ubu\u011funu gizler ve i\u00e7eri\u011fin kayd\u0131r\u0131lmas\u0131n\u0131 da engeller <\/em>\/\n.no-scroll-content {\n    overflow: hidden;\n}<\/code><\/pre>\n
Kullan\u0131labilirlik (Eri\u015filebilirlik) ve Tasar\u0131m \u0130pu\u00e7lar\u0131<\/h3>\n
Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 \u00f6zelle\u015ftirmek, web sitesinin esteti\u011fini art\u0131rabilirken, kullan\u0131c\u0131 deneyimini ve eri\u015filebilirli\u011fi olumsuz etkilememek i\u00e7in dikkatli olunmal\u0131d\u0131r.<\/p>\n
1.  G\u00f6r\u00fcn\u00fcrl\u00fck ve Kontrast:<\/strong> Kayd\u0131rma \u00e7ubuklar\u0131, kullan\u0131c\u0131n\u0131n sayfan\u0131n kayd\u0131r\u0131labilir oldu\u011funu anlamas\u0131 i\u00e7in yeterince g\u00f6r\u00fcn\u00fcr olmal\u0131d\u0131r. Yetersiz kontrast, \u00f6zellikle g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in sorun te\u015fkil edebilir. Arka plan ile s\u00fcr\u00fckleyici aras\u0131nda yeterli renk fark\u0131 oldu\u011fundan emin olun.
\n2.  Boyutland\u0131rma:<\/strong> Kayd\u0131rma \u00e7ubuklar\u0131 \u00e7ok ince olmamal\u0131d\u0131r. \u00d6zellikle dokunmatik cihazlarda, kullan\u0131c\u0131n\u0131n s\u00fcr\u00fckleyiciyi kolayca hedefleyip etkile\u015fime ge\u00e7ebilmesi i\u00e7in makul bir geni\u015fli\u011fe sahip olmal\u0131d\u0131rlar. thin<\/code> gibi de\u011ferler bazen \u00e7ok ince olabilir.
\n3.  Marka Kimli\u011fi:<\/strong> Kayd\u0131rma \u00e7ubuklar\u0131n\u0131n renklerini ve stilini web sitenizin genel renk paleti ve marka kimli\u011fi ile uyumlu hale getirin. Bu, tutarl\u0131 ve profesyonel bir g\u00f6r\u00fcn\u00fcm sa\u011flar.
\n4.  A\u015f\u0131r\u0131ya Ka\u00e7mamak:<\/strong> A\u015f\u0131r\u0131 derecede s\u00fcsl\u00fc veya dikkat da\u011f\u0131t\u0131c\u0131 kayd\u0131rma \u00e7ubuklar\u0131, ana i\u00e7eri\u011fin \u00f6n\u00fcne ge\u00e7ebilir ve kullan\u0131c\u0131 deneyimini bozabilir. Basit, temiz ve i\u015flevsel tasar\u0131mlar genellikle en iyisidir.
\n5.  Hover\/Active Durumlar\u0131:<\/strong> S\u00fcr\u00fckleyici i\u00e7in hover<\/code> ve active<\/code> durumlar\u0131 tan\u0131mlamak, kullan\u0131c\u0131n\u0131n etkile\u015fimde oldu\u011funu anlamas\u0131na yard\u0131mc\u0131 olur ve daha dinamik bir deneyim sunar.
\n6.  Kullan\u0131c\u0131 Deneyimi:<\/strong> Kayd\u0131rma \u00e7ubuklar\u0131n\u0131 gizlerken veya \u00e7ok ince yaparken, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fin kayd\u0131r\u0131labilir oldu\u011funu nas\u0131l anlayacaklar\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Bazen kayd\u0131rma \u00e7ubu\u011funun tamamen gizlenmesi, i\u00e7eri\u011fin tamam\u0131n\u0131n g\u00f6r\u00fcn\u00fcr oldu\u011fu yan\u0131lg\u0131s\u0131na yol a\u00e7abilir.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu ve Gelecek<\/h3>\n
Kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesi, taray\u0131c\u0131lar aras\u0131nda uyumluluk konusunda hala baz\u0131 zorluklar bar\u0131nd\u0131ran bir aland\u0131r. Webkit pseudo-element’leri geni\u015f \u00e7apta desteklense de, bunlar standart de\u011fildir ve di\u011fer taray\u0131c\u0131larda \u00e7al\u0131\u015fmaz. Firefox’un scrollbar-width<\/code> ve scrollbar-color<\/code> \u00f6zellikleri daha standart bir yakla\u015f\u0131md\u0131r ancak daha az kontrol sunar.<\/p>\n
Standartla\u015fma \u00c7abalar\u0131: CSS Scrollbars Module Level 1<\/h4>\n
W3C, kayd\u0131rma \u00e7ubuklar\u0131n\u0131n stilini standartla\u015ft\u0131rmak i\u00e7in “CSS Scrollbars Module Level 1” \u00fczerinde \u00e7al\u0131\u015fmaktad\u0131r. Bu mod\u00fcl, gelecekte t\u00fcm taray\u0131c\u0131lar i\u00e7in tutarl\u0131 bir \u00f6zelle\u015ftirme y\u00f6ntemi sunmay\u0131 hedeflemektedir. Mod\u00fcl, scrollbar-width<\/code>, scrollbar-color<\/code> gibi \u00f6zellikleri i\u00e7erir ve gelecekte daha fazla stilizasyon se\u00e7ene\u011fi getirmesi beklenmektedir. Ancak, bu mod\u00fcl hen\u00fcz tam olarak uygulanmam\u0131\u015ft\u0131r ve taray\u0131c\u0131lar aras\u0131nda tam destek sa\u011flanana kadar mevcut vendor-prefixed \u00e7\u00f6z\u00fcmler kullan\u0131lmaya devam edecektir.<\/p>\n
Progressive Enhancement Yakla\u015f\u0131m\u0131<\/h4>\n
Taray\u0131c\u0131 uyumlulu\u011fu sorunlar\u0131n\u0131 a\u015fmak i\u00e7in “progressive enhancement” (a\u015famal\u0131 geli\u015ftirme) yakla\u015f\u0131m\u0131n\u0131 benimsemek faydal\u0131d\u0131r. Bu, kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesini bir “geli\u015ftirme” olarak ele almak anlam\u0131na gelir. Temel kayd\u0131rma i\u015flevselli\u011fi her zaman \u00e7al\u0131\u015fmal\u0131, ancak Webkit tabanl\u0131 taray\u0131c\u0131larda veya Firefox’ta ek stilizasyonlar uygulanabilir. Desteklemeyen taray\u0131c\u0131lar ise varsay\u0131lan kayd\u0131rma \u00e7ubuklar\u0131n\u0131 g\u00f6sterecektir, bu da i\u015flevselli\u011fi bozmaz.<\/p>\n
\/ Genel kayd\u0131rma \u00e7ubu\u011fu stilleri (Firefox i\u00e7in) <\/em>\/\nbody {\n    scrollbar-width: thin;\n    scrollbar-color: #a8a8a8 #f0f0f0;\n}\n\n\/ Webkit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in \u00f6zel stiller <\/em>\/\nbody::-webkit-scrollbar {\n    width: 15px;\n    height: 15px;\n}\nbody::-webkit-scrollbar-track {\n    background-color: #f0f0f0;\n    border-radius: 8px;\n    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);\n}\nbody::-webkit-scrollbar-thumb {\n    background-color: #a8a8a8;\n    border-radius: 8px;\n    border: 3px solid #f0f0f0;\n}\nbody::-webkit-scrollbar-thumb:hover {\n    background-color: #7a7a7a;\n}<\/code><\/pre>\n
Bu \u015fekilde, Firefox kullan\u0131c\u0131lar\u0131 temel \u00f6zelle\u015ftirmeyi g\u00f6r\u00fcrken, Webkit kullan\u0131c\u0131lar\u0131 daha zengin bir stilizasyondan faydalan\u0131r. Di\u011fer taray\u0131c\u0131lar ise varsay\u0131lan kayd\u0131rma \u00e7ubuklar\u0131n\u0131 g\u00f6sterecektir.<\/p>\n
Pratik Uygulama Senaryolar\u0131<\/h3>\n
Kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmeleri, sadece t\u00fcm sayfa i\u00e7in de\u011fil, belirli UI bile\u015fenleri i\u00e7in de kullan\u0131labilir.<\/p>\n
*   Modal Kutular ve A\u00e7\u0131l\u0131r Pencereler:<\/strong> \u0130\u00e7eri\u011fi belirli bir boyuta s\u0131\u011fd\u0131rmas\u0131 gereken modal kutular veya a\u00e7\u0131l\u0131r pencereler i\u00e7in \u00f6zel kayd\u0131rma \u00e7ubuklar\u0131 tasarlamak, bu bile\u015fenlerin genel esteti\u011fini tamamlar.
\n*   Kod Bloklar\u0131:<\/strong> Uzun kod bloklar\u0131n\u0131 i\u00e7eren <\/p>\n
<\/code> veya <\/code> etiketleri i\u00e7in yatay kayd\u0131rma \u00e7ubuklar\u0131 genellikle gereklidir. Bu \u00e7ubuklar\u0131 teman\u0131za uygun \u015fekilde stilize edebilirsiniz.\n*   \u00d6zel \u0130\u00e7erik Alanlar\u0131:<\/strong> Belirli bir div<\/code> i\u00e7inde bir makale, yorumlar veya bir \u00fcr\u00fcn a\u00e7\u0131klamas\u0131 gibi kayd\u0131r\u0131labilir i\u00e7erik varsa, bu alan\u0131n kayd\u0131rma \u00e7ubu\u011funu ayr\u0131 olarak \u00f6zelle\u015ftirebilirsiniz.\n*   CSS De\u011fi\u015fkenleri ile Dinamik Temalar:<\/strong> CSS de\u011fi\u015fkenleri (custom properties) kullanarak, sitenizin farkl\u0131 temalar\u0131 i\u00e7in dinamik olarak de\u011fi\u015fen kayd\u0131rma \u00e7ubu\u011fu stilleri olu\u015fturabilirsiniz.\n\n
:root {\n    --scrollbar-track-color: #f0f0f0;\n    --scrollbar-thumb-color: #a8a8a8;\n    --scrollbar-thumb-hover-color: #7a7a7a;\n}\n\nbody.dark-theme {\n    --scrollbar-track-color: #3a3f4b;\n    --scrollbar-thumb-color: #61afef;\n    --scrollbar-thumb-hover-color: #52a0da;\n}\n\n\/ Webkit <\/em>\/\nbody::-webkit-scrollbar-track {\n    background-color: var(--scrollbar-track-color);\n}\nbody::-webkit-scrollbar-thumb {\n    background-color: var(--scrollbar-thumb-color);\n}\nbody::-webkit-scrollbar-thumb:hover {\n    background-color: var(--scrollbar-thumb-hover-color);\n}\n\n\/ Firefox <\/em>\/\nbody {\n    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n}<\/code><\/pre>\n
Bu \u00f6rnek, tema de\u011fi\u015fimlerinde kayd\u0131rma \u00e7ubu\u011fu renklerinin de otomatik olarak nas\u0131l g\u00fcncellenebilece\u011fini g\u00f6stermektedir.<\/p>\n
Sonu\u00e7<\/h3>\n
Taray\u0131c\u0131 kayd\u0131rma \u00e7ubuklar\u0131n\u0131 CSS ile \u00f6zelle\u015ftirmek, bir web sitesinin veya uygulamas\u0131n\u0131n g\u00f6rsel b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilecek g\u00fc\u00e7l\u00fc bir tekniktir. Webkit tabanl\u0131 taray\u0131c\u0131lar i\u00e7in pseudo-element'ler arac\u0131l\u0131\u011f\u0131yla kapsaml\u0131 kontrol sa\u011flarken, Firefox i\u00e7in daha basit ama standartla\u015fma yolunda ilerleyen \u00f6zellikler mevcuttur. Internet Explorer'\u0131n eski y\u00f6ntemleri ise art\u0131k ge\u00e7erlili\u011fini yitirmi\u015ftir.<\/p>\n
Bu \u00f6zelle\u015ftirmeleri yaparken, eri\u015filebilirlik, kullan\u0131labilirlik ve taray\u0131c\u0131 uyumlulu\u011fu gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmak hayati \u00f6nem ta\u015f\u0131r. Kayd\u0131rma \u00e7ubuklar\u0131n\u0131n yeterince g\u00f6r\u00fcn\u00fcr, kullan\u0131labilir ve sitenizin genel tasar\u0131m\u0131na uygun oldu\u011fundan emin olun. Progressive enhancement yakla\u015f\u0131m\u0131n\u0131 benimseyerek, t\u00fcm kullan\u0131c\u0131lara temel bir deneyim sunarken, modern taray\u0131c\u0131larda daha zengin bir g\u00f6rsel stil sa\u011flayabilirsiniz.<\/p>\n
Gelecekteki CSS standartlar\u0131, kayd\u0131rma \u00e7ubu\u011fu \u00f6zelle\u015ftirmesini daha tutarl\u0131 ve esnek hale getirmeyi vaat etse de, \u015fimdilik yukar\u0131da a\u00e7\u0131klanan teknikler, web sitelerinize ki\u015fisel bir dokunu\u015f katmak i\u00e7in en etkili yollard\u0131r. Do\u011fru uyguland\u0131\u011f\u0131nda, \u00f6zelle\u015ftirilmi\u015f kayd\u0131rma \u00e7ubuklar\u0131, bir web sitesinin genel kalitesini ve profesyonelli\u011fini y\u00fckselten k\u00fc\u00e7\u00fck ama etkili bir detay olabilir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber\nWeb sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi ile kullan\u0131c\u0131 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":[126],"tags":[],"class_list":{"0":"post-32639","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nTaray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: 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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi ile kullan\u0131c\u0131 d\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-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-24T02:40:51+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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-24T02:40:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\"},\"wordCount\":2571,\"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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\",\"name\":\"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-24T02:40:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: 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":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: 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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber","og_description":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber Web sitelerinin ve uygulamalar\u0131n g\u00f6rsel \u00e7ekicili\u011fi ile kullan\u0131c\u0131 d","og_url":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-24T02:40:51+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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-24T02:40:51+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/"},"wordCount":2571,"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\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/","name":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-24T02:40:51+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tarayici-kaydirma-cubugunu-css-ile-ozellestirme-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Taray\u0131c\u0131 Kayd\u0131rma \u00c7ubu\u011funu CSS ile \u00d6zelle\u015ftirme: 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\/32639","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=32639"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32639\/revisions"}],"predecessor-version":[{"id":32640,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32639\/revisions\/32640"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}