हुडीनी - सीएसएस की जानकारी देना

Surma

क्या आपने कभी सोचा है कि सीएसएस कितनी काम करती है? किसी एक एट्रिब्यूट को बदलने के बाद, अचानक आपकी पूरी वेबसाइट एक अलग लेआउट में दिखने लगती है. यह एक तरह का जादू है. अब तक, हम—वेब डेवलपर का समुदाय—सिर्फ़ इस जादू को देख पाए हैं और इसे अच्छी तरह समझ पाए हैं. क्या होगा अगर हम खुद ही अपना जादू शुरू करें? अगर हमें जादूगर बनना हो, तो क्या होगा?

Houdini डालें!

Houdini टास्क फ़ोर्स में Mozilla, Apple, Opera, Microsoft, HP, Intel, और Google के इंजीनियर शामिल हैं, जो वेब डेवलपर को CSS इंजन के कुछ हिस्से दिखाने के लिए साथ मिलकर काम करते हैं. टास्क फ़ोर्स ड्राफ़्ट के संग्रह पर काम कर रही है, ताकि उसे W3C के ज़रिए असल वेब स्टैंडर्ड के तौर पर स्वीकार किया जा सके. उन्होंने अपने लिए कुछ हाई-लेवल लक्ष्य तय किए, उन्हें खास ड्राफ़्ट में बदल दिया. इससे उनके साथ काम करने वाले, लोअर लेवल स्पेसिफ़िकेशन के ड्राफ़्ट तैयार हुए.

जब कोई व्यक्ति "हुडिनी" के बारे में बात करता है, तो इन ड्राफ़्ट का संग्रह होता है. लिखते समय, ड्राफ़्ट की सूची पूरी नहीं होती और कुछ ड्राफ़्ट सिर्फ़ प्लेसहोल्डर होते हैं.

विशेषताएं

वर्कलेट (spec)

वर्कलेट अपने-आप में काम के नहीं होते. ये एक कॉन्सेप्ट है, जिसकी मदद से बाद के कई ड्राफ़्ट को बनाया जा सकता है. "वर्कलेट" पढ़ते समय, अगर आपको वेब वर्कर के बारे में लगता है, तो यह सही है. इन विज्ञापनों में कई सारी चीज़ें एक तरह की होती हैं. जब हमारे पास पहले से ही कर्मचारी हैं, तो नई बात क्यों?

हुडीनी का मकसद नए एपीआई उपलब्ध कराना है, ताकि वेब डेवलपर अपने कोड को सीएसएस इंजन और आस-पास मौजूद सिस्टम में जोड़ सकें. यह मानना गलत होगा कि इनमें से कुछ कोड फ़्रैगमेंट, हर सिंगल फ़्रेम के हिसाब से चलाए जाएंगे. इनमें से कुछ नियम तय करके तय किए जा सकते हैं. वेब वर्कर स्पेसिफ़िकेशन को कोट करना:

इसका मतलब है कि हुडीनी जो काम करने की योजना बना रही हैं उसके लिए वेब वर्कर काम नहीं कर सकते. इस वजह से, वर्कलेट की शुरुआत हुई. वर्कलेट, उन तरीकों के कलेक्शन को तय करने के लिए ES2015 क्लास का इस्तेमाल करते हैं जिनके हस्ताक्षर, वर्कलेट के टाइप से पहले से तय होते हैं. ये वज़न में कम वज़न वाले होते हैं और कम समय तक चलते हैं.

CSS Paint API (spec)

Chrome 65 में, Paint API डिफ़ॉल्ट रूप से चालू होता है. ज़्यादा जानकारी देने वाला पेज पढ़ें.

कंपोज़िटर वर्कलेट

यहां जिस एपीआई के बारे में बताया गया है उसका वर्शन पुराना है. कंपोज़िटर वर्कलेट को फिर से डिज़ाइन किया गया है और अब इसे "ऐनिमेशन वर्कलेट" के रूप में प्रस्तावित किया गया है. एपीआई के मौजूदा वर्शन के बारे में ज़्यादा जानें.

कंपोज़िटर वर्कलेट की खास जानकारी को डब्ल्यूआईसीजी में भेज दिया गया है और इसके बाद इसे दोहराया जाएगा. यह वही खासियत है जो मुझे सबसे ज़्यादा उत्साहित करती है. कुछ कार्रवाइयां, सीएसएस इंजन की मदद से आपके कंप्यूटर के ग्राफ़िक कार्ड से आउटसोर्स होती हैं. हालांकि, यह आम तौर पर आपके ग्राफ़िक कार्ड और डिवाइस, दोनों पर निर्भर करता है.

आम तौर पर, ब्राउज़र डीओएम ट्री को कुछ खास शर्तों के आधार पर, कुछ ब्रांच और सबट्री को अपनी खुद की लेयर देने का फ़ैसला लेता है. ये सबट्री इस पर खुद पेंट कर देती हैं (हो सकता है कि आने वाले समय में पेंट वर्कलेट का इस्तेमाल किया जाए). आखिरी चरण में, ज़ेड-इंडिंक्स, 3D ट्रांसफ़ॉर्म वगैरह के हिसाब से, इन सभी अलग-अलग रंगों को अब पेंट किया जाता है और लेयर एक-दूसरे के ऊपर रखी जाती हैं. इस प्रोसेस को कंपोज़िटिंग कहा जाता है और कंपोज़िटर इस प्रोसेस को पूरा करता है.

कंपोज़िटिंग प्रोसेस का फ़ायदा यह है कि पेज को थोड़ा सा स्क्रोल करने पर आपको सभी एलिमेंट को फिर से पेंट करने की ज़रूरत नहीं पड़ती. इसके बजाय, पिछले फ़्रेम की लेयर का फिर से इस्तेमाल किया जा सकता है और स्क्रोल करने की अपडेट की गई पोज़िशन के साथ कंपोज़िटर को फिर से चलाया जा सकता है. इससे काम तेज़ी से होता है. इससे हमें 60fps तक पहुंचने में मदद मिलती है.

जैसा कि नाम से पता चलता है, कंपोज़िटर वर्कलेट आपको कंपोज़िटर में शामिल करने देता है और एलिमेंट की पहले से पेंट की जा चुकी लेयर की स्थिति को अन्य लेयर के ऊपर रखने और उसकी स्थिति तय करने के तरीके को प्रभावित करता है.

ज़्यादा सटीक जानकारी पाने के लिए, ब्राउज़र को बताएं कि आपको किसी खास डीओएम नोड के लिए कंपोज़िटिंग प्रोसेस में शामिल करना है. साथ ही, स्क्रोल पोज़िशन transform या opacity जैसे कुछ एट्रिब्यूट के ऐक्सेस का अनुरोध किया जा सकता है. ऐसा करने से यह एलिमेंट अपनी खुद की लेयर पर चला जाता है और हर फ़्रेम पर आपका कोड कॉल हो जाता है. आप लेयर में हेर-फेर करके, लेयर को एक जगह से दूसरी जगह ले जा सकते हैं और इसके एट्रिब्यूट (जैसे, opacity) को बदल सकते हैं. इसकी मदद से, 60 FPS (फ़्रेम प्रति सेकंड) पर शानदार काम किए जा सकते हैं.

कंपोज़िटर वर्कलेट का इस्तेमाल करके, पैरालैक्स स्क्रोलिंग के लिए पूरी जानकारी यहां दी गई है.

// 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];
    };
});

रॉबर्ट फ़्लैक ने कंपोज़िटर वर्कलेट के लिए एक polyfill लिखा है, ताकि आप इसे आज़मा सकें - और इसका परफ़ॉर्मेंस भी बहुत ज़्यादा असरदार होगा.

लेआउट वर्कलेट (spec)

पहले वास्तविक स्पेसिफ़िकेशन के ड्राफ़्ट का प्रस्ताव दिया गया है. लागू करना बेहतर है.

इसके लिए एक बार भी जानकारी नहीं दी गई है, लेकिन इसका कॉन्सेप्ट दिलचस्प है: अपना लेआउट खुद लिखें! लेआउट वर्कलेट से आपको display: layout('myLayout') करने और नोड के बॉक्स में नोड के चिल्ड्रेन को व्यवस्थित करने के लिए JavaScript को चलाने में मदद मिलती है.

बेशक, सीएसएस के flex-box लेआउट को पूरी तरह से लागू करने की प्रोसेस चलाना, उसी तरह के नेटिव लागू करने की तुलना में धीमा होता है. हालांकि, ऐसी स्थिति की कल्पना करना आसान है जिसमें अलग-अलग हिस्सों से परफ़ॉर्मेंस में सुधार हो सकता है. कल्पना कीजिए कि ऐसी वेबसाइट जिसमें टाइल के अलावा कुछ नहीं है, जैसे कि Windows 10 या मेसनरी-स्टाइल लेआउट. ऐब्सलूट और फ़िक्स्ड पोज़िशनिंग का इस्तेमाल नहीं किया जाता, न ही z-index होता है, न ही एलिमेंट कभी ओवरलैप करते हैं, न ही उनका किसी तरह का बॉर्डर या ओवरफ़्लो होता है. री-लेआउट पर इन सभी जांचों को छोड़ने पर, परफ़ॉर्मेंस बेहतर हो सकती है.

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
        };
    }
});

टाइप किया गया CSSOM (spec)

टाइप किया गया CSSOM (सीएसएस ऑब्जेक्ट मॉडल या कैस्केडिंग स्टाइल शीट ऑब्जेक्ट मॉडल), उस समस्या का हल है जिसका सामना हम शायद सभी को हो चुके हैं और हमने अभी-अभी उसे हल करना सीखा है. मुझे JavaScript की एक पंक्ति के साथ इसे समझाएं:

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

हम गणना कर रहे हैं, फिर किसी संख्या को स्ट्रिंग में बदल देते हैं, ताकि ब्राउज़र उस स्ट्रिंग को पार्स कर सके और फिर उसे सीएसएस इंजन के लिए वापस संख्या में बदल सके. जब JavaScript की मदद से बदलावों में बदलाव किया जाता है, तब यह और भी खराब हो जाता है. और नहीं! सीएसएस में कुछ टाइपिंग शुरू होने वाली है.

यह ड्राफ़्ट ज़्यादा परिपक्व में से एक है और polyfill पर पहले से काम किया जा रहा है. (डिसक्लेमर: पॉलीफ़िल का इस्तेमाल करने से साफ़ तौर पर, और भी कंप्यूटेशनल ओवरहेड जुड़ जाएगा. अहम बात यह दिखाती है कि एपीआई कितना आसान है.)

स्ट्रिंग के बजाय, एलिमेंट के StylePropertyMap पर काम किया जाएगा. यहां हर सीएसएस एट्रिब्यूट की अपनी कुंजी और वैल्यू टाइप की अपनी अलग-अलग वैल्यू होती हैं. width जैसे एट्रिब्यूट की वैल्यू टाइप में LengthValue होता है. LengthValue, em, rem, px, percent जैसी सभी सीएसएस यूनिट का डिक्शनरी है. height: calc(5px + 5%) को सेट करने पर LengthValue{px: 5, percent: 5} मिलेगी. box-sizing जैसी कुछ प्रॉपर्टी सिर्फ़ कुछ कीवर्ड को स्वीकार करती हैं. इसलिए, उनमें KeywordValue वैल्यू टाइप होती है. इसके बाद, रनटाइम के दौरान उन एट्रिब्यूट की वैधता की जांच की जा सकती है.

<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}

प्रॉपर्टी और वैल्यू

(spec)

क्या आपको सीएसएस कस्टम प्रॉपर्टी (या उनके गैर-आधिकारिक उपनाम "सीएसएस वैरिएबल") के बारे में पता है? यह वे ही हैं, लेकिन टाइप के साथ! अब तक, वैरिएबल में सिर्फ़ स्ट्रिंग वैल्यू हो सकती थीं और वे आसान खोज-और-बदलें वाले तरीके का इस्तेमाल करते थे. इस ड्राफ़्ट की मदद से, अपने वैरिएबल के लिए न सिर्फ़ कोई टाइप तय किया जा सकेगा, बल्कि डिफ़ॉल्ट वैल्यू भी तय की जा सकेगी और JavaScript API का इस्तेमाल करके इनहेरिटेंस के व्यवहार को प्रभावित किया जा सकेगा. तकनीकी तौर पर, इससे कस्टम प्रॉपर्टी को भी स्टैंडर्ड सीएसएस ट्रांज़िशन और ऐनिमेशन के साथ ऐनिमेशन बनाने की अनुमति मिल जाएगी. इस पर भी काम किया जा रहा है.

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

फ़ॉन्ट मेट्रिक

फ़ॉन्ट मेट्रिक ठीक वैसी ही होती हैं जैसी वे दिखती हैं. जब मैं स्ट्रिंग X को फ़ॉन्ट Y के साथ आकार Z पर रेंडर करता हूं, तो बाउंडिंग बॉक्स (या बाउंडिंग बॉक्स) क्या होता है? अगर मैं रूबी एनोटेशन का इस्तेमाल करूं, तो क्या होगा? इसकी बहुत मांग की गई है और हुडिनी को आखिरकार अपनी इच्छाएं पूरी करनी चाहिए.

पर और भी हैं!

हुडीनी के ड्राफ़्ट की सूची में और भी विशेषताएं हैं, लेकिन उनका भविष्य तय नहीं है और वे सिर्फ़ आइडिया के प्लेसहोल्डर हैं. उदाहरणों में कस्टम ओवरफ़्लो व्यवहार, सीएसएस सिंटैक्स एक्सटेंशन एपीआई, नेटिव स्क्रोल व्यवहार का एक्सटेंशन, और इसी तरह की महत्वाकांक्षी चीज़ें शामिल हैं. ये सब वेब प्लैटफ़ॉर्म पर ऐसी चीज़ों को चालू करते हैं जो पहले मुमकिन नहीं थीं.

डेमो

मैंने डेमो का कोड (पॉलीफ़िल का इस्तेमाल करके लाइव डेमो) ओपन सोर्स कर लिया है.