{"id":6730,"date":"2024-12-16T03:00:15","date_gmt":"2024-12-16T00:00:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/"},"modified":"2024-12-16T03:00:15","modified_gmt":"2024-12-16T00:00:15","slug":"css-ile-ozellestirilmis-aralik-surguculeri","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/","title":{"rendered":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri"},"content":{"rendered":"<p>CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri<\/p>\n<p>Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim.  JavaScript&#8217;e ihtiya\u00e7 duymadan, sadece CSS&#8217;in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir.  \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.<\/p>\n<pre><code class=\"language-html\">\n&lt;input type=\"range\" min=\"0\" max=\"100\" value=\"50\"&gt;\n<\/code><\/pre>\n<p>Bu basit kod sat\u0131r\u0131, standart bir aral\u0131k s\u00fcrg\u00fcc\u00fcs\u00fc olu\u015fturur.  Ancak, g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tamamen \u00f6zelle\u015ftirmek istiyoruz.  \u0130\u015fte burada CSS devreye giriyor.  A\u015fa\u011f\u0131da,  standart g\u00f6r\u00fcn\u00fcm\u00fc de\u011fi\u015ftirecek ve tamamen farkl\u0131 bir tasar\u0131m olu\u015fturacak CSS kodlar\u0131n\u0131 g\u00f6receksiniz.  \u00d6ncelikle, s\u00fcrg\u00fcc\u00fcn\u00fcn genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ayarlayaca\u011f\u0131z. Daha sonra,  s\u00fcrg\u00fcc\u00fcn\u00fcn par\u00e7as\u0131 olan elemanlar\u0131 (kayd\u0131r\u0131c\u0131,  izleyici vb.) tek tek stilize edece\u011fiz. Bu sayede, tamamen kontrol edilebilir ve istedi\u011finiz gibi \u015fekillendirilebilir bir s\u00fcrg\u00fcc\u00fcye sahip olacaks\u0131n\u0131z.<\/p>\n<pre><code class=\"language-css\">\ninput[type=\"range\"] {\n  -webkit-appearance: none; \/* WebKit'te varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fc kald\u0131r *\/\n  width: 100%;\n  height: 5px;\n  background: #d3d3d3;\n  outline: none;\n  opacity: 0.7;\n  -webkit-transition: .2s;\n  transition: opacity .2s;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 15px;\n  height: 15px;\n  background: #4CAF50;\n  cursor: pointer;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n  width: 15px;\n  height: 15px;\n  background: #4CAF50;\n  cursor: pointer;\n}\n\ninput[type=\"range\"]:hover {\n  opacity: 1;\n}\n\n<\/code><\/pre>\n<p>Bu kodlar,  s\u00fcrg\u00fcc\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 tamamen de\u011fi\u015ftirir.  \u00d6rne\u011fin,  -webkit-appearance: none; sat\u0131r\u0131, taray\u0131c\u0131n\u0131n varsay\u0131lan s\u00fcrg\u00fcc\u00fc stilini devre d\u0131\u015f\u0131 b\u0131rak\u0131r.  Sonras\u0131nda, width, height, background gibi \u00f6zellikler ile s\u00fcrg\u00fcc\u00fcn\u00fcn boyutunu ve rengini ayarlayabiliriz.  Ayr\u0131ca,  ::-webkit-slider-thumb ve ::-moz-range-thumb  se\u00e7icileriyle kayd\u0131r\u0131c\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de \u00f6zelle\u015ftirebiliriz.  Bu  se\u00e7iciler,  s\u0131ras\u0131yla WebKit (Chrome, Safari) ve Firefox taray\u0131c\u0131lar\u0131 i\u00e7in \u00f6zeldir.  Bu nedenle,  t\u00fcm taray\u0131c\u0131larda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm elde etmek i\u00e7in her iki se\u00e7iciyi de kullanmak \u00f6nemlidir.<\/p>\n<p>Bu kodlar\u0131 kullanarak, basit bir HTML aral\u0131k s\u00fcrg\u00fcc\u00fcs\u00fcn\u00fc tamamen \u00f6zelle\u015ftirebilir ve web sitenize uyumlu hale getirebilirsiniz.  Daha karma\u015f\u0131k tasar\u0131mlar i\u00e7in,  daha fazla CSS \u00f6zelli\u011fi ve teknikleri kullanabilirsiniz.  \u00d6rne\u011fin,  gradientler,  \u015fekiller ve animasyonlar ile s\u00fcrg\u00fcc\u00fcn\u00fcz\u00fc daha da etkileyici hale getirebilirsiniz.  Daha detayl\u0131 bilgi ve \u00f6rnekler i\u00e7in, <a href=\"https:\/\/dev.to\/perymimon\/css-only-custom-range-slider-42ml\" target=\"_blank\">bu makaleye<\/a> g\u00f6z atabilirsiniz.  Ayr\u0131ca,  web geli\u015ftirmeyle ilgili daha fazla ipucu ve bilgi i\u00e7in kendi web sitemi <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">fatihsoysal.com<\/a>&#8216;u ziyaret edebilirsiniz.<\/p>\n<p>Sonu\u00e7 olarak,  CSS ile \u00f6zelle\u015ftirilmi\u015f aral\u0131k s\u00fcrg\u00fcc\u00fcleri olu\u015fturmak,  web geli\u015ftirmede hem g\u00f6rsel \u00e7ekicili\u011fi art\u0131rmak hem de performans\u0131 iyile\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir y\u00f6ntemdir.  Bu teknik,  JavaScript&#8217;e olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azaltarak,  web sitenizin daha h\u0131zl\u0131 ve verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.  Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur!<\/p>\n<p>#Etiketler: CSS, \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fc, Range Slider, CSS Slider, Web Geli\u015ftirme,  HTML,  Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn&hellip;","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":[1],"tags":[],"class_list":{"0":"post-6730","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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>CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript&#039;e ihtiya\u00e7 duymadan, sadece CSS&#039;in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.\" \/>\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\/css-ile-ozellestirilmis-aralik-surguculeri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript&#039;e ihtiya\u00e7 duymadan, sadece CSS&#039;in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-16T00:00:15+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri\",\"datePublished\":\"2024-12-16T00:00:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\"},\"wordCount\":494,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\",\"name\":\"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-12-16T00:00:15+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript'e ihtiya\u00e7 duymadan, sadece CSS'in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri\"}]},{\"@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":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript'e ihtiya\u00e7 duymadan, sadece CSS'in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.","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\/css-ile-ozellestirilmis-aralik-surguculeri\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript'e ihtiya\u00e7 duymadan, sadece CSS'in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.","og_url":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-12-16T00:00:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri","datePublished":"2024-12-16T00:00:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/"},"wordCount":494,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/","url":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/","name":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-12-16T00:00:15+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn size CSS kullanarak tamamen \u00f6zelle\u015ftirilmi\u015f bir aral\u0131k s\u00fcrg\u00fcc\u00fcn\u00fcn nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6sterece\u011fim. JavaScript'e ihtiya\u00e7 duymadan, sadece CSS'in g\u00fcc\u00fcyle harika g\u00f6r\u00fcnen ve tamamen i\u015flevsel bir s\u00fcrg\u00fcc\u00fc olu\u015fturabilece\u011fiz. Bu y\u00f6ntem, web sitenizin performans\u0131n\u0131 art\u0131rmak ve gereksiz JavaScript kodlar\u0131ndan kurtulmak i\u00e7in idealdir. \u00d6ncelikle, temel HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-ozellestirilmis-aralik-surguculeri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS ile \u00d6zelle\u015ftirilmi\u015f Aral\u0131k S\u00fcrg\u00fcc\u00fcleri"}]},{"@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\/6730","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=6730"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/6730\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=6730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=6730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=6730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}