InstaDevs
فیچر های جدید CSS از 2023 ---> تا 2024 -پارت 1- 1_ اضافه شدن Aspect Ratio پشتیبانی از aspect ratio بدون شک یه ارتقای قابل توجه هست. قبلاً حفظ Aspect Ratio ها معمولاً شامل روشهای میانبر و نامناسب مثله استفاده از ترفندهای پدینگ (padding hacks) بود که، هر…
فیچر های جدید CSS از 2023 ---> تا 2024
-پارت 2-
2- اندازه ویوپورت
یکی از مسائل طولانیمدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاههای مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این امکان که کنترل دقیقتری روی نحوه رندر شدن المانها فراهم میکنن و مشکلات مرورگر رو کاهش میدن. مثلا، واحدهای "dvh" و "dvw" که اشاره کردیم، ناحیه قابل مشاهده از ویوپورت رو در نظر میگیرن، که ساخت طرحهایی که با تعامل کاربرا مثله اسکرول یا زومکردن سازگار باشن رو آسون تر میکنه.
تو سال 2023، واحدهای پویای ویوپورت تو اکثر مرورگرهای اصلی از جمله Chrome، Firefox و Safari پشتیبانی میشه. با این حال، برخی از مرورگرهای قدیمی و موبایل ممکنه که هنوز پشتیبانی محدودی داشته باشن. پس، استراتژیهایی مثله استفاده از توابع "calc()" با فالبک ها، برای سازگاری های گستردهتر استفاده میشن.
برای مثال به این کد رو ببینید:
Channel | Group | YouTube
-پارت 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
🔥7👍2
InstaDevs
فیچر های جدید CSS از 2023 ---> تا 2024 -پارت 2- 2- اندازه ویوپورت یکی از مسائل طولانیمدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاههای مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این…
3_Transforms
تبدیلها در CSS فیچر جدیدی نیستن، اما چیز جالب اون، قابلیتیه که به شما اجازه میده تا تبدیلهایی مثله "translate"، "rotate" و "scale" را با روشهای پیچیدهتری از قبل ترکیب کنین. این موضوع صد البته برای انیمیشنها و ترانزیشنهای پیچیده خیلی حیاتیه. داشتن کنترل بیشتر روی تبدیلهای جداگونه مثله "rotate"، "translate" و "scale" واقعاً امکاناتتون رو گسترش میده، از تأثیرات پارالاکس بهتر تا انیمیشنهای روونتر. توابع جدید مانند "rotate3d" و بهروزرسانیهایی برای "matrix" و "matrix3d" این کارها رو حتی آسونتر و انعطافپذیرتر از قبل میکنن. این معنیش اینه که میتونین انیمیشنهای پیچیدهای بسازین اونم بدون اینکه بیش از حد به JavaScript یا کتابخانههای دیگر وابسته باشین!
به عنوان مثال، اگر نیاز داشته باشیم که یه المان به اندازه 360 درجه روی یک محور قطری به طور پیوسته چرخش کنه، میتونیم از این کد استفاده کنیم:
Channel | Group | YouTube
تبدیلها در 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;
}
#CSSChannel | Group | YouTube
👍7👀1
فیچر های جدید CSS از 2023 ---> تا 2024
-پارت آخر-
اضافه شدن Nesting!
این ویژگی سالها تو Sass بوده ولی حالا...
بالاخره به css اومده😎 .
👨💻 با استفاده از این ویژگی بالاخره میتونیم سلکتورهای فرزند رو داخل سلکتورهای والدینشان گروه بندی کنیم!
🧑💻 به جای سلکتوری مثله "والد .فرزند"، میتونین "فرزند" رو داخل "والد" بزارین!
به عنوان مثال برای استایل دهی به یه کارت داریم:
Channel | Group | YouTube
-پارت آخر-
اضافه شدن Nesting!
این ویژگی سالها تو Sass بوده ولی حالا...
بالاخره به css اومده😎 .
👨💻 با استفاده از این ویژگی بالاخره میتونیم سلکتورهای فرزند رو داخل سلکتورهای والدینشان گروه بندی کنیم!
🧑💻 به جای سلکتوری مثله "والد .فرزند"، میتونین "فرزند" رو داخل "والد" بزارین!
به عنوان مثال برای استایل دهی به یه کارت داریم:
.card {
/* استایلهای کارت */
}
.card:hover,
.card:focus {
/* استایلهای اصلاحگر */
}
حالا بیاین از Nesting استفاده کنیم 🔥:.card {
/* استایلهای کارت */
&:hover,
&:focus {
/* استایلهای اصلاحگر */
}
}Channel | Group | YouTube
🔥14👍3
سال ۱۴۰۲ هم به زودی تموم میشه...
راستشو بگید، از عملکرد خودتون امسال راضی بودید؟
راستشو بگید، از عملکرد خودتون امسال راضی بودید؟
👍25🥴7💔3🍾3👀1