!Önemli olan #13: @function, alpha(), CSS Wordle ve Daha Fazlası

Ustalıkla açıklanan CSS işlevleri

Jane Ori, CSS işlevlerinin nasıl çalıştığını ustalıkla açıkladı. @function muhtemelen bu yıl Baseline olacak en büyük CSS özelliği olacak, bu yüzden ilk başta kesinlikle biraz korkutucu buldum. Yani, Jane'in bebek adım adım izlenecek yolunu okuyana kadar, bu sizi gerçekten çok iyi kolaylaştırıyor.

Ayrıca Declan Chidlow, gelecekte hızlı başvuru için favorilerinize eklemek isteyebileceğiniz @function belgelerimizi de yazdı.

Fonksiyonlardan bahsetmişken, alpha() fonksiyonu beni şaşırttı. Birincisi, bunu duymadığım için ve ikincisi, çünkü… neden? Alfa kanalını zaten değiştirebiliriz:

/* Bu */ color: alpha(var(--color) / 0.5'ten); /* Bunun yerine */ color: oklch(from var(--color) l c h / 0.5);

Jason Leo'nun bu yorumu her şeyi özetliyor. İlk olarak, halihazırda CSS değişkenlerimiz varken renk değerlerini sabit kodlamamıza gerek kalmayacağı anlamına gelir. Yıllardır yalnızca gerçek değerleri CSS değişkenlerinde saklayarak bunu atlattım, ancak bunları her seferinde renk fonksiyonuna sarmak zorunda kalmak gerçekten monoton:

Gelecekte Ne Bekleniyor?

/* Yalnızca değerler */ --color: 0,65 0,23 230; /* Sonra bunları esnek bir şekilde kullanın */ color: oklch(var(--color)); renk: oklch(var(--color) / 0,5);

Ama bundan daha iyi (bence):

/* Fonksiyon ve değerler */ --color: oklch(0,65 0,23 230); /* Keyifli */ color: var(--color); /* Hoş olmayan */ color: oklch(var(--color) l c h / 0.5'ten);

alpha() her iki dünyanın da en iyisini sunar:

Nasıl Önlem Alınmalı?

/* Daha az keyifsiz */ color: alpha(from var(--color) / 0.5);

İkinci olarak, renk formatı bu bağlamda aslında önemsizdir, dolayısıyla alpha(from var(--color) / 0.5), oklch(from var(--color) l c h / 0.5)'in yaptığından daha net bir şekilde niyeti iletir. Ayrıca beyanı doğası gereği daha kısa hale getirir.

Teknik Analiz

Alpha()'yı gündeme getirdiği için Adam Argyle'a teşekkür ederiz.

Izgara Şeritleri için Saha Rehberi

Önemli Gelişmeler

WebKit, Izgara Şeritleri için Alan Kılavuzunu (önceden CSS duvar düzeni olarak biliniyordu) kullanıma sundu. CSS Püf Noktaları Kılavuzlarımızdan birini okuduysanız, buna benzer (onların sözleri - sadece söylüyorum). Çeşitli barebone'lar ve gerçek dünya demolarıyla akıcı bir giriş.

Detaylar ve Etkileri