القائمة الرئيسية

الصفحات

تعديل المشاركة

تعلم الـ Media Queries درس شامل

media queries ميديا كويري

كُل ما يتعلّق بالـMedia Queries


سوف نتحدّث في هذا المقالة عن مجموعة الميديا كويري (Media Queries) بصورة متكاملة وشاملة, حيث ستكون هذه المقالة مرجعك المفضّل والمفصّل لكل ما يخص هذه الخاصية إن شاء الله 😃.

مُكونات المقالة :
  1. أين يمكننا كتابة مجموعة الميديا كويري والإستفاده منها ؟
  2. طريقة كتابة الميديا كويري.
  3. مجموعة الميديا كويري.
  4. صفات الميديا كويري والرابط (and).
  5. أنواع الميديا كويري.
  6. مميزات الميديا كويري و أنوعها.
  7. خصائص ال(CSS) ضد مميزات الميديا.
  8. مرجِع للمميزات الميديا كويري.

أين يمكننا كتابة مجموعة الميديا كويري (Media Queries) و الإستفاده منها ؟


  • القاعدة media@ : هي أكثر الأماكن التى تستخدم فيها, وذلك لأنها مصمّمة خصيصاً لها!

مثال :
@media screen and (max-width: 800px) {    /*---- CSS Code Here ----*/}
@media print {    /*---- CSS Code Here ----*/}

  • القاعدة import@ : يُمكننا ايضاً إدراج الميديا كويري (Media Queries) مع هذه القاعدة, و ذلك لوضع شرط او أكثر; لإستخراج (إدراج) اكواد الCSS الموجودة في الرابط المذكور في القاعدة إلى كود الCSS الذى تم ذكر القاعدة فيه.

مثال :
@import url("css/style.css") screen and (min-width: 800px);@import "css/print.css" print;

  • الخاصية media في وسم الربط link : و قد أصبح لها خاصية (attribute) خاص بها في وسم (<link>), تمُكنك من وضع شروط خاصة حتى يتم تنفيذ ملف الCSS المربوط بالمستند بواسطة هذا الوسم!

مثال :
<link rel="stylesheet" href="style.css" media="screen and (max-width: 800px)"><link rel="stylesheet" href="print.css" media="print">

طريقة الكتابة :

القاعدة ميديا (Media@)

تتكون من الكلمة المعرّفة media@ و مجموعة ميديا كويري (Media Queries), حيث يفصل بين أول ميديا كويري (Media Query) و الكلمة المعرّفة media@ بفراغ نصي أما الفصل بين كل ميديا كويري (Media Query) و أخرى يكون عبارة عن فاصلة (,) و سنذكر معنى الفاصل لاحقاً في هذه المقالة .

@media Media_Queries {    /*---- CSS Code Here ----*/}/*    Where :    Media_Queries = Media_Query1, Media_Query2, ..., Media_QueryN*/

القاعدة (import@)

يتم كتابة المعرّف import@ متبوعاً بيانات من نوع URL توضح رابط ملف الCSS المُراد إدراج اكواده, و أيضاً متبوع بمجموعة ميديا كويري (Media Queries) لوضع شروط لكي يتم إدراج الملف إذا تحققت (لكن الميديا كويري تعتبر إختياريّة الكتابة).

@import <url> Media_Queries(optional);/*    Where :    Media_Queries = Media_Query1, Media_Query2, ..., Media_QueryN*/

من المسموح أيضاً أن يكون الURL بيانات نصيّة String حيث سيتم ترجمته على أساس انه URL أيضاً, و بذلك فإن هذه هي الصيغ المتاحة :

@import url("/css/style.css");@import url("/css/style.css") Media_Queries;@import "/css/style.css";@import "/css/print.css" Media_Queries;
/*    Where :    Media_Queries = Media_Query1, Media_Query2, ..., Media_QueryN*/

الوسم (Link) :

تكتب الميديا كويري داخل الخاصية (attribute) المسمى ب(media).

<link rel="stylesheet" href="style.css" media="Media_Queries">/*    Where :    Media_Queries = Media_Query1, Media_Query2, ..., Media_QueryN*/

مجموعة الميديا كويري (Media Queries)

هي تعبير منطقى (Boolean Expression) يتكون من ميديا كويري (Media Query) واحدة أو أكثر حيث يفصل بينهم بفاصلة (,).

مجموعة ميديا كويري (Media Queries) = واحدة أو أكثر من ميديا كويري (Media Query).

الميديا كويري (Media Query) :
هي تعبير منطقى (Boolean Expression) يتكون من شرط واحد أو أكثر, إذا تحققت جميع شروطه يكون ناتجه (القيمة المُرجعة منه) صواب (true), غير ذلك يكون ناتجه خطأ (false).

مجموعة الميديا كويري (Media Queries) قد  تكون أكثر من ميديا كويري (Media Query) واحدة كما ذكرنا, فمن المرجح ان تكون عبارة عن مجموعة من الميديا كويري (Media Query) صائبة و أخرى خاطئة, فكيف سيتم أخذ قرار تنفيذ كود الCSS أم لا ؟ بكل بساطة الفاصلة (,) التى تفصل بين كل ميديا كويري (Media Query) و أخرى تعنى “أو” (or), حيث إذا كانت أيّ من تلك الميديا كويري (Media Query) صائبة بغض النظر  عن الأخريات فسيتم تنفيذ كود الCSS.

بمعنى آخر, انه اذا كانت أيّ من الميديا كويري (Media Query) المكوّنة لمجموعة الميديا كويري (Media Queries) صائب, فإن مجموعة الميديا كويري بأكملها صائبة.

و طريقة كتابة الميديا كويري (Media Query) كالآتي :
يمكننا الآن تقسيم الميديا كويري (Media Query) حسب الصورة الموضّحة أعلاه الى ثلاث أجزاء أساسيّة و إعطاء نبذه صغيرة عن كل جزء قبل التعمّق فيه :

  1. صفات الميديا كويري (Media Query Modifiers) : و التى هي عبارة عن الكلمات only و not, و يعتبر هذا الجزء من الأجزاء الإختيارية في الكتابة, و إذا تمت كتابتها فمن الإجباري كتابة نوع الميديا (Media Type).
  2. نوع الميديا (Media Type) : يتم فيه تحديد نوع الميديا (وسيلة العرض) التى يجب فيها تنفيذ الأكواد التى بداخل قاعدة الميديا, حيث يتم التحقق من تطابق وسيلة العرض التى تعرض الصفحة الويب مع وسيلة العرض المذكورة في هذا الجزء, و يعتبر هذا الجزء إختياري إذا لم يتم ذكر جزء صفات الميديا كويري (Media Query Modifiers).
  3. مميزات أو شروط الميديا (Media Condition or Features) : هذا الجزء يتلخّص في المميزات التى يجب على الميديا (جهاز العرض) التى تعرض صفحة الويب, أن تتوفر فيها لكي يتم تحقّق الشرط و تنفيذ كود الCSS, و يعتبر هذا الجزء من الأجزاء الإختيارية في الكتابة إذا لم يتم ذكر جزء نوع الميديا (Media Type).

ملاحظات في طريقة الكتابة :
  • كما هو موضّح في الصورة التى تظهر طريقة كتابة الميديا كويري, يجب أن تكون الميديا كويري (Media Query) مكوّنة من جزء واحد فقط و هو مميزات الميديا (Media Features) و حينها لا يكون إختياري الكتابة, أو ثلاث أجزء يكون فيها جزء نوع الميديا (Media Type) إجباري و الأجزاء الأخرى إختيارية.
  • عندما نذكر جزء مميزات الميديا (Media Features) فقط, فإن نوع الميديا (Media Type) يتم إسناده لقيمته الإفتراضية (all) و التى تعني أن أي نوع من أنواع الميديا سوف يحقّق الشرط.
  • يتم الفصل بين صفات الميديا كويري (Media Query Modifiers) و نوع الميديا (Media Type) بفراغ نصي, بينما يتم الفصل بين نوع الميديا (Media Type) و مميزات الميديا (Media Features) بواسطة الكلمة (and).
  • أي طريقة كتابة مختلفة عن ما سبق تجعل ناتج الميديا كويري (Media Query) خطأ (False).

الآتي جميع طُرق الكتابة المُمكنة للميديا كويري :

Media_Query = media_modifiers media_type and media_featuresMedia_Query = media_modifiers media_typeMedia_Query = media_type and media_featuresMedia_Query = media_featuresMedia_Query = media_type
Where :media_features = media_feature1 and ... and media_featureN 

صفات الميديا كويري (Media Query Modifiers)

هي عبارة عن كلمة يتم إضافتها في مقدّمة الميديا كويري لتعطيها معنى مُحدّد, وهي إما أن تكون الصفة not أو الصفة only (لا يُمكن ذكرهما الإثنين معاً).

الصفة not :
تقوم هذه الصفة بعكس الناتج النهائي للميديا كويري الموجوده بها فقط (إذا كان صائب تجعله خاطئ و العكس صحيح), دون التأثير على أي ميديا كويري أخرى موجودة معها في مجموعة الميديا كويري.

الصفة only :
تستخدم هذه الصفة لحماية كود الCSS من التنفيذ, إذا كان المتصفح الذي يعرض صفحة الويب لا يدعم الأصدار الجديد الثلاث من الCSS, و ذلك لان مجموعة الميديا كويري (Media Queries) قد كانت موجودة في الإصدار الثاني من الCSS لكن حينها كانت تتكون الميديا كويري (Media Query) من جزء واحد فقط و هو جزء نوع الميديا (Media Type) و حسب, فالمتصفحات القديمة سوف تقراء جزاء نوع الميديا الذي يكون في البداية غالباً و تتجاهل جزء مميزات الميديا (Media Features) دون التحقق منه! لهذا تم إضافة الصفة only و التى تعنى إذا لم يكون المتصفح يدعم الإصدار الثلاث من الCSS أجعل ناتج تلك الميديا كويري (Media Query) خاطئ!

الشروط و معنى الرابط (and) :

قبل أن نأتي لتحدث عن الجزاءان الآخران, يجب توضيح أن هذان الجزاءن يعتبران الشروط الخاص بالميديا كويري عكس الجزاء الأول (جزء صفات الميديا) الذي يقوم بالتعديل على القيمة النهائية الناتجة من تلك الشروط فقط.

حسناً, كيف يتم حساب القيمة النهائية ؟

  1. جزء نوع الميديا يكون عبارة عن شرط واحد فقط, و يتمثّل في مطابقة وسيلة العرض التى تعرض صفحة الويب و سيلة العرض المذكور به, فإذا تطابقة الوسيلة ستكون القيمة الناتجة من الشرط صواب (true).
  2. جزء مميزات الميديا يتكون من ميّزة واحدة أو أكثر, و كل ميّزة تعتبر شرط بحد ذاتها, و هنا يتضح لنا أن هذا الجزء قد يحتوى على مجموعة من الشُروط عكس الجزء السابق الذي يكون دائماً عبارة عن شرط واحد فقط.

الخوارزمية التى تُستخدم لإيجاد الناتج النهائي للميديا كويري :

  1. هل هنالك جزء مميزات ميديا في الميديا كويري ؟ إذا نعم نفّذ التالي و اذا لا اذهب الي الخطوة (2).
    1. قم بإجاد القيمة الناتجة من كل ميّزة موجودة في جزء مميزات الميديا.
    2. إذا كانت القيمة الناتجة من أحد المميزات خاطئة, فإن ناتج جزء مميزات الميديا بأكمله خاطئ!
    3. و إذا كان ناتج جزء مميزات الميديا بأكلمه خاطئ, إذهب الي الخطوة (3).
    4. و إذا كانت ناتج جزء مميزات الميديا بأكلمه صائب, إذهب الي الخطوة التالية (2).
  2. هل هنالك جزء نوع ميديا في الميديا كويري ؟ إذا نعم نفّذ التالي و إذا لا إذهب الي الخطوة (4) إذا كان ناتج جزء مميزات الميديا صائب, غير ذلك إذهب الي الخطوة (3).
    1. قم بإيجاد ناتج شرط نوع الميديا.
    2. إذا كان خاطئ, إذهب الي الخطوة (3).
    3. إذا كان صائب, إذهب الي الخطوة (4).
  3. أجعل الميديا كويري خاطئة, و أذهب الي الخطوّة (5)
  4. أجعل الميديا كويري صائبة, إلا إذا كان جزء الصفات مذكور مع عدم ذكر جزء نوع الميديا فأجعل الميديا كويري خاطئة!
  5. هل هنالك جزء صفات الميديا كويري و جزء نوع الميديا ؟ إذا نعم نفّذ التالي و إذا لا إذهب الي الخطوة (6).
    1. اذا كانت الصفة هي only, أجعل الميديا كويري خاطئة اذا كانت :
      1. الميديا كويري لديها قيمة صائبة مسبقاً.
      2. و المتصفح الذي يعرض الصفحة لا يدعم الإصدار الثالث من الCSS.
    2. إذا كانت الصفة هي not, أعكس قيمة الميديا كويري (إذا كانت صائبة أجعلها خاطئة و العكس صحيح).
  6. النهاية.

و من هنا يتضح لنا معنى الرابط and الذي كان كلما وجد أحد الميزات خاطئ, جعل جزء مجموعة المميزات بأكلمه خاطئ, و أيضاً اذا وجد جزء مجموعة المميزات أو جزء نوع الميديا خاطئ جعل الناتج الميديا كويري بأكملها خاطئ.

أنواع الميديا (Media Types)

في هذا الجزء يتم تحديد نوع وسيلة العرض التي يجب توفرها لكي يتم تنفيذ أكواد الCSS, مع الملاحظة انه لا يمكن ذكر أكثر من نوع واحد في الميديا كويري (Media Query) الواحدة.

أنواع الميديا (Media Types) المتاحة :
  • all : جميع أنواع الميديا
  • screen : وسائل العرض التى تعرض صفحة الويب على شاشة
  • print : وسائل العرض التى تعرض صفحة الويب على ورق مطبوع
  • speech : وسائل العرض التى تقوم بقراءة صفحة الويب

ملاحظة : النوع speech مدعُوم فقط في متصفحات أوبرا (opera).

أنواع الميديا (Media Types) التى أصبحت مُهملة :
كل هذه الأنواع أصبحت مهملة و سيتوقّف دعمها من قِبل المتصفحات في المستقبل القريب, و يجدر بك عدم إستخدامها : braille, embossed, handheld, projection, tty, tv

مميزات الميديا (Media Features)

في هذا الجزء يتم تحديد المميزات أو المواصفات التى يجب أن تتصف بها وسيلة العرض التي تم تحديدها مسبقاً في جزء نوع الميديا (Media Type), و يتميّز هذا الجزء بأنه يمكنك ذكر أكثر من ميّزة واحد و يتم الربط بينهم بواسطة الكلمة (and).

Syntax of Media Features :
Media_Features = Media_Feature1 and Media_Feature2 and ... and Media_FeatureN


أي أنّ :
مميزات الميديا (Media Features) = ميّزة ميديا (Media Feature) واحدة أو أكثر.

المميزات الخاص بالأبعاد :
  • width
  • height
  • aspect-ratio
  • orientation

المميزات الخاص بطريقة و جودة العرض :
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid
مميزات أصبحت مُهملة ولا يجب عليك إستخدامها :
  • device-width
  • device-height
  • device-aspect-ratio
مميزات ستأتي في الإصدار الرابع من الCSS :
  • update
  • overflow-block, overflow-inline
  • color-gamut
  • pointer, any-pointer
  • hover, any-hover

  • مُلاحظة :
سيتم التحدّث عن كل تلك الميزات لاحقاً في هذه المقالة, وذلك لانه يجب توضيح بعض المفاهيم الأساسية عن ميزات الميديا (Media Features) قبل التطرّق للحديث عن الميزات نفسها.

أنواع مميزات الميديا (Types of Media Features)

ميّزة الميديا (Media Feature) أما أن تكون ميّزة مستقلّة (discrete) أو نطاقيّة (range).

  1. الميزات المستقلّة (Discrete Features) : هي الميّزات التى قيمها لا تقبل الزيادة و لا النقصان, أي أننا لا يمكن أخذ قيمتين من القيم التى تقبلها و نقول أن هذه القيمة أكبر أو أصغر من تلك.

مثال :

 الميّزة orientation التى تقبل القيمة “portrait” أو "landscape” و هما قيمتين لا تقبلان المفاضله بينهما (لا توجد قيمة أكبر أو أصغر من الأخرى, كل واحدة تحمل معنى مُحدّد).
جميع الميزات المستقلّة : orientation, scan, grid

  1. الميزات النطاقيّة (Range Features) : هي الميّزات التى قيمها تقبل الزيادة و النقصان, أي أننا يمكن أخذ قيمتين من القيم التى تقبلها و نقول أن هذه القيمة أكبر أو أصغر من تلك.
مثال :
الميّزة width التى قيمتها تُحدّد الطول (length) الخاص بعرض ال(viewport) المُراد, حيث يمكن أن تكون القيمة أكبر من عرض ال(viewport) الحالي أو أصغر.

جميع الميزات النطاقيّة : width, height, aspect-ratio, resolution, monochrome, color, color-index


الفرق الأساسي بين الميّزات المستقلّة و النطاقيّة أن الميزات النطاقيّة تقبل الآتي :

  • أن هذه الميّزات تقبل إضافة الكلمات الوصفيّة (-min-/max) في بدايتها.
    • مثل : max-width, min-height, max-color, min-resolution
  • أن هذه الميزات يمكن كتابتها على الصيغة النطاقيّة (Range Context). (سنتعرّف عليها في العنوان التالي)



طُرق كتابة ميّزة الميديا (Media Feature) :
كما يتضح من الصورة أعلاه أن ميّزة الميديا تكتب دائماً داخل أقواس (), و لديها ثلاث صيغ كتابة مختلفة :

  • الصيغة الأساسيّة (صيغة الميّزة و القيمة) : و التى تتكون من أسم الميّزة متبوعاً بالعلامة (:) ثم يليها قيمة تلك الميّزة, و هي شبيه بطريقة كتابة الخصائص العاديّة (CSS Properties).

(Feature_Name : Feature Value)

مثال :

@media (width: 200px) {  // if the device's viewport has width = 200px, reads the css code here}


  • الصيغة المنطقيّة (Boolean Context) : و التى تتكون من أسم الميّزة فقط غير متبوع بأي شيء بعده, و هي تحدد توّفر الميزّة من عدمها فقط خلاف الصيغة الأساسية التى تحدد توفر الميّزة من عدمها بالإضافة الي مقدار توفرها, و أيضاً عند كتابة الميّزة في هذه الصيغة فأنت لا تحدد مقدارها بل يتم أخذ مقدارها من مواصفات الجهاز الذي يعرض صفحة الويب.

أنظر للمثال أدناه, فهو يرى ما مقدار توفر الميّزة color في الجهاز العارض, كلما زادات قيمتها فهاذا يعني أن عدد البيتات التى تستخدم في تمثيل اللون الواحد أكبر, إذا كانت قيمتها صفراً فهذا يعني أن الجهاز العارض (سواء كان شاشة أو طابعة) لا يدعم الألوان, و هذا هو المُراد من هذه الصيغة التوفّر أو عدم التوّفر فقط.

(Feature_Name)

example :

@media (color) {  // if the device support color, execute this CSS Code  }



مُلاحظات مهمّة :

  • للميزات التى قيمها رقمية (integer) او قيمتها عبارة عن بُعد (dimension) فإن القيمة صفر (0) تعني عدم توفر الميّزة و يكون ناتج الميّزة خطأ (False), أما الميزات التى قيمتها حرفيّة فإن القيمة none تعني عدم توفر الميّزة و يكون ناتج الميّزة خطأ (False), غير ذلك فإن ناتج الميّزة يكون صواب (true).

  • هنالك بعض الميزات التى إذا كتبتها على هذه الصيغة قد لا تكون ذات فائدة و معنى.
    • مثل :
@media (width) {/*----سيتم تنفيذ الكود اذا كان عرض الviewport أكبر من صفر, مع العلم أن من المستحيل أن يكون عرض الviewport صفراً----*/}

  • و هنالك أيضاً بعض الميزات التى إذا كتبتها على هذه الصيغة تكون ذات فائدة و معنى أفضل.
    • مثل :
@media (color) {/*----سيتم تنفيذ الكود اذا كانت وسيلة العرض ملوّنة (تدعم الألوان)----*/}


  • الصيغة النطاقيّة (Range Context) : هذه صيّغة حديثة الولادة حيث أنها ستصبح صيغة قابل للإستخدام في المستقبل القريب; و ذلك لأنها من التقنيات الجديدة التى ستتوّفر مع الCSS4 !, و الجدير بالذكر و التنبيه أن الميزات التى يمكن كتابتها على هذه الصيغة هي الميزات النطاقيّة (Range Features) فقط (كما ذكرنا سابقاً).

و من الصورة الموضّحة أعلاه, نعرف كيف يتم كتابة الميّزة على الصيغة النطاقية فهي أما :

  • أن يكون أسم الميّزة (Feature Name) في أحد الجوانب و قيمة الميّزة (Feature Value) في الجانب الآخر و بينهم واحدة من علامات المقارنة الرياضيّة.


Feature_Name <operator> Feature_Valueor Feature_Value <operator> Feature_Name
where :<operator> = "<" or ">" or ">=" or "<=" or "="
example:
@media (width >= 200px) {  /*----    executes css code here, if viewport's width >= 200px   ----*/}
@media (300px <= height) {  /*----    executes css code here, if viewport's height >= 300px   ----*/}



  • أن يكون أسم الميّزة (Feature Name) في الوسط, مُحاصر بين قيمتين, و بين كل قيمة و اسم الميّزة علامة مقارنة رياضيّة.


Feature_Value <operator> Feature_Name <operator> Feature_Value
where :<operator> = "<" or ">" or ">=" or "<="
example:
@media (100px < width <= 480px) {  /*----    executes css code here, if viewport's width (<= 480px) and (> 100px)  ----*/}
@media (800px >= height >= 480px) {  /*----    executes css code here, if viewport's height (>= 480px) and (<= 800px)  ----*/}



الخصائص (CSS Properties) ضد ميّزات الميديا (Media Features)

في هذا العنوان سنوضّح أهم الفروقات بين خصائص الCSS و ميّزات الميديا كويري :

  • ميزات الميديا دائماً تكتب بين قوسين ().
  • خصائص الCSS تنتهى غالباً بعلامة الفاصلة المنقوطة (;).
  • خصائص الCSS تحدد أوصاف العنصر و طريقة عرضه, أما ميزات الميديا تُحدد المُتطلبات التى يجب توفره في الجهاز الذي يعرض صفحة الويب.
  • يمكن كتابة ميزات الميديا دون قيمة و علامة إسناد ”:”, على الصيغة المنطقية (Boolean Context) التى لا يمكننا إستخدامها في خصائص الCSS .
  • يمكننا أيضاً كتابة ميزات الميديا على الصيغة النطاقيّة (Range Context), التى تحتوى على العلامات المقارنة الرياضيّة بدلاً من علامة الإسناد “:”, بالإضافة إلى أن ميزات الميديا تدعم إضافة الكلمات الوصفيّة (min/max),  و كل ذلك تفتقده خصائص الCSS.
  • خصائص الCSS يمكن أن تكون قيمتها مركّبة (ليست قيمة واحدة فقط) مثل الخاصية margin و border, أما ميزات الميديا دائماً يكون لديها قيمة واحدة فقط مثل (max-width: 480px), حيث أن قيمة الميّزة أما أن تكون (على حسب ما تدعمه كل ميّزة) :
    • كلمة مفتاحية (keyword) واحدة.
    • أو قيمة رقمية (integer) واحدة
    • أو قيمة بُعد (dimension) واحدة.
    • أو قيمة نسبة (ratio) واحدة.

الميّزة Width و Height

تستخدم لتحديد أبعاد وسيلة العرض التى تعرض صفحة الويب, في الشاشات تستخدم لتحديد أبعاد الviewport الخاص بالمتصفّح و في الطابعات تستخدم لتحديد أبعاد الصفحة المُراد طباعتها.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : طول (Length)
قيمها : رقم متبوع بأي من وحدات قياس الطول. (مثل: px, pt, pc, em, rem, cm)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

مثال :
  • في المثال الآتي, سيتم تنفيذ أكواد الCSS داخل قاعدة الmedia@ اذا كان عرض الviewport أو الورقة أكبر من أو يساوي 480px , و طول الviewport أو الورقة يساوي القيمة 728px تماماً .

@media (min-width: 480px) and (height: 728px) {    p {        color: #000;        font-size: 1.2em;        font-weight: bold;    }}

الميّزة Orientation

تستخدم لمعرفة ما إذا كان عرض الviewport أو الورقة أطول من طولهما أو العكس, و تستخدم بصورة شائعة لمعرفة ما إذا كان المستخدم يمسك هاتفه الذكي بصورة أفقيّة أو رأسيّة.

نوع الميّزة : ميزة مستقلّة (Discrete Feature).
نوع قيمتها : keywords
قيمها : “portrait” أو “landscape”
دعم الإضافات (-min-/max): لا
و بما أنها ميّزة مستقلّة فهي لا تقبل الصيغة النطاقيّة (Range Context).

القيمة “landscape” : تعني أن العرض أكبر من الطول.
القيمة “portrait” : تعني أن الطول أكبر من العرض.

مثال :
  • في هذا المثال, سيتم تنفيذ أكواد الCSS داخل قاعدة الmedia@ اذا كان عرض الviewport أو الورقة أصغر من طولهما. (و العكس صحيح اذا وضعنا قيمة landscape بدلاً من portrait)

@media (orientation: portrait) {    #container {        width: 90%;        margin: 15px 0;    }}

الميّزة Aspect-ratio

يتم فيها تحديد النسبة بين عرض و طول الviewport أو الورقة.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : نسبة (ratio)
قيمها : رقم متبوع بعلامة “/” متبوع برقم آخر. (مثل: 16/9, 16/10, 4/3, 9/4)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

أمثلة :
  • في هذا المثال, سيتم تنفيذ أكواد الCSS داخل قاعدة الmedia@ اذا كانت النسبة بين عرض و طول الviewport أو الورقة تساوي 4 على 3.

@media (aspect-ratio: 4/3) {    #container {        width: 90%;        margin: 15px 0;    }}

  • في هذا المثال, سيتم تنفيذ أكواد الCSS داخل قاعدة الmedia@ اذا كانت النسبة بين عرض و طول الviewport أو الورقة تساوي 16 على 9 أو أقل.

@media (max-aspect-ratio: 16/9) {    #container {        width: 100%;        margin: 5px 0;    }}

الميّزة Color

تستخدم هذه الميّزة لتحديد عمق الألوان في الجهاز العارض لصفحة الويب, حيث يتم فيها تحديد عدد البيتات المستخدم في تمثيل اللون, الإجهزة التى ميّزة الColor فيها تساوي 0, هي أجهزة غير ملوّنة.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : رقم (integer)
قيمها : رقم يحدد عدد البيتات لكل لون. (مثل: 4, 8, 16)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

مثال :
  • في هذا المثال, سيتم تنفيذ أكواد الCSS داخل قاعدة الmedia@ اذا كان الجهاز العارض لا يدعم الألوان (أبيض و أسود فقط).

@media not screen and (color) {    * {        border-color: #000;        color: #000;        background-color: #fff;    }}

و بهذه الطريقة نكون قد حسّنا من طريقة عرض محتوى الصفحة في الشاشة غير الملوّنة, حيث كان سيتم تحويل الألوان المستخدم الي تدرجات مختلفة بين الأبيض و الأسود, و التى تنتج اللون الرمادي بدرجاته الغامقة و الفاتحة, و قد يظهر لون النص بالرمادي الفاتح الذي قد لا يكون واضح بصورة جيّدة في الصفحة.

الميّزة Color-index

تستخدم لتحديد عدد المُدخلات الموجودة في جدول البحث عن اللأوان الخاص بالجهاز العارض, إذا كان الجهاز لا يستخدم جدول البحث عن الألوان فإن قيمة هذه الميّزة تكون 0.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : رقم (integer)
قيمها : رقم يحدد عدد المدخلات في جدول البحث عن الألوان. (مثل: 64, 128, 256)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

الميّزة Monochrome

تستخدم لمعرفة ما إذا كان الجهاز العارض للصفحة أحادي اللون أم لا, و أيضا لمعرفة عدد البيتات في البكسل الواحد إذا كان الجهاز أحادي اللون, الأجهزة عديدة الألوان دائماً ما تكون فيها هذه الميّزة تساوي 0.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : رقم (integer)
قيمها : رقم يُحدّد عدد البيتات في البكسل الواحد. (مثل: 8, 16, 32)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

مثال لشاشة أحاديّة اللون : شاشة الcmd و شاشة الBoot Manger في الويندوز.

الميّزة Resolution

تستخدم لتحديد و معرفة دقّة الشاشة التى تعرض صفحة الويب, يتم تمثيل قيمتها بكثافة البكسلات في كل أنش أو بكسل أو سنتيمتر, أستخدام هذه الميّزة مفيد جداً إذا ما كانت تريد عرض صور بحجم أكبر في شاشات الريتنا و ال4K لتظهر بصور أفضل, وأيضاً لحماية الشاشات ذات الدقة العادية و المنخفضة من تحميل صور ذات حجم كبير.

نوع الميّزة : ميزة نطاقيّة (Range Feature).
نوع قيمتها : دقّة (Resolution).
قيمها : رقم متبوع بأحد واحدات قياس الدقّة (و هي : dpi, dppx, dpcm)
دعم الإضافات (-min-/max): نعم
و بما أنها ميّزة نطاقيّة فهي تقبل جميع الصيغ الثلاث المتوفّرة للكتابة.

ملاحظات مهمة :
  • هذه الميّزة الوحيد التى تحدثنا عنها و لديها ضعف في دعم المتصفحات لها بصورة متوسطه, لتحصل على دعم أفضل لهذه الميّزة من المتصفحات عليك بإستخدم وحدة القياس dpi فقط في تحديد القيمة, لأن هنالك بعض المتصفحات لا تدعم الوحدات الأخرى (dppx, dpcm).
  • هذه الميّزة تحدد كثافة البكسلات (الخاصة بوحدة قياس الCSS) في الوحدات الفيزيائيّة (الحقيقة) للجهازة سواء كانت أنش أو سنتميتر أو بكسل.

مثال :
فهذا المثال سيتم تنفيذ الكود إذا كان عدد البكسلات (في وحدة الCSS) يساوي 2 أو أكثر في البكسل الفيزيائي الواحد, و هذا يعني أن هذا التنسيق سيعمل مع الشاشات عالية الدقّة فقط.

@media (min-resolution: 2ddpx) {    body {        background-image: url("bg-high-res.jpg");    }}

الميّزة Grid

تستخدم لمعرفة طريقة عرض الشاشة للمحتوى هل هي grid أو لا, الشاشات التى تعرض المحتوى بطريقة الgrid تمتاز بأنها لا تعرض أي محتوى مرئ (مثل الصورة و الفيديوهات) فهي تعرض النصوص و حسب, وبخط واحد.

نوع الميّزة : ميزة مستقلّة (Discrete Feature).
نوع قيمتها : قيمة رقميّة منطقية (0 و 1)
قيمها : 0 تعني عدم وجود الميّزة في الشاشة و 1 التى تعني العكس.
دعم الإضافات (-min-/max): لا
و بما أنها ميّزة مستقلّة فهي لا تقبل الصيغة النطاقيّة (Range Context).
مثال لها : شاشة عرض الcmd و powershell .
ملاحظة : هذه الميّزة ضعيفة الدعم من المتصفحات.



الميّزة Scan

تستخدم لمعرفة نوع عملية المسح المستخدم في الجهاز العارض للصفحة.

نوع الميّزة : ميزة مستقلّة (Discrete Feature).
نوع قيمتها : كلمة مفتاحيّة (keyword)
قيمها : أما “interlace” أو “progressive”
دعم الإضافات (-min-/max): لا
و بما أنها ميّزة مستقلّة فهي لا تقبل الصيغة النطاقيّة (Range Context).
ملاحظة : هذه الميّزة ضعيفة الدعم من المتصفحات.

القيمة “interlace” : هي عميلة مسح تستخدم في بعض الشاشات البلازما, وتحتاج تعامل خاص اذا عُرضت بها صفحة الويب, فيجب تجنب حركات الأنميشن السريعة, بالإضافة الي الحرص على استخدام قيمة عرض أكبر من “1px” في الحدود (border) و ما شابه, وذلك لتجنّب مشاكل العرض بصورة غير سليمة (مشوّشة).

القيمة “progressive” : هي عملية مسح مُستخدمة في معظم الشاشات الحديثة وجميع شاشات الحاسوب, و هي لا تحتاج لأي مُعاملة خاصة.

التعامل مع الأخطاء في الميديا كويري

لقد ذكرنا مسبقاً طريقة كتابة الميديا كويري بكل تفصيل, لكن لم نذكر ما هي عواقب الكتاب بشكل خاطئ, الآن قد يجول في بالك كيف سيتم التعامل مع أخطاء الكتابة في الميديا كويري ؟ هذا ما سيتم شرحه في هذا العنوان.

1- كتابة نوع ميديا (Media Type) غير معروف

يكون ناتج أي نوع ميديا غير معروف (غير موجود) دائماً خطأ.

أمثلة :
سيتم التعامل مع الميديا كويري الأولى على أنها خطأ بالكامل لان جزء نوع الميديا فيها ناتجه خطأ (false),و سيتم التعامل مع الميديا كويري الثاني بصورة طبيعية فإذا كانت الصفحة معروض على الشاشة ستكون صواب, غير ذلك ستكون خطأ. 

@media ps and (min-width: 480px), screen {    /*-- CSS Code Here --*/}

أما في هذا المثال سيتم تنفيذ الأكواد و ذلك لإضافة الصفة not التى تعكس الناتج النوع غير المعروف من خطأ الي صواب.

@media not ps {    /*-- CSS code here will execute --*/}

2- كتابة ميّزة ميديا (Media Feature) غير معروفة أو إسناد قيمة غير صالحة لميّزة الميديا

يتم إستبدال أي ميديا كويري تحتوى في جزء مميزات الميديا على ميّزة غير معروفة بالعبارة “not all” و التى دائماً ستكون خطأ.

مثال :
في المثال التالي, سيتم إستبادل أي ميديا كويري تحتوى على ميّزة غير معروفة و أي قيمة غير صالحة لميّزة معروفة بالعبارة ”not all” و التى تؤول دائماً الي القيمة خطأ (False), و سيتم التعامل مع باقي الميديا كويري في مجموعة الميديا كويري بصورة الطبيعية كما لو أنه لم توجد ميديا كويري قبلها.

@media screen and (max-length: 20cm), (max-width: 200x), (orientation: landscape) {    /*-- CSS Code Here --*/}
سوف يتم ترجمة القاعدة في المثال أعلاه إلى الآتي :
@media not all, not all, (orientation: landscape) {    /*-- CSS Code Here --*/}


الخاتمة :

أخيراً, وصلنا الي نهاية هذه المقالة الشاقة و الرائعة! 😃 , أتمنى أن أكون قد أحسنت في شرح هذا الخاصية, وأتمنى كذلك مشاركة هذه المقالة مع كل من قد يهتم بهذا الموضوع و شكراً مقدماً .

تمت الكتابة بواسطة : Mustafa Salah
هل اعجبك الموضوع :

أخر المواضيع من قسم : تعلم css