CSS3 Modules

تصميم موقع مرن : Media Queries

آخر تحيين: 25-11-2014

CSS3 Multi-column Layout


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

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

  1. شاشة الحاسوب
  2. شاشة الهاتف (iPhone 5)
  3. شاشة الهاتف (iPhone 5) باللجوء إلى Media Queries


في الصورة رقم "1" ليس لدينا أية مشكلة في تصفح الموقع .
في الصورة رقم "2" جزء صغير فقط من الصفحة يظهر على شاشة الهاتف الجوال . مما يجعل تصفح موقعنا مستحيلا على الشاشات الصغيرة . لتجاوز هذه المشكلة لجأنا إلى استعمال media queries كما تبين الصورة رقم "3" بحيث جعلنا الصفحة تظهر كاملة على شاشة الأيفون و أصبح بإمكاننا تصفح الموقع على شاشة صغيرة بدون مشكلة

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


ماذا نعني ب Media Queries ؟
media queries (أو الإستعلامات الموجهة للأجهزة الوسائطية) أو ما يسمّى أيضا "Responsive design" بمعنى "تصميم مرن يستجيب و يتماشى مع مختلف الأجهزة" : هي مجموعة من القواعد التي تحدد متى يجب تطبيق بعض الأنماط . تمكننا هذه الطريقة بإضافة شروط لتطبيق بعض الأنماط أو تغيير بعضها لتتلائم مع مختلف الشاشات و الأجهزة الوسائطية

تذكير حول استعمال بعض الوسائط في إصدار css2

منذ إصدار css2 أصبح بإمكاننا إنشاء صفحة موجهة لجهاز وسائطي "media" معين . و عندما نُقحم هذه الصفحة ، ألفنا إضافة خاصية "media" في وسم "link" و تختلف قيمة هذه الخاصية حسب الجهاز الموجهة له . مثلا إذا كان الغرض من صفحة CSS هو استعمالها على الشاشات ، كشاشة الحاسوب ، نعطيها قيمة "screen" . أما إذا كان هدفها هو الطبع "لإتاحة عملية طبع صفحات الموقع" ، نعطيها قيمة "print"

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <link media="screen" rel="stylesheet" href="style.css" type="text/css" >
 <link media="print" rel="stylesheet" href="print.css" type="text/css" >
</head>
<body>
...
</body>
</html>

بهذه الطريقة ، عندما نكون نتصفح الموقع على الشاشات ، سيتم تطبيق أنماط صفحة CSS التي أعطيناها قيمة "screen" فقط . لكن بمجرد أن يقوم المستخدم بطباعة الصفحة على جهاز المطبعة يتم أيضا تفعيل صفحة CSS التي أعطيناها قيمة "print" .
إذاً ، بهذه الطريقة كنا نستعمل توجيهات لتفعيل صفحة CSS ما ، حسب الجهاز الموجهة إليه ، اعتمادا على قيمة الخاصية "media" .
منذ إصدار CSS2 بدأت الصفة "media" تأخذ القيم التالية :
screen, print, handheld, aural/speech, embossed, braille, projection, tv, tty, all
بدل استعمال صفحات مستقلة لكل جهاز و سائطي على حدة ، بإمكاننا أيضا استعمال هذه التوجيهات في صفحة CSS مُوحّدة . و ذلك باستعمال القاعدة "@media" متبوعة بالجهاز الذي سنوجه له الأنماط

body {
  font-size: 62%;
  color: gray;
}
/* ... */
/* الأنماط التالية لن يتم تطبيقها إلا إذا أراد المستخدم بطباعة الصفحة */
@media print {
  body {
    font-size:120%;
    color:black;
  }
  #navbar, #footer, aside {
    display:none;
  }
}

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

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

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

CSS3 Media Queries : قواعد تحديد الأجهزة

لتحديد جهاز وسائطي معين و الذي سنتوجه إليه بإنماطنا ، سنستعمل بعض القواعد و الشروط التي سنتعرف عليها تدريجيا عبر أمثلة :
. في المثال أسفله سنضيف بعض الأنماط للشاشات الصغيرة (الهواتف الجوالة) و التي لا يتجاوز عرضها 480px .

<link rel="stylesheet" media="screen and (max-width: 480px)" href="small.css" type="text/css" >

أوّلا قمنا بتحديد نوع الجهاز "screen" : أي أن أنماطنا موجهة للشاشات ، ثم أضفنا شرط (max-width: 480px) : أي أن الشاشات المستهدفة لا يجب أن يتجاوز عرض نافذتها 480 بيكسل (هذه القيمة توافق عرض شاشات الهواتف الجوالة)
في هذه الحالة لن يتم تطبيق الأنماط الموجودة في صفحة "small.css" إلا إذا كانت دقة عرض نافذة الجهاز تساوي أو تقل عن 480px.
كما رأينا سابقا بدل إنشاء صفحة مستقلة لكل جهاز ثم إقحامها باستعمال القواعد . يمكننا تطبيق هذه القواعد مباشرة في صفحة css موحّدة .

body {
  width: 980px;
}
aside {
  width: 120px;
  float: left;
}
/* 480px هذه الأنماط لن يتم تطبيقها إلا إذا كان عرض النافذة لا يتجاوز */
@media screen and (max-width: 480px) {
  body {
    width: auto;
  }
  aside {
    display: none;
  }
}

معامِلات المنطق

يمكننا الجمع بين مجموعة من القواعد و الشروط في الوقت نفسه و ذلك باستعمال معاملات المنطق :

  1. and : "و"
  2. only : "فقط"
  3. not : "لا"

مثلا إذا أردنا تطبيق الأنماط على شاشة ذات دقة عرض تتراوح بين 480px و 800px

@media screen and (min-width: 480px) and (max-width: 800px) {
    aside {
    display: block;
    float: none;
  }
}

سيتم تطبيق الأنماط شرط أن يكون الجهاز عبارة عن شاشة ، و لا يجب أن يقل عرض نافذة الشاشة عن 480 بيكسل (العرض الأدنى) و لا يجب أن يتجاوز 800 بيكسل (العرض الأقصى)

بعض القواعد المتوفرة

بالإضافة لقواعد "media" التي رأيناها أعلى ، توجد بضعة عشرة قاعدة أخرى تساعدنا على دقة تحديد الجهاز الذي نتوجه إليه بأنماطنا ، سأعرض عليكم بعضا منها :

  • color: دعم الألوان ب(bits/pixel)
  • height: طول منطقة العرض (نافذة المتصفح مثلا)
  • width: عرض منطقة العرض
  • device-height: طول شاشة الجهاز
  • device-width: عرض شاشة الجهاز
  • orientation: توجه الجهاز . تأخذ إحدى القيم (portrait أو landscape)
  • media: نوع الشاشة :
    • screen: الشاشة الكلاسيكية
    • tv: شاشة التلفاز
    • projection:المسلاط
    • print: المطبعة
    • all: جميع أنواع الشاشات
يمكننا إستعمال min- و max- مع جميع هذه القواعد . مثلا min-width : تعني العرض الأدنى ، و max-width تعني العرض الأقصى ...إلخ

لنأخذ المثال أسفله . سيتم تطبيق الأنماط فقط إذا توفرت الشروط التالية :
- إذا كان نوع الجهاز تلفازا "tv" .
- و دقة عرض الشاشة لا تقل عن 800px .
- و توجه الجهاز "landscape"

@media tv and (min-width: 800px) and (orientation: landscape) {
 …
}

ما هو الفرق بين width و device-width ؟

  • width : تعطينا عرض النافذة (نافذة المتصفح مثلا) .
  • device-width : تعطينا عرض شاشة الجهاز

لنأخذ مثالا سهلا حتى يتبين لكم الفرق بينهما : لنفترض أن دقة عرض شاشة حاسوبي تساوي 1500px. و أردت تطبيق بعض الأنماط موجهة فقط للشاشات التي يساوي عرضها أو يقل عن 480px :

/*
  **  أنماط موجهة للهاتف الجوال
  **  اعتمادا على دقة عرض نافذة المتصفح  
*/
@media screen and (max-width: 480px) {
  p {
   color : red;
  }
}

رغم أن دقة عرض شاشة حاسوبي تساوي 1500 بيكسل . إذا قمت بتقليص و تصغير عرض نافذة المتصفح إلى أقل من 480 بيكسل سيتم تطبيق النمط و تلوين الفقرات باللون الأحمر .
أما إذا استعملت device-width بدل width لن يتم تطبيق النمط على حاسوبي و لو قمت بتصغير عرض نافذة المتصفح . لأن دقة عرض شاشة حاسوبي تساوي 1500 بيكسل . و سيتم تطبيق النمط فقط على شاشات الهواتف الجوالة و التي لا يتجاوز عرض شاشتها 480 بيكسل

/*
  **  أنماط موجهة للهاتف الجوال
  **  اعتمادا على دقة عرض شاشة الهاتف
*/
@media screen and (max-device-width: 480px) {
  p {
   color : red;
  }
}

إليكم بعض الأمثلة للإستئناس


/* الحواسيب */
@media screen and (min-width: 1024px) { /* ... */ }

/* Tablets : Portrait أو Landscape  */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* ... */ }

/* Portrait  الهواتف المحمولة توجه */
@media screen and (max-device-width: 480px) and (orientation: portrait) { /* ... */ }

/* Landscape الهواتف المحمولة توجه */
@media screen and (max-device-width: 640px) and (orientation: landscape) { /* ... */ }

/* Portrait أو Landscape الهواتف المحمولة توجه*/
@media screen and (max-device-width: 640px) { /* ... */ }

متى يجب استعمال width و device-width ؟
عادة نستعمل device-width للأجزة ذات الشاشات الصغيرة كالهواتف الجوالة ، و width لمختلف أنواع الأجهزة الأخرى .
يمكننا أيضا استعمال width للهواتف الجوالة . لكن لتجنب مجموعة من مشاكل العرض سنتعرف على خاصية مهمة و هي "viewport"

viewport

يعتبر حجم شاشات الهواتف الجوالة صغيرا جدا مقارنة مع شاشات الحواسيب . لعرض الموقع بشكل صحيح على نافذة متصفح الجوال . تقوم المتصفحات بتصغير الزّوم (zoom) ليتلائم الموقع مع مساحة عرض الهواتف . منطقة العرض هذه تُسمّى "viewport" و تمثل مساحة عرض نافذة المتصفح على الجوال . لكن نافذة العرض هذه ليست حقيقية بل يتم محاكاتها فقط ، و هي تختلف من جوال لآخر . و المفاجأة الأخرى أن القيمة المبدئية لهذه المساحة لا علاقة لها بمساحة شاشة الجوال ، بل مرتبطة بالمتصفح الذي يستعمله الجوال .
لنرى بعض القيم المبدئية لمتصفحات الهواتف الجوالة :

المتصفحقيمة viewport المبدئية
Android 1, 2 et 3800px
Android 4980px
iPhone Safari980px
Opera mini850px
Opera mobile980px
Safari mobile980px
Internet Explorer mobile1024px

المشكلة أنه عندما نتوجه إلى جهاز جوال باستعمال max-width . سيقوم هذا الأخير بمقارنة العرض الذي حدّدناه ، بعرض الviewport الخاص به . إلا أن هذا العرض كما لاحظنا في الجدول ، يختلف من متصفح لآخر ، مثلا متصفح الأيفون يتصرف كأن العرض يساوي 980 بيكسل و متصفح أندرويد1 يعتبره 800 بيكسل ...إلخ
إذا استعملنا مثلا max-width:480px ظنّاً بنا أننا نتوجه للهواتف الجوالة ، سيخيب ظنّنا و لن يتم تطبيق أنماطنا . لأنه بكل بساطة قيمة viewport المتصفحات أكبر بكثير من القيمة التي حدّدناها
لهذا حتى نتوجه بشكل سليم إلى الهواتف الجوالة نلجأ إلى استعمال max-device-width التي تُمثّل عرض شاشة الهاتف الجوال و ليس عرض نافذة المتصفح الذي يستخدمه . كما أحثكم أيضا على إضافة الخاصية viewport في وسم meta

<meta name="viewport" content="width=device-width">

القيمة width=device-width تعني أننا سنرغم قيمة viewport لتكون مساوية لقيمة عرض شاشة الهاتف .
لحل المشاكل المتعلقة بالبيكسل . (البيكسل في لغة css ليس هو نفس البيكسل الحقيقي على الجهاز) . سنعدل قيمة الزوم باستعمال initial-scale

<meta name="viewport" content="width=device-width, initial-scale=1.0">

سنكتفي بهذا القدر الشحيح من الشرح فيما يتعلق ب viewport. لأن الموضوع يحتاج لدرس خاص . أعطيتكم أهم ما يلزمكم حتى لا يتشتت تركيزكم و يصبح الدرس مملا
تعودوا دائما على إضافة وسم meta الخاص بال viewport في صفحات html بين وسمي head . هذا سيجنبكم العديد من المشاكل و يتيح لكم إمكانية استعمال max-width و max-height لمختلف أنواع الشاشات .

تطبيق

لاستثمار ما رأيناه في هذا الدرس ، سنأخذ التصميم الذي رأيناه سابقا في هذا الملف .
سنقوم بتبسيط الأمور و نكتفي بإضافة أنماط موجّهة لشاشات التابلت "tablet" و الهواتف الجوالة دفعة واحدة ، يمكنكم لاحقا إضافة أنماط لكل جهاز على حدة .
ما سنفعله :

  • الكتل الأساسية مثل #wrapper, .fixed-header, .contents . لكي تصبح مرنة ، سنعطيها قيمة "auto" بدل القيم السابقة بالبيكسل
  • سنقوم بإخفاء بعض الكتل التي نرى أنه لا أهمية لها على الشاشات الصغيرة . مثل .middle-header,.sidebar
  • قائمة الإبحار الأفقية "navbar" ستصبح عمودية

هذا مثال فقط لستأنسوا به ، يمكنكم فعل ما شئتم شرط أن يصبح موقعكم مرنا
إذاً في صفحة "style.css" قوموا بإضافة شيفرات "media queries" أسفل الشيفرات السابقة .

@media all and (max-width:1024px) {
  #wrapper,.fixed-header,.contents { width: auto; }
  .middle-header,.sidebar {display:none;}
  .header, .footer { min-width: 200px; }
  .navbar  { height: auto;}
  .navbar li { display: block;border-bottom: 1px solid #63513e;}
  .navbar li a { padding: 10px 5px; font-size:16px;font-weight:bold;color:#96816a; } 
  .navbar li,.navbar li a { border-left:0;width:auto;text-align:right; }
  .footer{
    height:auto;
    background: -webkit-linear-gradient(#4b4235, #191712);
    background: -moz-linear-gradient(#4b4235, #191712);
    background: -o-linear-gradient(#4b4235, #191712);
    background: linear-gradient(#4b4235, #191712); 
  }
  .drs-box {width:150px;margin-bottom:4px;}
  article p { text-indent:10px; }
}

@media only screen and (max-width:480px) {
  p.float-right {float:none;}
  p.float-right img{display:block;}
  .right-logo strong {display:none;}
}
لاحظوا أنني استعملت max-width بدل max-device-width حتى تتمكنوا من تجربة النتيجة و لو على حاسوبكم و ذلك بتصغير حجم نافذة المتصفح و ستلاحظون التغييرات التي أحدثناها .
لهذا لا تنسوا إضافة وسم meta الذي يحدد viewport في صفحة "index.html" كما رأينا في هذا الدرس

النتيجة :