هذه أحد المواضيع الأخرى ضمن سلسلة تطبيقات على CSS3 والتي تعرض عدة أمثلة على إستخدام تقنية CSS3 حسب كل خواص جديدة مع غرضها، في هذا الدرس سأعرض أمثلة على إستخدامات  Media Queries أو إستعلامات التصفح الخاصة لكيفية إستعراض صفحات الويب حسب شروط معينة مثل قياس عرض نافذة المتصفح وهي وسيلة رئيسية لتطبيق مفهوم إستجابة تصميم صفحة الويب لطريقة العرض Responsive Web Design وتأتي كذلك من خاصية media المتعلقة بنوع إستعراض الصفحة مثل ‏all (إستعراض لجميع الأجهزة والمتصفحات)، print (إستعراض الصفحة قبل الطباعة)، screen (إستعراض للأجهزة الداعمة للألوان – أي جهاز حاسوب -)، tv (إستعراض لأجهزة التلفاز) .. وغيرها من الأنواع الإستعراض التي يمكن القراءة عنها.

تستخدم Media Queries في تحديد تنسيق معين للصفحة حسب عرض النافذة ويمكن إستخدام نفس التنسيق الخاص بالصفحة (مثل ملف style‪.‬css) وتعديل أصناف معينة خاصة بعناصر الصفحة (خاصية class و id) كما سنرى في هذا الدرس، في البداية سنلقي نظرة لأنواع إستعلامات Media Queries.

كيفية إستخدام Media Queries

لإستخدام إستعلامات Media Queries في شفرة CSS يجب تعريف خاصية media وتحديد نوع الإستعراض مع شرط العرض على هذا التركيب:

@media type and (condition) {
	..
}

فمثلاً إذا أردت تحديد تنسيق معين للصفحة عندما يكون عرض نافذة المتصفح أقل من 1024 بكسل فإن إستعلام خاصية media سيكون بهذه الطريقة:

@media screen and (max-width: 1024px) {
	..
}

والشروط conditions المتوفرة في خاصية media هي:

  • width: تحديد عرض الصفحة، يمكن تحديد أدنى وأعلى قياس عبر min-width و max-width.
  • ‏height: تحديد إرتفاع الصفحة، يمكن تحديد أدنى وأعلى قياس عبر min-height و max-height.
  • ‏device‪-‬width: تحديد عرض إستعراض شاشة الجهاز (مثل جهاز هاتف نقال: آيفون أو غيره).
  • ‏device‪-‬height: تحديد إرتفاع إستعراض شاشة الجهاز.
  • ‏orientation: تحديد إتجاه الجهاز، أفقي أو عامودي عبر قيم Landscape و Portrait.
  • ‏device‪-‬aspect‪-‬ratio: تحديد نسبة عرض وإرتفاع الشاشة معاً (مثل 320/480 هي عرض وإرتفاع شاشة آيفون في الإتجاه العمودي).
  • ‏color: تحديد ما إذا كان الجهاز يدعم الألوان في إستعراض الصفحة ويمكن تحديد عدد الألوان على الأقل min-color.
  • ‏color‪-‬index: تحديد ما إذا كان الجهاز يدعم فهرسة الألوان (مثال جهاز يدعم 256 لون فقط).
  • ‏resolution: تحديد دقة الشاشة التي تدعمها الجهاز الذي يستعرض الصفحة (مثل 72dpi او 300dpi).
  • ‏scan: تحديد نوع المسح الخاص بشاشة التلفاز TV (يمكن توضيح هذه النقطة أكثر).
  • ‏grid: تحديد نوعية إستعراض الشاشة إذا شبكي grid أم bitmap (يتعلق بدقة الشاشة كذلك).

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

مثال عملي

الآن ندخل في مثال عملي يوضح كيفية إستخدام إستعلامات Media Queries، سيكون المثال عن قالب عادي تتغير عناصره حسب عرض نافذة المتصفح ويمكن عمل أفضل من ذلك حسب إحتياجات الصفحة علماً بأن قبل إستخدام هذه الإستعلامات يجب أن تضع الهدف من إستخدامها وأياً من العناصر سوف تتغير قبل أن تبدأ بإستخدام إستعلامات Media Queries.

لن أعرض شفرة CSS وHTML كاملة بل فقط التغييرات بواسطة  Media Queries في شفرة CSS (يمكن تحميل المثال لرؤية كيف تم عمله وتفاصيله)، في البداية أوضح صور المثال مع التغييرات حسب عرض نافذة المتصفح قبل أن أدخل إلى وضع شفرة CSS:

لعمل تغيير أو تعديل خاصية معينة في CSS حسب عرض الشاشة كما هو مبين في الصورة السابقة، نبدأ بكتابة خاصية media يتبعها شرط التغيير (وهو عندما تكون عرض النافذة أقل من قياس معين)، كما في شفرة CSS هذه:


/* عمل تغييرات على التنسيق إذا كان قياس الصفحة أقل من 960 بكسل */
@media screen and (max-width: 960px) {

	#wrap {
		width: 100%; /* قياس العرض حسب عرض النافذة */
	}
	#navigation, #content, #header {
		float: none; /* إلغاء وضع العناصر معاً بالشكل الأفقي */
		margin: 0 auto;
		width: 80%;
		padding: 0;
	}

	/* تصميم قائمة روابط بشكل أفقي بعد تصغير نافذة المتصفح */

	#navigation {
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-radius-topright: 10px;
	}

	#navigation ul {
		overflow: hidden;
		margin-right: 15px;
	}

	#navigation ul li {
		display: block;
		float: right;
		padding: 0 10px;
	}

	#navigation ul li a {
		display: block;
		padding: 5px 10px;
	}

}

ويمكن بعدها رؤية التغييرات عند تجربة المثال بتصغير وتكبير نافذة المتصفح، وهذه فقط مجرد مثال بسيط لتوضيح الفكرة، فيمكن إستخدام إستعلامات Media Queries في تحديد تنسيق معين للهواتف النقالة والأجهزة اللوحية كذلك، وهذه مجموعة للقياسات يمكن إستخدامها حسب كل كل جهاز ووضعيته:

  • جهاز آيباد iPad (وضعية Portrait -عمودي): 768X1024 (الإرتفاعXالعرض)
  • جهاز إيباد iPad (وضعية Landscape – أفقي): 1024X768 (الإرتفاعXالعرض)
  • جهاز آيفون iPhone (وضعية Portrait – عمودي): 320X480 (الإرتفاعXالعرض)
  • جهاز آيفون iPhone (وضعية Landscape – أفقي): 480X320 (الإرتفاعXالعرض)
  • بقية الهواتف النقالة: أقل من 480 بكسل

ويمكن إستخدام خاصية max‪-‬width أو min‪-‬width كشرط لإستخدام القياسات السابقة وكذلك إستخدام خاصية orientation في تحديد الوضعية سواء كانت Portrait أو Landscape بدلاً من تحديد القياس نفسه لإختصار كتابة الشفرة، وإذا قررت عمل نسخة موحدة للمستخدمين من سطح المكتب والهواتف النقالة لا تنسى تثبيت التصميم غير خاصية viewport:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

سأتطرق لتفاصيل إستخدام Media Queries لعمل صفحة ويب لنسخة واحدة متوافقة مع متصفحات سطح المكتب والمتصفحات الموجودة في الهواتف النقالة والأجهزة اللوحية في سلسلة تصميم الويب للهاتف النقال في أحد المواضيع القادمة إن شاء الله.

أمثلة

بعض الأمثلة الملهمة من المواقع التي تستخدم إستعلامات Media Queries بطريقة تخدم محتويات هذه المواقع، جرب تصغير نافذة المتصفح عند فتح أياً من هذه المواقع.

‏CSS‪-‬Tricks

Web Designer Wall

Hicksdesign

Simon Collison

Owltastic

 Converge SE

‏From A List Apart

Zomigi

مصادر

هذه بعض المصادر التي أخذت منها الأمثلة ومصادر تحتوي على معلومات أكثر عن إستعلامات Media Queries.

تفاصيل Media Queries من منظمة W3C

إستجابة تصميم الويب: ما هي وكيفية إستخدامها

20 مثال ملهم لإستخدام Media Queries

إستخدام Media Queries في المساحات المتوفرة في الصفحة

دليل إستجابة تصميم الويب