المحتوى عن 'media queries'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 2 نتائج

  1. هذا هو الدّرس الأخير في سلسلة تعلّم CSS، ولقد كان اهتمامنا في الدّروس السابقة مُنصبًّا على خصائص CSS وقيمها التي يمكن استخدامها للتأثير في عرض المستند؛ وفي هذا الدّرس سنُعيد النّظر في غايات استخدام CSS وبنية ورقة الأنماط. للتذكير، هذا هو فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. رصف العناصر (Layout) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. الجداول (Tables) في CSS. تعرف على الصناديق (Boxes) في CSS. تنسيق القوائم (Lists) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS (هذا الدرس). أجهزة العرض والمطبوعات تهدف CSS إلى تحديد أسلوب عرض المستندات للمستخدم، ويمكن لعرض المستند أن يكون على عدّة أشكال. مثلاً: أنت تقرأ هذا المستند على جهاز ذي شاشة عرض (في الغالب)، ولكن يمكن أيضًا إسقاطها على شاشة تستهدف جمهورًا كبيرًا، أو يمكن طباعتها؛ ولهذه الوسائط خصائص مختلفة يمكن لـCSS استغلالها للحصول على طريقة عرض للمحتوى تلائم هذا الوسط. مثال يكون للمستند على موقع ويب مجموعة من الروابط الّتي تسمح للانتقال بين صفحات الوقع. يُستخدم المُعرَّف nav-area على العنصر الأب لمساحة التّنقّل في لغة الرّماز (أو يمكن استخدام الوسم <nav> بدل ذلك في الإصدار الخامس من HTML). عندما يُطبع المستند، فإنّ مساحة التّنقل تصبح غير ذات فائدة، ولذا يمكن إزالتها بالقاعدة التّالية: @media print { #nav-area { display: none; } } فيما يلي بعض أنواع الوسائط الشّائعة: الخاصّية تُشير إلى screen شاشة عرض ملوّنة print صفحة مطبوعة projection جهاز إسقاط all كل الوسائط (الخيار المبدئيّ) تفاصيل أكثر هناك طرق أخرى لتحديد نوع الوسط لمجموعة من القواعد. قد تسمح لغة الرماز المُستخدمة في المستند بتعيين نوع الوسط عند ربط ورقة الأنماط بالمستند، فمثلًا في HTML يمكن تحديد الخاصّية media على الوسم link لتحقيق ذلك. ويمكن أيضًا استخدام الأمر ‎@import‎ في CSS الّذي يسمح باستيراد ورقة أنماط من رابطٍ مُعيّن ويسمح أيضًا باشتراط نوع الوسط عند استيراده؛ وهذا يعني أنّه يمكن استخدام ملفات مختلفة لأنواع الوسائط المُختلفة، وهذا مفيد في التنظيم. الطباعة توفّر CSS دعمًا لتنسيق الصّفحات المطبوعة. يمكن استخدام قاعدة تبدأ بـ‎@page ‎ لتعيين مقدار هوامش الصّفحة المطبوعة، كما يمكن تعيين هوامش الجانب الأيمن بصورة مختلفة عن مقابلها الأيسر باستخدام ‎@page:left‎ و‎@page:right ‎. تُستخدم عادة واحدات مناسبة للطّباعة مثل البوصة (in) والنُقطة (pt والّتي تساوي 1 من 72 جزءًا من البوصة)، والسنتيمتر (cm) والميلّيمتر (mm)، كما يمكن استخدام واحدة em الّتي تعتمد على حجم الخطّ، والنّسب المئويّة (%). يمكن التّحكم بموضع فصل المحتوى على صفحتين باستخدام الخواصّ page-break-before و page-break-after و page-break-inside. مثال القاعدة التّالية تعيّن هوامش الصّفحة المطبوعة على كل الجوانب لتساوي بوصة واحدة: @page {margin: 1in;} القاعدة التّالية تُجبر العناوين الرئيسيّة (h1) على أن تكون في رأس الصّفحة دومًا: h1 {page-break-before: always;} تفاصيل أكثر يختلف دعم المتصفّحات لهذه الميّزات، فمتصفّح Firefox يُعيّن قيمًا مبدئيّة للهوامش والترويسات والتّذييلات عند الطّباعة، فلا يمكن توقّع المظهر الّذي ستبدو عليه الصّفحة عند طباعتها بدقّة. واجهة المستخدم لـCSS بعض الخواصّ المُخصّصة للأجهزة الّتي توفّر واجهة استخدام، كشاشات العرض، بحيث تسمح بتغيّر مظهر المستند بصورة ديناميكيّة استجابةً لتفاعل المستخدم مع الواجهة. لا توفّر CSS نوع وسيطٍ خاصّ بالأجهزة ذات واجهات المُستخدم. هناك خمس مُحدِّدات خاصّة: المُحدّد يُحدّد ‏E:hover أي عنصر E تمرّ فوقه الفأرة أو جهاز تأشير آخر ‏E:focus أي عنصر E استحوذ على تركيز لوحة المفاتيح ‏E:active أي عنصر E فعّال (أي يتمّ النقر عليه بالفأرة أو بالإصبع...) ‏E:link أي عنصر E هو رابط لم يزره المستخدم مؤخّرًا. ‏E:visited أي عنصر E هو رابط زاره المُستخدم مؤخّرًا. الخاصّية cursor تسمح بتغيير شكل مؤشّر الفأرة، وفيما يلي بعض الأشكال الشّائعة (مرّر الفأرة فوق كلّ القيمة لترى الشّكل الموافق): المُحدِّد يُحدِّد ‏pointer يُشير إلى رابط ‏wait يُشير إلى أنّ البرنامج لا يستطيع استقبال أي مدخلات لانشغاله ‏progress يُشير إلى أن البرنامج يُنفّذ أمرًا ما، لكنّه ما زال يستطيع استقبال المُدخلات ‏default المبدئيّ (سهم عادةً) الخاصّية outline تُنشئ خطًّا حول العنصر يُستخدم عادةً للإشارة إلى استحواذه على تركيز لوحة المقاتيح، وتكون قيمتها مُشابهة لقيم border، إلّا أنه لا يمكن تعيين قيم مختلفة لكلّ جانب من الخطّ. بعض المزايا الأخرى لواجهات الاستخدام تعتمد على خواص الوسوم (attributes)، فمثلًا يمكن جعل العنصر مُعطّلًا (disabled) أو السّماح بقراءته فقط (read-only) بالخاصّتين disabled و readonly على التّرتيب، ثمّ يمكن استهداف العناصر الّتي تحمل هذه الخواصّ في CSS، كأي خواصّ أخرى، بجعلها ضمن قوسين مُربّعين هكذا: [disabled] و [readonly]. مثال القاعدة التالية تعيّن تنسيق زرّ يتغيرّ استجابة لتفاعل المُستخدم: .green-button { background-color:#cec; color:#black; border:2px outset #cec; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active { border-style: inset; } وهكذا يبدو الزّر في الحالات المختلفة: يُحيط للزّر في الحالة المبدئيّة خطّ داكن عندما يُجعل هذا الزّر هو الزّر المبدئيّ، وخطّ مُنقّط عندما يستحوذ على تركيز لوحة المفاتيح. وقد يكون له تنسيق خاصّ عندما يحطّ فوقه المؤشّر. تدريب: طباعة مستند أنشئ مستند HTML جديدًا، سمّه doc4.html، والصق فيه ما يلي: <!DOCTYPE html> <html> <head> <title>Print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>Section A</h1> <p>This is the first section...</p> <h1>Section B</h1> <p>This is the second section...</p> <div id="print-head"> Heading for paged media </div> <div id="print-foot"> Page: </div> </body> </html> أنشئ ورقة أنماط جديدة، سمّها style4.css والصق فيها ما يلي: /*** Print sample ***/ /* defaults for screen */ #print-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; padding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; } } /* end print only */ اعرض المستند في متصفّحك. يستخدم المستند تنسيق المتصفّح المبدئيّ. اطبع المستند (أو عاينه قبل الطّباعة)، تجعل ورقة الأنماط كلّ قسم في صفحة مستقلّة، وتُضيف ترويسة وتذييلًا لكل صفحة، وتستخدم رقم الصّفحة في التّذييل (فقط إن كان المتصفّح يدعم العدّادات). تمرين انقل التنسيق الخاصّ بالطّباعة إلى ملفّ CSS مُستقلّ، ثمّ راجع صفحة ‎@import‎ لإيجاد كيفيّة استيراد ورقة أنماط للوسائط المطبوعة ضمن ملفّ style4.css. اجعل العناوين زرقاء عندما يحطّ فوقها مؤشّر الفأرة. شاهد الحل ملف منفصل لتنسيق الطباعة قص السّطور بين /* print only */ و/* end print only */ والصقها ضمن ملفّ سمّه style4_print.css، ثمّ أضف السّطر التّالي لبداية الملفّ style4.css: @import url("style4_print.css") print; لون العناوين عندما يحط المؤشر فوقها القاعدة التّالية تُحقّق التأثير المطلوب: h1:hover { color: blue; } ترجمة بتصرّف للدرس Media من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.
  2. هل قمت من قبل باستعمال Media Queries CSS لإنشاء موقع متجاوب؟ إن كان جوابك لا فأعتقد أنه قد حان الوقت لذلك. ففي هذا الدرس سنقوم بتحويل قالب ووردبريس غير متجاوب إلى قالب متجاوب. في مقالات سابقة قمنا بتصميم، تكويد وبناء قالب ووردبريس كامل. التصميم نفسه قابل لأن يتم تحويله إلى تصميم متجاوب، لذلك سوف نستعمل نفس ملفات HTML وCSS لتحويل التصميم الثابت إلى آخر متجاوب. قبل أن نقوم بأي شيء أريدك أن تذهب لمعاينة النسخة الرئيسية من القالب قبل أن يصبح متجاوب وقم بتقليص حجم المتصفح ولاحظ ما يحصل. هل رأيت كيف يختفي جزء من الموقع عندما يصبح عرض المتصفح أقل من عرض الموقع نفسه وكيف يظهر شريط للتمرير (scrollbar) أسفل المتصفح؟ هذا ما يحدث للمواقع عندما لا تكون متجاوبة، فالفكرة من التصميم المتجاوب هو أن يتجاوب الموقع مع جميع أبعاد المتصفحات وأن يظهر الموقع بأفضل شكل مهما كانت أبعاد المتصفح الذي سيعرض الموقع. عند تصفح المواقع غير المتجاوبة على الأجهزة الذكية واللوحية فإن تلك الأجهزة تقوم تلقائيًا بعرض الموقع كاملًا (أي أنّه لن يختفي جزء من الموقع كما رأيت مسبقًا)، ولكنّك ستحتاج إلى التكبير(zooming) حتى ترى محتويات الموقع بشكل جيد وهذا ما لا نريده. ما نريده هو أن يتم عرض المواقع على الأجهزة ذات الأبعاد الصغيرة بشكل مناسب ومن دون الحاجة إلى التكبير(zooming). أول خطوة يجب القيام بها هي أن نقرر الأبعاد التي سوف نصمم لها، فهناك الكثير من الأبعاد والأحجام ولكن تعتبر الأبعاد 320px، 768px و1024px من الأبعاد الشائعة. ومن الجيد أيضًا أن تعلم بأنّ التصاميم التي تعتمد في تجاوبها على عدد معين من الأبعاد تسمى "adaptive"، أما تلك التي نستخدم فيها قيم em والنسب المئوية والتي لا تعتمد على عدد معين من الأبعاد فتسمى "responsive". <link href="mediaqueries.css" rel="stylesheet" />يمكننا الآن البدء باستعمال CSS media queries لجعل الموقع متجاوبًا. يمكنك إضافة الـmedia queries إلى ملف CSS الرئيسي ولكني أفضل أن أضعها بملفٍ مستقل وأن أربطها بملف الـHTML باستخدام الوسم `<link>` (كما هو موضح في الأعلى). <meta name="viewport" content="width=device-width; initial-scale=1.0">نريد أيضًا أن نمنع أجهزة الـiPhone من أن تقوم بعرض الموقع على كامل الشاشة مما يضطرنا إلى التكبير لرؤية المحتوى، لذلك سنقوم باستعمال وسم `<meta>` لإخبار متصفح Safari بأن يكون عرض الموقع هو نفسه عرض الجهاز. @media screen and (max-width: 960px) { ... } العرض الخاص بالتصميم الأصلي هو 960px ولذلك فإنّ أي عرض لمتصفح أقل من هذا العرض سوف يؤدي إلى إخفاء جزء من المحتوى وإلى ظهور أشرطة تمرير أسفل المتصفح (كما رأيت سابقًا في بداية الدرس). وبناءً على ذلك، فسيكون أول media query نقوم بوضعها هي للشاشات التي عرضها أقل من 960px: @media screen and (max-width: 960px) { #container, footer { width: 758px; } #content { margin: 0 20px 0 0; } #sidebar { width: 212px; } #sidebar section { clear: left; } #sidebar #search #searchbar { width: 152px; } } هناك عرض آخر أقل من 960px وهو 768px وهو أحد الأبعاد الشائعة كما ذكرنا آنفًا (تجد هذا العرض شائعًا في الوضع الطولي(portrait) للأجهزة اللوحية). لقد قلنا أننا سنقوم بتحويل قالب ووردبريس تم تصميمه سابقًا، وبما أنّ القالب قد تمّ تصميمه بناءً على grid ما وحتى نتماشى مع تقسيم الصفحة(layout) فسوف نقوم بإزالة عمود(column) ليبقى لدينا 758px. يمكن عندها للتقسيم الأصلي للصفحة أن يتقلص وذلك عن طريق تقليل قيمة الـmargin الخاصة بـdiv المحتوى (#content) وتقليل العرض الكُلّي للقائمة الجانبية(sidebar). @media screen and (max-width: 758px) { #container, footer, #sidebar { width: 524px; } header nav { clear: left; float: none; overflow: hidden; } header nav li { width: auto; margin: 0 25px 0 0; } header { margin: 0 0 44px 0; } header h1 { margin: 0 0 24px 0; } #sidebar section { float: left; clear: none; } #sidebar #social { margin: 0 20px 47px 0; } #sidebar #search #searchbar { width: 464px; } } يمكننا الآن استخدام قيمة 758px للـmedia query التالية، بحيث يتم الإنتقال إلى التقسيم التالي عندما يكون حجم المتصفح أقل من هذه القيمة، وبما أنّ عرض القائمة الجانبية عند هذه النقطة سيكون ضيّقًا ولن يكون بالإمكان جعله أضيق من ذلك، فسوف نجعله ينساب أسفل المحتوى الرئيسي، وهذا يعني بأنَّ عرض القائمة الجانبية يجب أن يزيد حتى يملأ عرض الصفحة إلى أقصى درجة ممكنة، وسوف نجعل العناصر الموجودة في هذه القائمة تنساب إلى جانب بعضها(floated) لتملأ المساحة المتبقية. أصبحت الترويسة(header) ضيّقة أيضًا ولن تستطيع استيعاب وجود الشّعار وعناصر القائمة الرئيسية إلى جانب بعضها البعض، لذلك سوف نجعل عناصر القائمة الرئيسية تظهر على سطر جديد لوحدها. @media screen and (max-width: 524px) { #container, footer, #sidebar, #content { width: 292px; } #content article h2 { font-size: 24px; } #content .postinfo li { margin: 0 10px 0 0; } #sidebar #social { margin: 0; } #sidebar #search #searchbar { width: 230px; } } بقي الآن آخر media query وهي التي سوف تكون مخصصة للشاشات والأبعاد الصغيرة جدًا (كالأجهزة الذكية على سبيل المثال(. سيكون عرض هذه التقسيمة أصغر من العرض الأصلي للمحتوى، وبذلك سوف نحتاج لتقليص العرض حتى يتناسب مع تلك الأبعاد. لقد أدّى العرض الصغير جدًا إلى إنزال الروابط الخاصة بالتدوينة على سطر جديد، ولكن يمكننا إصلاح الأمر وذلك بتقليل المسافة بينها (تقليل قيمة الـmargin). وبهذا نكون قد حصلنا على تصميم يمكنه التجاوب مع العديد من الأحجام والأبعاد الشائعة وسوف يساعد أيضًا على زيادة قابلية القراءة للمحتوى بدل أن يضطر الزائر إلى التمرير(scroll) أو التكبير حتى يستطيع قراءة المحتوى. يمكنك الإطلاع على الموقع المتجاوب من هنا. ترجمة -وبتصرّف- للمقال Create a Responsive Web Design with Media Queries لصاحبه Iggy.