بناء جملة نطاق استعلام وسائط CSS الجديد

نحن نعتمد على استعلامات وسائط CSS لتحديد العناصر وتصميمها بناءً على شرط مستهدف. يمكن أن يكون هذا الشرط جميع أنواع الأشياء ولكنه يقع عادةً في معسكرين: (1) نوع الوسائط المستخدمة ، و (2) ميزة معينة للمتصفح أو الجهاز أو حتى بيئة المستخدم.

لذلك ، لنفترض أننا نريد تطبيق أنماط CSS معينة على مستند مطبوع:

@media print {
  .element {
    /* Style away! */
  }
}

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

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

تلاحظ and هناك؟ هذا عامل يسمح لنا بدمج العبارات. في هذا المثال ، قمنا بدمج شرط أن نوع الوسائط هو screen وهذا هو min-width تم تعيين الميزة على 30em (أو أعلى). يمكننا فعل الشيء نفسه لاستهداف مجموعة من أحجام منفذ العرض:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

الآن تنطبق هذه الأنماط على نطاق واضح من عروض منفذ العرض بدلاً من عرض واحد!

لكن مواصفات Media Queries Level 4 قد أدخلت بنية جديدة لاستهداف مجموعة من عروض منفذ العرض باستخدام عوامل المقارنة الرياضية الشائعة - أشياء مثل <, >و = - يكون ذلك منطقيًا أكثر من الناحية التركيبية أثناء كتابة كود أقل.

دعونا نتعمق في كيفية عمل ذلك.

عوامل المقارنة الجديدة

هذا المثال الأخير هو توضيح جيد لكيفية قيامنا بنوع من النطاقات "المزيفة" من خلال الجمع بين الشروط باستخدام and المشغل أو العامل. التغيير الكبير في مواصفات Media Queries Level 4 هو أن لدينا عوامل تشغيل جديدة تقارن القيم بدلاً من دمجها:

• < بتقييم ما إذا كانت القيمة أقل من قيمة أخرى
• > بتقييم ما إذا كانت القيمة أكبر من قيمة أخرى
• = بتقييم ما إذا كانت القيمة متساو لقيمة أخرى
• <= بتقييم ما إذا كانت القيمة أقل من أو يساوي تيس قيمة أخرى
• >= بتقييم ما إذا كانت القيمة أكبر من أو يساوي tس قيمة أخرى

إليك كيفية كتابة استعلام وسائط يطبق الأنماط إذا كان المتصفح كذلك 600px واسع أو أكبر:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

إليك كيفية كتابة نفس الشيء باستخدام عامل المقارنة:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

استهداف مجموعة من عروض منفذ العرض

غالبًا عندما نكتب CSS Media Queries ، فإننا ننشئ ما يسمى بامتداد نقطة توقف - شرط يتم فيه تطبيق "فواصل" التصميم ومجموعة من الأنماط لإصلاحه. يمكن أن يحتوي التصميم على مجموعة من نقاط التوقف! وهي تستند عادةً إلى أن يكون إطار العرض بين عرضين: حيث تبدأ نقطة التوقف وأين تنتهي نقطة التوقف.

إليك كيف فعلنا ذلك باستخدام ملف and عامل التشغيل لدمج قيمتي نقاط التوقف:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

تبدأ في الحصول على فكرة جيدة عن مدى أقصر وأسهل كتابة استعلام وسائط عندما نتخلى عن Boolean and عامل التشغيل لصالح بناء جملة مقارنة النطاق الجديد:

@media (400px <= width <= 1000px) {
  /* etc. */
}

أسهل بكثير ، أليس كذلك؟ ومن الواضح تمامًا ما يفعله هذا الاستعلام عن الوسائط.

دعم المتصفح

لا يزال بناء جملة استعلام الوسائط المحسن هذا في أيامه الأولى وقت كتابة هذا التقرير ولم يتم دعمه على نطاق واسع في الوقت الحالي مثل النهج الذي يجمع min-width و max-width. نحن نقترب ، رغم ذلك! Safari هو المعقل الرئيسي الوحيد في هذه المرحلة ، لكن هناك تذكرة مفتوحة لذلك التي يمكنك متابعتها.

لنلقي نظرة على مثال

فيما يلي تصميم مناسب بشكل جيد للشاشات الأكبر حجمًا ، مثل سطح المكتب:

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

لمعرفة ما يحدث ، إليك كيفية استجابة التخطيط بين نقطتي الفصل الأصغر. يتم عرض قائمة التنقل المخفية كذلك title في ال main يزداد في font-size.

يتم تشغيل هذا التغيير عندما تنتقل تغييرات منفذ العرض من مطابقة شروط إحدى الوسائط إلى أخرى:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

لقد قمنا بدمج بعض المفاهيم التي غطيناها! نحن نستهدف الأجهزة ذات screen نوع الوسائط ، وتقييم ما إذا كان عرض منفذ العرض أكبر من أو يساوي قيمة معينة باستخدام بنية نطاق ميزة الوسائط الجديدة ، والجمع بين الشرطين مع and المشغل.

حسنًا ، هذا رائع للأجهزة المحمولة أدناه 768px وللأجهزة الأخرى التي تساوي أو أكبر من 768px. ولكن ماذا عن تصميم سطح المكتب هذا ... كيف نصل إلى هناك؟

بقدر ما يذهب التخطيط:

• • main يصبح العنصر عبارة عن شبكة مكونة من 12 عمودًا.
• يتم عرض زر على الصورة.
• حجم .title يزيد خط العنصر ويتداخل مع الصورة.

بافتراض أننا أنجزنا واجباتنا المنزلية وحددنا بالضبط المكان الذي يجب أن تحدث فيه هذه التغييرات ، يمكننا تطبيق هذه الأنماط عندما يتطابق إطار العرض مع width شرط لنقطة التوقف تلك. سنقول أن نقطة التوقف عند 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

العب بها:

لماذا يسهل فهم بناء الجملة الجديد

المحصلة النهائية: من الأسهل التمييز بين عامل المقارنة (على سبيل المثال width >= 320px) من معرفة الفرق بين min-width و max-width يستخدم ال and المشغل أو العامل. عن طريق إزالة الفروق الدقيقة بين min- و max-، لدينا واحدة واحدة width المعلمة للعمل معها ويخبرنا المشغلون بالباقي.

بالإضافة إلى الاختلافات المرئية لتلك التركيبات ، فهم يقومون أيضًا بأشياء مختلفة قليلاً. استخدام min- و max- يعادل استخدام عوامل المقارنة الرياضية:

• max-width يعادل <= عامل التشغيل (على سبيل المثال (max-width: 320px) بالضبط مثل (width <= 320px)).
• min-width يعادل >= عامل التشغيل (على سبيل المثال (min-width: 320px) بالضبط مثل (width >= 320px)).

لاحظ أن أيًا منهما ليس مكافئًا لملف > or < العاملين.

دعنا نسحب مثالاً مباشرةً من مواصفات Media Queries Level 4 حيث نحدد أنماطًا مختلفة بناءً على نقطة توقف عند 320px في عرض منفذ العرض باستخدام min-width و max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

يتطابق كلا استعلام الوسائط مع شرط عندما يكون عرض منفذ العرض مساويًا 320px. هذا ليس بالضبط ما نريده. نحن نريد إما أحد هذه الشروط بدلاً من كليهما في نفس الوقت. لتجنب هذه التغييرات الضمنية ، قد نضيف بكسلًا إلى الاستعلام بناءً على min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

بينما يضمن ذلك عدم تطبيق مجموعتي الأنماط في وقت واحد عندما يكون عرض إطار العرض 320px، أي عرض منفذ عرض يقع بينهما 320px و 321px سيؤدي إلى منطقة صغيرة جدًا حيث لا يتم تطبيق أي من الأنماط في أي من الاستعلامين - حالة غريبة "وميض محتوى غير منظم".

أحد الحلول هو زيادة قيمة مقياس المقارنة الثاني (الأرقام بعد الفاصلة العشرية) إلى 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

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

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

اختتام

Phew ، لقد غطينا الكثير من التفاصيل حول البنية الجديدة لاستهداف نطاقات عرض منفذ العرض في استعلامات وسائط CSS. الآن بعد أن أدخلت مواصفات Media Queries Level 4 البنية وتم اعتمادها في متصفحي Firefox و Chromium ، اقتربنا من استخدام عوامل المقارنة الجديدة ودمجها مع ميزات وسائط النطاق الأخرى إلى جانب width، مثل height و aspect-ratio

وهذه مجرد واحدة من أحدث الميزات التي قدمتها مواصفات المستوى 4 ، إلى جانب أ مجموعة من الاستفسارات التي يمكننا إجراؤها بناءً على تفضيلات المستخدم. لا ينتهي الأمر عند هذا الحد! تفحص ال الدليل الكامل لاستعلامات وسائط CSS لإلقاء نظرة خاطفة على ما يمكن تضمينه في استعلامات الوسائط المستوى 5.