CSS'nizi Houdini boya iş parçacıklarıyla güçlendirmenize sadece birkaç tıklamayla başlayabilirsiniz.
CSS Houdini, geliştiricilere yazdıkları stiller üzerinde çok daha fazla kontrol ve güç veren bir dizi alt düzey tarayıcı API'sini tanımlayan bir genel terimdir.
Houdini, Typed Object Model 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 devralmayla gelişmiş CSS özel mülkleri tanımlayabilir.
Ayrıca, yazarların tarayıcı oluşturma motorunun stil ve düzen sürecine uyum sağlamasını kolaylaştırarak, olasılıklarla dolu bir dünyanın kapılarını açan boya, düzen ve animasyon iş akışlarını da kullanıma sunar.
Houdini iş uygulamalarını anlama
Houdini iş akışları, ana iş parçacığından ayrılan tarayıcı talimatlarıdır ve gerektiğinde çağrılabilir. İş uygulamaları, belirli görevleri gerçekleştirmek için modüler CSS yazmanızı sağlar, içe aktarma ve kayıt işlemleri için tek bir JavaScript satırı gerektirir. CSS stili için Service Worker'lara çok benzer şekilde Houdini iş akışları da uygulamanıza kaydedilir ve kaydedildikten sonra CSS'nizde adıyla kullanılabilir.
İş uygulaması dosyasına yaz İş uygulaması modülünü kaydet (CSS.paintWorklet.addModule(workletURL)) İş uygulamasını kullan
(background: paint(confetti))
CSS Painting API ile kendi özelliklerinizi uygulama
CSS Painting API, bu tür bir iş akışına (Boya iş uygulaması) bir örnektir ve geliştiricilerin doğrudan CSS'de arka plan, kenarlık, maske ve daha fazlası olarak kullanılabilecek tuval benzeri özel boyama işlevleri tanımlamasına olanak tanır. CSS Paint'i kendi kullanıcı arayüzlerinizde nasıl kullanabileceğiniz konusunda sayısız olanak var.
Örneğin, bir tarayıcının açılı kenarlıklar özelliğini uygulamasını beklemek yerine kendi Boyama iş akışınızı yazabilir veya mevcut bir yayınlanmış iş öğesini kullanabilirsiniz. Ardından, kenarlık yarıçapı kullanmak yerine bu iş öğesini kenarlıklara ve kırpmaya 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. Bu API'nin spesifikasyonu, W3C adayı önerisidir. Şu anda Chromium tabanlı tüm tarayıcılarda etkin durumdadır, Safari'de kısmen desteklenmektedir ve Firefox için de 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ı sergilemenin yanı sıra, bir kaynak ve iş programı kitaplığı sağlamak için houdini.how'u oluşturdu.
Houdini.how
Houdini.how, Houdini iş akışları ve kaynakları için bir kitaplık ve referanstır. CSS Houdini hakkında bilmeniz gereken her şeyi burada bulabilirsiniz: tarayıcı desteği, çeşitli API'lere genel bakış, kullanım bilgileri, ek kaynaklar ve canlı boyama iş akışı örnekleri. Houdini.how'daki her örnek CSS Paint API tarafından desteklenir. Yani her örnek tüm modern tarayıcılarda çalışır. Denemeye başlayın.
Houdini'yi kullanma
Houdini iş akışları yerel olarak bir sunucu aracılığıyla veya üretimde HTTPS üzerinden çalıştırılmalıdır. Bir Houdini iş uygulaması ile çalışmak için iş uygulamasını yerel olarak yüklemeniz veya dosyaları sunmak için unpkg gibi bir içerik yayınlama ağı (CDN) kullanmanız gerekir. Ardından, iş akışını yerel olarak kaydetmeniz gerekir.
Houdini.how vitrin işcıklarını kendi web projelerinize dahil etmenin birkaç yolu vardır. Bunlar prototip oluşturma kapasitesiyle CDN üzerinden kullanılabilir veya npm modüllerini kullanarak iş akışlarını kendi başınıza yönetebilirsiniz. Her iki durumda da, tarayıcılar arası uyumlu olmalarını sağlamak için CSS Paint Polyfill'i de eklemeniz gerekir.
1. CDN ile prototip oluşturma
unpkg'dan kaydolurken, iş öğesini yerel olarak yüklemenize gerek kalmadan doğrudan worklet.js dosyasına bağlantı oluşturabilirsiniz. Unpkg, ana komut dosyası olarak worklet.js'yi çözer. Bu dosyayı kendiniz de 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ğerlere ilişkin özel özellikleri kaydetmediğini unutmayın. Bunun yerine, her birinin iş akışına yerleştirilmiş yedek değerleri vardır.
İsteğe bağlı olarak özel özellikleri kaydetmek için property.js dosyasını da ekleyin.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
unpkg ile CSS Paint Polyfill'i dahil etmek için:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. AİOY aracılığıyla iş akışlarını yönetme
İş yükünüzü npm'den yükleyin:
npm install <package-name>
npm install css-paint-polyfill
Bu paketin içe aktarılması, boyama işini otomatik olarak yerleştirmez. İş uygulamasını yüklemek için paketin worklet.js dosyasına çözümlenen bir URL oluşturmanız ve bunu kaydetmeniz gerekir. Bunu şu şekilde yaparsınız:
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm paket adı ve bağlantısı her iş uygulaması kartında bulunabilir.
Ayrıca, CSS Paint Polyfill'i komut dosyası aracılığıyla eklemeniz veya bir çerçeve veya paketleyicide olduğu gibi doğrudan içe aktarmanız gerekir.
Houdini'yi modern paketleyicilerde boya çoklu dolgusu ile nasıl kullanabileceğinize dair bir örnek:
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'nin örneklerinden birini denediniz. Şimdi kendi örneğinizi ekleme sırası sizde. Houdini.how, herhangi bir iş parçası barındırmıyor, bunun yerine topluluğun çalışmalarını sergiliyor. Göndermek istediğiniz bir iş uygulamanız veya kaynağınız varsa katkı yönergelerinin yer aldığı github deposuna göz atın. Nasıl bir fikir alacağınızı öğrenmekten memnuniyet duyarız.