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

اگر فکر می‌کنید که طراحی واکنش‌گرا برای تمام مرورگرها کار سختی است، پس بهتر است سعی کنید یک ایمیل طراحی کنید که در 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

تابع‌های *-progress()
این رویکرد، امکان محاسبه‌ی پیشرفت نسبی یک مقدار از نقطه‌ی آغازین تا نقطه‌ی پایانی را فراهم می‌سازد. خروجی این تابع، عددی بین صفر تا یک خواهد بود که می‌توان آن را در عملیات مختلف مورد استفاده قرار داد. این قابلیت به‌ویژه در ترکیب با خانواده‌ی توابع *-mix() که پیش‌تر معرفی شد، کاربردی و مؤثر است و امکان کنترل دقیق‌تر و پویاتری بر حالت‌های میانی میان مقادیر مختلف فراهم می‌کند.

در این دسته، سه تابع اصلی تعریف شده‌اند:

* progress()
* media-progress()
* content-progress()

این توابع ابزارهایی انعطاف‌پذیر برای طراحی‌های واکنش‌گرا، تعامل‌پذیر و مبتنی بر وضعیت فراهم می‌آورند.

مثال:

div {
  width: calc(۱۰۰٪ * progress(۵۰px from ۰px to ۱۰۰px));
}

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

این قابلیت، طراحی‌ مبتنی بر مقادیر دینامیک را ساده‌تر، قدرتمندتر و خواناتر می‌سازد.



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

تابع calc-size()
این تابع امکان کار امن و دقیق با مقادیر درونی مانند auto`، `max-content و fit-content را فراهم می‌سازد. این قابلیت به‌ویژه هنگام طراحی گذارها (transitions) و انیمیشن‌ها که نیاز به کنترل دقیق ابعاد دارند، بسیار کارآمد و مؤثر است.

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

اگرچه تابع calc() در بسیاری از موارد به‌خوبی با مقادیر مشخص عمل می‌کند، اما توانایی پردازش مقادیر درونی مانند auto یا fit-content را ندارد. در چنین شرایطی، تابع calc-size() راه‌حلی امن و کارآمد برای مدیریت این‌گونه مقادیر ارائه می‌دهد، به‌ویژه در زمینه‌ی انیمیشن‌ها و گذارهای پویا.

مثال:

details {
  transition: height ۱s;
}

details::details-content {
  display: block;
}

details[open]::details-content {
  height: auto;
}

details:not([open])::details-content {
  height: calc-size(any, ۰px);
}

در این مثال، تابع calc-size() به‌گونه‌ای استفاده شده است که هنگام بسته بودن جزئیات (details)، مقدار ارتفاع را از حالت پویا به صفر پیکسل کاهش دهد، بدون آنکه منجر به اختلال در اجرای گذار شود. این عملکرد، گامی بزرگ در راستای ایجاد تعاملات روان، مؤثر و قابل‌پیش‌بینی در طراحی رابط کاربری محسوب می‌شود.


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

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

* random-item() که یک مقدار تصادفی از میان یک فهرست برمی‌گرداند.
* random() که عددی تصادفی در بازه‌ای مشخص تولید می‌کند.

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

مثال:

.random-square-۲ {
  font-size: ۱۶px;
  width: random(۱۶۰px, ۳۲۰px);
  height: random(۱۰em, ۲۰em);
}

.random {
  /* مقدار تصادفی بین صد تا سیصد پیکسل */
  width: random(۱۰۰px, ۳۰۰px);

  /* مقدار تصادفی بین صد تا سیصد پیکسل با گام پنجاه پیکسل:
     صد پیکسل، صد و پنجاه پیکسل، ... */
  height: random(۱۰۰px, ۳۰۰px, by ۵۰px);

  /* یکی از سه رنگ تصادفی */
  background: random-item(--c, قرمز، سبز، آبی);
}

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

### شبه‌کلاس CSS به نام :only-child 😉

این شبه‌کلاس زمانی روی یک عنصر اعمال می‌شود که آن عنصر تنها فرزند والد خود باشد.

به زبان ساده‌تر، زمانی عمل می‌کند که یک عنصر، تنها آیتم موجود در داخل محفظه (یا کانتینر) خود باشد. ☺️

---

### این شبه‌کلاس چه کاری انجام می‌دهد؟

div > p:only-child {
  color: crimson;
}

ترجمه: این استایل زمانی روی تگ <p> اعمال می‌شود که تنها فرزند داخل تگ <div> باشد.

---

### 👩‍💻 کاربردها

⏺️ پنهان کردن عناصر اضافی، در صورتی که بیش از یکی باشند
⏺️ تغییر ظاهر عناصر «تک‌نفره»، مثلاً وقتی در یک فهرست فقط یک مورد وجود دارد
⏺️ کاهش فاصله‌ها یا حذف عناصر تزئینی، وقتی یک عنصر به‌تنهایی درون کانتینر قرار دارد

---

### 🟣 ترکیب با شبه‌کلاس :has



با اینکه :only-child به‌تنهایی ابزار مفیدی‌ست، اما من از ترکیب آن با شبه‌کلاس :has() بسیار لذت می‌برم.
این ترکیب به ما اجازه می‌دهد بدون استفاده از JavaScript، براساس نوع و تعداد فرزندان یک عنصر، به عنصر والد استایل دهیم. ✔️

---

### 👩‍💻 نمونه کد:

ul:has(> li:only-child) {
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

توضیح: اگر درون تگ <ul> تنها یک تگ <li> وجود داشته باشد، این استایل ویژه برای آن اعمال می‌شود.

---


---

### جمع‌بندی

این شبه‌کلاس ساده، در ظاهر کوچک به نظر می‌رسد، اما در موقعیت‌های مناسب، می‌تواند بسیار کاربردی و مؤثر باشد. 👍


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

❔ تابع `hsla()` چگونه کار می‌کند؟

تابع hsla() که پارامترهای آن به ترتیب نشان‌دهندهٔ تون رنگ (Hue)**، **اشباع رنگ (Saturation)**، **روشنایی (Lightness) و کانال آلفا (Alpha) هستند، برای تعیین رنگ‌های نیمه‌شفاف نیز به‌کار می‌رود.

تون رنگ (Hue) با استفاده از درصدهایی بر مبنای دایرهٔ رنگ مشخص می‌شود. این دایره به بخش‌هایی تقسیم شده که هر کدام نمایندهٔ یکی از رنگ‌های اصلی یا فرعی هستند:

* ۰ یا ۳۶۰ درجه — رنگ قرمز
* ۶۰ درجه — رنگ زرد
* ۱۲۰ درجه — رنگ سبز
* ۱۸۰ درجه — رنگ آبی روشن (فیروزه‌ای)
* ۲۴۰ درجه — رنگ آبی تیره
* ۲۷۰ درجه — رنگ بنفش
* ۳۰۰ درجه — رنگ ارغوانی (سرخابی)

برای به‌دست آوردن رنگ سیاه**، باید مقدار **تون، اشباع و روشنایی را برابر با صفر قرار دهید:
hsla(0, 0%, 0%, 1)

رنگ سفید با روشنایی صد درصد و صفر بودن تون و اشباع حاصل می‌شود:
hsla(0, 0%, 100%, 1)

و برای تولید رنگ **خاکستری**، کافی‌ست اشباع برابر صفر و روشنایی پنجاه درصد باشد:
hsla(0, 0%, 50%, 1)


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

### آشنایی با ویژگی جالبی به نام touch-action 🤫

زمانی که برای دستگاه‌های موبایل یا نمایشگرهای لمسی وب‌اپلیکیشن توسعه می‌دهیم، مدیریت دقیق ژست‌های لمسی کاربران—مانند سوایپ، اسکرول یا بزرگ‌نمایی—اهمیت زیادی پیدا می‌کند. در این میان، ویژگی CSS به نام touch-action به کمک ما می‌آید.

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

---

### touch-action دقیقاً چه کاری انجام می‌دهد؟ 🧐

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

با استفاده از touch-action می‌توانیم مشخص کنیم که کدام رفتارها را مرورگر باید پردازش کند و کدام‌ها را اپلیکیشن. این امکان به‌ویژه برای جلوگیری از رفتارهای ناخواسته، مانند اسکرول ناگهانی یا بزرگ‌نمایی ناخواسته، بسیار مفید است.

---

### چرا استفاده از touch-action ضروری است؟ 🤕

یک) بهبود عملکرد:
با غیرفعال کردن عملکردهای غیرضروری مرورگر (مانند اسکرول یا زوم)، می‌توان عملکرد کلی اپلیکیشن را به‌ویژه در موبایل‌ها افزایش داد.

دو) کنترل کامل ژست‌ها:
در بسیاری از اپلیکیشن‌ها، نیاز داریم رفتار ژست‌هایی مانند سوایپ یا اسکرول را دقیقاً مطابق نیاز تنظیم کنیم، که این ویژگی امکان‌پذیرش را فراهم می‌سازد.

سه) جلوگیری از تداخل با مرورگر:
استفاده از مقدار touch-action: none جلوی دخالت مرورگر را می‌گیرد—برای مثال، در شرایطی که کاربر با سوایپ قصد تعامل با اپلیکیشن دارد، اما مرورگر آن را به‌عنوان حرکت بازگشت به صفحه قبلی تلقی می‌کند.




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

### بررسی متد classList.toggle همراه با پارامتر دوم 🤨

متد toggle یکی از پرکاربردترین ابزارها برای مدیریت کلاس‌های CSS در JavaScript است. این متد امکان تغییر پویا در وضعیت عناصر صفحه را با افزودن یا حذف کلاس‌ها فراهم می‌کند.

اما این متد یک پارامتر دوم هم دارد که معمولاً نادیده گرفته می‌شود! 😔

---

### ☺️ نگاهی به سینتکس پایه:

element.classList.toggle('className');

در این حالت:

* ✔️ اگر کلاس مورد نظر وجود داشته باشد، حذف می‌شود؛
* ✔️ اگر وجود نداشته باشد، افزوده می‌شود.

---

### ☺️ اما پارامتر force چیست؟

element.classList.toggle('className', force);

پارامتر force یک مقدار بولی (true یا false) است که به طور صریح کنترل می‌کند که کلاس افزوده شود یا حذف:

* ✔️ true → همیشه کلاس را افزوده خواهد کرد؛
* ✔️ false → همیشه کلاس را حذف خواهد کرد.

---

### 🔍 چند مثال:

menu.classList.toggle('open', true);   // کلاس 'open' حتماً افزوده می‌شود
menu.classList.toggle('open', false);  // کلاس 'open' حتماً حذف می‌شود

---

### 🔧 این قابلیت کجا به کار می‌آید؟

برای همگام‌سازی وضعیت عناصر با منطق برنامه.
به‌جای نوشتن شرط‌های جداگانه برای بررسی وجود یا نبود کلاس، می‌توان به‌سادگی از یک شرط منطقی استفاده کرد:

const isDarkMode = userSettings.theme === 'dark';
document.body.classList.toggle('dark-mode', isDarkMode);

---

### 📌 موارد کاربرد رایج:

* 🔵 فعال‌سازی تم تیره
* 🔵 باز یا بسته بودن منوها
* 🔵 مشخص کردن عنصر فعال
* 🔵 اعمال فیلتر یا مرتب‌سازی

---

### چرا مهم است؟

اگر از پارامتر force استفاده نشود، متد toggle فقط وضعیت کلاس را بین حالت موجود و ناموجود جابه‌جا می‌کند. اما در دنیای واقعی توسعه، معمولاً نیاز به کنترل دقیق و هماهنگ با منطق برنامه وجود دارد.

---

### ✅ نتیجه‌گیری:

استفاده از toggle با پارامتر force مزایای زیر را به همراه دارد:

* کاهش منطق اضافی (نیازی به شرط‌های جداگانه نیست)
* کاهش حجم کد (فقط یک خط کد به‌جای چندین خط شرطی)
* کاهش خطا (جلوگیری از ناهماهنگی بین وضعیت UI و داده‌ها)

در مجموع، روشی ساده و مؤثر برای همگام‌سازی دقیق وضعیت عناصر با منطق برنامه است. 👍


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

‏### Visual Viewport API: ردیابی بزرگ‌نمایی و تغییرات ناحیه‌ی دید 🤩

اگر تا به حال به این فکر کرده‌اید که چطور می‌توان تغییرات در بزرگ‌نمایی (zoom) صفحه یا واکنش به تغییر ابعاد پنجره در دستگاه‌های موبایل را شناسایی کرد، خبر خوبی برایتان دارم — من به‌تازگی با API جالبی به نام Visual Viewport API آشنا شدم! 🎉

‏**Visual Viewport API** ابزاری است که به شما امکان می‌دهد بفهمید کاربر در حال حاضر سایت شما را *چگونه می‌بیند* و بتوانید رابط کاربری را متناسب با اقدامات او تنظیم کنید.

این API به شما دسترسی می‌دهد به ناحیه‌ی دید بصری — یعنی آن بخش از صفحه که در لحظه روی نمایشگر دیده می‌شود، نه کل محتوای صفحه.

---

### با Visual Viewport API چه اطلاعاتی می‌توان به‌دست آورد؟

#### 🔍 ردیابی بزرگ‌نمایی (Zoom)

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

---

#### 📏 تغییر اندازه‌ی ناحیه‌ی دید

زمانی‌که اندازه‌ی بخش قابل‌مشاهده‌ی صفحه تغییر می‌کند (برای مثال، هنگام بزرگ‌نمایی یا چرخش صفحه‌نمایش)، می‌توان از window.visualViewport.width و window.visualViewport.height برای دریافت ابعاد جدید استفاده کرد. این کار به تطبیق بهتر رابط کاربری با اندازه‌های مختلف کمک می‌کند.

---

#### ➡️ تشخیص جابه‌جایی ناحیه‌ی دید

با استفاده از window.visualViewport.offsetLeft و window.visualViewport.offsetTop می‌توان جابه‌جایی ناحیه‌ی دید را نسبت به ابتدای صفحه پیگیری کرد. این قابلیت برای جای‌گذاری دقیق عناصر روی صفحه بسیار کاربردی است.

---

### پشتیبانی از رویدادهای resize و scroll

این API از رویدادهای resize و scroll نیز پشتیبانی می‌کند، که هنگام تغییر وضعیت ناحیه‌ی دید فعال می‌شوند. این موضوع به شما امکان می‌دهد محتوای رابط کاربری را *به‌صورت لحظه‌ای* به‌روزرسانی کنید — قابلیتی ایده‌آل برای رابط‌های پویا و تعاملی.

---

### ✅ جمع‌بندی

با استفاده از Visual Viewport API می‌توانید رابط‌هایی طراحی کنید که نسبت به رفتارهای کاربر مانند بزرگ‌نمایی یا پیمایش (scroll) واکنش نشان دهند. این ویژگی به‌ویژه برای طراحی رابط‌های موبایل بسیار ارزشمند است. 🙂

—

دموی این قابلیت را می‌توانید در این لینک مشاهده کنید:

🔗 مشاهده کد در CodePen
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

یکی از ویژگی‌های CSS برای جدول‌ها که اغلب نادیده گرفته می‌شود، اما می‌تواند به‌طور چشمگیری کار شما را ساده‌تر کند:
‏
## table-layout — کلیدی برای بهینه‌سازی جدول‌ها

این ویژگی تعیین می‌کند مرورگر چگونه ابعاد ستون‌ها و سطرهای یک جدول را محاسبه کند.

### table-layout دقیقاً چه می‌کند؟

با استفاده از این ویژگی، می‌توان سرعت رندر جدول را افزایش داد و ظاهر آن را تحت کنترل قرار داد.
در حالت پیش‌فرض، مرورگر اندازه‌ی ستون‌ها را بر اساس محتوای درون آن‌ها محاسبه می‌کند. این کار ممکن است مخصوصاً در جدول‌های بزرگ، فرآیند رندر را کند کند.

اما با کمک table-layout می‌توان ابعاد ستون‌ها را به‌صورت ثابت تعیین کرد تا مرورگر دیگر نیازی به محاسبه‌ی آن‌ها نداشته باشد و از همان ابتدا، از اندازه‌های مشخص‌شده استفاده کند.

---

### مقادیر قابل استفاده برای table-layout:

✔️ auto (مقدار پیش‌فرض):
ابعاد ستون‌ها به‌صورت خودکار و بر اساس محتوای آن‌ها تعیین می‌شود.
مناسب برای جدول‌هایی با محتوای پویا، اما ممکن است باعث کاهش سرعت رندر شود.

✔️ fixed:
همه‌ی ستون‌ها دارای عرض ثابت خواهند بود، بدون توجه به محتوای داخلی آن‌ها.
این گزینه رندر جدول را سریع‌تر کرده و کارایی را بهبود می‌بخشد، زیرا مرورگر از ابتدا از اندازه‌های تعیین‌شده استفاده می‌کند.

---

اگر جدول شما شامل داده‌های زیادی است یا به ستون‌هایی با عرض یکسان نیاز دارید، استفاده از table-layout: fixed بهترین انتخاب خواهد بود. 👍

🔗 [نمونه در CodePen](https://codepen.io/katrin_profrontend/pen/zxvKRPo)


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

### بهبود عملکرد رویدادهای پیمایش (Scroll) 👨‍🏫

به‌تازگی با این هشدار مواجه شدم:

> "\[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive."

این پیام باعث شد رویکردم به مدیریت رویدادهای پیمایش را بازبینی کنم.

زمانی که با رویدادهایی مانند پیمایش با ماوس (wheel) یا حرکت لمسی (touchmove) سروکار داریم، معمولاً چالش‌هایی در زمینه‌ی عملکرد (Performance) به وجود می‌آید.
به‌طور پیش‌فرض، مرورگرها می‌توانند رفتار استاندارد (مانند پیمایش) را مسدود کنند، به‌ویژه اگر در تابع پردازشگر از event.preventDefault() استفاده شود.
این مسأله ممکن است باعث تأخیر در واکنش رابط کاربری**، خصوصاً در دستگاه‌های همراه شود. 😔

---

### راه‌حل: استفاده از گزینه‌ی `{ passive: true }` 🤨

با افزودن گزینه‌ی `{ passive: true }` هنگام افزودن شنونده‌ی رویداد (Event Listener)، به مرورگر اطلاع می‌دهیم که قرار نیست رفتار پیش‌فرض را لغو کنیم.
در نتیجه، مرورگر می‌تواند بلافاصله اقدام به انجام رفتار استاندارد (مثل پیمایش) کند و منتظر اجرای کامل کد شما نماند.

```javascript
element.addEventListener('wheel', (event) => {
// کد مربوطه
}, { passive: true });
```

---

### چرا این موضوع اهمیت دارد؟

✔️ **افزایش سرعت واکنش رویدادها
مرورگر بلافاصله پیمایش را آغاز می‌کند و این باعث بهبود پاسخ‌گویی رابط کاربری می‌شود — خصوصاً در تلفن‌های هوشمند و تبلت‌ها.

✔️ عدم انسداد رندر شدن صفحه
با استفاده از { passive: true } مرورگر دیگر منتظر اجرای کامل تابع پردازشگر نمی‌ماند، که این موضوع باعث کاهش تأخیر و افزایش روانی حرکت صفحه می‌شود.

---

### چند نکته‌ی مهم:

۱️⃣ مقدار پیش‌فرض `passive` برابر با false است
یعنی در حالت عادی می‌توان از event.preventDefault() برای لغو رفتار پیش‌فرض استفاده کرد.
اما مرورگرها در مورد برخی رویدادها مانند wheel`، `touchmove و touchstart در سطوحی مثل window`، `document و `document.body`، به‌صورت خودکار passive را برابر با true قرار می‌دهند تا از ایجاد تاخیر جلوگیری شود.

۲️⃣ اگر شما `passive: true` را صراحتاً تعیین کنید و در تابع مربوطه از event.preventDefault() استفاده نمایید، مرورگر این دستور را نادیده خواهد گرفت.

---

### جمع‌بندی:

استفاده از گزینه‌ی { passive: true } یک تغییر ساده اما مؤثر برای بهبود روانی و واکنش‌پذیری اپلیکیشن است — به‌ویژه در سناریوهایی که با پیمایش و تعامل لمسی سروکار داریم. ✅


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

شکستن کلمات همراه با خط تیره 😉

موضوع ساده به نظر می‌رسد — وقتی یک کلمه طولانی در یک خط جا نمی‌شود، باید آن را با خط تیره به خط بعد منتقل کرد. اما چطور این کار را به‌درستی انجام دهیم تا هم ظاهر متن زیبا باشد و هم ساختار آن به‌هم نریزد؟

بیایید بررسی کنیم برای این کار در CSS چه نیاز داریم. ☺️

برای شکستن صحیح کلمات همراه با خط تیره، سه ویژگی اصلی مورد نیاز است:

✔️ overflow-wrap: break-word; — این ویژگی باعث می‌شود کلمات طولانی (مثل نشانی‌های اینترنتی یا اصطلاحات پیچیده) در صورت کمبود فضا به خط بعد منتقل شوند.

✔️ word-break: break-word; — این ویژگی اجازه می‌دهد کلمات در نقاط مناسب نیز شکسته شوند، اگر در یک خط جا نشوند.

✔️ hyphens: auto; — مسئول اضافه کردن خودکار خط تیره هنگام شکستن کلمات است، بر اساس قواعد زبان مورد استفاده.

نمونه کد:

.text {
    overflow-wrap: break-word; /* اجازه شکستن کلمات طولانی */
    word-break: break-word;    /* شکستن کلمات در نقاط مناسب */
    hyphens: auto;             /* افزودن خودکار خط تیره هنگام شکستن */
}

حالا همه‌چیز طبق قواعد زبان کار خواهد کرد: کلمات همراه با خط تیره شکسته می‌شوند و در عین حال متن، منظم و زیبا باقی می‌ماند. 👍


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

یادآوری درباره‌ی ‎`.setProperty()` و متغیرهای CSS 😉

همه‌ی ما متد ‎`.setProperty()` می‌شناسیم و معمولاً زمانی به یادش می‌افتیم که لازم باشد یک ویژگی CSS را مستقیماً از طریق JavaScript تغییر دهیم.
اما به‌راحتی می‌توان فراموش کرد که با همین متد می‌توان متغیرهای CSS را نیز تغییر داد — و این در بسیاری موارد بسیار کارآمدتر است.

برای نمونه، یک متغیر سراسری در ‎`:root`‎:

:root {
  --main-color: #333;
}

و در JavaScript:

// تغییر خود متغیر، نه ویژگی مستقیم
document.documentElement.style.setProperty('--main-color', '#ff6600');

اکنون تمام عناصری که مقدار color: var(--main-color) دارند، به‌طور خودکار مقدار جدید را دریافت می‌کنند. 👍

کجا استفاده از متغیرها از طریق ‎`.setProperty()`‎ بیش‌تر به چشم می‌آید؟

✔️ انیمیشن‌ها — تنها با تغییر یک متغیر، تمام استایل‌های مرتبط به‌صورت روان و از طریق CSS transition به‌روز می‌شوند.
✔️ استفاده در content — می‌توان متن یا نمادی را در یک متغیر ذخیره کرد و آن را به‌صورت پویا تغییر داد.

.btn::after {
  content: var(--btn-label);
}

btn.style.setProperty('--btn-label', '"✓"');

در نتیجه، ‎`.setProperty()`‎ تنها برای تغییر ویژگی‌ها نیست، بلکه ابزاری قدرتمند برای مدیریت متغیرهای CSS نیز به‌شمار می‌رود ⚡️

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

نحو تعریف ویژگی caret-shape بسیار ساده است:

caret-shape: auto | bar | block | underscore;


مقدار اولیه auto است، که به مرورگر اجازه می‌دهد شکل نشانگر را بر اساس استانداردهای پلتفرم در موقعیت‌های مختلف تعیین کند. اما تا کنون همیشه از نشانگر خط عمودی (|) استفاده شده است.

شما می‌توانید نشانگر بلوک (█) یا زیرخط (_)‌ را انتخاب کنید، که برای برخی اپلیکیشن‌ها مانند ویرایشگر کد کاربردی و جلوه‌ای جذاب دارد.

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