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