Typed OM

CSS Typed OM ile tip güvenli değerleri öğrenirsin.

Typed OM nedir?

CSS Typed OM, değerleri dize yerine nesne olarak verir. element.computedStyleMap().get('width') bir CSSUnitValue döndürür; .value sayıyı, .unit birimi verir.

Bu, dize ayrıştırma maliyetini ortadan kaldırır ve tip güvenliği sağlar. Artık '16px' dizesini eliyle bölmen gerekmez; tarayıcı hazır bir nesne verir. Böylece animasyon hesaplarında hata yapma riski düşer.

CSSUnitValue ve CSSNumericValue

CSSUnitValue, en yaygın değer türüdür: { value: 16, unit: 'px' } gibi. CSSNumericValue temel sınıftır; add, sub, mul yöntemleriyle tip güvenli matematik yaparsın.

Örneğin width.add(CSS.px(10)) yeni bir değer nesnesi döndürür; dize ayrıştırmadan. Bu, hesaplama yoğun animasyonlarda fark yaratır.

Uygulama Tipli değişkenle geçiş yaz

Aşağıdaki CSS'i tamamla. .pulse bildiriminde transition: --pulse-color 0.4s ease ve background: var(--pulse-color) olsun. (--pulse-color daha önce @property ile tipli kaydedildi.)

Örnek çözümü göster

/* tipli değişkenle geçiş */
.pulse {
  transition: --pulse-color 0.4s ease;
  background: var(--pulse-color);
}

Kendini test et

CSSUnitValue'nin .unit alanı ne verir?
```
const v = el.computedStyleMap().get('width');
/* .unit ne verir? */
```
- Ham bir sayıyı
- Değerin birimini (px, %, vb.)
- Seçici adını
- Worklet adını
Cevabı göster

Değerin birimini (px, %, vb.) — Doğru. .unit, 'px' ya da '%' gibi birim dizesini verir.

Hesaplanan genişliğin sayısını al

const w = el.computedStyleMap().get('width');
const px = w.____;

Cevabı göster

const w = el.computedStyleMap().get('width');
const px = w.value;

Typed OM kavramlarını eşle

computedStyleMap

Hesaplanan değerleri verir
CSSUnitValue

Sayı + birim nesnesi
.value

Sayısal kısım
.unit

Birim dizesi

Sıradaki ders: Özet - Özel arka plan deseni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler