M

MLOG

فارسی

قابلیت‌های انقلابی CSS Houdini، از جمله ویژگی‌های سفارشی و worklet‌ها را برای ایجاد راه‌حل‌های استایل‌دهی وب پویا و با کارایی بالا و گسترش موتور رندر مرورگر کاوش کنید. نحوه پیاده‌سازی انیمیشن‌ها، چیدمان‌ها و افکت‌های paint سفارشی را برای یک تجربه وب واقعاً مدرن بیاموزید.

آشکارسازی قدرت CSS Houdini: ویژگی‌های سفارشی و Worklet‌ها برای استایل‌دهی پویا

دنیای توسعه وب دائماً در حال تحول است و به همراه آن، امکانات برای ایجاد رابط‌های کاربری خیره‌کننده و با کارایی بالا نیز افزایش می‌یابد. CSS Houdini مجموعه‌ای از APIهای سطح پایین است که بخش‌هایی از موتور رندر CSS را در معرض دید قرار می‌دهد و به توسعه‌دهندگان اجازه می‌دهد تا CSS را به روش‌هایی که قبلاً غیرممکن بود، گسترش دهند. این امر دریچه‌ای به سوی سفارشی‌سازی باورنکردنی و افزایش عملکرد باز می‌کند.

CSS Houdini چیست؟

CSS Houdini یک ویژگی واحد نیست؛ بلکه مجموعه‌ای از APIها است که به توسعه‌دهندگان دسترسی مستقیم به موتور رندر CSS را می‌دهد. این بدان معناست که شما می‌توانید کدی بنویسید که به فرآیند استایل‌دهی و چیدمان مرورگر متصل شود و افکت‌ها، انیمیشن‌ها و حتی مدل‌های چیدمان کاملاً جدیدی ایجاد کند. Houdini به شما اجازه می‌دهد تا خودِ CSS را گسترش دهید و آن را به یک تغییردهنده بازی برای توسعه front-end تبدیل می‌کند.

به آن به عنوان دادن کلیدهای کارکرد داخلی CSS فکر کنید، که به شما امکان می‌دهد بر روی پایه‌های آن بنا کنید و راه‌حل‌های استایل‌دهی واقعاً منحصر به فرد و با کارایی بالا ایجاد کنید.

APIهای کلیدی Houdini

چندین API کلیدی پروژه Houdini را تشکیل می‌دهند که هر کدام جنبه‌های مختلفی از رندر CSS را هدف قرار می‌دهند. بیایید برخی از مهم‌ترین آن‌ها را بررسی کنیم:

درک ویژگی‌های سفارشی (متغیرهای CSS)

اگرچه ویژگی‌های سفارشی، که به عنوان متغیرهای CSS نیز شناخته می‌شوند، دقیقاً بخشی از Houdini نیستند (آنها قبل از Houdini وجود داشتند)، اما سنگ بنای CSS مدرن هستند و به زیبایی با APIهای Houdini کار می‌کنند. آنها به شما امکان می‌دهند مقادیر قابل استفاده مجددی را تعریف کنید که می‌توانند در سراسر شیوه‌نامه (stylesheet) شما استفاده شوند.

چرا از ویژگی‌های سفارشی استفاده کنیم؟

سینتکس پایه

نام‌های ویژگی‌های سفارشی با دو خط تیره (--) شروع می‌شوند و به حروف بزرگ و کوچک حساس هستند.

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

مثال: تم‌بندی پویا

در اینجا یک مثال ساده از نحوه استفاده از ویژگی‌های سفارشی برای ایجاد یک تغییردهنده تم پویا آورده شده است:


<button id="theme-toggle">Toggle Theme</button>

:root {
  --bg-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.dark-theme {
  --bg-color: #333;
  --text-color: #fff;
}


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
});

این کد کلاس dark-theme را روی عنصر body جابجا (toggle) می‌کند، که مقادیر ویژگی‌های سفارشی را به‌روزرسانی کرده و ظاهر وب‌سایت را تغییر می‌دهد.

ورود به دنیای Worklet‌ها: گسترش قابلیت‌های CSS

Worklet‌ها ماژول‌های سبک و شبیه به جاوا اسکریپت هستند که مستقل از ترد اصلی اجرا می‌شوند. این برای عملکرد حیاتی است، زیرا هنگام انجام محاسبات پیچیده یا رندر، رابط کاربری را مسدود نمی‌کنند.

Worklet‌ها با استفاده از CSS.paintWorklet.addModule() یا توابع مشابه ثبت می‌شوند و سپس می‌توانند در ویژگی‌های CSS استفاده شوند. بیایید Paint API و Animation Worklet API را با دقت بیشتری بررسی کنیم.

Paint API: افکت‌های بصری سفارشی

Paint API به شما امکان می‌دهد توابع paint سفارشی تعریف کنید که می‌توانند به عنوان مقادیر برای ویژگی‌های CSS مانند background-image، border-image و mask-image استفاده شوند. این امر دنیایی از امکانات را برای ایجاد افکت‌های منحصر به فرد و جذاب بصری باز می‌کند.

Paint API چگونه کار می‌کند

  1. تعریف یک تابع Paint: یک ماژول جاوا اسکریپت بنویسید که یک تابع paint را صادر (export) کند. این تابع یک زمینه طراحی (مشابه زمینه Canvas 2D)، اندازه عنصر و هر ویژگی سفارشی که تعریف می‌کنید را می‌گیرد.
  2. ثبت Worklet: از CSS.paintWorklet.addModule('my-paint-function.js') برای ثبت ماژول خود استفاده کنید.
  3. استفاده از تابع Paint در CSS: تابع paint سفارشی خود را با استفاده از تابع paint() در CSS خود اعمال کنید.

مثال: ایجاد یک الگوی شطرنجی سفارشی

بیایید با استفاده از Paint API یک الگوی شطرنجی ساده ایجاد کنیم.

// checkerboard.js
registerPaint('checkerboard', class {
  static get inputProperties() {
    return ['--checkerboard-size', '--checkerboard-color1', '--checkerboard-color2'];
  }

  paint(ctx, geom, properties) {
    const size = Number(properties.get('--checkerboard-size'));
    const color1 = String(properties.get('--checkerboard-color1'));
    const color2 = String(properties.get('--checkerboard-color2'));

    for (let i = 0; i < geom.width / size; i++) {
      for (let j = 0; j < geom.height / size; j++) {
        ctx.fillStyle = (i + j) % 2 === 0 ? color1 : color2;
        ctx.fillRect(i * size, j * size, size, size);
      }
    }
  }
});


/* In your CSS file */
body {
  --checkerboard-size: 20;
  --checkerboard-color1: #eee;
  --checkerboard-color2: #fff;
  background-image: paint(checkerboard);
}

در این مثال:

این نشان می‌دهد که چگونه می‌توانید با استفاده از Paint API و ویژگی‌های سفارشی، افکت‌های بصری پیچیده‌ای ایجاد کنید.

Animation Worklet API: انیمیشن‌های با کارایی بالا

Animation Worklet API به شما امکان می‌دهد انیمیشن‌هایی ایجاد کنید که روی یک ترد جداگانه اجرا می‌شوند و انیمیشن‌های روان و بدون پرش را حتی در وب‌سایت‌های پیچیده تضمین می‌کنند. این امر به ویژه برای انیمیشن‌هایی که شامل محاسبات یا تبدیل‌های پیچیده هستند، مفید است.

Animation Worklet API چگونه کار می‌کند

  1. تعریف یک انیمیشن: یک ماژول جاوا اسکریپت بنویسید که تابعی را صادر کند که رفتار انیمیشن را تعریف می‌کند. این تابع زمان فعلی و یک ورودی افکت را دریافت می‌کند.
  2. ثبت Worklet: از CSS.animationWorklet.addModule('my-animation.js') برای ثبت ماژول خود استفاده کنید.
  3. استفاده از انیمیشن در CSS: انیمیشن سفارشی خود را با استفاده از ویژگی animation-name در CSS خود اعمال کنید، با ارجاع به نامی که به تابع انیمیشن خود داده‌اید.

مثال: ایجاد یک انیمیشن چرخش ساده

// rotation.js
registerAnimator('rotate', class {
  animate(currentTime, effect) {
    const angle = currentTime / 10;
    effect.localTransform = `rotate(${angle}deg)`;
  }
});


/* In your CSS file */
.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

در این مثال:

این نشان می‌دهد که چگونه می‌توانید انیمیشن‌های با کارایی بالا ایجاد کنید که حتی در وب‌سایت‌های پرمصرف از منابع، به روانی اجرا شوند.

Typed OM (مدل شیء): کارایی و ایمنی نوع

Typed OM (مدل شیء) روشی کارآمدتر و امن‌تر از نظر نوع برای دستکاری مقادیر CSS در جاوا اسکریپت فراهم می‌کند. به جای کار با رشته‌ها، Typed OM مقادیر CSS را به عنوان اشیاء جاوا اسکریپت با انواع خاص (مانند CSSUnitValue، CSSColorValue) نشان می‌دهد. این امر نیاز به تجزیه رشته‌ها را از بین می‌برد و خطر خطا را کاهش می‌دهد.

مزایای Typed OM

مثال: دسترسی و تغییر مقادیر CSS


const element = document.getElementById('my-element');
const style = element.attributeStyleMap;

// Get the margin-left value
const marginLeft = style.get('margin-left');
console.log(marginLeft.value, marginLeft.unit); // Output: 10 px (assuming margin-left is 10px)

// Set the margin-left value
style.set('margin-left', CSS.px(20));

در این مثال:

Typed OM روشی قوی‌تر و کارآمدتر برای تعامل با مقادیر CSS در جاوا اسکریپت فراهم می‌کند.

Layout API: ساخت الگوریتم‌های چیدمان سفارشی

Layout API شاید بلندپروازانه‌ترین API از مجموعه Houdini باشد. این API به شما امکان می‌دهد الگوریتم‌های چیدمان کاملاً جدیدی تعریف کنید و مدل‌های چیدمان داخلی CSS مانند Flexbox و Grid را گسترش دهید. این امر امکانات هیجان‌انگیزی را برای ایجاد چیدمان‌های واقعاً منحصر به فرد و نوآورانه باز می‌کند.

نکته مهم: Layout API هنوز در حال توسعه است و در مرورگرها به طور گسترده پشتیبانی نمی‌شود. با احتیاط استفاده کنید و بهبود تدریجی (progressive enhancement) را در نظر بگیرید.

Layout API چگونه کار می‌کند

  1. تعریف یک تابع Layout: یک ماژول جاوا اسکریپت بنویسید که یک تابع layout را صادر کند. این تابع فرزندان عنصر، محدودیت‌ها و سایر اطلاعات چیدمان را به عنوان ورودی می‌گیرد و اندازه و موقعیت هر فرزند را برمی‌گرداند.
  2. ثبت Worklet: از CSS.layoutWorklet.addModule('my-layout.js') برای ثبت ماژول خود استفاده کنید.
  3. استفاده از Layout در CSS: چیدمان سفارشی خود را با استفاده از ویژگی display: layout(my-layout) در CSS خود اعمال کنید.

مثال: ایجاد یک چیدمان دایره‌ای ساده (مفهومی)

در حالی که یک مثال کامل پیچیده است، در اینجا یک طرح کلی مفهومی از نحوه ایجاد یک چیدمان دایره‌ای آورده شده است:

// circle-layout.js (Conceptual - simplified)
registerLayout('circle-layout', class {
  static get inputProperties() {
    return ['--circle-radius'];
  }

  async layout(children, edges, constraints, styleMap) {
      const radius = Number(styleMap.get('--circle-radius').value);
      const childCount = children.length;

      children.forEach((child, index) => {
        const angle = (2 * Math.PI * index) / childCount;
        const x = radius * Math.cos(angle);
        const y = radius * Math.sin(angle);

        child.inlineSize = 50; //Example - Set Child size
        child.blockSize = 50;
        child.styleMap.set('position', 'absolute'); //Critical: Needed for accurate positioning
        child.styleMap.set('left', CSS.px(x + radius));
        child.styleMap.set('top', CSS.px(y + radius));
      });

    return {
      inlineSize: constraints.inlineSize, //Set the size of the container to the constraints from CSS
      blockSize: constraints.blockSize,
      children: children
    };
  }
});


/* In your CSS file */
.circle-container {
  display: layout(circle-layout);
  --circle-radius: 100;
  width: 300px;
  height: 300px;
  position: relative; /* Required for absolute positioning of children */
}

.circle-container > * {
  width: 50px;
  height: 50px;
  background-color: #ddd;
  border-radius: 50%;
}

ملاحظات کلیدی برای Layout API:

کاربردهای عملی CSS Houdini

CSS Houdini طیف گسترده‌ای از امکانات را برای ایجاد تجربیات وب نوآورانه و با کارایی بالا باز می‌کند. در اینجا برخی از کاربردهای عملی آورده شده است:

پشتیبانی مرورگر و بهبود تدریجی

پشتیبانی مرورگرها از CSS Houdini هنوز در حال تکامل است. در حالی که برخی از APIها، مانند ویژگی‌های سفارشی و Typed OM، پشتیبانی خوبی دارند، برخی دیگر، مانند Layout API، هنوز آزمایشی هستند.

هنگام کار با Houdini استفاده از تکنیک‌های بهبود تدریجی حیاتی است. این یعنی:

می‌توانید از جاوا اسکریپت برای بررسی پشتیبانی از ویژگی استفاده کنید:


if ('paintWorklet' in CSS) {
  // Paint API is supported
  CSS.paintWorklet.addModule('my-paint-function.js');
} else {
  // Paint API is not supported
  // Provide a fallback
  element.style.backgroundImage = 'url(fallback-image.png)';
}

شروع کار با CSS Houdini

آماده‌اید تا به دنیای CSS Houdini وارد شوید؟ در اینجا منابعی برای کمک به شما برای شروع کار آورده شده است:

CSS Houdini و دسترسی‌پذیری

هنگام پیاده‌سازی CSS Houdini، دسترسی‌پذیری باید اولویت اصلی باشد. موارد زیر را در نظر داشته باشید:

به یاد داشته باشید که جلوه‌های بصری هرگز نباید دسترسی‌پذیری را به خطر بیندازند. اطمینان حاصل کنید که همه کاربران، صرف نظر از توانایی‌هایشان، می‌توانند به وب‌سایت شما دسترسی داشته باشند و از آن استفاده کنند.

آینده CSS و Houdini

CSS Houdini نشان‌دهنده یک تغییر قابل توجه در نحوه رویکرد ما به استایل‌دهی وب است. Houdini با فراهم کردن دسترسی مستقیم به موتور رندر CSS، به توسعه‌دهندگان قدرت می‌دهد تا تجربیات وب واقعاً سفارشی و با کارایی بالا ایجاد کنند. در حالی که برخی از APIها هنوز در حال توسعه هستند، پتانسیل Houdini غیرقابل انکار است. با بهبود پشتیبانی مرورگرها و پذیرش Houdini توسط توسعه‌دهندگان بیشتر، می‌توان انتظار داشت که موج جدیدی از طراحی‌های وب نوآورانه و خیره‌کننده بصری را ببینیم.

نتیجه‌گیری

CSS Houdini مجموعه‌ای قدرتمند از APIها است که امکانات جدیدی را برای استایل‌دهی وب باز می‌کند. با تسلط بر ویژگی‌های سفارشی و worklet‌ها، می‌توانید تجربیات وب پویا و با کارایی بالا ایجاد کنید که مرزهای آنچه با CSS ممکن است را جابجا می‌کند. قدرت Houdini را در آغوش بگیرید و شروع به ساختن آینده وب کنید!