CSS Custom Properties, CSS kodlarında kullanılan değişkenlerdir ve farklı stil özelliklerinde kullanılan aynı değerleri tek bir yerde tanımlamak için kullanılırlar Bu özellik, CSS yönetimini kolaylaştırır ve kod tekrarlarını azaltır :root tarafından tanımlanan CSS Custom Properties, tüm belge boyunca kullanılabilir Kendi CSS Custom Properties'lerinizi oluşturarak, tasarımınızı merkezileştirebilir ve daha iyi yönetebilirsiniz CSS Custom Properties, belge boyunca kullanılan özel özellikleri belirten bir anahtar kelime kullanır ve özellikleri kolayca değiştirmeyi sağlar Örnek uygulamalar arasında gece modu ve responsive tasarım yer alır CSS Custom Properties, web geliştiricilerin kodların yeniden kullanılabilirliğini ve bakımını kolaylaştırır ve web sayfalarının performansını artırır

CSS Custom Properties, yani CSS Özel Değişkenleri, CSS kodlarında değişken olarak kullanılabilen özelliklerdir. Bu özellikler sayesinde, farklı stillerdeki elementlerde kullanılan aynı değerleri tek bir yerde tanımlayarak kodun okunurluğunu ve düzenini arttırabilirsiniz. Bu özellik ile birlikte CSS yönetimi daha kolay hale gelir, kod tekrarları azalır ve stil değişiklikleri daha hızlı bir şekilde gerçekleştirilebilir.

CSS Custom Properties, :root tarafından tanımlandığında tüm belge boyunca kullanılabilir. Bu özellik sayesinde kod tekrarları azaltılabilir, stil değişiklikleri daha hızlı bir şekilde gerçekleştirilebilir. Kendi CSS Custom Properties'lerinizi oluşturarak, tasarımınızı merkezileştirebilir ve daha iyi yönetebilirsiniz. Örnegin, sayfa köşelerinde kullanılan kenarlıkların kalınlığı, renkleri ve stili gibi değerlerin hepsini tek bir yerde tanımlayıp,ustom Properties olarak kullanabilirsiniz. Böylece, değişiklik yapmanız gerektiğinde sadece burada yapacağınız değişiklik ile tüm sayfada kullanılan kenarlıklar etkilenir.

• CSS Custom Properties, tasarım sürecindeki yükü azaltır ve verimliliği artırır.
• Tek bir özelliği düzenlemeniz gerektiğinde tüm sayfalarda değişiklik yapmanız gerekmez, yalnızca CSS Custom Property'nizi düzenleyebilirsiniz.
• CSS Custom Properties, kodun okunurluğunu artırır ve yazılım sürecini daha keyifli hale getirir.

CSS Custom Properties Nedir?

CSS Custom Properties, CSS değişkenleri olarak da adlandırılan, CSS kodlarında tekrar eden değerleri bir değişkene atayan özelliklerdir. Böylece bir değeri değiştirmek istediğinizde CSS dosyası içerisinde kodların bulunduğu tüm yerlerde tek tek değiştirmek yerine, sadece değişkenin bir kez değiştirilmesi yeterli olur.

CSS Custom Properties kullanmanın en önemli avantajlarından biri, kodların yeniden kullanılabilirliğini ve bakımını kolaylaştırmasıdır. Yine aynı zamanda, CSS Custom Properties, web sayfalarının performansını da artırır. Çünkü web tarayıcısının tekrar eden kodları anlaması daha hızlıdır. CSS Custom Properties kullanarak, bir sayfanın kodlaması daha az karakter içerebilir ve daha hızlı yüklenebilir.

Custom Properties Kullanımı

CSS Custom Properties, web geliştiricilerin hayatını kolaylaştırmada büyük bir rol oynar. Kullanarak, stil tekrarlarını önleyebilir, kodu daha düzenli hale getirerek bakımı daha kolay hale getirebilirsiniz. Bu bölümde CSS Custom Properties ile ilgili örnekler ve kod açıklamaları hakkında detaylı bir inceleme yapacağız.

Temel Kullanım

CSS Custom Properties'i kullanmak oldukça kolaydır. Değişkenin anahtar kelimesini (--), bir isim ve '=' işaretini girerek tanımlayabilirsiniz. Değişkeni kullanırken, text-decoration-color: var(--my-color) gibi bir özellik değeri belirtmek yeterlidir.

Renkler

Renkler, web sayfalarında her zaman önemli bir rol oynamıştır. Birçok web sitesi tasarımcısı, CSS Custom Properties sayesinde kendi renklerini belirlemek için önceden tanımlanmış değişkenleri kullanır. Aşağıda kendi renklerimizi belirleyerek CSS Custom Properties örneği ve kod açıklamaları verilmiştir.

:root { --main-color: #4d4dff; --secondary-color: #008080;}

Fontlar

Benzer şekilde, web sayfasının fontu, web geliştiricileri için önemli bir konudur. Görünüm, okunabilirlik, kontrast ve genel estetik denge için doğru fontun kullanılması gereklidir. Fontlar için CSS Custom Properties kullanarak, kendi fontlarımızı belirleyebiliriz. Aşağıda örnekler ve kod açıklamaları verilmiştir.

:root { --main-font: Arial, sans-serif; --heading-font: 'Montserrat', sans-serif;}

Uygulamalar

CSS Custom Properties kullanarak, gerçek hayattan bazı örnek uygulamaları göstermek mümkündür. Aşağıda, gece modu ve responsive tasarım örnekleri verilmiştir.

Gece Modu

Kullanıcıların gözlerine zarar vermeden, daha az ışık yayan bir mod olan gece modu, modern web sitelerinde önemli bir özelliktir. Güçlü CSS Custom Properties ile, gece moduna kolayca geçiş yapabilirsiniz. Aşağıda gece modu örneği ve kod açıklamaları verilmiştir.

@media (prefers-color-scheme: dark) { :root { --background-color: #111; --text-color: #eee; }}

Responsive Tasarım

CSS Custom Properties kullanarak, responsive tasarım da kolayca yapılabilir. Çizim araçlarının kullanımı ve sayfa ayarları gibi faktörlerden bağımsız olarak, en iyi uyumu sağlama özgürlüğüne sahip olabilirsiniz. Aşağıda responsive tasarım örneği ve kod açıklamaları verilmiştir.

.container { width: 100%; margin: 0 auto; max-width: 1200px;}

@media (min-width: 768px) { .container { max-width: 720px; }}

@media (min-width: 992px) { .container { max-width: 960px; }}

@media (min-width: 1200px) { .container { max-width: 1140px; }}

CSS Custom Properties, web geliştiricilerin stil tekrar mücadelesinde savaşacak bir silah olarak hizmet eder. Yukarıdaki örnekler, CSS Custom Properties kullanarak stil tekrarları ve karmaşayı azaltmanın sıradışı bir örneğidir. Bu, web sayfaları oluştururken arzulanan bir şeydir.

Temel Kullanım

CSS Custom Properties (CSS özel değişkenleri) web tasarımında birçok kullanım alanına sahip olmakla birlikte, avantajları nedeniyle de tercih edilmektedir. Temel işlevi, etkili bir şekilde kod yönetimi yaparak stil sayfalarında çoklu yeniden kullanım sağlamaktır.

CSS Custom Properties kullanımı, tanımlanan özelliklere değer atama ve daha sonra değerlere erişim için kullanılan değişkenlerin tanımlanması ile gerçekleştirilir. Değişkenler bir defa tanımlandıklarında, aynı sayfa içinde farklı öğeler için kullanılabilirler. Böylece, stil sayfalarındaki kod karmaşıklığı azaltılabilir ve kod düzenlemesi daha da kolaylaşır.

CSS Custom Properties temel kullanımına örnek olarak, önce bir değişken tanımlanır ve ardından diğer öğelerde bu değişken kullanılır. Örneğin:```css:root { --font-renk: blue;}

h1 { color: var(--font-renk);}```Bu kod bloğunda, ":root" değişkenleri tanımlamak için kullanılan bir öğedir ve "--font-renk" değişkeni "blue" değeri atanmıştır. "h1" öğesi, "color" özelliği için değişkeni kullanır.

Custom Properties kullanımı sayesinde, kodların daha da anlaşılır ve kolay yönetilebilir olmasını sağlayarak web sayfalarının daha da etkileyici olmasını sağlar. Adopt CSS Custom properties for your web development projects and experience a smoother workflow and better coding practices.

Renkler

:root {  --main-button-color: #1E90FF;}

button {  background-color: var(--main-button-color);  color: white;  border-radius: 5px;  padding: 10px 20px;}

:root {  --main-color: #1E90FF;}button {  background-color: var(--main-color);  color: var(--main-color);}p {  color: var(--main-color);}

Fontlar

CSS Custom Properties kullanarak font belirleme oldukça kolaydır. Bu, font özelliklerini tek bir değişkenle ayarlanabildiğiniz anlamına gelir. Bunun için öncelikle @property anahtar kelimesi kullanmanız gerekiyor. Bu anahtar kelime, -- işaretinden sonra gelen herhangi bir isimle kullanılabilir.

Örneğin:

@property --font-adi: Arial, sans-serif;

Sonrasında artık var(--font-adi) kullanarak font özellikleri belirleyebiliriz. İsterseniz başka özelliklerle beraber de kullanabilirsiniz. Örneğin:

h1 {    font-family: var(--font-adi);    font-size: 3rem;    font-weight: bold;}

Bu şekilde tüm font özelliklerinizi tek bir değişkene bağlayarak daha düzenli ve kolay bir şekilde yönetebilirsiniz.

Uygulamalar

CSS Custom Properties, pratik ve gerçek hayata uygun birçok örnek sunmaktadır. Bu örnekler, tasarımın çeşitli yönlerinde kolaylık ve esnekliğin yanı sıra, zaman ve kod tasarrufu sağlamaktadır. İşte CSS Custom Properties kullanarak gerçek hayata uygun örnekler:

Gece modu, modern web sitelerinde artık standart bir özellik haline geldi. Özellikle kullanıcıların gözlerini rahatlatmak için tercih edilen bir özelliktir. CSS Custom Properties kullanarak, gece modunu kolayca uygulayabilirsiniz. Gece modu, anahtar kelimeler ve değişkenler gibi parametrelerle ayarlanabilir ve geçişleri sorunsuz ve hızlı hale getirebilirsiniz.

CSS Custom Properties, responsive tasarımın geliştirilmesine yardımcı olur. CSS Custom Properties kullanarak, tasarımcılar web sitelerini değişen ekran boyutlarına göre otomatik olarak uyumlu hale getirebilirler. Tüm elementleri boyutlandırmak, fontları ayarlamak ve genel tasarımı ayarlamak için CSS Custom Properties kullanabilirsiniz. Bu, zaman ve kod tasarrufu sağlarken, site performansını da arttırır.

CSS Custom Properties kullanarak renk tema oluşturma işlemi oldukça kolaylaştırılır. Renkler bir değişken olarak tanımlandığında, web sitesinde birden fazla yerleşik renk kullanıyorsanız, renkleri kolayca değiştirebilirsiniz. Bu, daha hızlı ve daha doğru bir renk düzeni oluşturmanıza olanak tanır ve tasarım sürecini de hızlandırır.

Web sitelerinde font seçimi, tasarımın en önemli yönlerinden biridir. CSS Custom Properties kullanarak, farklı yazı tipleri üzerinde daha fazla kontrol sağlayabilirsiniz. Örneğin, birden fazla CSS dosyasını düzenlemek yerine Custom Property kullanarak birden fazla font türünü uygulayabilirsiniz.

CSS Custom Properties, gerçek hayata uygun örneklerle birlikte tasarım ve geliştirme sürecinde önemli bir role sahiptir. Kullanımı oldukça kolaydır ve performansı arttırırken, tasarım sürecini de hızlandırır.

Gece Modu

Gece modu özelliği son yıllarda birçok uygulama ve web sitesinde yer alıyor. Kullanıcılar tarafından tercih edilen bu özellik günümüzde tasarımın olmazsa olmazları arasında yer alıyor. Gece modunu, CSS Custom Properties kullanarak web sitenize ekleyebilirsiniz.

Öncelikle gece modunu CSS dosyasında tanımlamalısınız. Bunun için body etiketini seçerek CSS Custom Properties kullanabilirsiniz. Aşağıdaki kod örneği, gece modu için CSS Custom Properties kullanarak nasıl yapılacağı hakkında size bilgi verecektir.

```cssbody { --bg-color: #fff; --text-color: #333;}

body.dark-mode { --bg-color: #333; --text-color: #fff;}

body { background-color: var(--bg-color); color: var(--text-color);}```

Bu kod örneğinde body etiketi seçildi ve iki farklı renk değişkenleri tanımlandı. --bg-color değişkeni, arka plan rengini belirleyecektir. --text-color değişkeni ise metin rengini belirleyecektir. dark-mode class'ı kullanılarak bu değişkenlere yeni değerler atanır. Bu değerler gece modundayken kullanılacak olan renkleri belirler. Son olarak, background-color ve color özellikleri ile değişkenler kullanılarak renkler belirlenir.

Gece modunu aktif hale getirmek için ise JavaScript kullanabilirsiniz. Aşağıdaki kod örneği, dark-mode class'ını body etiketine ekleyerek gece modunu aktif hale getirir.

```jsconst btn = document.querySelector('.btn-toggle');

btn.addEventListener('click', function() { document.body.classList.toggle('dark-mode');});```

Bu kod örneğinde, gece modu butonuna tıklanması durumunda dark-mode class'ı, body etiketine eklenir veya kaldırılır. Bu işlem sayesinde kullanıcı gece modunu açıp kapatabilir.

Sonuç olarak, gece modunu CSS Custom Properties kullanarak web sitenize eklemek oldukça kolaydır. Yukarıdaki örnek kodları kullanarak istediğiniz rengi ve stili oluşturabilirsiniz. Ayrıca, JavaScript kullanarak buton üzerinden gece modunu açıp kapatabilirsiniz.

Responsive Tasarım

Responsive tasarım, günümüz web siteleri için önemli bir faktördür. Her tür cihazda iyi görünüm ve uyumlu bir şekilde çalışan siteler, kullanıcılar tarafından daha iyi bir deneyim olarak değerlendirilir. Bu nedenle, CSS Custom Properties kullanarak responsive tasarım yapmak oldukça kolaylaşır.

Örnek olarak, bir web sitesinin kenar boşluklarının, yüksekliğinin ve genişliğinin dinamik olarak değişmesi gerektiğini düşünelim. Custom Property kullanarak, sitenin düzeni ile ilgili CSS özelliklerini ayarlamak için değişkenler oluşturabiliriz. Aşağıdaki örnek kodda, sadece bir CSS dosyasındaki kısayolları kullanarak, varsayılan ayarların dışında görüntülenmesi gereken tüm özelliklerin CSS custom property değerlerini ayarlayabiliriz:

  :root {    --main-background-color: #FFF;    --article-width: 700px;    --mobile-width: 90%;  }
  .wrapper {    background-color: var(--main-background-color);    max-width: var(--article-width);    margin: 0 auto;  }
  @media (max-width: 767px) {    .wrapper {      max-width: var(--mobile-width);    }  }

Burada, varsayılan arka plan rengi, makale genişliği ve mobil görünüm genişliği için farklı özelleştirilmiş CSS custom property değerlerini belirledik. Daha sonra, sitedeki bölümlerin sınıflarını bu değişkenlerle güncelledik. Son olarak, mobil cihaz görünümü için bir medya sorgusu ekledik. Bu sayede sitenin kenar boşluğu, yüksekliği ve genişliği mobile uygun hale gelir.

CSS custom properties, responsive tasarım için oldukça kullanışlıdır. Varsayılan ayarları kolayca yönetir ve her türlü cihazda uyumlu görünümler sunar. Bu özellik sayesinde, web siteleri için daha iyi bir deneyim sağlayan dinamik ve modern tasarımlar yapılabilir.

Custom Properties İpuçları

CSS Custom Properties kullanırken bazı ipuçlarına dikkat etmek, tasarımlarımızda daha etkili sonuçlar elde etmemizi sağlayabilir. İşte CSS Custom Properties kullanırken dikkat edilmesi gereken bazı ipuçları:

• Kullanılacak Custom Properties'lerin isimleri açıklayıcı olmalı ve kodun okunabilirliğini arttırmalıdır.
• Custom Properties'leri ayrı bir dosyada tanımlamak, daha sonra tekrar kullanmak istediğimizde zamandan tasarruf etmemizi sağlar.
• Custom Properties'ler sadece root elementte tanımlanabilir. Bu, sayfada farklı alanlarda kullanacağımız Custom Properties'lerin birbirleriyle karışmasını önler.
• Custom Properties'leri overwrite etmek istediğimizde, değiştirmek istediğimiz özelliği hedefleyen öncelikle yerleştirilmelidir. Bu, CSS'in cascading yapısından kaynaklanan öncelik ile ilişkilidir.
• Custom Properties'leri kullanırken, örnek değerleri belirlememiz işimizi kolaylaştıracaktır. Örnek değerler, geliştiricilerin Custom Properties'leri daha kolay anlamalarına ve tasarımlarında daha hızlı hareket etmelerine yardımcı olur.

Ayrıca, CSS Custom Properties kullanırken sık yapılan bazı hatalara da dikkat etmek gerekiyor. Bunlar şu şekildedir:

• Custom Properties'lerin isimlendirmesi hatalı yapıldığında, hedef almak istediğimiz özelliği hedeflememiz daha zorlaşacaktır.
• Custom Properties'ler standart bir CSS özelliği olmadığından, bazı tarayıcılarda desteklenmeyebilir. Bu nedenle, tasarımımızı optimize etmeden önce hangi tarayıcılarda çalışacağını bilmemiz önemlidir.
• Custom Properties'leri gereksiz yere çok fazla kullanmak, kod okunabilirliğini azaltabilir ve tasarımı karmaşık hale getirebilir.

Yukarıdaki ipuçlarını ve hataları göz önünde bulundurarak, CSS Custom Properties kullanımı ile daha iyi tasarımlar yapabiliriz.