آموزش CSS - قوانین( Rules@)

در CSS، "قوانین @ "دستورات یا اظهارات ویژه‌ای هستند که با نماد "@" شروع می‌شوند. این‌ها برای کنترل یا تغییر رفتار شیوه‌نامه (stylesheet) استفاده می‌شوند و معمولاً برای وظایفی مانند تعریف پرس‌وجوهای رسانه‌ای، وارد کردن استایل شیت خارجی یا مشخص کردن  قلم مورد استفاده قرار می‌گیرند.

یک" قانون @ "با نشان (@) شروع می‌شود، دنباله دارای یک شناسه است و همچنین هر چیزی تا نشان‌گذاری بعدی یا بلوک CSS بعدی را شامل می‌شود.

نحوه نگارش (Syntax)

/* General structure */
@identifier (RULE);

انواع قوانین @

منظم(Regular)

در CSS، قوانین @ منظم ،مختلفی وجود دارند که بر اساس شناسه هرکدام دارای یک نحوه‌نگارش متفاوت هستند.

• charset@:شیوه‌نامه یا charset در واقع یک مجموعه از قوانین و تعریف‌ است که مشخص می‌کند چگونه کاراکترهای مختلف زبان‌ها و نویسه‌های مختلف به صورت عددی در یک رشتهٔ متنی یا در یک فایل رمزنگاری شوند. هدف از استفاده از charset، تضمین این است که متنی که بین دو سیستم یا دو نرم‌افزار متفاوت جابجا می‌شود، به درستی تفسیر و نمایش داده شود. برای مثال، charset معمولاً مشخص می‌کند که کدام کدگذاری (مثل UTF-8، ISO-8859-1، و ...) برای نمایش متن استفاده می‌شود و چگونه کاراکترها به کدگذاری باینری تبدیل می‌شوند. استفاده از charset مهم است زیرا اگر دو سیستم از charset متفاوتی استفاده کنند، ممکن است متن به درستی نمایش داده نشود یا اطلاعات از دست بروند.

• import@:  یک دستور خاص است که برای وارد کردن یک فایل CSS خارجی به داخل یک فایل CSS دیگر استفاده می‌شود. این دستور به طور معمول برای تقسیم و مدیریت بهتر کدهای CSS در پروژه‌های بزرگ استفاده می‌شود. با استفاده از import@ می‌توانید قسمت‌های مختلفی از سبک‌ها و قالب‌های ظاهری را در فایل CSS اصلی خود وارد کرده و از آنها در سراسر سایت یا برنامه خود استفاده کنید.

• namespace@:برای اعلان و تعریف فضاهای نام XML در یک استایل شیت ،CSS استفاده می شود.

تو در تو (Nested)

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

• media@: قوانین مدیا یک بخش از قوانین CSS (سی اس اس) هستند و به طراحان وب این امکان را می‌دهند که استایل‌های مختلفی را بر اساس ویژگی‌های دستگاه یا محیط نمایش تعیین کنند.با استفاده از قوانین مدیا، می‌توان به صورت شرطی استایل‌های مختلفی را برای صفحات وب در نظر گرفت. این شرایط معمولاً بر اساس ویژگی‌هایی همچون اندازه صفحه نمایش، نوع دستگاه (مثل تلفن همراه یا رایانه شخصی)، وضعیت نمایش (landscape یا portrait) و ویژگی‌های دیگر تعریف می‌شوند.به عبارت دیگر، این قوانین به طراحان این امکان را می‌دهند که استایل‌های متفاوتی را برای دستگاه‌ها یا شرایط نمایش مختلف اعمال کنند. به عنوان مثال، ممکن است یک وب‌سایت در حالت landscape (افقی) یا portrait (عمودی) فرق کند، یا استایل‌های مختلفی را بر اساس نوع دستگاه ارائه دهد تا تجربه کاربری بهتری را برای کاربران فراهم کند. 

• supports@: اصطلاح "supports" یا "پشتیبانی" در زمینه CSS (سی اس اس) به یک ویژگی خاص از قوانین گروه شرطی اشاره دارد. وقتی از محتوای گروه شرطی با استفاده از supports استفاده می‌شود، این بدان معناست که محتوا تنها زمانی اعمال می‌شود که یک شرط خاص توسط مرورگر برآورده شود.بنابراین، در صورتی که supports به کار رود، یک قاعده CSS یا یک بخش از استایل‌ها تنها زمانی اجرا می‌شود که شرایط خاصی توسط مرورگر برآورده شود. این شرایط ممکن است بر اساس ویژگی‌های خاص مرورگر یا ویژگی‌های محیط نمایش باشند.استفاده از supports به طراحان وب این امکان را می‌دهد که استایل‌ها را بر اساس امکانات خاص مرورگر یا محیط نمایش تعیین کنند. به عنوان مثال، می‌توان با استفاده از supports، یک استایل خاص را برای مرورگرهایی که از ویژگی‌های خاصی پشتیبانی می‌کنند، اعمال کرد و در غیر این صورت به یک استایل پیش‌فرض باز گشت. این امکان به طراحان وب کمک می‌کند تا بهترین تجربه کاربری را برای هر مرورگر خاص فراهم کنند. 

• page@: اصطلاح "page" یا "صفحه" در زمینه CSS (سی اس اس) به تعریف استایل‌ها و قوانین خاصی برای طراحی صفحات چاپ شده اشاره دارد. زمانی که ما از یک وبسایت یا اپلیکیشن به صورت چاپی (Print) یا در حین چاپ صفحات وب استفاده می‌کنیم، طراحی صفحات چاپ شده نیازمند استایل‌ها و تنظیمات خاصی است تا اطلاعات به درستی و زیبا چاپ شوند.استفاده از قوانین CSS برای صفحات چاپ به طراحان وب این امکان را می‌دهد تا استایل‌های مخصوصی را برای چاپ تعریف کنند. این استایل‌ها ممکن است شامل تنظیماتی برای حذف عناصر غیرضروری در چاپ (مانند منوها یا بخش‌های اضافی)، تغییرات در فونت‌ها، تغییرات در طرح صفحه، و سایر تنظیمات مرتبط با چاپ باشند.به عنوان مثال، می‌توان از ویژگی‌هایی همچون media print@ در CSS استفاده کرد تا استایل‌ها را برای چاپ تعریف کنیم. این استایل‌ها تنها در زمان چاپ صفحه اعمال می‌شوند و اطلاعات به شکل مناسبی بر روی صفحات چاپ می‌شوند.

• font-face@: اصطلاح "font-face" در CSS به یک روش تعریف و استفاده از فونت‌های سفارشی در یک صفحه وب اشاره دارد. این ویژگی به طراحان وب این امکان را می‌دهد که از فونت‌هایی که در سیستم‌های کاربران ممکن است موجود نباشند، استفاده کنند و فونت‌های خاصی را به وبسایت یا اپلیکیشن اضافه کنند.با استفاده از font-face@، طراحان می‌توانند فونت‌هایی را که در کامپیوتر یا دستگاه کاربر نصب نشده‌اند، به صورت دینامیک در صفحه وب بارگذاری کنند. این ویژگی از فرمت‌های فونت مختلفی مانند TrueType (TTF)، OpenType (OTF)، و Web Open Font Format (WOFF) پشتیبانی می‌کند.

• keyframes@: اصطلاح "keyframes" در CSS به یک روش تعریف و کنترل انیمیشن‌ها اشاره دارد. از keyframes برای تعیین جزئیات مراحل یک انیمیشن CSS و تغییراتی که در هر گام اتفاق می‌افتد، استفاده می‌شود.یک بلوک keyframes تعریف شده با نام خاص (که معمولاً با عنوان دلخواه تعیین می‌شود) و شامل گام‌های مختلف از انیمیشن است. هر گام به عنوان یک نقطه مرزی در زمان تعریف می‌شود و انیمیشن از یک گام به گام دیگر پیش می‌رود

• counter-style@: اصطلاح "counter-style" در CSS به یک ویژگی مرتبط با سفارشی‌سازی شمارنده‌ها (counters) اشاره دارد. این ویژگی به طراحان وب امکان می‌دهد تا نحوه نمایش و سفارشی‌سازی اعداد و شمارنده‌ها را در سند HTML خود تعیین کنند.با استفاده از counter-style، می‌توان انواع مختلفی از سفارشی‌سازی شمارنده‌ها را تعریف کرد که از مقدار پیش‌فرض خود استفاده نمی‌کنند. این انواع شمارنده‌ها ممکن است شامل نمادهای خاص، فرمت‌های مختلف، و یا اعداد خاص باشند.

• font-feature-values@:  طور مختصر نام‌های مشترک (common names) را برای ویژگی‌های فعال‌شده در OpenType در ترکیب با Alternate Glyphs جایگزین تعریف می‌کند. این قابلیت امکان فراهم کردن نام‌های مشترکی را فراهم می‌کند که به عنوان جایگزین برای نام‌های پیچیده و مستند در font-variant-alternates مورد استفاده قرار می‌گیرند. (Alternate Glyphs به نمادها یا حروفی اشاره دارند که ممکن است به صورت جایگزین برای یک نماد یا حرف در یک فونت استفاده شوند. این ویژگی مخصوص فونت‌های OpenType است و این امکان را به طراحان فونت می‌دهد که نسخه‌های مختلف یک نماد یا حرف را در یک فونت تعریف کنند.)

• property@:اصطلاح "property" در CSS به یک ویژگی خاص یا ویژگی‌های متغیر اشاره دارد که توسط توسعه‌دهندگان وب برای تعریف و استفاده از ویژگی‌های سفارشی در CSS مورد استفاده قرار می‌گیرد. این ویژگی‌ها و متغیرها به طور معمول توسط توسعه‌دهندگان به منظور استفاده در ساختارهای سبک‌دهی (styling) سفارشی و بهبود قابلیت‌های CSS ایجاد می‌شوند.

• layer@: در زبان CSS، اصطلاح "layer" به معنای لایه اشاره دارد. این لایه‌ها معمولاً برای ترتیب اولویت و نحوه نمایش عناصر مختلف در صفحه وب استفاده می‌شوند. هر عنصر در واقعیت به یک لایه تعلق دارد و ترتیب این لایه‌ها می‌تواند تاثیر مستقیمی بر نمایش صفحه داشته باشد.

مثال page@

اینجا یک مثال از استفاده از @page آمده است:

<html>
<head>
<style>
   @page :first {
      margin-left: 80%;
      margin-top: 80%;
}

p {
   page-break-after: always;
}
</style>
</head>
<body>
   <p>Page One.</p>
   <p>Page Two.</p>
   <button>Print</button>

   <script>
      document.querySelector("button").addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

 مثال keyframes@

در اینجا یک مثال از استفاده از @keyframes آمده است:

<html>
<head>
<style>
   p {
      animation-duration: 3s;
      animation-name: slidein;
   }

   @keyframes slidein {
      from {
         margin-left: 100%;
         width: 300%;
      }

      to {
         margin-left: 0%;
         width: 100%;
      }
   }
</style>
</head>
<body>
   <p>
      The text appears from right to left
      </p>
</body>
</html>

مثال property@

در اینجا یک مثال از استفاده از @property آمده است:

<html>
<head>
<style>
   @property --item-size {
      syntax: "<percentage>";
      inherits: true;
      initial-value: 40%;
   }

   .container {
      display: flex;
      height: 100px;
      border: 3px dotted black;

   /* set custom property values on parent */
      --item-size: 50%;
      --item-color: tomato;
      --item-border: 5px solid green;
   }

   /* use custom properties to set item size and background color */
   .item {
      width: var(--item-size);
      height: var(--item-size);
      border: var(--item-border);
      background-color: var(--item-color);
   }

   /* set custom property values on element itself */
   .second {
      --item-size: initial;
      --item-color: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="first item">First Item</div>
      <div class="second item">Second Item</div>      
   </div>

   <script>
      window.CSS.registerProperty({
      name: "--item-color",
      syntax: "<color>",
      inherits: false,
      initialValue: "peachpuff",
   });
   </script>
</body>
</html>

 لیست قوانین

جدول زیر تمامی قوانین @ CSS را لیست می‌کند: