CSS At-rules Reference

راهنمای جامع At-ruleهای CSS را به زبان فارسی برایت آورده‌ام — شامل توضیح، مثال، و کاربرد هرکدام:

🧭 مر overview

در CSS، دستورهایی که با @ شروع می‌شوند At-rule نام دارند.
این دستورها رفتار کلی CSS را کنترل می‌کنند — مثل وارد کردن فایل‌های دیگر، تعریف فونت، انیمیشن، شرط‌ها و غیره.

📚 قوانین اصلی (Core At-Rules)

1. @import

برای وارد کردن فایل‌های CSS دیگر استفاده می‌شود.

@import url(“theme.css”);
@import url(“print.css”) print;

💡 باید قبل از تمام قوانین دیگر (به جز @charset) نوشته شود.

2. @charset

کدگذاری نویسه‌ها (Character Encoding) فایل CSS را مشخص می‌کند.

@charset “UTF-8”;

باید اولین خط در فایل CSS باشد.

3. @namespace

برای تعریف یک فضای نام (Namespace) در انتخابگرهای XML استفاده می‌شود.

@namespace svg url(“http://www.w3.org/2000/svg”);
svg| a { fill: blue; }

🧩 قوانین شرطی (Conditional Rules)

4. @media

برای اعمال استایل‌ها بسته به نوع دستگاه یا اندازه‌ی صفحه.

@media (max-width: 768px) {
body { font-size: 14px; }
}

5. @supports

برای بررسی پشتیبانی مرورگر از یک ویژگی CSS خاص.

@supports (display: grid) {
div { display: grid; }
}

6. @document (قدیمی / آزمایشی)

برای اعمال استایل بر اساس آدرس (URL) سند.

@document url(“https://example.com/”) {
body { background: yellow; }
}

🎨 فونت و شمارنده‌ها

7. @font-face

برای تعریف فونت‌های سفارشی در CSS.

@font-face {
font-family: “Open Sans”;
src: url(“OpenSans.woff2”) format(“woff2”);
}

8. @counter-style

برای تعریف سبک شمارنده‌ی سفارشی (مثل شماره‌گذاری لیست‌ها).

@counter-style circled {
system: numeric;
symbols: ① ② ③ ④ ⑤;
}

🌀 انیمیشن و انتقال‌ها

9. @keyframes

برای تعریف انیمیشن‌ها در CSS.

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

🗂️ قوانین مربوط به صفحه و چاپ

10. @page

برای تعریف استایل هنگام چاپ صفحات.

@page {
margin: 1in;
}
@page :first {
margin-top: 2in;
}

11. @viewport (قدیمی و منسوخ)

قبلاً برای کنترل اندازه‌ی نمای دید (Viewport) در مرورگرهای موبایل استفاده می‌شد.

🧮 خصوصیات و لایه‌ها

12. @property

برای تعریف متغیرهای CSS (Custom Properties) همراه با نوع و مقدار پیش‌فرض.

@property –angle {
syntax: “<angle>”;
inherits: false;
initial-value: 0deg;
}

13. @layer

برای ایجاد لایه‌های مختلف در Cascade و کنترل ترتیب اولویت استایل‌ها.

@layer reset, base, theme;

@layer reset {
* { margin: 0; padding: 0; }
}
@layer theme {
button { color: var(–brand-color); }
}

🎭 کوئری‌های کانتینر

14. @container

برای اعمال استایل‌ها بر اساس اندازه‌ی یک کانتینر (نه کل صفحه).

@container (min-width: 400px) {
.card { flex-direction: row; }
}

🧪 قوانین دیگر / آزمایشی

✅ جدول خلاصه