شرح القواعد التي تبدا بالرمز @ في لغة CSS
تُستخدم القواعد التي تبدا بالرمز @ في لغة CSS لأغراض معينة فهي تمنحك مزيدًا من التحكم في تنسيق صفحات الويب. في مقال اليوم سأقدم لك شرحًا لبعض أهم قواعد @ في CSS مع أمثلة عملية لاستخدامها:
@charset
تُستخدم لتعيين ترميز المحرف لصفحة CSS. يجب وضع هذه التعليمة في بداية الملف قبل أي تعليمات أخرى.
مثال:
@charset "UTF-8";
يحدد الكود أعلاه لتحديد ترميز المحارف المستخدمة في ملف CSS. يعتبر ترميز UTF-8 ترميزًا شائعًا ومعياريًا للترميز في صفحات الويب، ويمكنه دعم مجموعة واسعة من الأحرف واللغات من بينها اللغة العربية.
من المهم استخدام تعليمة charset@ في بداية ملف CSS قبل أي تعليمات أخرى حتى تُحدد ترميز المحارف بشكل صحيح. وبهذه الطريقة، يتم ضمان أن المتصفح يفهم بشكل صحيح كل الحروف والأحرف المستخدمة في ملف CSS.
@font-face
تُستخدم لتحديد خطوط مخصصة لاستخدامها في صفحة الويب. يمكن استخدامها لتعريف خطوط غير متوفرة على أجهزة الزوار.
مثال:
@font-face {
font-family: "CustomFont";
src: url("custom-font.woff2") format("woff2"),
url("custom-font.woff") format("woff");
}
يستخدم هذا الكود تعليمة font-face@ في CSS لتحديد الخط المخصص للاستخدام في صفحات الويب.
font-family تحدد اسم الخط المخصص الذي سيتم استخدامه في الصفحة وهو هنا "CustomFont" وsrc تحدد مصدر الخط المخصص url وصيغته format.
@import
تُستخدم لاستيراد ملفات CSS أخرى داخل ملف CSS حالي. كما يمكن استخدامها لتقسيم الأنماط إلى ملفات منفصلة لتنظيم الكود.
مثال:
@import url("other-styles.css");
هذا الكود يستخدم تعليمة import@ في CSS لاستيراد ملف آخر يسمى "other-styles.css" داخل الملف الحالي.
@media
تُستخدم لتطبيق تنسيقات مختلفة استنادًا إلى شروط معينة مثل حجم الشاشة ونوع الجهاز.
مثال:
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
هذا الكود يستخدم قاعدة media@ في CSS لتطبيق تنسيق مختلف على عنصر body عندما يكون عرض الشاشة أصغر من 600 بكسل ويجعل حجم الخط في هذه الحالة 14 بكسل.
@keyframes
تُستخدم لتحديد خطوات الحركة المتتابعة في تأثيرات CSS مثل التحرك والتلاشي.
مثال:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fadeIn 2s;
}
يستخدم الكود أعلاه القادة keyframes@ في CSS لتحديد تأثير تلاشي (fadeIn) بدايةً من الشفافية (opacity) 0 إلى 1، ثم يُطبق هذا التأثير على عنصر يحمل الصنف .element لمدة 2 ثانية.
@page
تُستخدم لتخصيص العناصر المتعلقة بالطباعة، مثل الهوامش والألوان.
مثال:
@page {
size: A4;
margin: 2cm;
}
يستخدم الكود السابق تعليمة page@ في CSS لتعديل حجم الصفحة للطباعة إلى A4 وتحديد هوامش الصفحة بقيمة 2 سنتيمتر.
@supports
تُستخدم لتحديد قواعد CSS استنادًا إلى مدى دعم المتصفح لميزات معينة.
مثال:
@supports (display: grid) {
.container {
display: grid;
}
}
هذا الكود يستخدم تعليمة supports@ في CSS لفحص ما إذا كان المتصفح يدعم خاصية display بقيمة grid. إذا كان المتصفح يدعم هذه الخاصية، فسيتم تطبيق خاصية display بقيمة grid على العنصر الذي يحمل الصنف .container.
الخلاصة
تعرفنا في مقال اليوم على أهم قواعد CSS التي تبدأ برمز @ والتي تُساعدك في تحقيق التحكم الكامل والدقيق في تنسيق الصفحات وتحسين تجربة المستخدم. يُفضل استخدام هذه القواعد بعناية للتأكد من دعمها من قبل المتصفحات لتجنب أي تأثيرات غير متوقعة عند تطبيقها.
