أنواع الوسائط Media Types

مقدمة في أنواع الوسائط

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

إنشاء أوراق الأنماط المعتمدة على الوسائط

هنالك ثلاث طرق شائعة لتحديد نوع الوسائط في اوراق الانماط في لغة CSS:

الطريقة الأولى : القاعدة @media

تُستخدم القاعدة @media لتحديد قواعد أنماط مختلفة لأنواع وسائط مختلفة في ورقة أنماط واحدة. عادة ما يتبعها قائمة مفصولة بفواصل لأنواع الوسائط وكتلة اكواد code block تحتوي على إعلانات CSS للوسائط المستهدفة.
في المثال أدناه سيقوم المتصفح بعرض محتوى العنصر body بخط من نوع Arial وبحجم 14 بكسل على الشاشة ، ولكن في حالة الطباعة سيكون بخط 12 نقطة من النوع Times. بينما ، سيتم تحديد قيمة الخاصية line-height على 1.2 لكل منهما.

مثال
تشغيل
  1. @media screen {
  2. body {
  3. color: #32cd32;
  4. font-family: Arial, sans-serif;
  5. font-size: 14px;
  6. }
  7. }
  8. @media print {
  9. body {
  10. color: #ff6347;
  11. font-family: Times, serif;
  12. font-size: 12pt;
  13. }
  14. }
  15. @media screen , print {
  16. body {
  17. line-height: 1.2;
  18. }
  19. }
ملاحظة:

تنطبق قواعد النمط خارج قواعد @media على كافة أنواع الوسائط التي تنطبق عليها ورقة الأنماط

الطريقة الثانية : القاعدة @import

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

مثال
تشغيل
  1. @import url("css/screen.css") screen;
  2. @import url("css/print.css") print;
  3. body {
  4. background: #f5f5f5;
  5. line-height: 1.2;
  6. }

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

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

تُستخدم السمة media في عنصر <link> لتحديد الوسائط المستهدفة لورقة أنماط خارجية داخل صفحة HTML.

مثال
تشغيل
  1. <link rel="stylesheet" media="all" href="css/common.css">
  2. <link rel="stylesheet" media="screen" href="css/screen.css">
  3. <link rel="stylesheet" media="print" href="css/print.css">

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

نصيحة:

يمكننا أيضًا تحديد أنواع وسائط متعددة (كل منها مفصول بفاصلة) ، على سبيل المثال media="screen, print" بالإضافة إلى إستعلام الوسائط للسمة media لعنصر <link>.

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

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

نوع الوسائط الوصف
all تستخدم لجميع أجهزة نوع الوسائط.
aural تستخدم للقارئ الآلي
braille تستخدم لأجهزة برايل عن طريق اللمس.
embossed تستخدم لطابعات برايل المقسمة إلى صفحات.
handheld تستخدم للأجهزة الصغيرة أو المحمولة - عادةً الأجهزة ذات الشاشات الصغيرة مثل الهواتف المحمولة أو أجهزة المساعد الرقمي الشخصي.
print تستخدم للطابعات.
projection تستخدم للعروض التقديمية على أجهزة العرض projectors.
screen تستخدم في الأصل لشاشات الكمبيوتر الملونة.
tty تُستخدم للوسائط التي تستخدم شبكة أحرف ذات درجة ثابتة - مثل الطابعات النقطية أو الأجهزة المحمولة ذات إمكانات العرض المحدودة.
tv تستخدم للأجهزة التلفزيون ذات الدقة المنخفضة و الشاشات محدودة التمرير

إستعلام الوسائط Media Queries

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

مثال
تشغيل
  1. /* Smartphones (portrait and landscape) ---------- */
  2. @media screen and (min-width: 320px) and (max-width: 480px){
  3. /* styles */
  4. }
  5. /* Smartphones (portrait) ---------- */
  6. @media screen and (max-width: 320px){
  7. /* styles */
  8. }
  9. /* Smartphones (landscape) ---------- */
  10. @media screen and (min-width: 321px){
  11. /* styles */
  12. }
  13. /* Tablets, iPads (portrait and landscape) ---------- */
  14. @media screen and (min-width: 768px) and (max-width: 1024px){
  15. /* styles */
  16. }
  17. /* Tablets, iPads (portrait) ---------- */
  18. @media screen and (min-width: 768px){
  19. /* styles */
  20. }
  21. /* Tablets, iPads (landscape) ---------- */
  22. @media screen and (min-width: 1024px){
  23. /* styles */
  24. }
  25. /* Desktops and laptops ---------- */
  26. @media screen and (min-width: 1224px){
  27. /* styles */
  28. }
  29. /* Large screens ---------- */
  30. @media screen and (min-width: 1824px){
  31. /* styles */
  32. }
نصيحة:

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

تغيير عرض العنصر بناءً على حجم الشاشة

يمكننا استخدام الاستعلام عن الوسائط في لغة CSS لتغيير عرض صفحة الويب والعناصر ذات الصلة لتقديم أفضل تجربة مشاهدة للمستخدم على أجهزة مختلفة.
في المثال التالي سنقوم بتغيير عرض العنصر ذو السمة class="container" تلقائيًا بناءً على حجم الشاشة أو منفذ العرض. على سبيل المثال ، إذا كان عرض منفذ العرض أقل من 768 بكسل ، فسيغطي 100٪ من عرض منفذ العرض ، وإذا كان أكبر من 768 بكسل ولكنه أقل من 1024 بكسل ، فسيكون عرضه 750 بكسل ، وهكذا.

مثال
تشغيل
  1. .container{
  2. margin: 0 auto;
  3. background: #f2f2f2;
  4. box-sizing: border-box;
  5. }
  6. /* Mobile phones (portrait and landscape) ---------- */
  7. @media screen and (max-width: 767px){
  8. .container{
  9. width: 100%;
  10. padding: 0 10px;
  11. }
  12. }
  13. /* Tablets and iPads (portrait and landscape) ---------- */
  14. @media screen and (min-width: 768px) and (max-width: 1023px) {
  15. .container{
  16. width: 750px;
  17. padding: 0 10px;
  18. }
  19. }
  20. /* Low resolution desktops and laptops ---------- */
  21. @media screen and (min-width: 1024px){
  22. .container{
  23. width: 980px;
  24. padding: 0 15px;
  25. }
  26. }
  27. /* High resolution desktops and laptops ---------- */
  28. @media screen and (min-width: 1280px){
  29. .container{
  30. width: 1200px;
  31. padding: 0 20px;
  32. }
  33. }
ملاحظة:

يمكننا استخدام الخاصية box-sizing على العناصر لإنشاء تخطيطات أكثر سهولة ومرونة بجهد أقل.

تغيير تخطيط الصفحة بناءً على حجم الشاشة

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

مثال
تشغيل
  1. .column {
  2. width : 48%;
  3. padding: 0 15px;
  4. box-sizing: border-box;
  5. background: #93dcff;
  6. float: left;
  7. }
  8. .container .column:first-child {
  9. margin-right : 4%;
  10. }
  11. @media screen and (max-width: 767px){
  12. .column {
  13. width: 100%;
  14. padding: 5px 20px;
  15. float: none;
  16. }
  17. .container .column:first-child {
  18. margin-right: 0;
  19. margin-bottom: 20px;
  20. }
  21. }
« التالي السابق »