Bu sayfa, Cloud Translation API ile çevrilmiştir.

Houdini - CSS'nin Açıklanması

Surma

CSS'nin ne kadar iş yaptığını hiç düşündünüz mü? Tek bir özelliğine sahip olursunuz ve aniden web sitenizin tamamı farklı bir düzende görünür. İnsanların bir tür sihir. Web geliştiricileri topluluğu olarak şimdiye kadar yalnızca sihre tanık olup gözlemleyebiliyorduk. Herkesin düşüncelerini kendi sihrimize ne dersiniz? Peki ya sihirbaz olmak istersek?

Houdini'ye girin!

Houdini görev gücü; Mozilla, Apple, Opera, Microsoft, HP, Intel ve Google birlikte çalışarak bilgisayar kurallarının belirli kısımlarını Web geliştiricileri için CSS motoru. Görev gücü; Çevik ekiplerin iş birliği taslakları oluşturarak bunların W3C tarafından kabul edilmesini sağlamak yardımcı olur. Kendilerine bazı üst düzey hedefler belirlediler ve bunları daha fazla destekleyici içerik barındıran ve destekleyicilerin yanı sıra alt düzey spesifikasyon taslakları.

Bu taslakların bir araya getirilmesiyle kastedilen, "Houdini". Bu yazının yazıldığı sırada taslak listesi eksik ve taslakların bazıları yalnızca yer tutuculardan ibarettir.

Spesifikasyonlar

İş akışları (spec)

İş akışları tek başlarına kullanışlı değildir. Bunlar, projeyi sonraki taslakların çoğunu mümkün kılmaya çalışın. Görevleri atarken aklınıza Web İşçileri okumayı öğrenmeniz gerekir. Kavramlar birbiriyle birçok şekilde çakışıyor. Peki neden çalışanlarımız varken yeni bir şey düşünebiliriz.

Houdini'nin hedefi yeni API'ler sunmak Böylece web geliştiricilerinin kendi kodlarını CSS motoruna ve mevcut olan sistemdir. Bunlardan bazılarının başarıları için yüksek olduğundan kod parçalarının her. bekar. çerçeve. Bazılarının iyi bir örnek. Web çalışanı spesifikasyonundan alıntı:

Bu, web çalışanlarının Houdini'nin yapmayı planladığı şeylere uygun olmadığı anlamına geliyor. Bu nedenle iş akışları icat edildi. Worklets, ES2015 sınıflarını kullanarak şunları tanımlar: yöntemlerin bir koleksiyonudur. Bu yöntemlerin imzaları, iş akışının türünü belirler. Bu cihazlar hafif ve kısa ömürlüdür.

CSS Paint API (özellikler)

Paint API, Chrome 65'te varsayılan olarak etkindir. Şunu okuyun: tanıtım.

Birleştirici iş akışı

Burada açıklanan API artık kullanılmıyor. Birleştirici iş akışında yeniden tasarlandı ve "Animasyon İş Akışı" olarak öneriliyor. Daha fazla bilgi için: API'nin mevcut yinelemesi.

Birleştirici iş akışı özellikleri WICG'ye taşınmış olsa da ama yine de beni en çok heyecanlandıran özellik bu. Biraz işlemler, CSS tarafından bilgisayarınızın grafik kartına devredilir Ancak bu, hem grafik kartınıza hem de Google Play Store'daki genel.

Tarayıcı genellikle DOM ağacını alır ve belirli ölçütlere bağlı olarak dallara ve alt ağaçlara kendi katmanını vermeye karar veriyor. Bu alt ağaçlar kendilerini boyarlar (belki zeminde bir boya işçisi . Son adım olarak, şu anda boyanmış olan tüm bu bağımsız katmanlar üst üste dizilir z endekslerine, 3D dönüşümlerine ve 3D dönüşümlerine uygun ekranda görünen son resmi üretmek için bunu kullanabilirsiniz. Bu süreç birleştirme olarak adlandırılır ve birleştirici tarafından yürütülür.

Birleştirme işleminin avantajı, tüm belgeleri tek bir yerde Sayfa biraz kaydırıldığında öğeler kendi kendine yeniden boyanır. Bunun yerine önceki karedeki katmanları yeniden kullanabilir ve birleştiriciyi yeni kareyle güncellenen kaydırma konumuna gidin. Bu sayede işlemler hızlanır. Bu, 60 fps'ye ulaşmamıza yardımcı olur.

Adından da anlaşılacağı gibi, birleştirici iş akışı, birleştiriciyi kolayca bağlamanızı bir öğe katmanının, önceden boyanmış üst üste yerleştirilir ve diğer katmanların üzerine yerleştirilir.

Daha düşük fiyatla özel olarak, tarayıcıya birleştirmeyle ilgilenmek istediğinizi belirli özelliklere erişim isteğinde bulunabilir. Örneğin, kaydırma konumu, transform veya opacity. Bu işlem, öğeyi ve her karede kodunuz çağrılır. Katmanınızı taşıyabilirsiniz Katmanların dönüştürülmesi ve özelliklerinin değiştirilmesi (ör. opacity) Bu özellik, 60 kare/saniyede etkileyici ve şık oyunlar yapmanızı sağlıyor.

Birleştiriciyi kullanarak paralaks kaydırmaya ilişkin eksiksiz bir uygulama örneğini burada bulabilirsiniz yapabilirsiniz.

// main.js
window.compositorWorklet.import('worklet.js')
    .then(function() {
    var animator = new CompositorAnimator('parallax');
    animator.postMessage([
        new CompositorProxy($('.scroller'), ['scrollTop']),
        new CompositorProxy($('.parallax'), ['transform']),
    ]);
    });

// worklet.js
registerCompositorAnimator('parallax', class {
    tick(timestamp) {
    var t = self.parallax.transform;
    t.m42 = -0.1 * self.scroller.scrollTop;
    self.parallax.transform = t;
    }

    onmessage(e) {
    self.scroller = e.data[0];
    self.parallax = e.data[1];
    };
});

Robert Flack, şu sayfa için bir çoklu dolgu yazdı: kompozitör iş akışını kullanarak deneyin. Karmaşık bir boyut performansı artırır.

Düzen iş akışı (özellik)

İlk gerçek spesifikasyon taslağı önerildi. Uygulama kısa bir süre sonra başlayabilirsiniz.

Yine, bu yöntemin spesifikasyonu pratik olarak boş olsa da, konsept İlginç: kendi düzeninizi yazın! Düzen iş akışı, bir öğeyi ayarlamak için display: layout('myLayout') yapmanız ve bir düğümün alt öğeleri de ekleyebilirsiniz.

Elbette, CSS'nin flex-box düzeninin tam bir JavaScript uygulaması çalıştırılarak eşdeğer bir yerel uygulama çalıştırmaktan daha yavaştır ancak kesmeden performans artışı sağlayabileceği bir senaryo hayal edin. Şunu hayal edin: Windows 10 veya duvar tarzı bir duvar gibi döşemelerden başka hiçbir şey içermeyen web sitesi kullanır. Mutlak ve sabit konumlandırma kullanılmıyor. Ne z-index ne de . öğeler çakışmaz veya herhangi bir şekilde sınırlanır ya da taşar. Atlayabilme tüm bu kontroller size bir performans artışı sağlayabilir.

registerLayout('random-layout', class {
    static get inputProperties() {
        return [];
    }
    static get childrenInputProperties() {
        return [];
    }
    layout(children, constraintSpace, styleMap) {
        const width = constraintSpace.width;
        const height = constraintSpace.height;
        for (let child of children) {
            const x = Math.random()*width;
            const y = Math.random()*height;
            const constraintSubSpace = new ConstraintSpace();
            constraintSubSpace.width = width-x;
            constraintSubSpace.height = height-y;
            const childFragment = child.doLayout(constraintSubSpace);
            childFragment.x = x;
            childFragment.y = y;
        }

        return {
            minContent: 0,
            maxContent: 0,
            width: width,
            height: height,
            fragments: [],
            unPositionedChildren: [],
            breakToken: null
        };
    }
});

Yazılan CSSOM (spec)

Yazılan CSSOM (CSS Nesne Modeli veya Geçişli Stil Sayfaları Nesne Modeli) heyecanı duyduk. Bir JavaScript satırıyla örnekleyeyim:

    $('#someDiv').style.height = getRandomInt() + 'px';

Matematik yapıyoruz. Bir sayıyı dizeye dönüştürüyoruz. Böylece, birim eklemek için tarayıcı bu dizeyi ayrıştırır ve CSS motoru için tekrar bir sayıya dönüştürür. Bu durum, JavaScript ile dönüşümleri değiştirdiğinizde daha da çirkinleşir. Başka yok! CSS biraz yazacak.

Bu taslak daha olgun olanlardan biridir ve çoklu dolgu üzerine konuşacağız. (Sorumluluk reddi beyanı: Çoklu dolguyu kullanmak elbette daha da fazla işlem yükü ekler. Buradaki önemli nokta, planınızın ne kadar API)

Dizeler yerine bir öğenin StylePropertyMap üzerinde çalışırsınız. Her CSS özelliğinin kendine ait anahtarı ve karşılık gelen değer türü vardır. Öznitelikler width için değer türü LengthValue. LengthValue, em, rem, px, percent vb. tüm CSS birimlerinin sözlüğü. Ayar height: calc(5px + 5%) sonucu LengthValue{px: 5, percent: 5} verir. Biraz box-sizing gibi mülkler yalnızca belirli anahtar kelimeleri kabul eder ve bu nedenle KeywordValue değer türü. Ardından, bu özelliklerin geçerliliği kontrol çalışma zamanında.

<div style="width: 200px;" id="div1"></div>
<div style="width: 300px;" id="div2"></div>
<div id="div3"></div>
<div style="margin-left: calc(5em + 50%);" id="div4"></div>

var w1 = $('#div1').styleMap.get('width');
var w2 = $('#div2').styleMap.get('width');
$('#div3').styleMap.set('background-size',
    [new SimpleLength(200, 'px'), w1.add(w2)])
$('#div4')).styleMap.get('margin-left')
    // => {em: 5, percent: 50}

Özellikler ve değerler

(özellik)

CSS Özel Özellikleri'ni (veya resmi olmayan "CSS Değişkenleri") biliyor musunuz? Bunlar onlar gibi ama türleri de var. Şimdiye kadar, değişkenler yalnızca dize değerleri ve basit bir ara ve değiştir yaklaşımı kullanmıştı. Bu taslak, değişkenleriniz için yalnızca bir tür belirtin, ancak aynı zamanda varsayılan bir değer ve bir JavaScript API kullanarak devralma davranışını etkilemelidir. Teknik olarak bu özel özelliklerin standart CSS geçişleriyle canlandırılmasına da izin verir ve animasyon gibi görünüyor.

["--scale-x", "--scale-y"].forEach(function(name) {
document.registerProperty({
    name: name,
    syntax: "<number>",
    inherits: false,
    initialValue: "1"
    });
});

Yazı tipi metrikleri

Yazı tipi metrikleri, adından da anlaşılacağı üzeredir. Sınırlayıcı kutu (veya X dizesini Z boyutunda Y yazı tipiyle oluşturduğumda) nasıl kullanırım? Kullanırsam ne olur? yakut ek açıklamaları Bu e-postada çok fazla istekte bulundum ve Houdini sonunda gerçekleştireceksiniz.

Bir saniye, hepsi bu kadar da değil!

Houdini'nin taslaklar listesinde daha da fazla spesifikasyon var, ama bunların geleceği belirlemekten çok daha fazlasıdır. Örnekler arasında özel taşma davranışları, CSS söz dizimi uzantısı API'si, uzantı tüm bunları başarılı bir şekilde gerçekleştirmenizi sağlayan daha önce mümkün olmayan şeyleri web platformuna taşıdık.

Demolar

Demonun kodunu açık kaynaklı hale getirdim (çoklu dolgu kullanılarak hazırlanan canlı demo).