فیچر های جدید CSS از 2023 ---> تا 2024

-پارت 2-

2- اندازه ویوپورت

یکی از مسائل طولانی‌مدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاه‌های مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این امکان که کنترل دقیق‌تری روی نحوه رندر شدن المان‌ها فراهم می‌کنن و مشکلات مرورگر رو کاهش میدن. مثلا، واحدهای "dvh" و "dvw" که اشاره کردیم، ناحیه قابل مشاهده از ویوپورت رو در نظر می‌گیرن، که ساخت طرح‌هایی که با تعامل کاربرا مثله اسکرول یا زوم‌کردن سازگار باشن رو آسون تر می‌کنه.

تو سال 2023، واحدهای پویای ویوپورت تو اکثر مرورگرهای اصلی از جمله Chrome، Firefox و Safari پشتیبانی میشه. با این حال، برخی از مرورگرهای قدیمی و موبایل ممکنه که هنوز پشتیبانی محدودی داشته باشن. پس، استراتژی‌هایی مثله استفاده از توابع "calc()" با فالبک ها، برای سازگاری های گسترده‌تر استفاده می‌شن.

برای مثال به این کد رو ببینید:

.header {
    height: 50dvh; /* 50% از ارتفاع نمای قابل مشاهده */

    font-size: calc(16px + 3dvw); /* اندازه ابتدایی 16 پیکسل + 3% از عرض نمای قابل مشاهده */
    background-color: #f7f7f7;
}

در اینجا، ارتفاع ".header" نصف ارتفاع صفحه‌ی نمایش استفاده شده با "dvh" و فونت سایز از 16 پیکسل شروع و با توجه به عرض صفحه به "dvw" افزایش پیدا میکنه. به این ترتیب، می‌تونیم از واحدهای پویای ویوپورت برای طرح‌های انعطاف‌پذیر استفاده کنیم.

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 2 -

Channel | Group | YouTube

تجربه اشو داشتین؟🗿

#meme_image

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 3 -

Channel | Group | YouTube

3_Transforms

تبدیل‌ها در CSS فیچر جدیدی نیستن، اما چیز جالب اون، قابلیتیه که به شما اجازه می‌ده تا تبدیل‌هایی مثله "translate"، "rotate" و "scale" را با روش‌های پیچیده‌تری از قبل ترکیب کنین. این موضوع صد البته برای انیمیشن‌ها و ترانزیشن‌های پیچیده خیلی حیاتیه. داشتن کنترل بیشتر روی تبدیل‌های جداگونه مثله "rotate"، "translate" و "scale" واقعاً امکاناتتون رو گسترش می‌ده، از تأثیرات پارالاکس بهتر تا انیمیشن‌های روونتر. توابع جدید مانند "rotate3d" و به‌روزرسانی‌هایی برای "matrix" و "matrix3d" این کارها رو حتی آسونتر و انعطاف‌پذیرتر از قبل میکنن. این معنیش اینه که می‌تونین انیمیشن‌های پیچیده‌ای بسازین اونم بدون اینکه بیش از حد به JavaScript یا کتابخانه‌های دیگر وابسته باشین!

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

@keyframes rotateAnimation {

  from {

    transform: rotate3d(1, 1, 1, 0deg);

  }

  to {

    transform: rotate3d(1, 1, 1, 360deg);

  }

}

.box {

  width: 100px;

  height: 100px;

  background-color: red;

  animation: rotateAnimation 2s infinite linear;

}

#CSS

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 4 -

Channel | Group | YouTube

تازه از --c هم استفاده میکنم🗿

#meme_image

Channel | Group | YouTube

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت آخر-

اضافه شدن Nesting!
این ویژگی سالها تو Sass بوده ولی حالا...
بالاخره به css اومده😎 .

👨‍💻 با استفاده از این ویژگی بالاخره میتونیم سلکتورهای فرزند رو داخل سلکتورهای والدینشان گروه بندی کنیم!

🧑‍💻 به جای سلکتوری مثله "والد .فرزند"، می‌تونین "فرزند" رو داخل "والد" بزارین!

به عنوان مثال برای استایل دهی به یه کارت داریم:

.card {
    /* استایل‌های کارت */
}

.card:hover, 
.card:focus {
    /* استایل‌های اصلاحگر */
}

حالا بیاین از Nesting استفاده کنیم 🔥:

.card {
    /* استایل‌های کارت */
    &:hover,
    &:focus {
        /* استایل‌های اصلاحگر */
    }
}

Channel | Group | YouTube

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 5 -

Channel | Group | YouTube

میدونستین با html میتونین ایموجی به صفحه تون اضافه کنین؟🤔

#HTML

Channel | Group | YouTube

دوستان چیت شیت مقادیر مختلف Transform تو CSS 😎

#CSS
شیر فراموش نشه❤️

Channel | Group | YouTube

آقا چیت شیت دوس دارین؟
این بار چیت شیت Background ها رو براتون آوردم 😎

#CSS
شیر فراموش نشه❤️

Channel | Group | YouTube

بالاخره اعتماد به نفس حرف اولو میزنه🗿💪

#meme_video

Channel | Group | YouTube

این مقادیر و پراپرتی های css grid رو من همیشه فراموش میکنم💔

من که ذخیره کردم...شمام ذخیره کنین باشد که به یاد بسپاریم😎

#CSS_Grid

Channel | Group | YouTube

سال ۱۴۰۲ هم به زودی تموم میشه...

راستشو بگید، از عملکرد خودتون امسال راضی بودید؟

سودو کلاس چیت شیت...
چه به هم میان کلمات، نه؟😎
#CSS

Channel | Group | YouTube

قبلا شرتکات های VS Code رو براتون پارت به پارت قرار دادیم.👌
اما خب گفتیم جمع بندی کنیم بد نیست 😎

Channel | Group | YouTube

خیلی از وقتا باگها تنها فقط به این دلیل به وجود میان که ما از مفاهیم پایه درک درست یا حداقل کاملی نداریم. 💔

👌 میشه گفت Css Box Model یکی از اون مفاهیم کلیدی هستش که تو استایل دهی خیلی بهتون کمک میکنه و خیلی مهمه که درست درکش کنین.

#CSS

Channel | Group | YouTube

چیت شیت فونت ها، بریم ببینیم که واسه فونتامون چه استایلایی داریم؟
#CSS

Channel | Group | YouTube

عصرتون بخیر❤️

رفقا عیدتون ایشالا عیدتون پر از استایلهای fixed باشه تا آخر سال، امیدوام بتونین Background هاتون رو به زیبایی تموم بسازین.

👨‍💻و در نهایت css یا html مورد نظرتون بهتون 200 رو response بده. 😅

خلاصه که خوش بگذره، با قدرتی بیش از پیش پیشتون برمیگردیم...✌️👋

Channel | Group | YouTube

آقا همین اول کار بگم که عیدی آوردم🗿
یکم دیره ولی خب نیت مهمه 💔😎
وقته عمل کردن به قولامونه...

-- تو این ویدیو سعی کردم به سادگی هرچه تمامتر نصب TailwindCSS رو براتون توضیح بدم. --

👨‍💻میدونم که خیلیاتون با نصب تیلویند و ست آپ کردنش مشکل دارین و گاها بعد مدتی دوباره یه ویدیو ای آموزشی چیزی براش میبینین، اما بهتون قول میدم، اگه که این ویدیو رو خوب ببینید، به آموزش دیگه ای برای نصب تیلویند نیازی ندارین👌😱

پ.ن: آقا یه اکستنشن خیلی معروف و خیلی مفیدم داره که تو ویدیو بهتون گفتم

پ.ن ۲: اگه هر انتقادی داشتین از آموزش از ویدیو از چنل یا از هرچیز دیگه ای خوشحال میشم که بهم بگین😍❤️

پ.ن ۳: ادامه ی این روند دوستان بستگی به حمایت های شما عزیزان داره🥹....پس بترکونین ریکشنا و شیر رو...حالا دیگه ادامه کار دست شماست🫡
مخلص شما هتمل🗿
#Tailwind

Channel | Group | YouTube