در 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

نکته‌ی CSS: از ارقام جدولی (tabular numbers) برای نمایش تایمرها استفاده کنید

ویژگی font-variant-numeric مشخص می‌کند که اعداد چگونه نمایش داده شوند. با تنظیم مقدار آن روی tabular-nums، تمام اعداد با پهنای یکسان نمایش داده می‌شوند، که باعث می‌شود کاملاً منظم و در یک خط قرار بگیرند.


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

شعاع حاشیه منفی

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

روش‌های مختلفی برای این کار وجود دارد، از جمله ترفندهایی با استفاده از عناصر ماسک دارای موقعیت مطلق. در کل، پیاده‌سازی چنین بلوک‌هایی کار ساده‌ای نیست. اما تیم HTML Academy راه‌حلی ارائه داده است — کتابخانه‌ای به نام nebo.css (https://github.com/htmlacademy/nebo.css
).

Nebo مخفف negative border radius است، عبارتی که اغلب برای توصیف چنین افکت‌هایی به کار می‌رود. این کتابخانه یک فایل CSS با بیش از صد خط کد است که چند کلاس و مجموعه‌ای از ویژگی‌های سفارشی برای تنظیم دقیق در اختیار شما قرار می‌دهد.

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

چطور می‌توان یک عنصر را وادار کرد تا عرض خود را پله‌پله تغییر دهد**؟

فرض کنید می‌خواهید یک صفحه‌ی شطرنجی داشته باشید که در هر شرایطی یکپارچه باقی بماند.

امروز چند روش برای رسیدن به این هدف داریم:

**۱. از آنا تودور: ([https://twitter.com/anatudor](https://twitter.com/anatudor))
نمونه در CodePen: [https://codepen.io/thebabydino/pen/zYbZpBq](https://codepen.io/thebabydino/pen/zYbZpBq)

در این روش از تابع mod() استفاده می‌شود:

width: calc(95vmin + -1 * mod(95vmin, 15px));

اما مشکل این‌جاست که مرورگر Chrome هنوز از تابع mod پشتیبانی نمی‌کند... ولی ناامید نشوید!
دو روش دیگر هم از تمانی عفیف (Temani Afif) معروف به CSS Challenges داریم: ([https://twitter.com/ChallengesCss](https://twitter.com/ChallengesCss))

۲. روش دوم:
در واقع، نتیجه‌ی تابع بالا همان گرد کردن (rounding) است. و خوشبختانه، چنین تابعی هم در CSS وجود دارد! مثلاً:

min-width: round(95vmin, 15px);

نمونه: [https://codepen.io/alinaki/pen/VwRMpPY](https://codepen.io/alinaki/pen/VwRMpPY)

این ویژگی پیش‌تر در Chrome کار نمی‌کرد — تا نسخه‌ی صد و بیست و پنجم.
چرا؟ چون تیم Chrome تصمیم گرفت اول مثلثات را اضافه کند و ریاضیات ساده را بعداً :)

۳. و در نهایت روش سوم:
طبیعتاً با CSS Grid هم می‌شود:
[https://codepen.io/t_afif/pen/KKEXwmR](https://codepen.io/t_afif/pen/KKEXwmR)

و راز کار در این خط است:

grid-template-columns: repeat(auto-fill, 15px);

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

هفت مدیاکوئری برتر که در پروژه‌ها به کارتان می‌آیند 👍

---

✔️ width / height (ابعاد نمای دید – با سینتکس جدید بازه‌ای)

این مورد کلاسیک برای طراحی واکنش‌گراست، اما اکنون سینتکس بازه‌ای جدیدی دارد (مثل >، <، >=، <= و حتی 900px < width < 1200px) که باعث خوانایی بیشتر نسبت به حالت‌های min-/max- می‌شود.

از آن برای تنظیم شبکه (grid) یا کامپوننت‌ها در عرض‌های مختلف پنجره استفاده کنید.

@media (width > 900px) { /* دسکتاپ */ }
@media (900px < width < 1200px) { /* حالت میانی */ }

---

✔️ hover / pointer / any-hover / any-pointer (بررسی توانایی‌های ورودی دستگاه)

به جای حدس زدن اینکه کاربر با «تلفن، تبلت یا رایانه» است، مستقیماً قابلیت‌های ورودی دستگاه را بررسی کنید: آیا از اثر هاور پشتیبانی می‌کند؟ دقت اشاره‌گر چقدر است؟

/* ورودی اصلی — ماوس */
@media (hover: hover) and (pointer: fine) { ... }

/* صفحات لمسی (نقاط تماس درشت‌تر) */
@media (hover: none) and (pointer: coarse) { ... }

---

✔️ prefers-reduced-motion (کاهش یا حذف انیمیشن‌ها برای کاربران حساس به حرکت)

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

@media (prefers-reduced-motion: reduce) {
  .carousel { animation: none; }
}

---

✔️ prefers-color-scheme و forced-colors (حالت روشن/تاریک و حالت‌های کنتراست بالا)

⏺️ prefers-color-scheme — روش استاندارد برای هماهنگ شدن با حالت تاریک یا روشن.


⏺️ forced-colors — برای برطرف کردن مشکلات در حالت‌های کنتراست بالا (مثل Windows High Contrast) مفید است.
می‌توانید آن را با forced-color-adjust ترکیب کنید.

@media (prefers-color-scheme: dark) { ... }
@media (forced-colors: active) { /* اصلاحات برای کنتراست بالا */ }

---

✔️ resolution (برای بارگذاری تصاویر یا گرافیک با وضوح بالا)

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

background-image: url(image-1x.jpg);

@media (resolution > 1x) {
  background-image: url(image-2x.jpg);
}

---

✔️ orientation (جهت‌گیری — عمودی یا افقی)

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

@media (orientation: portrait) { ... }

---

✔️ inverted-colors (رنگ‌های معکوس) / جایگزین: prefers-contrast

inverted-colors زمانی مفید است که سیستم‌عامل یا مرورگر رنگ‌ها را معکوس می‌کند؛ این ویژگی به اصلاح نمایش سایه‌ها و رسانه‌ها کمک می‌کند.


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

نکته‌ی CSS

لازم نیست برای تم روشن و تیره نسخه‌های جداگانه‌ای از لوگو در مقیاس خاکستری آماده کنید.

این کار به راحتی با استفاده از CSS Filters انجام می‌شود:

/* برای تم روشن */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* برای تم تیره */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

به این ترتیب می‌توانید با یک تصویر واحد، لوگو را برای هر دو تم به درستی نمایش دهید و نیازی به فایل‌های اضافی نیست.


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

می‌توان ظاهر رابط کاربری را با کاهش یا حذف نوارهای اسکرول از طریق ویژگی scrollbar-width تمیزتر کرد.

نمونهٔ اسکرول‌بار باریک:

ul {
  scrollbar-width: thin;
}

نمونهٔ اسکرول‌بار مخفی (ناحیه همچنان قابل اسکرول است):

.cards-container {
  scrollbar-width: none;
}

این روش برای سایدبارها، جدول‌های داده، پنل‌های چت، داشبوردهایی با اسکرول‌های متعدد، کاروسل‌ها و رابط‌های لمسی مناسب است.

در نهایت، اسکرول همچنان کار می‌کند، اما ظاهر رابط کاربری مرتب‌تر و چشم‌نوازتر می‌شود. 🥺


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

ویژگی‌های منطقی در CSS — چگونه استایل‌ها را منعطف و جهانی کنیم

همیشه به حاشیه‌ها از بالا، راست، پایین و چپ فکر می‌کنیم. اما در دنیایی که جهت متن می‌تواند تغییر کند، این روش محدودکننده می‌شود. اینجا logical properties به کمک می‌آیند. آن‌ها اجازه می‌دهند حاشیه‌ها و اندازه‌ها را بر اساس جریان متن تعیین کنید، نه بر اساس سمت‌ها.

ℹ️ logical properties چیست و چه کاربردی دارند؟

inline جهت متن را مشخص می‌کند (مثلاً از چپ به راست یا راست به چپ)

block جهت بلوک‌ها را تعیین می‌کند، معمولاً از بالا به پایین، بسته به جریان سند

برای حاشیه‌های افقی از margin-inline-start و margin-inline-end استفاده می‌شود

برای حاشیه‌های عمودی از padding-block-start و padding-block-end

برای موقعیت و مرزها از border-inline و inset-block استفاده می‌شود

مزایا و کاربردها:

بین‌المللی‌سازی
در محصولاتی که چند زبان پشتیبانی می‌کنند، logical properties باعث صرفه‌جویی در زمان تنظیم استایل‌ها می‌شود.

طرح‌های قابل تغییر جهت
برای کامپوننت‌هایی که ممکن است «برگردانده» شوند (مثل آواتار سمت چپ/راست یا سایدبار)، logical properties نیاز به شرط‌نویسی در CSS را حذف می‌کند.

/* روش قدیمی */
.card {
  padding-top: 12px;
  padding-left: 16px;
}

/* با ویژگی‌های منطقی */
.card {
  padding-block-start: 12px;
  padding-inline-start: 16px;
}

/* خلاصهٔ کوتاه:
margin-inline — حاشیه‌های افقی
margin-block — حاشیه‌های عمودی
padding-inline — فاصله داخلی افقی
padding-block — فاصله داخلی عمودی
inset-inline — موقعیت افقی (چپ/راست)
inset-block — موقعیت عمودی (بالا/پایین) */

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

‏tree-shaking در فونت‌ها

همان‌طور که فایل‌های بزرگ JavaScript به چند فایل کوچک‌تر تقسیم می‌شوند و فقط در صورت نیاز بارگذاری می‌گردند، فایل‌های فونت هم می‌توانند به زیرمجموعه‌های کوچک‌تر شکسته شوند. به این کار font subsetting یا «تقسیم فونت به زیرمجموعه‌ها» گفته می‌شود.

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

در سایت‌های فارسی‌زبان (و روسی‌زبان)، معمولاً فقط از حروف سیریلیک یا فارسی، اعداد و نشانه‌های اصلی نگارشی استفاده می‌شود. در زبان‌هایی مثل اوکراینی، بلاروسی و سایر زبان‌های اسلاوی، علاوه بر حروف اصلی سیریلیک، تعدادی نماد از «سیریلیک توسعه‌یافته» هم به کار می‌رود.

کاراکترهای لاتین معمولاً استفادهٔ بسیار محدودی دارند؛ چه برسد به نمادهای گروه CJK (چینی، ژاپنی، کره‌ای) یا سایر زبان‌ها. این دقیقاً همان مشکلی است که در مورد کد JavaScript استفاده‌نشده داریم و با code splitting و tree-shaking حل می‌شود. برای فونت‌ها هم می‌توان همین رویکرد را به کار گرفت.

به‌جای یک فونت بزرگ با مجموعه‌ای عظیم از نمادها، می‌توان آن را به چند فونت کوچک‌تر تقسیم کرد:

* فونت سیریلیک پایه: حروف اصلی سیریلیک، اعداد، نشانه‌های رایج نگارشی؛ می‌توان نقل‌قول‌های تایپوگرافیک، خط تیرهٔ بلند، سه‌نقطه و موارد مشابه را هم اضافه کرد؛
* فونت سیریلیک توسعه‌یافته: حروف و نمادهای خاص (علامت‌های دیاکریتیک) برای زبان‌های اوکراینی، بلاروسی، بلغاری، صربی و دیگر زبان‌ها؛
* فونت لاتین پایه: حروف اصلی الفبای لاتین؛
* فونت لاتین توسعه‌یافته: حروف و نمادهای خاص (دیاکریتیک‌ها) برای زبان‌هایی مثل آلمانی، لهستانی، لیتوانیایی، ترکی و غیره؛
* سایر زیرمجموعه‌ها در صورت نیاز.

در یک سایت فارسی یا روسی‌زبان، حروف لاتین معمولاً برای اصطلاحات، نام‌ها و ابزارهای ترجمه لازم می‌شوند. خود من سایت‌های انگلیسی‌زبان را می‌بینم و گاهی از قابلیت ترجمهٔ صفحه استفاده می‌کنم؛ خارجی‌ها هم همین کار را می‌کنند. خوشایند نیست که به‌جای فونت طراحی‌شدهٔ سایت، ناگهان Times New Roman نمایش داده شود.

---

## روش‌های تقسیم فونت

چند راه برای این کار وجود دارد. ساده‌ترین روش استفاده از Google Fonts است؛
نه به این معنا که فونت را مستقیم از آن سرویس لود کنید (که توصیه نمی‌شود)، بلکه برای گرفتن زیرمجموعه‌های آماده:

۱. فونت موردنظر را در Google Fonts پیدا می‌کنید؛
۲. لینک تولیدشده داخل <link rel="stylesheet"> را کپی می‌کنید؛
۳. لینک را در یک تب جدید باز می‌کنید؛ مجموعه‌ای از دستورهای @font-face می‌بینید؛
۴. زیرمجموعه‌های موردنیاز (که با کامنت مشخص شده‌اند) را کپی می‌کنید؛
۵. فایل‌های فونت مربوطه را از آدرس‌های src دانلود می‌کنید؛
۶. دستورهای @font-face را به پروژه اضافه کرده و لینک‌ها را به فایل‌های دانلودشده تغییر می‌دهید.

روش دیگر استفاده از ابزار آنلاین Font Subsetting است. در این روش، فونت را آپلود می‌کنید، نمادها یا بازه‌های یونیکد موردنظر را مشخص می‌کنید و خروجیِ فونتی را می‌گیرید که فقط شامل همان کاراکترهاست.

روش سوم استفاده از ابزار خط فرمان glyphhanger است که جزئیات آن در مقالهٔ زک لِدِرمن توضیح داده شده است. (https://www.zachleat.com/web/glyphhanger/)

---

## نقش unicode-range

برای اینکه مرورگر بداند چه زمانی و کدام زیرمجموعهٔ فونت را بارگذاری کند، باید بداند هر فونت شامل چه کاراکترهایی است. این اطلاعات با ویژگی unicode-range در دستور @font-face مشخص می‌شود:

/* cyrillic */
@font-face {
  /* ... */
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

ویژگی unicode-range فهرستی از کاراکترها را در قالب یونیکد مشخص می‌کند. می‌توان:

* یک نماد مشخص را تعیین کرد (مثلاً U+2116 که همان علامت شماره «№» است)،
* یا یک بازه را مشخص نمود (مثلاً U+0410-044F از حرف «А» تا «я»).

فهرست کامل مقادیر یونیکد را می‌توان در جدول‌های یونیکد مشاهده کرد.

هنگام بارگذاری صفحه، مرورگر تمام کاراکترهای موجود را بررسی می‌کند. اگر حتی یک کاراکتر از عناصر استفاده‌کنندهٔ فونت، داخل بازهٔ unicode-range باشد، آن فونت دانلود می‌شود. اگر هیچ‌کدام از کاراکترهای صفحه در آن بازه نباشند، فونت اصلاً بارگذاری نخواهد شد.


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

👏 رویکردی نوین برای کار با تم‌ها در CSS با استفاده از ‎@property‎

پیش‌تر توسعه‌دهندگان ناچار بودند با جاوااسکریپت و استایل‌ها مستقیماً در کد سروکله بزنند. اما اکنون مرورگرها از ‎@property‎ پشتیبانی می‌کنند؛ قابلیتی که امکان ساخت متغیرهای CSS با نوع مشخص، مقدار پیش‌فرض و حتی انیمیشن را فراهم می‌کند.

📝 نمونه‌های پیاده‌سازی:

/* @property چیست؟ */
@property --theme-hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 120;
}

/* تم‌دهی بدون JavaScript */
@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #fff;
}

:root {
  --bg: #fff;
  --text: #000;
}

[data-theme="dark"] {
  --bg: #000;
  --text: #fff;
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
}

/* متغیرهای قابل انیمیشن */
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 200;
}

body {
  background: hsl(var(--hue) 80% 50%);
  transition: --hue 0.4s ease;
}

body.dark {
  --hue: 320;
}

/* تم‌دهی پویا بدون بازنویسی CSS
با @property می‌توان به‌راحتی مجموعه‌ای از متغیرها را برای تغییر پویای تم‌ها مدیریت کرد */
@property --radius {
  syntax: "<length>";
  initial-value: 4px;
}

.card {
  border-radius: var(--radius);
}

/* اکنون می‌توان میزان گردی گوشه‌ها را در لحظه و با کلاس‌های ساده تغییر داد */
:root.compact {
  --radius: 2px;
}

:root.rounded {
  --radius: 12px;
}

❗️ ‎@property چیست؟

‎CSS @property‎ روشی است برای تعریف متغیرهای CSS به‌عنوان یک ویژگی کامل. این قابلیت امکان تعیین نوع مشخص، مقدار پیش‌فرض و حتی اعمال انیمیشن را فراهم می‌کند. با این رویکرد، متغیر نه‌تنها تایپ‌دار می‌شود، بلکه به‌درستی به ارث می‌رسد، بخشی از منطق انیمیشن‌پذیر می‌شود و در صورت دریافت مقادیر نادرست دچار اختلال نخواهد شد.

— تم‌دهی بدون JavaScript: با استفاده از ‎@property‎ می‌توان تم‌ها را بدون استفاده از جاوااسکریپت تغییر داد. کافی است از ویژگی ‎data-theme="dark"‎ در تگ ‎html‎ استفاده شود تا همه‌چیز به‌صورت نیتیو انیمیت شود.

— متغیرهای قابل انیمیشن: پیش از این، متغیرهای CSS از انیمیشن پشتیبانی نمی‌کردند، اما با ‎@property‎ حتی تم‌های پیچیده نیز قابل انیمیشن هستند. اکنون می‌توان ‎transition‎ را مستقیماً روی متغیر اعمال کرد تا تغییرات به‌صورت روان انجام شود و ساخت تم‌های پویا ساده‌تر گردد.

— تایپ‌گذاری و باگ‌های کمتر: یکی از مشکلات اصلی پیش از ‎@property‎ این بود که مرورگر مقادیر نادرست را بی‌سروصدا می‌پذیرفت. برای مثال ‎--hue: red;‎. بدون ‎@property‎ این مقدار صرفاً نادیده گرفته می‌شد. اما با ‎@property‎، در صورت نامعتبر بودن مقدار، ویژگی به مقدار پیش‌فرض خود بازمی‌گردد.

— دیزاین توکن‌های نیتیو و کامل: با ‎@property‎ می‌توان توکن‌هایی برای جنبه‌های مختلف طراحی مانند رنگ‌ها، فاصله‌ها، مقیاس‌بندی، انیمیشن‌ها و تایپوگرافی ایجاد کرد؛ آن هم بدون نیاز به ابزارهای بیلد.

📌 در سال دوهزار و بیست و پنج، پشتیبانی مرورگرها از ‎@property‎ بسیار مطلوب است و مرورگرهایی مانند Chrome، Edge، Safari و Firefox آن را پشتیبانی می‌کنند؛ بنابراین می‌توان با خیال راحت از این قابلیت در محیط پروداکشن استفاده کرد. اگر هنوز از روش‌های قدیمی همراه با جاوااسکریپت زیاد و راه‌حل‌های موقتی استفاده می‌کنید، وقت آن رسیده که رویکرد خود را به‌روز کنید.


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

واحد های اندازه گیری CSS (قسمت پنجم)

✅ واحدهای نسبی جدید CSS: واحدهای کانتینری (Container Units) برای رابط‌های کاربری تطبیقی

در CSS به‌صورت سنتی برای پیاده‌سازی رابط‌های واکنش‌گرا از واحدهایی مانند vw و vh استفاده می‌شود. بااین‌حال، این واحدها در لِی‌اوت‌های پیچیده کارایی لازم را ندارند. مدیاکوئری‌ها، راه‌حل‌های موقتی و استفاده از درصدها تا حدی این مشکل را برطرف می‌کنند، اما با معرفی Container Queries و Container Units، بسیاری از این پیچیدگی‌ها عملاً به گذشته تعلق دارند.

✅ واحدهای Container Units چیستند؟

‏Container Units واحدهای اندازه‌گیری‌ای هستند که بر اساس ابعاد یک کانتینر محاسبه می‌شوند؛ کانتینری که با استفاده از ویژگی container-type تعریف شده است. این رویکرد به ما اجازه می‌دهد تطبیق‌پذیری را با دقت و راحتی بسیار بیشتری پیاده‌سازی کنیم و به‌جای تکیه بر اندازه کل صفحه، ابعاد واقعی هر کامپوننت درون کانتینر خودش را در نظر بگیریم.

✅ مهم‌ترین این واحدها عبارت‌اند از:

• cqw — معادل یک درصد از عرض کانتینر
• cqh — معادل یک درصد از ارتفاع کانتینر
• cqi — معادل یک درصد از اندازه inline کانتینر (وابسته به writing-mode)
• cqb — معادل یک درصد از اندازه block کانتینر
• cqmin و cqmax — به‌ترتیب حداقل و حداکثر ابعاد کانتینر

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

• استقلال کامپوننت‌ها
کامپوننت‌ها می‌توانند بدون وابستگی به context کلی صفحه، به‌صورت مستقل تطبیق پیدا کنند. مهم نیست در کجا استفاده شوند؛ آن‌ها خودشان را با اندازه کانتینر والد وفق می‌دهند.

• کاهش نیاز به مدیاکوئری‌ها
به‌جای نوشتن تعداد زیادی مدیاکوئری، می‌توان به‌سادگی از @container به‌همراه cqw استفاده کرد. این کار هم حجم کد را کمتر می‌کند و هم خوانایی آن را بهبود می‌بخشد.

• حذف بسیاری از هک‌های جاوااسکریپتی
دیگر نیازی نیست برای محاسبه ابعاد و تنظیم تایپوگرافی یا فاصله‌ها از ResizeObserver استفاده شود. اکنون می‌توان همه این کارها را مستقیماً با CSS انجام داد.

✅ نکات مهم و ظریف

— کانتینر حتماً باید تعریف شود؛ برای مثال با container-type: inline-size.
— این واحدها فقط درون کانتینر عمل می‌کنند، بنابراین انتخاب نوع مناسب کانتینر اهمیت زیادی دارد.
— واحدهای cqi و cqb به‌ویژه زمانی بسیار مفید هستند که نیاز به پشتیبانی از writing-mode عمودی یا رابط‌های چندزبانه و بین‌المللی دارید.

✅ چه زمانی باید از Container Units استفاده کرد؟

— در طراحی سیستم‌های طراحی (Design System) و کامپوننت‌های قابل استفاده مجدد.
— در لِی‌اوت‌های پیچیده مانند داشبوردها یا ویرایشگرها.
— در معماری‌های میکروفِرانت‌اند، جایی که کامپوننت‌ها باید کاملاً مستقل از یکدیگر باشند.

📝 مثال‌ها:

/* در این مثال، اندازه فونت .card__title به عرض کانتینر .card وابسته است، نه به عرض کل صفحه. */
.card {
  container-type: inline-size;
}

.card__title {
  font-size: 4cqw;
}

/* تایپوگرافی */
.title {
  font-size: clamp(16px, 3cqw, 24px);
}

/* فاصله‌گذاری */
.card {
  padding: 4cqi;
}

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


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

نکتهٔ CSS: سلکتور اتریبیوت بدون حساسیت به حروف بزرگ و کوچک

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

یعنی فرقی نمی‌کند مقدار اتریبیوت با حروف بزرگ نوشته شده باشد یا کوچک؛ در هر صورت انتخاب می‌شود.

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