​​می‌دانیم که مقادیری که ما برای ویژگی‌های CSS تعیین می‌کنیم، می‌توانند نسبی باشند،‌ نسبت به عنصر والد تعیین شوند، درصدی باشند، اعشاری باشند و ... .

آیا می‌دانید این مقادیر چه پروسه‌ای را طی می‌کنند تا مقدار دقیق اعمال شده روی عناصر محاسبه شود؟

به طور کلی این مراحل را توضیح دهید

#interviewquestion #css

@ProGraphs

🔺 HEML, an open source markup language for building responsive email.

https://heml.io/

#link #tool #html #css

@ProGraphs

فرض کنید یک عنصر container داریم که دو عنصر فرزند داخل آن قرار دارند و این CSS را بر روی عناصر اعمال کرده‌ایم.

فاصله‌ی دو عنصر child از هم در راستای عمودی چند پیکسل است؟

#interviewquestion #css

@ProGraphs

​احتمالا شما هم با این مشکل مواجه شده‌اید که یک متن را روی یک تصویر قرار دهید و تشابه رنگ متن و تصویر باعث ناخوانا شدن متن در بعضی نقاط شود.

برای حل این مشکل با استفاده از mix-blend-mode می‌توانیم خیلی ساده و فقط با CSS، در همه‌ی نقاط بین متن و تصویر contrast ایجاد کنیم.

#quicktip #css #trick

@ProGraphs

🔺 چیز‌هایی که دوست داریم در سال 2019 به CSS اضافه شود.

https://css-tricks.com/2019-css-wishlist/

#link #css

@ProGraphs

🔺شما هم در نظر سنجی State of CSS شرکت کنید. ✌🏻

https://stateofcss.com/

#link #css #survey

@ProGraphs

فرض کنید سه عنصر grand-parent و parent و child، به ترتیب داخل هم قرار دارند و این کد CSS بر روی آن‌ها اعمال شده است.

عرض عنصر child چند پیکسل است؟

#interviewquestion #css

@ProGraphs

​در یکی از مطالب قدیمی‌تر تفاوت پراپرتی‌های transform و left/right را برای ایجاد انیمیشن در CSS بررسی کردیم. و دیدیم که مرورگر برای render کردن تغییرات در صفحه، چند مرحله (style - layout - paint - composite) را طی می‌کند.

اما در بعضی شرایط، تغییر ظاهر یک عنصر، بر روی سایر عناصر هم تاثیر می‌گذارد و مرورگر را مجبور به انجام محاسبات اضافه برای سایر عناصر می‌کند.

با استفاده از پراپرتی جدید contain در CSS می‌توانیم عملیات style و layout و paint را فقط به یک بخش از صفحه محدود کنیم.

https://developers.google.com/web/updates/2016/06/css-containment

#quicktip #css #performance

@ProGraphs

اگر هردوی این rulesetها به یک عنصر اعمال شوند، متن این عنصر چه رنگی خواهد بود؟

#interviewquestion #css

@ProGraphs

در این کد می‌دانیم که پراپرتی width در یک transition تغییر خواهد کرد.
بنابراین از will-change استفاده کرده‌ایم تا مرورگر را از این موضوع با خبر کنیم.

آیا این کار تاثیری در عملکرد transition دارد؟

#interviewquestion #css #performance

@ProGraphs