सीएसएस Houdini ट्यूटोरियल

एक हौदिनी क्या है?

• पेंट एपीआई - आपको सीएसएस को दृश्य तत्वों (रंग, पृष्ठभूमि, सीमाओं, आदि) के प्रतिपादन के चरण (जिसका अर्थ है स्टेजिंग) का विस्तार करने की अनुमति देता है।
• लेआउट एपीआई - आप तत्वों के आकार, स्थिति और संरेखण के निर्धारण के चरण पर सीएसएस का विस्तार करने की अनुमति देता है।
• एनिमेशन एपीआई - तत्वों को प्रदर्शित करने और एनिमेशन करने के चरण में "विस्तार बिंदु"।

• टाइप की गई वस्तु मॉडल एपीआई
• कस्टम गुण और मान API
• फ़ॉन्ट मेट्रिक्स एपीआई
• Worklets

सीएसएस भविष्य

टाइप ऑब्जेक्ट मॉडल (TOM) एपीआई

selectedElement.style.fontSize = newFontSize + 'px' // newFontSize = 20
console.log(selectedElement.style.fontSize) // 20px

{
  value: 20,
  unit: 'px'
}

• कम्प्यूटेड स्टाइल मैप (): परिकलित (अंतर्निहित नहीं) शैलियों को पार्स करने के लिए। इस विधि को पार्स करने या अन्य तरीकों का उपयोग करने से पहले कहा जाता है।
• विशेषता शैली: इनलाइन शैलियों को पार्स और संशोधित करने के लिए। यह एक आइटम प्रॉपर्टी है।

//       ( )
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//   
selectedElement.attributeStyleMap.set('font-size', CSS.em(2))
selectedElement. attributeStyleMap.set('color', 'blue')

//    
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//    
selectedElement.attributeStyleMap.get('font-size') // { value: 2, unit: 'em' }

• स्पष्ट: सभी इनलाइन शैलियों को निकालता है
• हटाएं: एक विशिष्ट सीएसएस संपत्ति और उसके मूल्य को हटाता है
• है: निर्दिष्ट संपत्ति की उपलब्धता के आधार पर सही / गलत रिटर्न
• परिशिष्ट: एक संपत्ति के लिए एक अतिरिक्त मूल्य जोड़ता है जो कई मूल्यों का समर्थन करता है

खोज

let selectedElement = document.getElementById('example')

if(selectedElement.attributeStyleMap){
  // ...
}

if(selectedElement.computedStyleMap){
  // ...
}

विशिष्टता स्थिति

सहयोग

कस्टम गुण और मान API

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
})

• नाम: कस्टम संपत्ति का नाम
• वाक्यविन्यास: पार्सिंग के लिए निर्देश। पूर्वनिर्धारित मान हैं: <color>, <पूर्णांक>, <संख्या>, <लंबाई>, <प्रतिशत>, आदि।
• आरंभिक मूल्य: डिफ़ॉल्ट मान (ओवरराइड करने से पहले, साथ ही साथ त्रुटियां होने पर)

.gradient-box {
  background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0% var(--colorPrimary) 60%);
  transition: --colorPrimary 0.5s ease;
  ...
}

.gradient-box:hover {
  --colorPrimary: red;
  ...
}

@property --colorPrimary {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

उदाहरण

खोज

if(CSS.registeredProperty) {
  // ...
}

विशिष्टता स्थिति

सहयोग

फ़ॉन्ट मेट्रिक्स एपीआई

विशिष्टता स्थिति

Vorkleta

• पेंट वर्कलेट - पेंट एपीआई
• एनिमेशन वर्कलेट - एनिमेशन एपीआई
• लेआउट वर्कलेट - लेआउट एपीआई

पेंट एपीआई

1. रजिस्टरपेंट फ़ंक्शन का उपयोग करके एक कार्यपत्रक लिखें और पंजीकृत करें
2. HTML या JS में CSS.paintWorklet.addModule का उपयोग करके कार्यस्थल को कॉल करें
3. सीएसएस में पेंट () विधि का उपयोग करें साथ में वॉकलेट और पास किए गए तर्कों का नाम दें

registerPaint('paintWorkletExample', class {
  static get inputProperties() { return ['--myVariable']; }
  static get inputArguments() { return ['<color>']; }
  static get contextOptions() { return {alpha: true} }

  paint(ctx, size, properties, args) {
    // ...
  }
})

• inputProperties: कस्टम सीएसएस संपत्तियों की एक सरणी जो वर्कलेट देख रही है। यह सरणी कार्यस्थल की निर्भरता का प्रतिनिधित्व करती है।
• inputArguments: तर्कों की एक सरणी जिसे एक फ़ंक्शन से बाहरी CSS पर पारित किया जा सकता है
• संदर्भ: रंग पारदर्शिता। यदि गलत है, तो सभी रंग पूरी तरह से अपारदर्शी होंगे
• पेंट: मुख्य कार्य निम्नलिखित तर्क ले रहा है:
  
  
  • ctx: एक 2D ड्राइंग संदर्भ जो कि कैनवस एपीआई के 2D कैनवास संदर्भ के लगभग समान है
  • आकार: तत्व की चौड़ाई और ऊंचाई के साथ एक वस्तु। मान लेआउट रेंडरिंग प्रक्रिया पर निर्भर करते हैं। कैनवास का आकार वास्तविक आइटम आकार के समान है
  • गुण: inputProperties में निहित चर
  • आर्ग्स: पेंट फ़ंक्शन को दिए गए तर्कों की एक सरणी

CSS.paintWorklet.addModule('path/to/worklet/file.js')

CSS.paintWorklet.addModule('https://url/to/worklet/file.js')

.example-element {
  // paintWorkletExample -  
  // blue - ,  
  background: paint(paintWorkletExample, blue);
}

उदाहरण

खोज

if(‘paintWorklet’ in CSS){
  // …
}

@supports(background: paint(paintWorkletExample)){
  // …
}

विशिष्टता स्थिति

सहयोग

एनिमेशन एपीआई

registerAnimation(‘animationWorkletExample’, class {
  constructor(options){
    // …
  }
  animate(currentTime, effect){
    // …
  }
})

• कंस्ट्रक्टर: जब एक नया उदाहरण बनाया जाता है। सामान्य सेटअप के लिए उपयोग किया जाता है।
• चेतन: एनीमेशन तर्क युक्त मुख्य कार्य। निम्नलिखित पैरामीटर स्वीकार किए जाते हैं:
  
  
  • वर्तमान समय: एक विशिष्ट समयरेखा पर टाइमस्टैम्प
  • प्रभाव: एनीमेशन में प्रयुक्त प्रभावों की एक सरणी

//   
await CSS.animationWorklet.addModule(‘path/to/worklet/file.js’)

//    
const elementExample = document.getElementById(‘element-example’)

//  
const effectExample = new KeyframeEffect(
  elementExample, //  
  [ // … ], //  
  { // … } //  - , ,    ..
)

//        
new WorkletAnimation(
  ‘animationWorkletExample’ //  
  effectExample, //  
  document.timeline, //  
  {},  //   
).play()

समय का टिकट

animate(currentTime, effect){
  effect.localTime = 3000 // 1000ms  + 2000ms  
}

animate(currentTime, effect){
  effect.localTime = currentTime // y = x  
}

const scrollTimelineExample = new ScrollTimeline({
  scrollSource: scrollElement, // ,     
  orientation: ‘vertical’, //  
  startScrollOffset: ‘200px’, //  
  endScrollOffset: ‘800px’, //  
  timeRange: 1200, //  
  fill: ‘forwards’ //  
})

उदाहरण

खोज

if(CSS.animationWorklet){
  // …
}

विशिष्टता स्थिति

सहयोग

लेआउट एपीआई

registerLayout(‘exampleLayout’, class{
  static get inputProperties() { return [‘--example-variable’] }

  static get childrenInputProperties() { return [‘--exampleChildVariable’] }

  static get layoutOptions(){
    return {
      childDisplay: ‘normal’,
      sizing: ‘block-like’
    }
  }

  intrinsicSizes(children, edges, styleMap){
    // …
  }

  layout(children, edges, constraints, styleMap, breakToken){
    // …
  }
})

• inputProperties: कस्टम सीएसएस गुणों की एक सरणी जो वर्कलेट द्वारा देखी जाती है और जो माता-पिता की होती है, वह तत्व जिसके कारण लेआउट रेंडर होता है। यह सरणी लेआउट निर्भरता का प्रतिनिधित्व करती है
• childrenInputProperties: कस्टम सीएसएस गुणों की एक सरणी जो विजेट द्वारा देखी जाती है और जो वंशज की होती है
• LayoutOptions: निम्नलिखित लेआउट गुणों को परिभाषित करता है:
  
  
  • चाइल्डडिसप्ले: पूर्वनिर्धारित मूल्य ब्लॉक और सामान्य हैं। परिभाषित करता है कि आइटम कैसे प्रदर्शित होता है (ब्लॉक या लाइन)
  • आकार: पूर्वनिर्धारित मान ब्लॉक-जैसे और मैनुअल होते हैं। तत्व आकार (यदि निर्दिष्ट नहीं) की प्रारंभिक गणना की आवश्यकता निर्धारित करता है
• आंतरिक रूप से परिभाषित करता है: कंटेनर या उसकी सामग्री को लेआउट संदर्भ में कैसे प्रदर्शित किया जाता है:
  
  
  • बच्चे: उस तत्व का बच्चा जो रेंडर करने के लिए पेज लेआउट का कारण बना
  • किनारों: कंटेनर सीमाओं
  • styleMap: टाइप कंटेनर शैली वस्तु मॉडल
• लेआउट: लेआउट के साथ काम करने का मुख्य कार्य:
  
  
  • बच्चे: बाल तत्व
  • किनारों: सीमाओं
  • बाधाओं: मूल लेआउट द्वारा लगाए गए बाधाओं
  • styleMap: टाइप कंटेनर शैली वस्तु मॉडल
  • breakToken: पेजिंग या प्रिंट लेआउट विभाजन के लिए ब्रेकप्वाइंट

CSS.layoutWorklet.addModule(‘path/to/worklet/file.js’)

.example-element {
  display: layout(exampleLayout)
}

लेआउट एपीआई लेआउट के साथ कैसे काम करता है

उदाहरण

खोज

if(CSS.layoutWorklet){
  // …
}

विशिष्टता स्थिति

सहयोग

हौदिनी और प्रगतिशील सुधार

त्रुटियों से बचने के लिए हमेशा समर्थन की पहचान करें।

डिस्प्ले और विज़ुअलाइज़ेशन को बेहतर बनाने के लिए Houdini का उपयोग करें।

विकल्प के रूप में मानक सीएसएस का उपयोग करें

निष्कर्ष

संदर्भ