Yalnızca birkaç tık uzağınızda, CSS'nizi Houdini boyama işcıklarıyla güçlendirebilirsiniz.
CSS Houdini, geliştiricilere çok daha fazla kontrol ve güç sağlayan bir dizi alt düzey tarayıcı API'sini açıklar. emin olun.
Houdini, Typed Object ile daha fazla anlamsal CSS sağlar Model. Geliştiriciler şunları yapabilirler: gelişmiş CSS özel özelliklerini söz dizimi, varsayılan değerler ve devralma ile Özellikler ve Değerler API'si.
Ayrıca boyama, düzen ve animasyon özelliklerini işletimleri, saldırıya uğrayan sayesinde yazarların stil ve düzen sürecine dahil olmasını kolaylaştırarak olanakların dünyasının kapılarını açıyoruz. tarayıcının oluşturma motorundan yararlanır.
Houdini işletlerini anlama
Houdini iş akışları, ana iş parçacığında çalışan tarayıcı talimatlarıdır ve gerekir. Worklets, belirli görevleri gerçekleştirmek için modüler CSS yazmanıza olanak tanır ve tek bir JavaScript'in bir satırı olmalı ve bu kod içe aktarılmalıdır. CSS stili için Service Worker'lar gibi, Houdini iş akışları ve kaydedildikten sonra CSS'nizde ada göre kullanılabilir.
İşlet dosyası yazma Çalışma programı modülü (CSS.paintWorklet.addModule(workletURL)) İş akışı kullan
(background: paint(confetti))
CSS Painting API ile kendi özelliklerinizi uygulama
CSS Painting API, bu tür bir (Boya çalışma alanı) içerir ve geliştiricilerin tuval benzeri özel boyama işlevleri tanımlamasını sağlar. Bunlar doğrudan CSS'de arka plan, kenarlık, maske vb. olarak kullanılabilecek. Dünyanın dört bir yanından olanaklarından bahsedeceğiz.
Örneğin, tarayıcının açılı kenarlıklar özelliğini uygulamasını beklemek yerine veya yayınlanmış mevcut bir çalışma uygulamasını kullanabilirsiniz. Bu durumda, kenarlık yarıçapını kullanmak yerine bu iş akışını 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 ve W3C spesifikasyonu bulunmaktadır. yardımcı olur. Şu anda tüm Chromium tabanlı tarayıcılarda kısmen etkin ve Firefox için değerlendirilmektedir.
Ancak, tam tarayıcı desteği olmasa bile Houdini Paint API ile yaratıcılığınızı ortaya çıkarabilir ve CSS Paint ile stilleriniz tüm modern tarayıcılarda çalışır Çoklu dolgu. Ayrıca, birkaç benzersiz Ayrıca, ekibim bir kaynak ve çalışma alanı kitaplığı sağlamak için houdini.how.
Houdini.how
Houdini.how, Houdini iş akışları ve kaynakları için bir kitaplık ve referanstır. Google CSS Houdini hakkında bilmeniz gereken her şeyi sağlıyor: tarayıcı desteği, Çeşitli API'lerine, kullanımına genel bakış bilgiler, ek kaynaklar ve canlı boyama iş akışı örnek. Houdini.how'daki her örnek, CSS Paint API tarafından desteklenmektedir. hepsi tüm modern tarayıcılarda çalışır. Deneyin!
Houdini'yi kullanma
Houdini iş akışları bir sunucu aracılığıyla yerel olarak veya üretimde HTTPS üzerinden çalıştırılmalıdır. Bu amaçla Houdini Worklet ile çalışıyorsanız, uygulamayı yerel olarak yüklemeniz veya bir içerik yayınlama yöntemini kullanmanız ağında (CDN) unpkg gibi bir adla adlandırın. Daha sonra bu bilgileri yerel olarak çalışır.
Houdini.how sergi çalışma alanlarını kendi web projelerinize dahil etmenin birkaç yolu vardır. Şunları yapabilirler: CDN aracılığıyla kullanılır veya npm modülleridir. Her iki durumda da, CSS Paint Polyfill'i dahil ederek tarayıcılarla uyumlu olmasını sağlayın.
1. CDN ile prototip oluşturma
unpkg'den kaydolurken, yerel olarak işlem yapmanıza gerek kalmadan doğrudan Worklet.js dosyasına bağlantı oluşturabilirsiniz. yükleyeceğiz. Unpkg, ana komut dosyası olarak Worklet.js dosyasına çözümlenir veya bunu belirtebilirsiniz. kendiniz. 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 kaydetmediğini unutmayın. Bunun yerine her biri, iş akışına yerleştirilmiş yedek değerlere sahiptir.
Özel özellikleri isteğe bağlı olarak kaydetmek için mülkler.js dosyasını da ekleyin.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
CSS Paint Polyfill'i unpkg ile eklemek için:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. NPM aracılığıyla iş akışlarını yönetme
npm'den iş parçanızı yükleme:
npm install <package-name>
npm install css-paint-polyfill
Bu paket içe aktarıldığında boyama iş akışına otomatik olarak yerleştirilmez. İş uygulamasını yüklemek için paketin Worklet.js dosyasına çözümlenen bir URL oluşturmanız ve bunu kaydetmeniz gerekir. Google Örneğin:
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm paket adı ve bağlantısı her iş akışı kartında bulunabilir.
Ayrıca, CSS Paint Polyfill'i komut dosyası aracılığıyla eklemeniz veya olduğu gibi doğrudan içe aktarmanız gerekir. tercih edebilirsiniz.
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 çalışma alanı barındırmaz. Bunun yerine, topluluğun çalışmalarını öne çıkarır. Eğer göndermek istediğiniz bir iş parçacığınız veya kaynağınız varsa github'a bakın. kod deposu ekleyin. Ne düşündüğünüzü öğrenmekten memnuniyet duyarız!