مدیریت کلاس ها با پکیج classnames 😎

در این پست بهتون یه پکیج به نام classnames معرفی میکنم، که به شما اجازه میده تا به راحتی کلاس‌های CSS رو به صورت داینامیک مدیریت کنید. این ابزار به خصوص در توسعه با React 🔵 بسیار مفید هست. به جای ترکیب دستی کلاس‌ها، می‌تونید با استفاده از این کتابخانه کلاس‌ها رو بر اساس شرایط مختلف اضافه یا حذف کنید.

این امر به خصوص در مواقعی که نیاز به اعمال چندین کلاس بر اساس شرایط خاص دارید، بسیار مفیده.

برای کسب اطلاعات بیشتر به داکیومنت این کتابخانه مراجعه کنید ⬇️

🌐Document

#classnames #css
@CodeModule

واحد های اندازه گیری svh , dvh , vh و تفاوت هاشون در css 🔵

🔵در CSS، واحدهای اندازه‌گیری dvh، svh و vh به ترتیب به معنای "درصد ارتفاع نمای دید" (viewport height) هستن، اما هر کدوم کاربرد و رفتار خاص خودشون رو دارن.

1️⃣‏vh (Viewport Height) :

 این واحد به معنای 1 درصد از ارتفاع نمای دید (viewport) هست. به عنوان مثال، 100vh برابر با 100 درصد از ارتفاع نمای دیده.و اگر کاربر اندازه پنجره مرورگر رو تغییر بده، اندازه‌های مبتنی بر vh نیز به طور اتوماتیک تغییر میکنه.

2️⃣‏dvh (Dynamic Viewport Height) :

این واحد مشابه vh هست، اما به طور خاص برای نمای داینامیک طراحی شده. به این معنی که dvh به تغییرات ارتفاع نمای دید در حین نمایش محتوای پویا (مثل کیبورد موبایل) حساسه. به عنوان مثال، اگر کیبورد در دستگاه‌های موبایل باز بشه، dvh ممکنه کمتر از vh باشه چون ارتفاع قابل مشاهده کاهش پیدا می‌کنه.

3️⃣‏svh (Small Viewport Height) :

این واحد هم به ارتفاع نمای دید مربوط میشه، اما به ارتفاع کوچکترین حالت نمای دید اشاره داره. این به این معناست که svh همیشه برابر با کمترین ارتفاع نمای دیده که می‌تونه در هر زمان وجود داشته باشه. به عنوان مثال، اگه کاربر کیبورد رو باز کنه، svh ممکنه به اندازه‌ای کاهش پیدا کنه که فقط ارتفاع کوچکترین حالت رو نشون بده.

‼️تفاوت‌های این واحد های اندازه گیری :

تغییرات داینامیک: dvh و svh به تغییرات دینامیک در صفحه (مثل باز شدن کیبورد) حساس‌تر هستند، در حالی که vh ثابته.

✅و برای طراحی‌های واکنش‌گرا و بهینه‌سازی تجربه کاربری در دستگاه‌های موبایل، استفاده از dvh و svh می‌تونه مفیدتر باشه.

این واحدها به شما کمک می‌کنن تا تجربه کاربری بهتری رو در دستگاه‌های مختلف فراهم کنید.

#css #styling
@CodeModule