### آشنایی با ویژگی جالبی به نام 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

می‌دانستید که nth-child در CSS از چند سال پیش به صورت استاندارد قابل استفاده شده است؟

منظورم این است: قبلاً انتخاب شما محدود بود؛ می‌توانستی از nth-child برای شماره‌گذاری گره‌ها (تگ‌ها) به‌طور عمومی استفاده کنی یا nth-of-type برای شماره‌گذاری نوع خاصی از گره‌ها (div، p، section).

چطور می‌توانستم دومین عنصر با کلاس .star را انتخاب کنم؟

و چیزی که من نمی‌دانستم این است که nth-child اکنون می‌تواند یک سلکتور به شکل آرگومان of بگیرد!

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

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

‌‏Scroll Snap دقیقاً همین کار را انجام می‌دهد: وقتی کاربر اسکرول می‌کند، مرورگر به‌صورت خودکار موقعیت صفحه را روی نقاط مشخص (Snap Points) قفل می‌کند. مثل اینکه یک مغناطیس نامرئی روی هر آیتم گذاشته‌ایم که وقتی نزدیک می‌شود، صفحه آن را درست در وسط یا بالای دید شما قرار می‌دهد.
ویژگی scroll-snap-type یک خصوصیت الزامی برای هر کانتینر قابل اسکرول است که می‌خواهید روی آن scroll snapping فعال شود. این ویژگی به سه سؤال برای کانتینر پاسخ می‌دهد:

1-آیا این کانتینر از scroll snapping استفاده می‌کند؟
2-روی کدام محور — افقی (x)، عمودی (y)، بلوک (block) یا خطی (inline) — scroll snapping اعمال شود؟
3-رفتار scroll snapping چگونه باشد؟ آیا همیشه اجباری (mandatory) است، یا فقط زمانی که کاربر به موقعیت اسنپ نزدیک شود فعال می‌شود؟

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

دربارهٔ مشکل مرکزچینی عمودی محتوا در CSS می‌توان افسانه‌ها نوشت

خیلی هم غم‌انگیز است که این داستان‌ها کم‌کم به پایان می‌رسند، زیرا حالا ما نه تنها Flex و Grid را داریم، بلکه یک ویژگی ساده و قابل‌فهم به نام align-content هم در دسترس است

بله، این ویژگی از دیرباز پایه‌ای برای مدل‌های Flex و Grid بوده است، اما از نسخه‌های جدید مرورگرها — Chrome 123**، **Firefox 125 و Safari 17.4 — پشتیبانی می‌شود و اکنون در مدل بلوکی (Block Layout) هم قابل استفاده است! 🎉

مثال ساده:

.container {
  align-content: center;
}

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

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

طبق معمول، این روش چندان هم استاندارد نیست
سپاس از اپل، همیشه همین‌طور خاص!

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

بررسی آزاردهنده‌ترین عنصر در میان تمام ویجت‌های استاندارد HTML

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

### مقادیر دوگانه در ویژگی display در CSS 🤔

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

#### مقادیر دوگانه چیست؟

🧩 مقدار نخست، رفتار اصلی عنصر را مشخص می‌کند (مانند *block*، *inline* یا *flex*).
🧩 مقدار دوم، این رفتار را تکمیل و اصلاح می‌کند.

به‌عنوان نمونه، در حالت inline-block**، عنصر مانند یک عنصر درون‌خطی رفتار می‌کند، اما در عین حال می‌توان برای آن ابعاد مشخص کرد، درست مانند یک عنصر بلوکی. 👍

```html
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">بلوک</div>
```

#### نمونه‌های دیگر:

✔️ **inline-block:
⏺️ *inline* — عنصر در همان خط باقی می‌ماند.
⏺️ *block* — امکان تعریف اندازه‌ها فراهم است.

✔️ inline-flex:
⏺️ *inline* — ظرف (container) موجب شکستن خط نمی‌شود.
⏺️ *flex* — عناصر درون ظرف بر اساس قوانین فِلِکس‌باکس چیده می‌شوند.

---

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

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



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

در media queries نمی‌توان از ویژگی‌های CSS (@property) استفاده کرد، اما راه‌های جایگزینی وجود دارد از طریق container queries.

@property --inline-size-s {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: ۱۰۰vi;
}

:root {
  --breakpoint-s: ۴۸em;
  --inline-size-s: min(var(--breakpoint-s), ۱۰۰vi);
}

body {
  background-color: var(--bg-color);

  --bg-color: oklch(۰.۹۴ ۰.۰۱ ۹۹);
  
  @container style(--inline-size-s: var(--breakpoint-s)) {
    --bg-color: oklch(۰.۸۷ ۰.۲۱ ۹۵.۸۲);
  }
}

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

در عنصر <link rel="stylesheet"> می‌توان ویژگی media را با یک عبارت مشابه آنچه در دستور @media استفاده می‌شود، تعیین کرد. مرورگر این عبارت رسانه‌ای را با محیط فعلی تطبیق می‌دهد و نتیجه‌ی آن بر نحوه‌ی بارگذاری فایل استایل تأثیر می‌گذارد:

<link
  rel="stylesheet"
  href="mobile.css"
  media="(width < 600px)"
>

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

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

بارگذاری فایل‌های CSS در لایه‌های مجزا با استفاده از ‎@import

<style>
  @import url('utils.css') layer(utils);
</style>

مرورگر فایل utils.css را بارگذاری کرده و آن را در لایه‌ای با نام utils قرار می‌دهد. این کار امکان کنترل ترتیب و اولویت آبشاریِ سبک‌های این فایل نسبت به سایر لایه‌ها را فراهم می‌آورد — یعنی می‌توان اولویت آن را نسبت به فایل‌های دیگر بالا برد یا پایین آورد.

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




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

🎯 بارگذاری مشروط فایل‌های CSS با استفاده از ‎@supports‎

دستور کاربردی دیگری که در این زمینه مطرح می‌شود، ‎`@supports`‎ است. با استفاده از آن می‌توان برخی سبک‌ها را تنها زمانی بارگذاری کرد که مرورگر از قابلیت‌های خاص CSS پشتیبانی کند. این ویژگی ابزاری قدرتمند برای پیاده‌سازی بهبود تدریجی (Progressive Enhancement) به شمار می‌آید و به توسعه‌دهندگان کمک می‌کند تا تجربه‌ی کاربری یکسانی را در مرورگرهای مختلف حفظ کنند.

<style>
  @import url('scroll-animations.css') supports(animation-timeline: scroll());
</style>

در این مثال، مرورگر فایل ‎`scroll-animations.css`‎ را فقط در صورتی بارگذاری می‌کند که از ویژگی ‎`animation-timeline: scroll()`‎ پشتیبانی داشته باشد. این روش راهی تمیز و هوشمندانه برای استفاده‌ی بهینه از قابلیت‌های مدرن CSS است.


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

نوآوری‌های CSS — کنترل حداکثری با انتخابگر :nth-child() و دستور جدید OF S

با استفاده از شبه‌کلاس `:nth-child()` می‌توان عناصر موجود در DOM را بر اساس ترتیبشان انتخاب کرد. نحوۀ کلاسیک An+B به شما امکان می‌دهد انتخاب عناصر را با دقت بالا کنترل کنید.

برای نمونه:

* :nth-child(2) — انتخاب دومین فرزند.
* :nth-child(2n) — انتخاب تمام فرزندان زوج.
* :nth-child(2n+1) — انتخاب تمام فرزندان فرد.
و غیره...

اما حالا ویژگی جدیدی در سطح چهارم انتخابگرهای CSS معرفی شده است — یعنی سینتکس OF S. این قابلیت به شما اجازه می‌دهد ابتدا عناصر را بر اساس یک فیلتر مشخص (مثلاً کلاس یا نوع خاصی از عناصر) محدود کنید، و سپس از میان همان گروه، عناصر مورد نظر را بر اساس ترتیبشان انتخاب نمایید.

ساختار کلی:

:nth-child(An+B [of S])
:nth-last-child(An+B [of S])

در سطح چهارم انتخابگرهای CSS (Selectors Level 4) که در [W3C](https://www.w3.org/TR/selectors-4/) تعریف شده است، می‌توان به‌صورت اختیاری یک فهرست از انتخابگرها را در :nth-child() یا :nth-last-child() ارسال کرد.

---

### 📘 مثال

<div class="test-1">one</div>
<div class="test-2">two</div>
<div class="test-1">three</div>
<div class="test-2">four</div>

:nth-child(2 of .test-1, .test-2) {
  outline: 0.3rem dashed lightblue;
}

---

### 🔍 چگونه کار می‌کند؟

تصور کنید شبه‌کلاس :nth-child با دستور of S مانند یک فیلتر هوشمند عمل می‌کند.
ابتدا مرورگر همهٔ عناصری را که با انتخابگرهای .test-1 و .test-2 مطابقت دارند پیدا می‌کند. سپس از میان آن فهرست فیلترشده، دومین عنصر را انتخاب می‌کند و سبک (style) مورد نظر را به آن اعمال می‌کند.

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

---

با این قابلیت، دامنۀ کارهایی که می‌توان تنها با CSS انجام داد روزبه‌روز گسترده‌تر می‌شود — بدون نیاز به جاوااسکریپت! 🎨


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

چگونه بدون استفاده از <br> در CSS شکست خط ایجاد کنیم 🧐

یک ترفند جالب وجود دارد که با استفاده از نماد \A و سبک‌هایی مثل white-space: pre-wrap می‌توان شکست خط را در CSS ایجاد کرد. بیایید بررسی کنیم چگونه این کار انجام می‌شود!

📕 نماد `\A` چیست؟

در CSS، \A راهی برای وارد کردن شکست خط در ویژگی content است که معمولاً در پیش‌عنصرها (::before و ::after) استفاده می‌شود. به جای قرار دادن دستی <br>`، کافی است `\A را بنویسیم تا مرورگر بداند در این نقطه باید خط جدید شروع شود.

با این حال، برای کارکرد صحیح این روش، لازم است ویژگی white-space را اضافه کنیم، مثلاً با مقدار pre-wrap. این ویژگی به مرورگر می‌گوید: «شکست‌های خط را مانند تگ <pre> پردازش کن، ولی همچنین اجازه بده متن در صورت نیاز به خط بعد منتقل شود.»

مثال:

.text::before {
  content: "خط اول\Aخط دوم"; /* \A شکست خط ایجاد می‌کند */
  white-space: pre-wrap;       /* \A را به عنوان شکست خط پردازش می‌کند */
}

اینجا \A در ویژگی content شکست خط ایجاد می‌کند و white-space: pre-wrap به مرورگر کمک می‌کند این شکست را به درستی نمایش دهد.

✅ نتیجه: این روش یک راه عالی برای تمیز نگه داشتن کد و راحت‌تر کردن مدیریت متن است.


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