#css
#frontEnd
#سی_اس_اس
🔰Css tricks

🔸با اینکه css آنقدرها پیچیده نیست، اما اگر تجربه ی زیادی هم در کار کردن با css داشته باشید باز هم چیزهای جدیدی هست که دانستن آن متعجب تون میکنه!
پراپرتی هایی که بسیار ازشون استفاده کردین بدون اینکه به جزئیاتش توجه خاصی کرده باشین، یا پراپرتی هایی که تاکنون ممکن است وجود آنها بی خبر بوده باشین.

🔹در این پست چندتا از این پراپرتی هارو میخوایم بررسی و معرفی کنیم.

❇️Color Property

🔹از این پراپرتی قائدتا بسیار استفاده کردین. (برای تغییر رنگ Text)
اما باید بدونید که این پراپرتی رنگ foreground المنت رو مشخص میکنه و فقط برای مشخص کردن رنگ text المنت نیست.


❇️visibility property
🔹از این پراپرتی هم حتما بسیار استفاده کرده اید و مقدار پیشفرض برای آن visible میباشد تفاوت آن با
display: none
این است که مرورگر در هنگام render المنتی که visibility آن hidden است فضای اشغال شده توسط المنت را در نظر میگیرد ولی المنت قابل رویت نمیباشد اما هنگامی که یک المنت display: none مرورگر در هنگام render صفحه هیچ فضایی برای المنت در نظر نمیگیرد.
پراپرتی visibility دارای مقداری دیگری برای set کردن به نام collapse میباشد. هنگامی که مقدار visibility المنتی را برابر با collapse قرار میدهید، مرورگر با آن المنت همانند حالت hidden عمل میکند، به استثنا در table rows و table row groups و table columns و table column groups در چنین مواقعی تنظیم کردن مقدار collapse برای یک المنت در table base المنت ها مانند display : none خواهد بود و المنت مربوطه فضایی اشغال نخواهد کرد.

🔸نکته قابل توجه این است که مرورگر های مختلف به روش های یکسانی در مواجه با visibility : collapse عمل نمی کنند.

❇️href=#top
🔹برای هدایت کاربر به بالای صفحه جاری میتوانید از مقدار
href=#top
استفاده کنید.

❇️Smooth scroll
🔹برای تنظیم اسکرول نرم برای کل سند html یا یک المنت بخصوص، میتوانید خاصیت scroll-behavior را برابر با
smooth
قرار دهید.

element {
  scroll-behavior: smooth;
} 

❇️all property
🔸برای اینکه مقدار تمام پراپرتی های یک المنت را به مقدار initial شده یا inherit شده آن ریست کنید از این پراپرتی استفاده کنید.
تمامی پراپرتی های به غیر از direction و unicode-bidi ریست خواهند شد.

div {
  background-color: yellow;
  color: red;
  all: initial;
}

❇️currentColor
🔸استفاده از مقدار currentColor به جای مشخص کردن دوباره نام رنگ مورد نظرتان برای پراپرتی هایی نظیر background و غیره باعث خواهد شده تا مرورگر از رنگ محاسبه شده پیشین برای آن المنت استفاده کند.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

@fullStackDevs