نحو جدید CSS Media Query Range

ما تکیه می کنیم پرس و جوهای رسانه 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 در آنجا؟ این یک عملگر است که به ما اجازه می دهد عبارات را ترکیب کنیم. در آن مثال، شرطی را ترکیب کردیم که نوع رسانه a است screen و این است min-width ویژگی تنظیم شده است 30em (یا بالاتر). ما می توانیم همین کار را برای هدف قرار دادن طیف وسیعی از اندازه های viewport انجام دهیم:

/* 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 این است که ما اپراتورهای جدیدی داریم که مقادیر را به جای ترکیب آنها مقایسه می کنند:

• < ارزیابی می کند که آیا یک مقدار وجود دارد یا خیر کمتر از یک مقدار دیگر
• > ارزیابی می کند که آیا یک مقدار وجود دارد یا خیر بزرگتر از یک مقدار دیگر
• = ارزیابی می کند که آیا یک مقدار وجود دارد یا خیر برابر به یک مقدار دیگر
• <= ارزیابی می کند که آیا یک مقدار وجود دارد یا خیر کمتر یا مساوی to مقدار دیگری
• >= ارزیابی می کند که آیا یک مقدار وجود دارد یا خیر بزرگتر یا مساوی to مقدار دیگری

در اینجا این است که چگونه ممکن است یک درخواست رسانه ای بنویسیم که اگر مرورگر باشد، سبک ها را اعمال می کند 600px گسترده یا بزرگتر:

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

در اینجا نحوه نوشتن یک چیز با استفاده از یک عملگر مقایسه به نظر می رسد:

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

هدف قرار دادن طیف وسیعی از عرض درگاه دید

اغلب هنگام نوشتن پرسش‌های رسانه‌ای CSS، چیزی را ایجاد می‌کنیم که a نامیده می‌شود نقطه شکست - شرایطی که در آن طرح "شکست" و مجموعه ای از سبک ها برای رفع آن اعمال می شود. یک طرح می تواند چندین نقطه شکست داشته باشد! و آنها معمولاً بر اساس این هستند که دیدگاه بین دو عرض باشد: جایی که نقطه شکست شروع می شود و نقطه شکست کجا به پایان می رسد.

در اینجا نحوه انجام این کار با استفاده از 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. هر چند داریم نزدیک می شویم! سافاری تنها نگهدارنده اصلی در این مرحله است، اما یک بلیط باز برای آن وجود دارد که می توانید دنبال کنید.

بیایید به یک مثال نگاه کنیم

در اینجا طرحی برای نمایشگرهای بزرگتر، مانند دسکتاپ، مناسب است:

این چیدمان دارای سبک های پایه است که در همه نقاط شکست مشترک است. اما با باریک شدن صفحه نمایش، شروع به اعمال سبک هایی می کنیم که به صورت مشروط در نقاط شکست مختلف کوچکتر اعمال می شوند که برای تبلت ها تا تلفن های همراه ایده آل هستند:

برای اینکه ببینید چه اتفاقی در حال رخ دادن است، در اینجا نحوه واکنش طرح بین دو نقطه شکست کوچکتر را مشاهده می کنید. فهرست ناوبری پنهان نیز نمایش داده می شود 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. اما در مورد آن چیدمان دسکتاپ چطور... چگونه به آنجا برسیم؟

تا جایی که چیدمان پیش می رود:

• La main عنصر به یک شبکه 12 ستونی تبدیل می شود.
• یک دکمه روی تصویر نمایش داده می شود.
• اندازه .title فونت عنصر تصویر را افزایش می دهد و روی آن همپوشانی می کند.

با فرض اینکه ما تکالیف خود را انجام داده ایم و دقیقاً تعیین کرده ایم که این تغییرات باید در کجا انجام شوند، می توانیم زمانی که viewport با آن مطابقت دارد، آن سبک ها را اعمال کنیم. 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 */ }

پسگفتار

وای، ما زمینه های زیادی را در مورد نحو جدید برای هدف قرار دادن محدوده عرض دید در CSS Media Queries پوشش دادیم. اکنون که مشخصات Media Queries Level 4 این نحو را معرفی کرده است و در مرورگرهای فایرفاکس و کرومیوم به کار گرفته شده است، به امکان استفاده از اپراتورهای مقایسه جدید و ترکیب آنها با سایر ویژگی های رسانه دامنه نزدیک شده ایم. width، مانند height و aspect-ratio

و این تنها یکی از ویژگی های جدیدتری است که مشخصات Level 4 در کنار a مجموعه ای از پرس و جوهایی که می توانیم بر اساس ترجیحات کاربر انجام دهیم. به همین جا ختم نمی شود! بررسی کنید راهنمای کامل پرس و جوهای رسانه CSS برای نگاهی گذرا به آنچه ممکن است در Media Queries سطح 5 گنجانده شود.