0Pricing
CSS Academy · Ders

CSS Özellikleri ve Değerleri API'si (@property)

Animasyon uygulanabilir CSS değişkenleri için özel özellikleri türleri ve kalıtımlarıyla birlikte @property kullanarak kaydedin.

CSS Özellikleri ve Değerleri API'si (@property), CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

@property Nedir?

@property, bir özel özelliği tür, kalıtım davranışı ve başlangıç değeriyle kaydetmenin CSS yoludur. CSS Properties and Values API'nin (CSS.registerProperty) bildirimsel biçimidir.

@property Söz Dizimi

Bir özel özelliği üç gerekli tanımlayıcıyla kaydedin:

<div class="box"></div>

Söz Dizimi Tanımlayıcısı

syntax tanımlayıcısı, CSS tür adlarını kullanarak özelliğin türünü tanımlar:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — herhangi bir değeri kabul eder (kayıtlı olmayan özellikler gibi)

Kalıtım Tanımlayıcısı

Özelliğin DOM boyunca kalıtılıp kalıtılmayacağını denetler. Öğe başına yalıtılması gereken özellikler için false olarak ayarlayın.

Başlangıç Değeri Tanımlayıcısı

Özellik ayarlanmadığında garanti edilen bir başlangıç değeri sağlar. Bu, özelliğin canlandırılabilmesini mümkün kılar.

Özel Özellikleri Canlandırma

@property'nin temel avantajı şudur: Kayıtlı özel özellikler, tarayıcı türlerini bildiği ve değerler arasında ara değer hesaplayabildiği için geçiş ve animasyonlarda kullanılabilir:

<div class="element is-hovered"></div>

@property Olmadan

Kayıt yapılmadığında CSS, özel özellik türlerini bilmez. İki değişken değeri arasındaki geçişler ara değer hesaplamak yerine birdenbire değişir — tarayıcı bilinmeyen bir türün orta noktasını hesaplayamaz.

Degrade Animasyonu için @property

Degrade duraklarının canlandırılması (önceden @property olmadan mümkün değildi):

<div class="loader loading"></div>

JavaScript Karşılığı

Özellikleri JavaScript API'sini kullanarak da kaydedebilirsiniz:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Tarayıcı Desteği

@property, Chrome 85+, Edge 85+, Safari 16.4+ ve Firefox 128+ sürümlerinde desteklenir. Modern tarayıcılarda geniş ölçüde kullanılabilir.

@property için Uygulamalı Kullanımlar

Yaygın kullanım alanları:

  • Degrade konumlarını ve renklerini canlandırma
  • HSL renklerinde ton/doygunluğu canlandırma
  • İlerleme çubuğu dolgu animasyonları
  • Sayıların görünmesi için sayaç animasyonları
  • Renk belirteci animasyonları aracılığıyla koyu/açık tema arasında yumuşak geçişler

Hızlı Kontrol

CSS özel özelliklerini canlandırmak için neden @property gerekir?

Özet

@property, özel özellikleri bir syntax türü, inherits bayrağı ve initial-value ile kaydeder. Kayıtlı özellikler, tarayıcı tür bilgili değerleri arasında ara değer hesaplayabildiği için canlandırılabilir ve geçişlerde kullanılabilir. Bu, kaydedilmemiş özel özelliklerle mümkün olmayan degrade animasyonlarını, ton geçişlerini ve sayaç animasyonlarını mümkün kılar.

Sıkça Sorulan Sorular

“CSS Özellikleri ve Değerleri API'si (@property)” dersi ücretsiz mi?

Evet — “CSS Özellikleri ve Değerleri API'si (@property)” 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“CSS Özellikleri ve Değerleri API'si (@property)” dersinde ne öğreneceğim?

Animasyon uygulanabilir CSS değişkenleri için özel özellikleri türleri ve kalıtımlarıyla birlikte @property kullanarak kaydedin. CSS 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.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS 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 2. dersidir.

“CSS Özellikleri ve Değerleri API'si (@property)” 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS 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

  1. CSS Türlenmiş Nesne Modeli (OM)
  2. CSS Özellikleri ve Değerleri API'si (@property)
  3. CSS Paint API'si: Worklet'ler
  4. CSS Yerleşim API'si ve Kapsam
← CSS Academy Sayfasına Dön