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ş parçacıklarını 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, bu tür bir çalışma alanına (Paint çalışma alanı) örnektir ve geliştiricilerin doğrudan CSS'de arka plan, kenarlıklar, maskeler ve daha fazlası olarak kullanılabilecek kanvas 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, bir tarayıcının açılı kenarlıklar özelliğini uygulamasını beklemek yerine kendi Paint iş parçacığınızı yazabilir veya yayınlanmış bir iş parçacığı 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. Ş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ı konuşturabilir ve CSS Paint Polyfill ile stillerinizin 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. Houdini iş parçacığı ile çalışmak için yerel olarak yüklemeniz veya dosyaları yayınlamak 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 showcase iş parçacıkları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ı uyumluluğu sağlamak 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ını çözer veya bunu kendiniz belirtebilirsiniz. Unpkg, HTTPS üzerinden sunulduğundan 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. Çalışma öğelerini NPM üzerinden 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.
Houdini'nin modern paketleyicilerde paint polyfill ile nasıl kullanılacağına dair bir örnek aşağıda 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
Bazı Houdini örnekleriyle oynadıktan sonra, kendi katkınızı sunma sırası sizde. Houdini.how, herhangi bir çalışma modülü 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.