🔺یه وبسایت که توی اون می‌تونید Selector های CSS رو خیلی #جالب یاد بگیرین:
https://flukeout.github.io

#css #links

🔺زبان CSS، گزینش‌گر (Selector) هایی #جالب، با تنوعی فراتر از کلاس‌ها و شناسه‌‌ها داره 👌😉

- توی پست زیر با همه Selector های CSS آشنا بشین:
https://ditty.ir/p/XbR8X

#css 💯

🔺لازم نیست طراح حرفه‌ای باشیم وقتی با یک دستور ساده می‌تونیم #جذابیت خاصی رو به ظاهر برنامه بدیم!

- با گرادینت های CSS یاد می‌گیریم چطوری رنگ‌های جذابی رو به ظاهر وبسایتمون بدیم:
https://ditty.ir/p/n1mDn

#css

🔺دوست دارین Flexbox توی CSS رو با بازی کردن یاد بگیرین؟ وبسایت زیر رو ببینین:
https://flexboxfroggy.com

#css #links

🔺دوست دارین Grid های CSS رو با بازی یاد بگیرین؟ این وبسایت #جالب رو ببینین:
https://cssgridgarden.com/#fa

#css 💯

🔺با یک نگاه Flexbox رو یاد بگیرین 👌

🔗 تصویر اصلی
#css

🔺ببینین CSS نویس‌های سراسر دنیا چه نظری درباره این زبان دارن:
https://2020.stateofcss.com

- این نتیجه نظرسنجی سال ۲۰۲۰ هست. برای شرکت توی نظرسنجی امسال اینجا رو ببینین.
#css

🔺یه ویژگی جالب به CSS اضافه شده به اسم Clamp که کمک می‌کنه خیلی ساده‌تر عناصر توی صفحه رو Responsive کنیم

- برای مثال اگه می‌خوایم اندازه یک عکس بر اساس سایز صفحه انعطاف‌پذیر اما کنترل‌شده باشه چنین دستوری می‌نویسیم:
width: clamp(200px, 100%, 400px);

- با توجه به این کد، عرض تصویر ۱۰۰٪ هست، اما این عرض هیچوقت از ۴۰۰ پیکسل بیشتر و از ۲۰۰ پیکسل کمتر نمیشه. در واقع عرض تصویر بین ۲۰۰ و ۴۰۰ پیکسل شناور هست

- این تابع می‌تونه جایگزینی برای توابعی مثل min و max و همچنین Media Query هایی باشه که برای Responsive کردن عناصر توی صفحه استفاده می‌شد

- تابع Clamp یک قابلیت جدید CSS هست (پشتیبانی مرورگرها)

#css

🔺ـ CSS Specificity یعنی چی؟ 🤔

- اگه حتی مقدار خیلی کمی هم با CSS کار کرده باشین، حتماً دیدین که Rule هایی که توی بعضی از سلکتورها می‌نویسیم، نسبت به بقیه Rule ها قدرت بیشتری دارن و در نتیجه روی المنت اعمال میشن

- به این قضیه میگن CSS Specificity. هر چی Specificity یک دستور بالاتر باشه، قدرت بیشتری داره تا روی المنت اعمال بشه

- برای اینکه متوجه بشین کدوم دستور CSS بالاترین میزان نفوذ و اعمال شدن یا به قول معروف Specificity رو داره، این دمو رو ببینین:

https://www.matuzo.at/blog/2022/specificity/

#css

🔺آیا CSS یک زبان برنامه‌نویسی به حساب میاد؟ نظر شما چیه؟ 🤔

- آقای Chris Ferdinandi، مدرس معروفی که بیشتر با آموزش‌های Vanilla JS شناخته شده، توی این پادکست کوتاه، یک بار برای همیشه به این سوال رایج که آیا CSS یک زبان برنامه‌نویسی هست یا خیر، مفصل جواب داده :))

- متن این پادکست توی کامنت‌ها
#css

🔺توی CSS دو روش جدیدتر و البته کوتاه‌تر برای انتخاب کردن چندتایی المنت‌ها معرفی شده که اون توابع ()where: و ()is: هستن

- با این توابع می‌تونیم به صورت گروهی و یکجا چندین المنت رو انتخاب کنیم. کاری که قبلاً امکان‌پذیر نبود و باید المنت‌ها رو تک تک انتخاب می‌کردیم

- این ۲ تابع کارایی مشابهی دارن. اما باید بدونیم که المنت‌هایی که با where انتخاب می‌کنیم، پایین‌ترین میزان Specificity رو دارن. اما Specificity توی is بستگی به المنت‌هایی داره که انتخاب می‌کنیم

- این دو تابع نسبتاً جدید هستن و بنابراین پشتیبانی مرورگرها اهمیت داره:
https://developer.mozilla.org/en-US/docs/Web/CSS/:where

#css

🔺توی CSS یک تابع وجود داره به اسم element که از یک المنت توی صفحه، یک تصویر تولید می‌کنه که برای مثال می‌تونه به عنوان تصویر توی پراپرتی background-image قرار بگیره

- هر وقت المنت مد نظر آپدیت بشه، اون تصویر هم آپدیت میشه

- در حال حاضر فقط فایرفاکس از این تابع پشتیبانی می‌کنه

- یک نمونهٔ پیاده‌سازی شده رو می‌تونین از اینجا ببینین که یک Minimap مثل ادیتورها و IDE ها درست کرده (با فایرفاکس ببینین):
stefanjudis.com/a-firefox-only-minimap

#css

🔺مقدارهای justify-content برای CSS Flexbox به زبان ساده :))

https://codepen.io/alvaromontoro/pen/vYdyOxe

#css

🔺توابع if/else به CSS اضافه شدن 🔥

- این ویژگی فعلاً از کروم 137 به بعد در دسترس هست

- مشاهدهٔ دمو

#css