10/17/2018

settings_overscan print announcement
إذا كنت قد أنشأت ورقة أنماط CSS لموقع ويب ، فقطعا ستكون على دراية بفكرة إنشاء ورقة أنماط معينة ليتم تشغيلها في ظل ظروف معينة مثل خاصية استعلامات الوسائط ومن المستحيل حصرها نظرا للإمكانيات التي يجلبها CSS3  .. لذلك سنبدأ بالمستوى الإبتدائي في هذا البرنامج التعليمي لنعرف أسس تقنية تستخدم جزءًا من CSS3 غير مدعومة بواسطة Internet Explorer 8 وهي ببساطة  القاعدة media لجعل مدونتك متجاوبة مع شاشات العرض في الأجهزة اللوحية و الهواتف الذكية مثل ipad / iphon / galaxy..الخ أو لتنسيق صفحة الموضوع  لتصبح جاهزة للطباعة print .
 للعلم أنه تم تمكين هذه الوظيفة في CSS2  لتسمح لك  بتحديد نوع الوسائط المراد إستهدافها ، بحيث يمكنك استهداف الطباعة والمحمول وما إلى ذلك.





التعريف والاستخدام

 تُستخدم @media في استعلامات الوسائط لتطبيق أنماط مختلفة لأنواع / أجهزة وسائط مختلفة.
يمكن استخدام استعلامات الوسائط للتحقق من العديد من الأشياء ، مثل:
  1. إستخدام استعلامات الوسائط
  2. عرض وطول إطار العرض
  3. العرض والطول من الجهاز
  4. الاتجاه (هل الجهاز اللوحي / الهاتف في الوضع الأفقي أو العمودي؟)
  5. القرار

يعد استخدام استعلامات الوسائط تقنية شائعة لتقديم ورقة أنماط مخصصة (تصميم ويب سريع الاستجابة) إلى أجهزة سطح المكتب وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف المحمولة.
يمكنك أيضًا استخدام استعلامات الوسائط لتحديد أنماط معينة فقط للمستندات المطبوعة أو لقارئات الشاشة (mediatype: print، screen، or speech).
بالإضافة إلى أنواع الوسائط ، هناك أيضًا ميزات توفر تفاصيل أكثر تحديدًا لاستعلامات الوسائط ، وذلك عن طريق السماح باختبار ميزة معينة على سبيل المثال ، يمكنك تطبيق الأنماط على الشاشات فقط التي تكون أكبر أو أصغر من عرض معين.

دعم المتصفح

تحدد الأرقام في الجدول أول إصدار متصفح يدعم القاعدة media بالكامل.

@media

  • 9+IE
  • 21+Chrome
  • 3.5+Firefox
  • 4.0+Safari
  • 9+Opera
  • all Browser
  • 2.2+android
  • all touch

البنية الأساسية

الكود التالي مجرد مثال للتوضيح لايصلح فعليا كنمط معتمد.

 @media not|only mediatype and (mediafeature and|or|not mediafeature) {
    /* هنا مكان وضع الأنماط */
} 


شرح الخواص و الكلمات الشرطية
الخاصية mediatype المحددة بهذا اللون تعني نوع الوسائط يوضع مكانها مثلا screen لإستهداف الجوال
الخاصية mediafeature المحددة بهذا اللون تعني ميزة الوسائط يوضع مكانها مثلا max-width لإستهداف أقصى عرض لنافذة الجوال
الشرط not المحدد بهذا اللون يمنع المتصفحات من تطبيق الأنماط المحددة..نادرا مانستخدمه
الشرط only المحدد بهذا اللون يمنع المتصفحات القديمة التي لا تدعم استعلامات الوسائط بميزات الوسائط من تطبيق الأنماط المحددة. ليس له أي تأثير على المتصفحات الحديثة.
الشرط and المحدد بهذا اللون يجمع ميزة وسائط بنوع وسائط أو ميزات وسائط أخرى..مستخدم بكثرة.
الشرط or المحدد بهذا اللون بديل بين ميزة الوسائط وأخرى..نادر الإستخدام لكنه مفيد في تجنب التكرار

تهيئة قالب المدونة للتجاوب مع شاشات العرض المختلفة

الخطوة الأولى - في تهيئة القالب

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - في تهيئة القالب

  • من نفس صفحة المظهر >> إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب
  • قم بالبحث عن هذا الوسم <head> أسفله أي بعده قم بوضع علامة  كود.html التالي..

  • 
         <!-- device Mobile -->
        <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>  
    

    توضيح مهم جدا
    أولا عليك أن تعرف معنى الأكواد الخاصة بتخصيص مظهر الجوال وهي في الغالب علامتين وهما كاتالي..

    العلامة الأولة

    نفس العلامة التي قدمناها سابقا و التي نحتاجها لجعل قالب مدونتنا متجاوب فهي تسمح لنا بتقديم ورقة أنماط مخصصة أي السماح للمتصفح بقراءة الأنماط الخاصة بالتجاوب في أطار مخصص وهنا نحتاج إلى أكوادcss لكن لابد من تضمين العلامة التالية في رأس القالب كما شرحنا سابقا
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

    سيظهر قالب مدونة بلوجر كود بإستعمال هذه العلامة وبعض الأنماط المخصصة بالشكل التالي

    العلامة الثانية

    هي تطبيق العكس في حال أننا لانريد جعل المدونة متجاوبة أي عرض الموقع بالشكل الكامل على الأجهزة الذكية وكأنك تتصفح المدونة من سطح المكتب وهنا لانحتاج إلى أكواد css فقط نقوم بوضع السطر التالي..
    <meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>

    سيظهر قالب مدونة بلوجر كود فقط بإستعمال هذه العلامة وبدون الأنماط المخصصة بالشكل التالي


    الآن ستجد أسفل الوسم <head> الذي نبحث عنه مجموعة من الأكواد الخاصة بالعلامات الوصفية وإحتمال كبير أن تجد الكود الذي سنضيفه موجود مسبقا أقصد العلامة الأولة .. لذلك لا تقم بإعادة وضعه من جديد في حال وجوده.
    أو إحتمال أن تجد العلامة الثانية لذلك عليك إستبداله بـ العلامة الأولة في حال أردت جعل قالب مدونتك متجاوب.

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثالثة - في تهيئة القالب

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع التوليفة كود.css التالية..

  • 
    /* Page Responsive */
    @media screen and (max-width:1600px) {}/*kindle fire HDX*/
    @media screen and (max-width:1440px) {}/*laptop with HiDPI screen*/
    @media screen and (max-width:1280px) {}/*laptop with MDPI screen + laptop with TOUCH*/
    @media screen and (max-width:1024px) {}/*ipad pro*/
    @media screen and (max-width:992px) {}
    @media screen and (max-width:800px) {}/*nexus10 */
    @media screen and (max-width:775px) {}
    @media screen and (max-width:768px) {}/*ipad + ipad mini*/
    @media screen and (max-width:640px) {}/*Microsoft lumia550*/
    @media screen and (max-width:600px) {}/*blackberry playbook + nexus7*/
    @media screen and (max-width:480px) {}/*st*/
    @media screen and (max-width:414px) {}/*iphon 6plus*/
    @media screen and (max-width:412px) {}/*nexus6+ nexus6p + nexus5x*/
    @media screen and (max-width:384px) {}/*nexus 4 + LG optimus L70*/
    @media screen and (max-width:375px) {}/*iphon 6*/
    @media screen and (max-width:360px) {}/*galaxy s5/s3/note2/note3 + nok n9 + nexus5 + Microsoft lumia950 + blackberry z30*/
    @media screen and (max-width:320px) {}/* iphon 4/5 + nok lumia 520 */
    

    توضيح مهم جدا
    توليفة استعلامات الوسائط التي أضفناها شبه كاملة فقد قمنا بجمعها تبعا لشاشات العرض الموجودة حاليا من أصغرها وصولا لشاشة سطح المكتب
    كما أنها جاهزة للإستخدام المباشر فقط ماعلينا سوى وضع الأكواد الخاصة بنا داخل عارضة {} الوسيط التي حددناها لكم في جميع الأكواد..سنشرح ذلك في جزء التطبيق العملي.
    ستلاحظ في أخر كل سطر وصف يحوي إسم الأجهزة التي تعرض في إطار معين وعلى فكرة يمكنك إزالة الوصف إذا رأيت أنه غير مهم لك .. المهم عندك مثلا أخر سطر بهذا الشكل الاتي...
    
    @media screen and (max-width:320px) {هنا مكان وضع الأنماط}/* iphon 4/5 + nok lumia 520 */
    
    1- ميزة الوسيط تقول max-width:320px أي إستهداف الأجهزة التي لها أقصى عرض 320px

    2- الوصف يقول /* iphon 4/5 + nok lumia 520 */ أي أن هناك جهازين iphon 4/5 و nokia lumia 520 يعرضان في إطار 320px

    3- فقط للمعلومة ..نستطيع كذلك تغيير ميزة الوسيط من أقصى عرض max-width إلى أدق عرض min-width وذلك لعمل العكس وهنا سيتغير الترتيب فبدل النزول للأسفل سيحدث العكس أي النسبة الصغيرة ستكون فوق النسبة الكبيرة مثلا هكذا..
    
    /* Page Responsive */
    @media screen and (min-width:768px) {}/*ipad + ipad mini*/
    @media screen and (min-width:1024px) {}/*ipad pro*/
    

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

أجهزة المحكاة

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


  • في رأس الصفحة إضغط على Responsive القائمة المنسدلة >> ثم إختر آخر إعداد Edit... بالشكل الآتي...


  • ستظهر لك نافذة في وسط مربع الفحص ستقوم بتحديد جميع العلامات لكي تظهر معنا الأجهزة في القائمة Responsive بالشكل الآتي...


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

التطبيق العملي

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى - في التطبيق العملي

    للبدء ، علينا فهم لتقسيمات القالب الرئيسية يمكننا إلقاء نظرة على مثال بسيط للغاية. التخطيط أدناه هو نموذج لشبه قالب بتخطيط إفتراضي ..لاحظ عندنا التالي..
    #header-wrapper <-- 100% -->
    #nav <-- 100% -->
    #content-wrapper <-- 100% -->
    #main <-- 350px -->
    #sidebar-wrapper <-- 250px -->
    شرح للنموذج
    القسم المحدد بهذا اللون هو رأس القالب <header> والمعرف الخاص به مثلا id="header-wrapper"
    القسم المحدد بهذا اللون هو حقل القائمة الرئيسية <nav> والمعرف الخاص به مثلا id="nav"
    القسم المحدد بهذا اللون هو حقل المحتوى المجمع <section> والمعرف الخاص به مثلا id="content-wrapper"
    القسم المحدد بهذا اللون هو حقل التدوينات <main> والمعرف الخاص به مثلا id="main"
    القسم المحدد بهذا اللون هو الشريط الجانبي <aside> والمعرف الخاص به مثلا id="sidebar-wrapper"
    القسم المحدد بهذا اللون هو تذييل القالب <footer> والمعرف الخاص به مثلا id="footer"


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية- في التطبيق العملي

    التخطيط الذي مر معنا هو مايسمى بالحاويات الرئيسية -الترويسة- علينا دائما ضبطها في البداية ثم إنتقل للفروع مثل الأداوات والأزرار والعناوين وما إلى ذلك .. الطرق طبعا تختلف ولكل مصمم طريقته...منها الإحترافي ومنها الخاطأ ونحن مع بعض سنأخذ الوسط..تابع معي
    هل لاحظت هذه التعليقات في جميع أقسام النموذج مثلا <-- 350px --> أسفل المتغير #main هذا نقصد به عرض الحقل ..راجع ذلك بسرعة.
    عليك دائما التركيز على عرض الحاويات والأدوات إذا وجدتها بالـبكسل مثلا 350px فهي تحتاج إلى ضبطها مع الأجهزة الذكية الصغيرة أما إذا وجدتها بالنسبة المئوية 100% فأنت لاتحتاج سوى ضبط نوع الدعم support type مثل اللون color والخط font والحشو padding ...إلخ.
  • سأبدأ مع أقصى عرض للشاشة الصغيرة وهو max-width:1024px وهذا لإستهداف أكبر إطار نزولا إلى أصغر شاشة دون اللجوء لإعادة تكرار الأكواد وذلك من خلال علامة الوسائط التالية...

  • 
    @media screen and (max-width:1024px) {}/*ipad pro*/
    

    تذكر جيدا ..دائما نضع الأنماط الخاصة بنا داخل {}العارضة الرئيسية..ليكون العمل كالآتي...
    
    @media screen and (max-width:1024px) {
    
    
    #header-wrapper {
        height: 100px;
    }
    
    #nav {
    padding: 5px;
    }
    
    #content-wrapper {
        padding: 5px;
    }
    
    #main {
        width: 100%;
        float: none;
        margin: 10px 0;
    }
    
    #sidebar-wrapper {
        width: 100%;
        float: none;
        margin: 10px 0;
    }
    
    #footer {
        padding: 5px;
    }
    
    }/*ipad pro*/
    

    شرح الأنماط
    النمط المحدد بهذا اللون خاص برأس القالب <header> لاداعي لضبط العرض لأنه متجاوب مادام بعرض 100% قمنا فقط بتقليل نسبة الطول إلى height: 100px; وذلك كي نقلل من مسافة التمرير للأسفل يمكننا وضع المزيد من الدعامات لتخصيصه بالشكل أو اللون الذي نريده.
    النمط المحدد بهذا اللون خاص بحقل القائمة الرئيسية <nav> يحتوي على عرض متجاوب 100% إلا أنه غير مستقر بمعنى يمكن جعله ثابت في رأس القالب أو منزلق أضف أن الأقسام والفروع بداخله تحتاج لتخصيص تبعا لموضع الحاوية الرئيسية..ما قمنا به فقط تقليل الحشو padding: 5px; حتى نحصل على المزيد من السعة للمحتوايات.
    النمط المحدد بهذا اللون خاص بحقل المحتوى المجمع <section> نفس الفكرة كونه يحتوي على عرض متجاوب 100% ولاينبغي المساس بالطول كونه حاضنة لمحتويات غير مستقرة قمنا فقط بتقليل الحشو padding: 5px; حتى نحصل على المزيد من السعة للمحتوايات.
    النمط المحدد بهذا اللون خاص بحقل التدوينات <main> وهنا يحتاج منا تغيير نسبة العرض 350px إلى نسبة متجاوبة تلقائية أي 100% وهذا ماقمنا به لكي تأخذ الحاوية كامل عرض الشاشة كما أننا منعنا إتجاه الموضع وقمنا بتغيير نسبة الحافة margin: 10px 0; للحصول على بعض الضغط.
    النمط المحدد بهذا اللون خاص بالشريط الجانبي <aside> طبقنا فيه نفس العمل الذي قمنا به على حقل التدوينات <main> لاحظ ذلك وركز كيف أن الأكواد هي نفسها وطبعا هذا غير مستحب.
    النمط المحدد بهذا اللون خاص بتذييل القالب <footer> كذلك طبقنا فيه نفس العمل الذي قمنا به على حقل المحتوى المجمع <section> .
    قبل أن أريك النموذج كيف يبدو دعنا نتوقف عند خطأ تكرار الأكواد..صحيح أن الأمور تبدو سليمة وسيعمل بدون مشاكل لكن التكرار للأكواد عيب لايمكن الإستهانة به والغرض هنا تقليل حجم الكود النهائي والحصول على سرعة في العرض..لذلك عليك تجميع الأكواد التي تحمل نفس الدعامات في حاوية واحدة ..ليصبح بالشكل الآتي

    
    @media screen and (max-width:1024px) {
    #header-wrapper {
        height: 100px;
    }
    #nav, #content-wrapper, #footer {
        padding: 5px;
    }
    #main, #sidebar-wrapper  {
        width: 100%;
        float: none;
        margin: 10px 0;
    }
    }/*ipad pro*/
    

    لاحظ أن ما قمنا به بسيط جدا..حددنا النمط المتشابه حذفنا الثاني وأخذنا فقط المعرف وأشركناهم في حاوية واحدة ولكن قمنا بالفصل بينهما بفاصلة , وهذا مهم وإلا لن تعمل الأكواد.
    كما قلت لكم هناك عدة طرق لتجنب التكرار وهذه الطريقة هي الوسط والمستحسن العمل بها أما الطريقة الإحترافية تعتمد على المعرف الثابت تسمى بنقاط التوقف سنعرفها في تدوينة مستقلة...دعنا الآن نرجع لموضوعنا لنرى كيف ستبدو التقسيمات إذا قمنا بمعاينتها على أداة المحكاة..
    #header-wrapper <-- 100% -->
    #nav <-- 100% -->
    #content-wrapper <-- 100% -->
    #main <-- 100% -->
    #sidebar-wrapper <-- 100% -->
    الآن يمكنك بنفس الفكرة البدأ في تطبيق ماشرحناها على قالب تجريبي وحاول أن تغير في كل مرة إستعلامات الوسائط ومراجعة أجهزة المحاكاة إلى أن تفهمها جيدا وتصبح مرن في عملية التنقل بين الأجهزة أقصد شاشات العرض.
    وذلك حتى تستطيع فهم مثل هذه الأنماط عندما تصادفها في القوالب والإضافات كما أننا في دروس قادمة مكملة لهذا البرنامج سنطبق أمثلة مختلفة لمستوى متقدم من هذا لإنشاء إصدار الجوال الخاص بموقعك.


add_commentإرسال تعليق

  1. ممكن اخى لو سمحت طريقة عمل هذه القائمة :laughing:
    http://www3.0zz0.com/2018/10/18/16/216154957.png

    ردحذف
    الردود
    1. مرحبا أخي - القائمة المطلوبة هي نفس فكرة قوائم Dropdowns الخاصة بمكتبة bootstrap للأسف لا أستطيع شرحها هنا فهي تحتاج لتنسيق لكنك تستطيع مراجعة القسم من خلال هذا الرابط إضغط هنا

      أو يمكنك البحث في المتصفح عن كلمة js Dropdowns وستجد المئات من النماذج الرائعة والسهلة التركيب خصوصا على موقع https://codepen.io

      حذف