CSS'nizi Houdini boyama iş parçacıklarıyla güçlendirmek için yalnızca birkaç tıklama yeterlidir.
CSS Houdini, geliştiricilere yazdıkları stiller üzerinde çok daha fazla kontrol ve güç veren bir dizi düşük düzey tarayıcı API'sini tanımlayan bir çatı terimidir.
Houdini, Türlendirilmiş Nesne Modeli ile daha semantik CSS'yi etkinleştirir. Geliştiriciler, Özellikler ve Değerler API'si aracılığıyla söz dizimi, varsayılan değerler ve devralma ile gelişmiş CSS özel özellikleri tanımlayabilir.
Ayrıca, yazarların tarayıcı oluşturma motorunun stil ve düzen sürecine bağlanmasını kolaylaştırarak bir olasılıklar dünyasını açan boyama, düzen ve animasyon worklet'lerini de kullanıma sunar.
Houdini işletlerini anlama
Houdini iş parçacıkları, ana ileti dizisinde çalışan ve gerektiğinde çağrılabilecek tarayıcı talimatlarıdır. Worklet'ler, belirli görevleri gerçekleştirmek için modüler CSS yazmanızı sağlar ve içe aktarmak ve kaydetmek için tek bir JavaScript satırı gerektirir. CSS stili için hizmet işçilerine benzer şekilde, Houdini iş parçacıkları da uygulamanıza kaydedilir ve kaydedildikten sonra CSS'nizde adlarına göre kullanılabilir.
Worklet dosyası yazma Worklet modülü kaydetme (CSS.paintWorklet.addModule(workletURL)) Worklet kullanma (background: paint(confetti))
CSS Painting API ile kendi özelliklerinizi uygulama
CSS Painting API böyle bir iş akışına (Boya iş akışı) bir örnektir ve geliştiricilerin doğrudan CSS'de arka plan, kenarlık, maske vb. olarak kullanılabilecek tuval benzeri özel boyama işlevleri tanımlamasına olanak tanır. CSS Paint'i kendi kullanıcı arayüzünüzde kullanabileceğiniz birçok yöntem vardır.
Örneğin, tarayıcının açılı kenarlıklar özelliğini uygulamasını beklemek yerine kendi Boya çalışma çalışmanızı yazabilir veya yayınlanmış mevcut bir iş uygulamasını kullanabilirsiniz. Ardından, border-radius yerine bu çalışma aletini kenarlıklara ve kırpma işlemlerine uygulayın.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
CSS Painting API, şu anda en iyi desteklenen Houdini API'lerinden biridir ve spesifikasyonu W3C öneri adayı olarak kabul edilir. Bu özellik şu anda tüm Chromium tabanlı tarayıcılarda etkindir, Safari'de kısmen desteklenir ve Firefox için değerlendirilmektedir.
Ancak tam tarayıcı desteği olmasa bile Houdini Paint API ile yaratıcılığınızı göstermeye devam edebilir ve stillerinizin CSS Paint Polyfill ile tüm modern tarayıcılarda çalıştığını görebilirsiniz. Ekibim, birkaç benzersiz uygulamayı sergilemek ve kaynak ile iş akışı kitaplığı sağlamak için houdini.how'u oluşturdu.
Houdini.how
Houdini.how, Houdini iş parçacıkları ve kaynakları için bir kitaplık ve referanstır. CSS Houdini hakkında bilmeniz gereken her şeyi içerir: tarayıcı desteği, çeşitli API'lerine genel bakış, kullanım bilgileri, ek kaynaklar ve canlı boyama iş aleti örneklerine sahiptir. Houdini.how'daki her örnek CSS Paint API tarafından desteklenir. Yani her biri tüm modern tarayıcılarda çalışır. Denemeye ne dersiniz?
Houdini'yi kullanma
Houdini iş parçacıkları yerel olarak bir sunucu üzerinden veya üretimde HTTPS üzerinden çalıştırılmalıdır. Bir Houdini işleti ile çalışmak için, dosyayı yerel olarak yüklemeniz veya dosyaları sunmak için unpkg gibi bir içerik yayınlama ağı (CDN) kullanmanız gerekir. Ardından, iş parçacığını yerel olarak kaydetmeniz gerekir.
Houdini.how sergi çalışma alanlarını kendi web projelerinize dahil etmenin birkaç yolu vardır. Bunlar, prototip oluşturma amacıyla bir CDN üzerinden kullanılabilir veya npm modüllerini kullanarak worklet'leri kendiniz yönetebilirsiniz. Her iki durumda da, tarayıcılar arası uyumlu olduklarından emin olmak için CSS Paint Polyfill'i de eklemeniz gerekir.
1. CDN ile prototip oluşturma
unpkg'den kayıt yaparken, workleti yerel olarak yüklemenize gerek kalmadan doğrudan worklet.js dosyasına bağlantı oluşturabilirsiniz. Unpkg, ana komut dosyası olarak Worklet.js dosyasına çözümlenir veya bunu kendiniz belirtebilirsiniz. Unpkg, HTTPS üzerinden sunulduğu için CORS sorunlarına neden olmaz.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Bunun, söz dizimi ve yedek değerler için özel özellikleri kaydettirmediğini unutmayın. Bunun yerine, her biri çalışma modülüne yerleştirilmiş yedek değerlere sahiptir.
İsteğe bağlı olarak özel mülkleri kaydetmek için properties.js dosyasını da ekleyin.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
CSS Paint Polyfill'i unpkg ile dahil etmek için:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. NPM üzerinden iş parçacıklarını yönetme
Worklet'inizi npm'den yükleyin:
npm install <package-name>
npm install css-paint-polyfill
Bu paketin içe aktarılması, boya çalışma aletini otomatik olarak eklemez. Çalışma alanını yüklemek için paketin worklet.js dosyasına yönlendiren bir URL oluşturmanız ve bu URL'yi kaydetmeniz gerekir. Bunu şu şekilde yapabilirsiniz:
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm paketi adı ve bağlantısı her çalışma sayfası kartında bulunur.
Ayrıca, CSS Paint Polyfill'i bir çerçeve veya paketleyiciyle yaptığınız gibi komut dosyası aracılığıyla eklemeniz ya da doğrudan içe aktarmanız gerekir.
Aşağıda, modern paketleyicilerde Houdini'nin boya çoklu dolgusu ile nasıl kullanılacağına dair bir örnek verilmiştir:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Katkıda bulun
Houdini'den örnek parçalarla denemeler yaptığınıza göre artık kendi Houdini'nizi hazırlama sırası sizde. Houdini.how, herhangi bir iş parçacığı barındırmaz. Bunun yerine, topluluğun çalışmalarını sergiler. Göndermek istediğiniz bir iş parçası veya kaynağınız varsa katkı yönergelerinin yer aldığı github deposuna göz atın. Hazırlayacağınız tasarımları görmek isteriz.