​​می‌دانیم که مقادیری که ما برای ویژگی‌های 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

احتمالا دقت کرده‌اید که در CSS با استفاده از پراپرتی display می‌توانیم هم نحوه‌ی قرار گرفتن خود عنصر و هم نحوه‌ی چیده شدن فرزندان عنصر در صفحه را تعیین کنیم.
به عنوان مثال:
- با استفاده از display: flex خود عنصر Block می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با استفاده از display: inline-flex خود عنصر به صورت inline نمایش داده می‌شود و فرزندان آن از قوانین flex تبعیت می‌کنند.
- با display: block خود عنصر به صورت Block در می‌آید و فرزندان آن از قوانین normal flow تبعیت می‌کنند و ...

همچنین می‌دانیم که display: none هم خود عنصر و هم فرزندان آن را از صفحه حذف می‌کند.
اما حالا با ویژگی جدید display: contents می‌توانیم کاری کنیم که خود عنصر از صفحه حذف شود،‌ ولی فرزندان آن در صفحه باقی بمانند!

در این مقاله می‌توانید کاربرد عملی این ویژگی را ببینید:
https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/

#quicktip #css

🔺Easy Copy-Paste Beautiful CSS 🧩

https://www.csswand.dev/

#link #css #snippet

@ProGraphs

🔺CSSeffectsSnippets. ☁️

https://kutt.it/cgsjlB

#link #css #snippet

@ProGraphs

​فرض کنید سه عنصر div داریم که داخل هر کدام یک span با کلاس‌های red و green و blue قرار دارد:

<div><span class="red">1</span></div>
<div><span class="green">2</span></div>
<div><span class="blue">3</span></div>

هر سه عنصر span دارای position: absolute هستند و عنصر قرمز با استفاده از z-index جلوی دو عنصر دیگر قرار گرفته است (مشابه تصویر).

بدون تغییر دادن موقعیت عناصر در html و بدون تغییر دادن position و z-index عناصر،‌ کاری کنید که عنصر قرمز پشت دو عنصر سبز و آبی قرار بگیرد.

#interviewquestion #css

@ProGraphs

🔺CSS Grid Generator ✨

https://cssgrid-generator.netlify.com/

#link #css #grid #generator

@ProGraphs

فرض کنید بر روی یک عنصر هم translate، هم scale و هم rotate اعمال کرده‌ایم.

حالا می‌خواهیم در حالت hover، فقط مقدار rotate را تغییر دهیم.
متاسفانه برای این کار مجبوریم تمام مقادیر قبلی را هم تکرار کنیم!

با استفاده از متغیرهای CSS می‌توانیم این مشکل را حل کنیم (ویدیو را ببینید).

#quicktip #css #trick

@ProGraphs

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

اما با اجرا شدن این تابع متوجه می‌شویم که موقعیت اولیه‌ای که برای عنصر تعریف می‌کنیم (خط ۲) کاملا نادیده گرفته می‌شود و عنصر بدون توجه به موقعیت اولیه، فقط به سمت موقعیت نهایی جابه‌جا می‌شود!

علت این موضوع چیست؟ شما چطور این مشکل را حل می‌کنید؟

#interviewquestion #js #css

@ProGraphs