CSS Özel Özellikleri: Tanımlama ve Güncelleme
:root üzerinde -- ile değişkenler tanımlayın, var() ile bunlara başvurun ve canlı tema oluşturmak için JavaScript ile dinamik olarak güncelleyin.
CSS Özel Özellikleri: Tanımlama ve Güncelleme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Özet: Bildirme ve Kapsamlandırma
CSS özel özellikleri, herhangi bir öğede -- ön ekiyle bildirilir. :root üzerinde bildirilen özellikler genel olarak kullanılabilir. Alt öğeler değerleri devralır ve bunları kendi kapsamlarında geçersiz kılabilir.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}JavaScript ile Canlı Güncellemeler
Özel özellikler çalışma zamanında değiştirilebilir. Öğe düzeyinde geçersiz kılmalar için element.style.setProperty('--name', value) kullanın veya tüm kullanıcıları anında etkilemek için :root üzerindeki genel bir değişkeni güncelleyin.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');JS'de Özel Özellik Değerlerini Okuma
Bir özel özelliği getComputedStyle(element).getPropertyValue('--name').trim() ile okuyun. Bu, yalnızca satır içi değeri değil, hesaplanan (basamaklandırılmış) değeri okur.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Özel Özellikleri Canlandırma
Özel özelliklerin ara değerleri, tarayıcı tarafından @property (Houdini) kullanılarak hesaplanabilir veya calc() ile birlikte kullanıldıklarında geçişlerde kullanılabilir. @property olmadan tarayıcılar değişken değerleri arasında doğrudan geçiş yapamaz.
@property — Kayıtlı Özel Özellikler
CSS @property kuralı, bir özel özelliği türü, başlangıç değeri ve devralma kuralıyla kaydeder. Kayıtlı özelliklerde geçişler ve canlandırmalar yerel olarak desteklenir.
@property --brand-opacity {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.card {
opacity: var(--brand-opacity);
transition: --brand-opacity 0.3s;
}
.card:hover {
--brand-opacity: 0.7;
}Özel Özelliklerle Belirteç Sistemleri
Tasarım belirteçleri modeli: tüm tasarım kararlarını özel özellikler olarak saklayın. Bileşenler sabit kodlanmış değerleri değil, belirteçleri kullanır. Bir belirteci değiştirmek değişikliği her yere yayar.
:root {
/* Colour tokens */
--token-primary: #6366f1;
--token-primary-hover: #4f46e5;
--token-surface: #ffffff;
--token-on-surface: #1f2937;
/* Spacing tokens */
--token-space-sm: 8px;
--token-space-md: 16px;
--token-space-lg: 24px;
}Duyarlı Özel Özellikler
Özel özellik değerlerini medya sorgularının içinde değiştirin. Değişkenleri kullanan bileşenler otomatik olarak uyum sağlar — bu, her kesme noktası için ayrı bileşen kuralları yazmaktan daha temizdir.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}calc() İçinde Özel Özellikler
Türetilmiş aralık ve boyutlandırma değerleri için değişkenleri calc() içinde kullanın. Bu, tutarlı ve matematiksel olarak uyumlu bir boyutlandırma sistemi oluşturur.
:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); } /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); } /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */Birden Çok Markayı Temalandırma
Her veri özniteliği için farklı tema belirteçleri ayarlayın. Tek bir sayfa, birden çok beyaz etiketli temayı destekleyebilir.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }SVG'de Özel Özellikler
Dolgu ve kontur gibi SVG öznitelikleri özel özellikleri kullanabilir. Bu, SVG işaretlemesini değiştirmeden simgeleri CSS üzerinden temalandırmanızı sağlar.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Özel Özelliklerde Hata Ayıklama
Chrome DevTools'ta bir öğe seçin ve özel özellik değerleri için Hesaplanan sekmesine bakın. Stiller bölmesi, her değişkenin nerede bildirildiğini gösterir. Devralınan bölümü, üst öğelerden gelen değişkenleri gösterir.
Hızlı Kontrol
Bir öğedeki CSS özel özelliğini hangi JavaScript yöntemi günceller?
Özet: CSS Özel Özelliklerini Derinlemesine İnceleme
Genel değerler için :root üzerinde bildirin; yerel kapsam için alt öğelerde geçersiz kılın. JS'den style.setProperty ile güncelleyin. getComputedStyle ile okuyun. @property, yerel geçişleri mümkün kılar. Tek doğruluk kaynağı olarak tasarım belirteçlerini kullanın. Duyarlı belirteçler için medya sorgularında geçersiz kılın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“CSS Özel Özellikleri: Tanımlama ve Güncelleme” dersi ücretsiz mi?
Evet — “CSS Özel Özellikleri: Tanımlama ve Güncelleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“CSS Özel Özellikleri: Tanımlama ve Güncelleme” dersinde ne öğreneceğim?
:root üzerinde -- ile değişkenler tanımlayın, var() ile bunlara başvurun ve canlı tema oluşturmak için JavaScript ile dinamik olarak güncelleyin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“CSS Özel Özellikleri: Tanımlama ve Güncelleme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- CSS Özel Özellikleri: Tanımlama ve Güncelleme
- Geçişler: Özellik Süre Zamanlama
- @keyframes Animasyonları
- prefers-reduced-motion Tercihine Uyma