क्या आपने कभी सोचा है कि सीएसएस कितनी काम करती है? आप एक एट्रिब्यूट के बारे में ज़्यादा जानें और अचानक आपकी पूरी वेबसाइट एक अलग लेआउट में दिखने लगेगी. यह समय है एक तरह का जादू. अब तक, वेब डेवलपर की कम्यूनिटी ने सिर्फ़ इस जादू को देख पाए और देख पाए. अगर हम अनुमान लगाना चाहें कि अपना जादू दिखाएं? अगर हमें जादूगर बनना हो, तो क्या होगा?
Houdini डालें!
Houdini टास्क फ़ोर्स में Mozilla, Apple, Opera, Microsoft, HP, Intel, और Google एक साथ मिलकर काम कर रहे हैं, ताकि सीएसएस इंजन से वेब डेवलपर तक पहुंचाना. टास्क फ़ोर्स, ड्राफ़्ट के तौर पर मौजूद होने का मकसद, उन्हें W3C के ज़रिए असल वेब के तौर पर स्वीकार करना है मानकों के बारे में बताया गया है. उन्होंने अपने लिए कुछ हाई-लेवल लक्ष्य तय किए, उन्हें मॉडल की खास बातों का ड्राफ़्ट बनाया गया, जिसकी वजह से एक सेट तैयार किया गया. निचले लेवल के स्पेसिफ़िकेशन के ड्राफ़्ट.
जब कोई व्यक्ति इन ड्राफ़्ट के बारे में बात करता है, तो इसका मतलब होता है कि इसे इकट्ठा किया गया है "हुडीनी". लिखते समय, ड्राफ़्ट की सूची अधूरा है और कुछ ड्राफ़्ट सिर्फ़ प्लेसहोल्डर हैं.
विशेषताएं
वर्कलेट (खास जानकारी)
वर्कलेट अपने-आप में काम के नहीं होते. इन रणनीतियों का इस्तेमाल, बाद में कई ड्राफ़्ट बनाने की कोशिश करेंगे. अगर वेब वर्कर के बारे में आप "वर्कलेट" पढ़ें, यह कोई गलत बात नहीं है. इन विज्ञापनों में कई सारी चीज़ें एक तरह की होती हैं. तो क्यों क्या काम कर रहे हैं?
हुडिनी का लक्ष्य नए एपीआई उपलब्ध कराना है ताकि वेब डेवलपर, सीएसएस इंजन में अपना खुद का कोड जोड़ सकें और आस-पास के सिस्टम. यह सच नहीं है कि इनमें से कुछ कोड फ़्रैगमेंट को हर एक को चलाना होगा. सिंगल. फ़्रेम के तौर पर सेट कर सकते हैं. इनमें से कुछ लोगों को तय करें. वेब वर्कर स्पेसिफ़िकेशन को कोट करना:
इसका मतलब है कि हुडीनी जो काम करने की योजना बना रही है उसके लिए वेब वर्कर सही नहीं हैं. इसलिए, वर्कलेट का आविष्कार किया गया. वर्कलेट, तय करने के लिए ES2015 क्लास का इस्तेमाल करते हैं तरीकों का एक कलेक्शन, जिसके सिग्नेचर पहले से तय होते हैं वर्कलेट का टाइप. ये वज़न में कम वज़न वाले होते हैं और कम समय तक चलते हैं.
CSS Paint API (खास जानकारी)
Chrome 65 में, Paint API डिफ़ॉल्ट रूप से चालू होता है. पढ़ें ज़्यादा जानकारी.
कंपोज़िटर वर्कलेट
यहां जिस एपीआई के बारे में बताया गया है उसका वर्शन पुराना है. कंपोज़िटर वर्कलेट में यह है को फिर से डिज़ाइन किया गया है और अब इसे "एनिमेशन वर्कलेट" के रूप में प्रस्तावित किया गया है. यहां ज़्यादा जानें: एपीआई की मौजूदा इटरेशन.
कंपोज़िटर वर्कलेट की खास जानकारी को WICG में भेज दिया गया है और और इसे फिर से इस्तेमाल करते हैं. यही वह खासियत है जो मुझे सबसे ज़्यादा उत्साहित करती है. कुछ सूचनाएं मिल रही हैं सीएसएस आपके कंप्यूटर के ग्राफ़िक्स कार्ड के लिए आउटसोर्स होती हैं इंजन, हालांकि वह आपके ग्राफ़िक कार्ड और आपके डिवाइस, दोनों पर निर्भर करता है सामान्य.
आम तौर पर, ब्राउज़र डीओएम ट्री लेता है और कुछ खास शर्तों के आधार पर, कुछ शाखाओं और सब-ट्री को अपनी खुद की लेयर देने का फ़ैसला करता है. ये सबट्री इस पर अपने-आप पेंट हो जाती हैं (हो सकता है कि पेंटिंग के डिज़ाइन में पेंट करने के लिए, भविष्य में). आखिरी चरण में, सभी लेयर पर पेंट किया गया कई लेयर और एक-दूसरे के ऊपर रखा जाता है, जिसमें z-इंडेक्स, 3D ट्रांसफ़ॉर्म और इस तरह से बनाया जा सकता है. यह प्रोसेस इसे कंपोज़िटिंग कहते हैं और कंपोज़िटर इसे एक्ज़ीक्यूट करता है.
कंपोज़िटिंग प्रोसेस का यह फ़ायदा है कि आपको अपनी पूरी प्रोसेस के साथ जब पेज थोड़ा सा स्क्रोल करता है, तब एलिमेंट खुद को दोबारा पेंट कर देते हैं. इसके बजाय, आप पिछले फ़्रेम की लेयर का फिर से इस्तेमाल कर सकता है और कंपोज़िटर को अपडेट की गई स्क्रोल स्थिति. इससे काम तेज़ी से होता है. इससे हमें 60fps तक पहुंचने में मदद मिलती है.
जैसा कि नाम से पता चलता है, कंपोज़िटर वर्कलेट आपको कंपोज़िटर को हुक करने देता है इसका असर, पहले से ही पेंट किए जा चुके एलिमेंट की लेयर पर पड़ता है. अलग-अलग लेयर के ऊपर रखा जाता है.
थोड़ी और बढ़ोतरी करने के लिए
विशिष्ट, आप ब्राउज़र को बता सकते हैं कि आप कंपोज़िटिंग
कुछ खास डीओएम नोड के लिए प्रोसेस चालू करता है और कुछ एट्रिब्यूट के ऐक्सेस का अनुरोध कर सकता है, जैसे कि
स्क्रोल पोज़िशन, transform या opacity. यह इस तत्व को अपने
लेयर होना चाहिए और हर फ़्रेम पर, आपका कोड कॉल किया जाएगा. आपके पास लेयर को एक से दूसरी जगह ले जाने का विकल्प है
लेयर में हेर-फेर करके, एट्रिब्यूट बदल और बदले जाते हैं (जैसे, opacity)
जिससे आप बहुत बड़े 60 एफ़पीएस (फ़्रेम प्रति सेकंड) पर फ़ैंसी मज़ेदार चीज़ें कर सकते हैं.
कंपोज़िटर का इस्तेमाल करके, पैरालैक्स स्क्रोलिंग के लिए पूरा इंप्लिमेंटेशन यहां दिया गया है वर्कलेट.
// 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];
};
});
रॉबर्ट फ़्लैक ने इस मैसेज के लिए एक पॉलीफ़िल लिखा है: कंपोज़िटर वर्कलेट, ताकि आप इसे आज़मा सकें – साफ़ तौर पर बहुत बेहतर परफ़ॉर्म कर सकते हैं.
लेआउट वर्कलेट (खास जानकारी)
पहले वास्तविक स्पेसिफ़िकेशन के ड्राफ़्ट का प्रस्ताव दिया गया है. लागू करना दूर रहना अच्छा है.
एक बार फिर से बता दें कि इसके लिए खास जानकारी में कोई जानकारी नहीं है, लेकिन कॉन्सेप्ट यह है
दिलचस्प: अपना लेआउट खुद लिखें! लेआउट वर्कलेट से आपको यह तय करना होता है कि
display: layout('myLayout') करने के लिए और नोड को व्यवस्थित करने के लिए अपनी JavaScript चलाने के लिए
नोड के बॉक्स में चिल्ड्रेन.
बेशक, सीएसएस के flex-box लेआउट को पूरी तरह से JavaScript से लागू किया जा रहा है
यह वर्शन, मिलते-जुलते नेटिव लागू करने की तुलना में धीमा है. हालांकि, इसे इस्तेमाल करना आसान है
किसी ऐसी स्थिति की कल्पना करें जिसमें अलग-अलग हिस्सों में काट-छांट करने से परफ़ॉर्मेंस बेहतर हो सकती है. कल्पना करें कि
ऐसी वेबसाइट जिसमें सिर्फ़ टाइल मौजूद नहीं हैं, जैसे कि 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 (खास जानकारी)
टाइप किया गया CSSOM (सीएसएस ऑब्जेक्ट मॉडल या कैस्केडिंग स्टाइल शीट्स ऑब्जेक्ट मॉडल) उन सभी ने समस्या का सामना किया है जो हमें हल करने में लगे हैं. मुझे JavaScript की एक पंक्ति के साथ इसे समझाएं:
$('#someDiv').style.height = getRandomInt() + 'px';
हम गणित कर रहे हैं, और इस इकाई को जोड़ने के लिए संख्या को स्ट्रिंग में बदल रहे हैं ब्राउज़र उस स्ट्रिंग को पार्स करता है और उसे वापस सीएसएस इंजन के लिए एक संख्या में बदल देता है. जब JavaScript की मदद से बदलावों में बदलाव किया जाता है, तब यह और भी खराब हो जाता है. और नहीं! सीएसएस में कुछ टाइपिंग शुरू होने वाली है.
यह ड्राफ़्ट ज़्यादा परिपक्व है और पॉलीफ़िल जिस पर पहले से काम किया जा रहा है. (डिसक्लेमर: पॉलीफ़िल का इस्तेमाल करने पर और ज़्यादा कंप्यूटेशनल ओवरहेड जोड़ें. अहम बात यह दिखाती है कि कैंपेन बनाना कितना आसान है एपीआई है.)
स्ट्रिंग के बजाय, आप एलिमेंट के 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}
प्रॉपर्टी और वैल्यू
क्या आपको सीएसएस कस्टम प्रॉपर्टी (या उनके गैर-आधिकारिक उपनाम "सीएसएस वैरिएबल") के बारे में पता है? यह वे ही हैं, लेकिन टाइप के साथ! अब तक, वैरिएबल में केवल स्ट्रिंग मान और ने एक सरल खोज-और-बदलें का उपयोग किया. इस ड्राफ़्ट की मदद से, अपने वैरिएबल के लिए सिर्फ़ एक टाइप तय करें, लेकिन डिफ़ॉल्ट वैल्यू भी तय करें और JavaScript API का इस्तेमाल करके, इनहेरिटेंस के व्यवहार पर असर डालते हैं. तकनीकी तौर पर, यह साथ ही, कस्टम प्रॉपर्टी को स्टैंडर्ड सीएसएस ट्रांज़िशन के साथ ऐनिमेशन बनाने की अनुमति भी मिलेगी और ऐनिमेशन हैं, जिस पर भी विचार किया जा रहा है.
["--scale-x", "--scale-y"].forEach(function(name) {
document.registerProperty({
name: name,
syntax: "<number>",
inherits: false,
initialValue: "1"
});
});
फ़ॉन्ट मेट्रिक
फ़ॉन्ट मेट्रिक ठीक वैसी ही होती हैं जैसी वे दिखती हैं. बाउंडिंग बॉक्स क्या है (या बाउंडिंग बॉक्स) के बीच में) जब मैं स्ट्रिंग X को फ़ॉन्ट Y के साथ आकार Z पर रेंडर करता/करती हूं? अगर मैं इसका इस्तेमाल कर लूं, तो क्या होगा रूबी एनोटेशन के लिए इस्तेमाल किया जा सकता है? इसकी बहुत मांग की गई और हुडिनी को आखिर में ऐसा करना चाहिए इन इच्छाओं को पूरा करें.
लेकिन रुकें, यहां और भी हैं!
Houdini के ड्राफ़्ट की सूची में और भी विशेषताएं हैं, लेकिन उन चीज़ों का भविष्य काफ़ी अनिश्चित होता है और वे सिर्फ़ आइडिया के प्लेसहोल्डर हैं. उदाहरणों में कस्टम ओवरफ़्लो व्यवहार, सीएसएस सिंटैक्स एक्सटेंशन एपीआई, एक्सटेंशन शामिल हैं और इसी तरह की महत्वाकांक्षी चीज़ों को और का पता लगाना है, जो पहले मुमकिन नहीं था.
डेमो
मैंने डेमो के लिए कोड को ओपन सोर्स कर लिया है (पॉलीफ़िल का इस्तेमाल करके लाइव डेमो).