در حالی که polyfill یک به روز رسانی بزرگ دریافت می کند، کوئری های کانتینر در مرورگرهای پایدار شروع به فرود می کنند

Una Kravets

Gerald Monaco

سوالات کانتینر اینجا هستند!

اخبار هیجان‌انگیز- یکی از ویژگی‌های بسیار درخواستی توسعه‌دهنده در مرورگرهای وب شروع شده است! از Chromium 105 و Safari 16 ، اکنون می‌توانید پرس‌وجوهای کانتینر مبتنی بر اندازه ایجاد کنید و از مقادیر واحد جستجوی ظرف در این مرورگرها استفاده کنید. برای آسان‌تر کردن استفاده از کوئری‌های کانتینر مبتنی بر اندازه و واحدهای cq ، تیم Aurora در Chrome به سختی تلاش کرده است تا Container Query Polyfill را برای پشتیبانی از مرورگرها و موارد استفاده بیشتر به‌روزرسانی کند تا بتوانید امروز با استفاده از این ویژگی قدرتمند احساس اطمینان کنید.

پرس و جوهای کانتینری چیست؟

پرس‌وجوهای کانتینر یک ویژگی CSS هستند که به شما امکان می‌دهد منطق استایلی بنویسید که ویژگی‌های یک عنصر والد را برای استایل دادن به فرزندانش هدف قرار می‌دهد. شما می توانید با پرس و جو برای اندازه والدین، طراحی واکنشگرا مبتنی بر کامپوننت ایجاد کنید. این اطلاعات بسیار دقیق‌تر و مفیدتر از مواردی مانند درخواست‌های رسانه‌ای است که فقط اطلاعات اندازه در مورد Viewport را ارائه می‌کنند.

با کوئری های کانتینر، می توانید اجزای قابل استفاده مجدد بنویسید که می توانند بر اساس محل زندگی آنها در صفحه متفاوت ظاهر شوند. این باعث می‌شود که در صفحات و قالب‌ها بسیار انعطاف‌پذیرتر و پاسخگوتر باشند.

استفاده از پرس و جوهای کانتینر

بگویید که مقداری HTML دارید:

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

برای استفاده از پرس و جوی کانتینر، ابتدا باید روی عنصر والد که می‌خواهید ردیابی کنید، Containment را تنظیم کنید. این کار را با تنظیم خاصیت container-type یا استفاده از مخفف container برای تنظیم همزمان نوع و نام کانتینر انجام دهید.

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

اکنون، می‌توانید از قانون @container برای تنظیم استایل‌ها بر اساس نزدیک‌ترین والد استفاده کنید. برای طرحی مانند تصویر بالا، جایی که یک کارت ممکن است از یک ستون به دو ستون برسد، چیزی شبیه به این بنویسید:

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

برای اینکه دقیق تر و واضح تر باشد، به محفظه عنصر والد یک نام بدهید:

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

سپس کد قبلی را به صورت زیر بازنویسی کنید:

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

واحدهای جستجوی کانتینر

برای مفیدتر کردن درخواست‌های کانتینر، می‌توانید از مقادیر واحد مبتنی بر کانتینر نیز استفاده کنید. جدول زیر مقادیر واحد کانتینر ممکن و نحوه مطابقت آنها با اندازه ظرف را نشان می دهد:

یک مثال برای نحوه استفاده از واحدهای مبتنی بر کانتینر، تایپوگرافی پاسخگو است. واحدهای مبتنی بر viewport (مانند vh ، vb ، vw و vi ) می توانند برای اندازه هر عنصر روی صفحه استفاده شوند.

.card h2 {
  font-size: 15cqi;
}

این کد اندازه قلم را 15% از اندازه درونی ظرف می کند، به این معنی که با افزایش اندازه (عرض) خط، بزرگتر یا با کاهش آن کوچکتر می شود. برای اینکه این موضوع را حتی بیشتر کنید، از تابع clamp() استفاده کنید تا به تایپوگرافی خود حداقل و حداکثر محدودیت اندازه بدهید و آن را به صورت پاسخگو بر اساس اندازه ظرف اندازه گیری کنید:

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

اکنون هدر هرگز بزرگتر از 3rem یا کوچکتر از .5rem نخواهد شد، اما 15 درصد از اندازه درون خطی ظرف در هر نقطه ای بین آن ها را می گیرد.

این نسخه ی نمایشی یک قدم جلوتر می رود و کارت های گسترده تر را به روز می کند تا محدوده اندازه کوچکتری داشته باشند، همانطور که در نمای 2 ستونی ارائه می شوند.

پرس و جوی ظرف polyfill

از آنجایی که پرس و جوهای کانتینر بسیار ویژگی قدرتمندی هستند، ما می خواهیم که بتوانید با استفاده از آن در پروژه های خود احساس راحتی کنید و بدانید که پشتیبانی از مرورگر بخش بزرگی از آن است. به همین دلیل، ما روی بهبود Container Query Polyfill کار می‌کنیم. این پلی پر دارای پشتیبانی کلی در موارد زیر است:

• فایرفاکس 69+
• Chrome 79+
• لبه 79+
• سافاری 13.4+

اندازه آن در هنگام فشرده سازی کمتر از 9 کیلوبایت است و از ResizeObserver با MutationObserver برای پشتیبانی از دستور کامل @container query که در حال حاضر در مرورگرهای پایدار موجود است، استفاده می کند:

• جستارهای گسسته ( width: 300px و min-width: 300px ).
• جستارهای محدوده ( 200px < width < 400px و width < 400px ).
• واحدهای طول نسبی کانتینر ( cqw ، cqh ، cqi ، cqb ، cqmin ، و cqmax ) در ویژگی‌ها و فریم‌های کلیدی.

با استفاده از پرس و جوی ظرف polyfill

برای استفاده از polyfill، این تگ اسکریپت را به سر سند خود اضافه کنید:

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

همچنین ممکن است بخواهید از سرویسی برای تحویل مشروط polyfill بر اساس User-Agent استفاده کنید یا آن را در مبدأ خود میزبانی کنید.

برای بهترین تجربه کاربری، توصیه می‌شود در ابتدا از polyfill فقط برای محتوای زیر صفحه استفاده کنید و از پرس‌وجوهای @supports برای جایگزینی موقت آن با نشانگر بارگذاری استفاده کنید تا زمانی که polyfill برای نمایش آن آماده شود:

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

در شبکه‌ها و دستگاه‌های با سرعت کافی، یا دستگاه‌هایی که به‌طور بومی از درخواست‌های کانتینر پشتیبانی می‌کنند، این نشانگر بارگیری هرگز نمایش داده نمی‌شود.

ویژگی های جدید Polyfill

پلی فیل به روز شده از موارد زیر پشتیبانی می کند:

• قوانین @container تودرتو.
• تودرتوی قواعد @container تحت @supports و پرس‌وجوهای @media و بالعکس پشتیبانی می‌شود.
• CSS شرطی مانند @supports (container-type: inline-size) پس از بارگیری polyfill عبور می کند.
• پشتیبانی کامل از نحو CSS (دیگر هیچ مشکلی با قرار دادن نظرات در جایی که از نظر نحوی معتبر هستند وجود ندارد).
• حالت های نوشتن عمودی (از طریق حالت نوشتن).
• واحدهای نسبی کانتینر ( cqw ، cqh ، و غیره) در شرایط پرس و جو، اعلامیه‌های دارایی، و فریم‌های کلیدی انیمیشن پشتیبانی می‌شوند. rem و em در شرایط پرس و جو پشتیبانی می شوند.
• نحو جستجوی کانتینر گسترده:
  • نحو محدوده (به عنوان مثال (200px < width < 400px) ).
  • پرس و جوهای برابری (به عنوان مثال، (width = 200px) ).
• عناصر شبه مانند ::before و ::after .
• مرورگرهای بدون :is(...) / :where(...) از طریق یک راه حل اختیاری پشتیبانی می شوند
• جستارهای ویژگی orientation و aspect-ratio .
• فیلتر کردن صحیح عبارت‌ها بر اساس ویژگی‌ها (به عنوان مثال، جست‌وجوی height در container: inline-size با حالت نوشتن افقی به درستی مجاز نیست).
• جهش DOM (به عنوان مثال، عناصر <style> و <link> در زمان اجرا حذف می شوند).

محدودیت ها و هشدارهای Polyfill

اگر از polyfill کوئری کانتینر استفاده می‌کنید، چند ویژگی گمشده وجود دارد که باید مراقب آنها باشید:

• Shadow DOM هنوز پشتیبانی نمی شود.
• واحدهای نسبی کانتینر (به عنوان مثال، cqw و cqh ) در شرایط پرس و جو @media پشتیبانی نمی شوند.
  • Safari: Container Relative Units در فریم های کلیدی انیمیشن قبل از 15.4 پشتیبانی نمی شوند.
• calc() , min() , max() یا سایر توابع ریاضی هنوز در شرایط پرس و جو پشتیبانی نمی شوند.
• این پلی پر فقط با CSS درون خطی و با منبع مشابه کار می کند. شیوه نامه های متقاطع، و شیوه نامه ها در iframes (مگر اینکه polyfill به صورت دستی بارگیری شود) پشتیبانی نمی شوند.
• layout و مهار style به پشتیبانی اساسی مرورگر نیاز دارد:
  • سافاری 15.4+
  • فایرفاکس در حال حاضر از Style Containment پشتیبانی نمی کند، اما در حال کار بر روی آن است.

هشدارها

• برای جلوگیری از تأثیرگذاری FID و CLS ، polyfill هیچ تضمینی در مورد زمان رخ دادن اولین چیدمان نمی دهد، حتی اگر به طور همزمان بارگذاری شود، به جز اینکه سعی می کند از تأخیر غیر منطقی LCP جلوگیری کند. به عبارت دیگر، هرگز نباید برای اولین رنگ به آن اعتماد کنید.
• ResizeObserver Loop Errors را ایجاد می کند. پلی‌فیل اصلی نیز این کار را انجام می‌دهد، اما ارزش آن را دارد. این به این دلیل اتفاق می‌افتد که اندازه بلوک یک container-type: inline-size احتمالاً پس از ارزیابی یک پرس‌وجو تغییر می‌کند، اما ResizeObserver راهی ندارد که به آن بگوید که ما به تغییرات اندازه بلوک اهمیتی نمی‌دهیم.
• این polyfill در برابر تست‌های پلتفرم وب آزمایش شده است و به 70% رسیده است، زیرا ویژگی‌های خاصی مانند APIهای جاوا اسکریپت چند پر نمی‌شوند، و بنابراین نرخ عبور عمدا به 70% نزدیک‌تر است.
• راه حل :where() برای 2.23% کاربران مرورگرهای قدیمی تر از:
  • سافاری 14
  • کروم 88
  • لبه 88
  • سامسونگ اینترنت 15
  • فایرفاکس 78