‏کامپوزیتینگ و بلند مود در CSS: مرورگر چطور پیکسل‌ها رو ترکیب می‌کنه؟

وقتی یه صفحه‌ی وب رو باز می‌کنی، مرورگرت داره یه کار شگفت‌انگیز انجام می‌ده: صدها لایه‌ی مختلف رو روی هم می‌ذاره و برای هر پیکسل تصمیم می‌گیره نتیجه‌ی نهایی چی باشه. دو تا از مهم‌ترین مراحل این فرایند، «کامپوزیتینگ» و «بلندینگ» هستن.

کامپوزیتینگ یعنی ترکیب یه لایه با لایه‌ی پشتش. به لایه‌ای که روش چیزی کشیده می‌شه «backdrop» می‌گن و به لایه‌ای که داره کشیده می‌شه «source». مرورگر این لایه‌ها رو یکی یکی می‌کشه و بعد همشون رو با هم ترکیب می‌کنه تا تصویر نهایی رو بسازه.

وقتی دو تا لایه رو روی هم می‌ذاریم، هر پیکسل می‌تونه توی یکی از چهار ناحیه باشه: فقط توی source، فقط توی backdrop، توی هر دو، یا توی هیچ‌کدوم. برای هر کدوم از این ناحیه‌ها می‌شه انتخاب کرد که در تصویر نهایی چی نمایش داده بشه. ترکیب همه‌ی این انتخاب‌ها در مجموع ۱۲ حالت مختلف می‌ده.

این ۱۲ حالت به اسم «اپراتورهای Porter-Duff» شناخته می‌شن، که در سال ۱۹۸۴ توسط Thomas Porter و Tom Duff از شرکت Lucasfilm معرفی شدن. هر اپراتور یه فرمول ریاضی داره که مشخص می‌کنه رنگ source و backdrop با چه نسبتی توی رنگ نهایی سهم دارن. اپراتورهایی مثل Source Over، Source In، Source Out، XOR و... هر کدوم رفتار متفاوتی دارن و برای کاربردهای مختلفی مناسبن.

یه نکته‌ی جالب اینه که مقدار alpha (شفافیت) در واقع ترکیبی از دو چیزه: opacity یعنی میزان شفافیت خود رنگ، و coverage یعنی اینکه چه درصدی از یه پیکسل توسط شکل پوشیده شده. این موضوع مخصوصاً در لبه‌های منحنی‌ها و شکل‌های مورب اهمیت داره، چون اون‌ها دقیقاً روی شبکه‌ی پیکسلی نمی‌افتن.

بلند مودها یه لایه‌ی قدرتمندتر روی کامپوزیتینگ ساده هستن. به جای اینکه فقط بگیم کدوم لایه روی کدوم نمایش داده بشه، بلند مودها نحوه‌ی ترکیب رنگ‌های دو لایه رو هم تغییر می‌دن. مثلاً حالت Multiply رنگ‌ها رو تیره‌تر می‌کنه، Screen روشن‌تر، و Overlay ترکیبی از هر دوئه.

در CSS می‌شه با پراپرتی‌هایی مثل mix-blend-mode و background-blend-mode از این قابلیت‌ها استفاده کرد. این ابزارها به دیزاینرها و توسعه‌دهنده‌های فرانت‌اند امکان می‌دن افکت‌های بصری جذابی بسازن که قبلاً فقط توی نرم‌افزارهایی مثل Photoshop ممکن بود.

نکات کلیدی:

• کامپوزیتینگ یعنی ترکیب لایه‌های مختلف مرورگر برای ساخت تصویر نهایی
• ۱۲ اپراتور Porter-Duff روش‌های مختلف ترکیب دو لایه رو تعریف می‌کنن
• مقدار alpha ترکیبی از opacity و coverage هر پیکسله
• بلند مودها نحوه‌ی ترکیب رنگ‌های دو لایه رو کنترل می‌کنن
• در CSS از mix-blend-mode و background-blend-mode برای اعمال بلند مود استفاده می‌شه
• لایه‌بندی درست در مرورگر باعث می‌شه فقط re-compositing انجام بشه نه re-painting، که سرعت رو بالا می‌بره