### ویژگی animation-timeline: view() در CSS 🚀

این ویژگی امکان اجرای انیمیشن‌های CSS را بر اساس میزان قابل‌مشاهده بودن یک عنصر در صفحه (Viewport) فراهم می‌کند.

#### 🔹 نحوه عملکرد:

✅ تابع view() اجازه می‌دهد که انیمیشن‌ها متناسب با میزان مشاهده شدن عنصر در صفحه تغییر کنند؛

✅ در واقع، این ویژگی یک مکانیزم داخلی برای ایجاد انیمیشن‌های وابسته به اسکرول است!

---

### 👩‍💻 نحوه استفاده

فرض کنید می‌خواهیم یک تصویر را هنگام اسکرول صفحه به‌تدریج بزرگ‌تر کنیم:

.image-container {
    width: 100%;
    height: 400px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoom linear;
    animation-timeline: view();
}

@keyframes zoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 120%;
    }
}

☝️ در این مثال، با اسکرول صفحه، مقدار background-size به‌تدریج افزایش می‌یابد و یک افکت بزرگ‌نمایی ایجاد می‌شود.

---

### 🔍 پشتیبانی مرورگرها

👀 در حال حاضر، این ویژگی در مرحله آزمایشی قرار دارد و توسط تمامی مرورگرهای مدرن پشتیبانی نمی‌شود (حدود هفتاد و چهار درصد)
[بررسی پشتیبانی در Can I Use](https://caniuse.com/?search=animation-timeline)

اما این یک گام رو به جلو در دنیای CSS است! 🎉 اکنون می‌توان انیمیشن‌های وابسته به اسکرول را بدون نیاز به JavaScript و تنها با استفاده از CSS خالص پیاده‌سازی کرد! 👍

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

ویژگی CSS clamp() به شما امکان می‌دهد که عناصر واکنش‌گرا (adaptive) ایجاد کنید که بسته به اندازه صفحه تغییر می‌کنند، اما در عین حال از مرزهای تعیین‌شده خارج نمی‌شوند.

مثال‌ها:

h1 {
  font-size: clamp(24px, 4vw, 48px);
}

.container {
  width: clamp(300px, 50%, 900px);
}

.element {
  padding: clamp(10px, 2vw, 1.5rem);
}

ویژگی‌های مهم این روش:
- ایجاد عناصر واکنش‌گرا بدون استفاده از رسانه‌پرس‌ها (media queries).
- استفاده از واحدهای مختلف اندازه‌گیری برای هر مقدار.
- قابل استفاده برای هر ویژگی CSS که از مقادیر عددی پشتیبانی می‌کند.

این ویژگی به شما این امکان را می‌دهد که تنظیمات اندازه‌گیری دقیق‌تری داشته باشید که به طور خودکار با تغییر اندازه صفحه سازگار می‌شوند، در حالی که همچنان محدوده‌های مشخص‌شده را حفظ می‌کنند.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

زمانی که شفافیت رنگ یک دردسر می‌شود

آیا تا به حال سعی کرده‌اید رنگی را در CSS شفاف کنید؟ به نظر ساده می‌رسد، اما اگر طراح فقط یک کد HEX بدون شفافیت به شما داده باشد، ماجرا به یک چالش تبدیل می‌شود...

- روش اول: تبدیل دستی HEX به RGBA. برای این کار، یک مبدل باز کنید، مثلاً کد #003366 را وارد کنید، مقدار ۰.۵ را به کانال آلفا اضافه کنید و در نهایت نتیجه را کپی کنید:

  rgba(26, 135, 69, 0.5);
  

- روش دوم: استفاده از HEX با کانال آلفا (#00336680). اما به خاطر سپردن اینکه دو رقم آخر چه میزان شفافیت را نشان می‌دهند، خود یک چالش جداگانه است!
- روش سوم: کاملاً شفافیت را فراموش کنید و تظاهر کنید که همه‌چیز از ابتدا همین‌طور بوده است!

اما حالا تابع color-mix() در CSS همه چیز را آسان کرده است:

color: color-mix(in srgb, #003366 50%, transparent);

کاملاً مشخص است: پنجاه درصد رنگ، پنجاه درصد شفافیت – و تمام!

### color-mix() چیست؟
این یک تابع در CSS است که امکان ترکیب دو رنگ را با نسبت‌های مشخص در یک مدل رنگی معین فراهم می‌کند.

و voilà! تابع خودش رنگ را می‌گیرد، آن را با شفافیت ترکیب می‌کند و نتیجه دلخواه را ارائه می‌دهد—بدون نیاز به مبدل‌ها، بدون حفظ کردن مقادیر عجیب HEX**، و بدون دردسر.

طبق داده‌های **Can I Use**، این ویژگی **نود و یک و هفتاد و شش صدم درصد پشتیبانی دارد.

نکته: اگر از SASS/SCSS استفاده می‌کنید، کار را می‌توان حتی راحت‌تر کرد:

color: rgba(#003366, 0.5);

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

آیا طراحی ایمیل مثل کابوس است؟

اگر فکر می‌کنید که طراحی واکنش‌گرا برای تمام مرورگرها کار سختی است، پس بهتر است سعی کنید یک ایمیل طراحی کنید که در Gmail، Outlook، Yahoo و ده‌ها سرویس ایمیل دیگر کاملاً یکسان نمایش داده شود...

طراحی ایمیل یک کار کاملاً خاص و منحصربه‌فرد است که در آن نمی‌توان از بخش زیادی از قابلیت‌های HTML و CSS استفاده کرد. موتورهای پردازش ایمیل‌ها آن‌قدر قدیمی هستند که بسیاری از آن‌ها همچنان نیاز به استفاده از جداول برای طراحی دارند، درست مثل دهه نود میلادی! اما چرا این‌گونه است؟ چند دلیل اصلی را می‌توان برای این موضوع برشمرد:

### ۱. دلیل تاریخی
معمولاً طراحی ایمیل‌ها یک کار نسبتاً ساده است. به همین دلیل، بسیاری از سرویس‌های ایمیل زحمت به‌روزرسانی موتورهای پردازش خود را به خود نمی‌دهند، چراکه این کار از نظر تجاری سود چندانی ندارد. به‌عنوان مثال، هیچ تفاوتی بین طراحی یک ایمیل حاوی کد تأیید ورود با استفاده از جداول یا Flexbox از لحاظ عملکرد وجود ندارد.

### ۲. مسائل امنیتی
اگر کمی عمیق‌تر بررسی کنیم، متوجه می‌شویم که بسیاری از محدودیت‌های موجود دلایل امنیتی دارند. روش‌های زیادی برای ارسال درخواست از داخل یک ایمیل وجود دارد، مانند:

@font-face { src: url(...) }  
background-image: url(...)  
list-style-image: url(...)  

<form action="https://.../steal.php" method="get">

و بسیاری موارد دیگر. در تمامی این مثال‌ها، ایمیل تلاش می‌کند داده‌ای را از یک منبع خارجی دریافت کند که می‌تواند برای ردیابی کاربر استفاده شود. برای مثال، می‌توان با باز کردن یک ایمیل، آی‌پی واقعی کاربر را از طریق بارگذاری یک تصویر رهگیری کرد.

همچنین، ویژگی position: fixed در ایمیل‌ها ممنوع شده است، زیرا می‌توان از آن برای حملات فیشینگ استفاده کرد. به‌عنوان مثال، یک هکر می‌تواند یک پنجره‌ی ثابت را روی محتوای ایمیل نمایش دهد که از کاربر می‌خواهد رمز عبور خود را وارد کند و این پنجره کاملاً مشابه رابط کاربری سرویس ایمیل خواهد بود.

### اما خبر خوب اینجاست: اوضاع خیلی بهتر شده است!
‏- Outlook اکنون از موتور رندرینگ Edge به جای Microsoft Word استفاده می‌کند (بله، باور کنید! تا سال دو هزار و بیست و دو ایمیل‌ها واقعاً با موتور Word پردازش می‌شدند!).
- تقریباً تمامی سرویس‌های ایمیل، تگ <div /> را به‌درستی پردازش می‌کنند.
- پشتیبانی از media queries در بسیاری از سرویس‌های ایمیل اضافه شده است.
- و بسیاری پیشرفت‌های دیگر.

### ابزارهای جدید، دنیای طراحی ایمیل را متحول کرده‌اند
ابزارهای مدرنی برای طراحی ایمیل ایجاد شده‌اند که بسیاری از مشکلات را از پیش حل کرده‌اند. یکی از این ابزارها MJML است که در گذشته تغییرات بزرگی ایجاد کرد، و در سال‌های اخیر، فریمورک‌هایی مانند react-email و vue-email بسیار محبوب شده‌اند.

مزایای react-email :
✔️ پشتیبانی از Tailwind CSS
✔️ نسخه‌ای شبیه به Storybook برای پیش‌نمایش قالب‌ها
✔️ امکان استفاده از فونت‌های سفارشی
✔️ مجموعه‌ای از قالب‌های آماده و نمونه کدها
‏✔️ Markdown برای نوشتن متن‌ها
✔️ برطرف کردن مشکلات مربوط به سرویس‌های مختلف ایمیل

و همه‌ی این‌ها در یک بسته‌ی کامل و کاربرپسند ارائه شده که از کامپوننت‌محوری پشتیبانی می‌کند، بدون نیاز به ارسال پیامک تأیید یا حتی ثبت‌نام!

به نظر من، در دنیای امروز طراحی ایمیل‌ها بسیار راحت‌تر و بهینه‌تر شده است، و این را مدیون جامعه‌ی برنامه‌نویسی هستیم. اگر تا به حال از طراحی ایمیل دوری کرده‌اید، پیشنهاد می‌کنم نگاهی به آن بیندازید—این حوزه هم جذابیت‌های خاص خودش را دارد!

و در نهایت، اگر به دنبال یک ابزار عالی هستید، react-email را امتحان کنید—ابزاری کارآمد و لذت‌بخش.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

در نسخه‌ی صد و سی و پنج کروم، امکان استایل‌دهی به عنصر نیتیو <select> اضافه شد.


🔗https://developer.chrome.com/blog/a-customizable-select
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع attr()
بله، تابع attr در CSS به‌طور قابل‌توجهی بهبود یافته است! از این پس، تمامی ویژگی‌های HTML با پیشوند `data-`، بدون توجه به نوع داده‌ای آن‌ها، می‌توانند در هر ویژگی CSS مورد استفاده قرار گیرند. این پیشرفت، افق‌های تازه‌ای را برای استایل‌دهی پویا به عناصر گشوده و امکانات و انعطاف‌پذیری بیشتری را در اختیار توسعه‌دهندگان قرار می‌دهد.

با مشخص‌کردن نوع داده و در صورت نیاز تعیین یک مقدار پیش‌فرض، می‌توان به شکلی مؤثرتر نمایش محتوا و رفتار عناصر صفحه وب را مدیریت کرد.

مثال:

<div data-width="189"></div>
<div data-width="100"></div>

<style>
  div {
    width: attr(data-width px);
  }
</style>

در این مثال، مقدار ویژگی data-width به‌صورت مستقیم در ویژگی width هر عنصر استفاده شده و مقدار آن به پیکسل تفسیر می‌شود. این روش جدید، مسیرهای نوینی برای طراحی واکنش‌گرا و مبتنی بر داده فراهم می‌آورد.




#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع toggle()
درست است، تابع toggle در CSS امکان بسیار کاربردی و مناسبی را برای تغییر چرخشی مقادیر در عناصر یا فرزندان آن‌ها فراهم می‌کند؛ قابلیتی که نه‌تنها کدنویسی را ساده‌تر می‌سازد، بلکه موجب افزایش انعطاف‌پذیری در طراحی سبک‌ها نیز می‌شود.

اجازه دهید مثالی ارائه کنم: فرض کنید می‌خواهید در یک فهرست تو در تو به‌صورت ul > li > ul > li`، نوع علامت‌گذاری (`list-style-type) برای سطوح فرد به‌صورت «disc» و برای سطوح زوج به‌صورت «square» تعریف شود. به‌جای آنکه به‌صورت دستی برای هر سطح از تو در تویی استایل جداگانه تعریف کنید، می‌توانید به‌سادگی از دستور list-style-type: disc, square; استفاده نمایید. تابع toggle به‌صورت خودکار این مقادیر را به‌صورت چرخشی بین فرزندان اعمال می‌کند و از تکرار بی‌مورد کد جلوگیری کرده و مدیریت استایل‌ها را هوشمندانه‌تر و مؤثرتر می‌سازد.

مثال:

/*
اگر فهرست‌هایی به‌صورت تو در تو داشته باشیم:
- سطح نخست علامت‌گذاری به‌صورت disc خواهد بود.
- سطح دوم circle خواهد بود.
- سطح سوم square خواهد بود.
اگر تعداد سطوح بیشتر شود، این الگو به‌صورت چرخشی تکرار می‌گردد:
disc، circle، square، سپس دوباره disc، circle...
*/
ul {
  list-style-type: toggle(disc, circle, square);
}

این ویژگی جدید امکان طراحی سبک‌های منظم، خوانا و بدون تکرار اضافی را فراهم می‌کند و به بهینه‌سازی و زیبایی کد CSS کمک شایانی می‌نماید.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع‌های sibling-count() و sibling-index()
با معرفی توابع جدید در CSS که امکان کار با تعداد عناصر و ترتیب آن‌ها را فراهم می‌سازند، دیگر نیازی به تعریف استایل‌های سفارشی برای هر عنصر به‌صورت جداگانه یا استفاده از سلکتورهای پیچیده مانند nth-child نیست. این قابلیت‌ها فرایند استایل‌دهی را بسیار ساده‌تر کرده و کد را خواناتر، فشرده‌تر و نگه‌داری آن را آسان‌تر می‌سازند.

تابع sibling-count() تعداد عناصر هم‌سطح (خواهر یا برادر) را بازمی‌گرداند.
تابع sibling-index() موقعیت عنصر را در میان خواهر و برادرهایش مشخص می‌کند.

مثال:

/*
فرض کنید درون یک کانتینر، چهار عنصر div قرار دارند.
در این صورت:
- عرض هر div برابر خواهد بود با بیست و پنج درصد (یعنی صد درصد تقسیم بر چهار).
- ارتفاع آن‌ها به ترتیب برابر خواهد بود با صد، دویست، سیصد و چهارصد پیکسل.
*/

div {
  width: calc(۱۰۰% / sibling-count());
  height: calc(sibling-index() * ۱۰۰px);
}

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


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع first-valid()
معرفی روش جدیدی با نام first-valid که آرگومان‌هایی را دریافت کرده و نخستین مقدار معتبر را انتخاب می‌کند، می‌تواند به‌طور قابل‌توجهی کار با متغیرهای CSS را ساده‌تر و قابل‌اعتمادتر کند. یکی از چالش‌های رایج در استفاده از متغیرها این است که حتی اگر مقدار آن‌ها نامعتبر باشد، همچنان به‌عنوان مقدار معتبر در نظر گرفته می‌شوند و در نتیجه، مقادیر پشتیبان (fallback) نادیده گرفته می‌شوند.

با بهره‌گیری از تابع `first-valid`، می‌توان مجموعه‌ای از مقادیر پشتیبان را به‌صورت زنجیره‌ای تعریف کرد. در این حالت، مرورگر نخستین مقدار معتبر را از میان آن‌ها انتخاب می‌کند و اگر مقدار اول معتبر نباشد، به ترتیب سراغ گزینه‌های بعدی می‌رود تا به یک مقدار معتبر برسد. این قابلیت باعث می‌شود کد CSS مقاوم‌تر و نگهداری آن آسان‌تر شود.

مثال:

/* بدون استفاده از مقدار پشتیبان مؤثر */
div {
  --a: ۴۰px;
  --b: red;
  background: golden;
  background: var(--a);
}

/* استفاده از مقدار معتبر با first-valid */
div {
  --a: ۵۰px;
  --b: green;
  background: red;
  background: first-valid(var(--a), var(--b));
}

در نمونه دوم، اگر مقدار نخست (مثلاً --a) به هر دلیلی نامعتبر باشد، مرورگر به‌طور خودکار از مقدار دوم (یعنی --b) استفاده خواهد کرد. این روش، رویکردی ساخت‌یافته و ایمن برای مدیریت مقادیر متغیرها فراهم می‌سازد.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع‌های *-mix()
با معرفی تابع جدید mix() در CSS، فرایند ترکیب توابع مختلفی که با *-mix() شناخته می‌شوند، بسیار ساده‌تر شده است. اکنون اگر بخواهید رنگ‌ها را با یکدیگر ترکیب کنید، می‌توانید از نگارشی مانند color(green, ۵۰٪، blue) استفاده کنید. به‌همین ترتیب، ترکیب طول‌ها نیز امکان‌پذیر است. این تابع حتی برای توابع مرتبط با تبدیل (transform) نیز کاربرد دارد که موجب افزایش انعطاف‌پذیری و سهولت در استفاده از CSS می‌شود.

با بهره‌گیری از این قابلیت، می‌توان به‌سادگی ویژگی‌های مختلف را با یکدیگر ادغام کرده و بدون پیچیدگی اضافه در کدنویسی، به نتیجه‌ی دلخواه دست یافت. در نتیجه، کد نهایی خواناتر، بهینه‌تر و نگه‌داری آن آسان‌تر خواهد بود.

از جمله توابع پشتیبانی‌شده می‌توان به موارد زیر اشاره کرد:

* calc-mix()
* color-mix()
* cross-fade()
* palette-mix()

مثال:

div {
  color: mix(۷۰٪، سبز، آبی);
}

در این مثال، رنگ نهایی ترکیبی از هفتاد درصد سبز و سی درصد آبی خواهد بود. این نوع نگارش، بیانگر نسلی نو از قابلیت‌های طراحی در CSS است که پاسخ‌گوی نیازهای پیچیده‌ی امروزی با رویکردی ساده و مؤثر است.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript