الوسائط في CSS

أنواع الوسائط في CSS تتيح لك تنسيق المستندات ليعرض بشكل صحيح على أنواع وسائط مختلفة (مثل الشاشة، الطباعة، المتصفحات السمعية، وما إلى ذلك).

مقدمة إلى أنواع الوسائط

CSS @media (وسائط) هي واحدة من أهم وظائف القوائم النمطية، يمكنك تحديد قائمة نمطية منفردة لكل نوع وسائط. هذا هو أفضل طريقة لبناء صفحات الويب التي تتناسب مع الطابعات - فقط قم بتعيين قائمة نمطية مختلفة لوسائط 'الطباعة'.

بعض خصائص CSS تنطبق فقط على وسائط معينة. على سبيل المثال، هذاpage-break-afterالخصائص تنطبق فقط على وسائط الصفحة. ولكن هناك بعض الخصائص يمكن أن تُشارك بين أنواع الوسائط المختلفة، ولكن قد تحتاج إلى استخدام قيم مختلفة لهذه الخاصية.font-sizeعلى سبيل المثال، يمكن استخدام هذه الخاصية لشاشات العرض ووسائل الطباعة، ولكن قد تكون القيم مختلفة.

من حيث القراءة الجيدة، عادة ما تحتاج الوثائق إلى خطوط أكبر على شاشة الكمبيوتر مقارنة بشاشة الطباعة، ويعتبر الخط بدون الخطوط أسهل القراءة على الشاشة، بينما يفضل الخط ذو الخطوط في الطباعة. لذلك، يجب تحديد أن ملف النمط أو مجموعة من قواعد النمط يجب أن يتم تطبيقها على أنواع وسائط معينة.

إنشاء ملفات النمط التي تعتمد على الوسائط

يستخدم عادة ثلاث طرق لتعريف الاعتماد الوسائطي لملف النمط:

الطريقة 1: باستخدام قاعدة @media

يستخدم @media لتعريف قواعد النمط المختلفة للأنواع المختلفة من الوسائط في نفس ملف النمط. عادة ما يكون له عنوان URL للملف النمط مع قائمة أنواع الوسائط المحددة منقسمة بفاصلة عائمة، ويتضمن قواعد النمط للوسائط المستهدفة.

بيانات النمط في المثال أدناه تخبر المتصفح عن عرض النص على الشاشة باستخدام الخط Arial بعرض 14 بكسل، ولكن في حالة الطباعة سيتم عرضه باستخدام الخط Times بعرض 12 نقطة. ولكنline-height، يتم تعيين قيم هاتين الخاصيتين كلاهما إلى 1.2:

@media screen {
　　　　body {
　　　　　　　　color: #32cd32;
　　　　　　　　font-family: Arial, sans-serif;
　　　　　　　　font-size: 14px;
　　　　}
}
@media print {
　　　　body {
　　　　　　　　color: #ff6347;
　　　　　　　　font-family: Times, serif;
　　　　　　　　font-size: 12pt;
　　　　}
}
@media screen, print {
　　　　body {
　　　　　　　　line-height: 1.2;
　　　　}
}

الطريقة 2: باستخدام قاعدة @import

قاعدة @import هذه هي طريقة أخرى لتحديد معلومات النمط لوسائط محددة - فقط قم بتحديد نوع الوسائط المحدد بعد عنوان URL لملف النمط باستخدام نقطة علامة الفصل.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
　　　　background: #f5f5f5;
　　　　line-height: 1.2;
}

استخدام نوع الوسائط print في الجملة @import يشير إلى تحميل ملف النمط الخارجي (print.css) واستخدام النمط فقط للوسائط الطباعة.

الطريقة 3: باستخدام <link> العنصر

العناصر التي تستخدم في الخصائص على media تستخدم لتعيين الوسائط الهدف كملف تعريف النمط الخارجي في وثيقة HTML.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

في هذا المثال، يُشير خاصية media إلى تحميل المتصفح لفيلتر النمط الخارجي "screen.css" واستخدامه للشاشة فقط، بينما يستخدم "print.css" للطباعة.

أنواع الوسائط المختلفة

يُظهر الجدول أدناه أنواع الوسائط المتاحة للتعرف على أنواع مختلفة من الأجهزة (مثل الطابعات، الأجهزة المحمولة، شاشات الكمبيوتر، إلخ).

نوع الوسائط