دروس CSS هوديني

ما هو هوديني؟

• Paint API - يسمح لك بتوسيع CSS في الخطوة (بمعنى مرحلة العرض) لعرض العناصر المرئية (اللون والخلفية والحدود وما إلى ذلك).
• Layout API - يسمح لك بتوسيع CSS في خطوة تحديد حجم العناصر وموضعها ومواءمتها.
• Animation API - "نقطة الامتداد" في خطوة عرض وتحريك العناصر.

• واجهة برمجة تطبيقات نموذج الكائن المكتوب
• خصائص وقيم API مخصصة
• واجهة برمجة تطبيقات مقاييس الخط
• Worklets

مستقبل CSS

واجهة برمجة تطبيقات نموذج الكائن المكتوب (TOM)

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

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): لتحليل الأنماط المحسوبة (غير المضمنة). يتم استدعاء هذه الطريقة قبل التحليل أو استخدام طرق أخرى.
• attribStyleMap: لتحليل وتعديل الأنماط المضمنة. هذه خاصية عنصر.

//       ( )
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' }

• واضح: يزيل جميع الأنماط المضمنة
• delete: لحذف خاصية CSS محددة وقيمتها
• has: تقوم بإرجاع true / false بناءً على توفر الخاصية المحددة
• إلحاق: يضيف قيمة إضافية إلى خاصية تدعم قيمًا متعددة

كشف

let selectedElement = document.getElementById('example')

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

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

حالة المواصفات

الدعم

خصائص وقيم API مخصصة

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

• الاسم: اسم الخاصية المخصصة
• بناء الجملة: تعليمات للتحليل. القيم المحددة مسبقًا هي: <color> ، <integer> ، <number> ، <length> ، <percentage> ، إلخ.
• الأولي القيمة: القيمة الافتراضية (قبل التجاوز وكذلك عند حدوث الأخطاء)

.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

• Paint Worklet - الرسام API
• مجموعة الرسوم المتحركة - Animation API
• مجموعة عمل التخطيط - واجهة برمجة تطبيقات التخطيط

الرسام API

1. كتابة وتسجيل مجموعة عمل باستخدام وظيفة registerPaint
2. قم باستدعاء مجموعة عمل بتنسيق HTML أو JS باستخدام CSS.paintWorklet.addModule
3. استخدم طريقة الطلاء () في CSS جنبًا إلى جنب مع اسم vorklet والوسيطات التي تم تمريرها

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: صفيف من خصائص CSS المخصصة التي يلاحظها مجموعة العمل. يمثل هذا الصفيف تبعيات مجموعة العمل.
• inputArguments: مجموعة من الوسيطات التي يمكن أن تنتقل من دالة إلى CSS خارجية
• contextOptions: شفافية الألوان. إذا كانت خاطئة ، فستكون كل الألوان معتمة تمامًا
• الطلاء: الوظيفة الرئيسية مع الأخذ بالحجج التالية:
  
  
  • ctx: سياق رسم ثنائي الأبعاد يتطابق تقريبًا مع سياق الرسم الثنائي الأبعاد لـ Canvas API
  • الحجم: كائن بعرض العنصر وارتفاعه. تعتمد القيم على عملية عرض التخطيط. حجم اللوحة هو نفس حجم العنصر الفعلي
  • الخصائص: المتغيرات المضمنة في خصائص الإدخال
  • args: مجموعة من الوسيطات التي تم تمريرها إلى وظيفة الطلاء

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)){
  // …
}

حالة المواصفات

الدعم

الرسوم المتحركة API

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

• مُنشئ: يسمى عند إنشاء مثيل جديد. تستخدم للإعداد العام.
• animate: الوظيفة الرئيسية التي تحتوي على منطق الرسوم المتحركة. يتم قبول المعلمات التالية:
  
  
  • currentTime: الطوابع الزمنية على مخطط زمني محدد
  • تأثير: مجموعة من التأثيرات المستخدمة في الرسوم المتحركة

//   
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: مجموعة من خصائص CSS المخصصة التي يلاحظها المصنف وتنتمي إلى الأصل ، وهو العنصر الذي تسبب في عرض التخطيط. يمثل هذا الصفيف تبعيات التخطيط
• childrenInputProperties: مجموعة من خصائص CSS المخصصة التي يتم مراقبتها بواسطة عنصر واجهة المستخدم والتي تنتمي إلى السليل
• layoutOptions: تحدد خصائص التخطيط التالية:
  
  
  • childDisplay: القيم المحددة مسبقًا كتلة وطبيعية. يحدد كيفية عرض العنصر (كتلة أو سطر)
  • تغيير الحجم: القيم المحددة مسبقًا تشبه الكتل ودليلًا. يحدد الحاجة إلى حساب أولي لأحجام العناصر (إذا لم يكن محددًا)
• intrinsicSizes: يحدد كيفية عرض الحاوية أو محتوياتها في سياق التخطيط:
  
  
  • الأطفال: تابع العنصر الذي تسبب في عرض تخطيط الصفحة
  • الحواف: حدود الحاوية
  • styleMap: نموذج كائن نمط حاوية مكتوب
• التخطيط: الوظيفة الرئيسية للعمل مع التخطيط:
  
  
  • الأطفال: عنصر تابع
  • الحواف: الحدود
  • القيود: القيود التي يفرضها التخطيط الأصلي
  • styleMap: نموذج كائن نمط حاوية مكتوب
  • breakToken: نقطة توقف لتقسيم الصفحات أو تقسيم تخطيط الطباعة

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

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

كيفية عمل Layout API مع التخطيط

مثال

كشف

if(CSS.layoutWorklet){
  // …
}

حالة المواصفات

الدعم

هوديني والتحسن التدريجي

قم دائمًا بتحديد الدعم لتجنب الأخطاء.

استخدم هوديني لتحسين العرض والتصور.

استخدم CSS القياسي كبديل

استنتاج

المراجع