شروع به کار با Style Queries

یونا کراوتس

توانایی جستجو در اندازه درون خطی و مقادیر واحد جستجوی ظرف اخیراً در همه موتورهای مرورگر مدرن به پشتیبانی پایدار رسیده است.

Browser Support

  • کروم: 105.
  • لبه: 105.
  • فایرفاکس: 110.
  • سافاری: 16.

Source

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

Browser Support

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: 18.

این بدان معنی است که ما کنترل منطقی تری بر سبک ها در CSS داریم و جداسازی بهتر منطق و لایه داده یک برنامه را از سبک های آن امکان پذیر می کند.

مشخصات CSS Containment Module Level 3، که جستارهای اندازه و سبک را پوشش می‌دهد، به هر سبکی اجازه می‌دهد که از یک والدین درخواست شود، از جمله ویژگی‌ها و جفت‌های ارزش مانند font-weight: 800 . با این حال، در عرضه این ویژگی، پرس و جوهای سبک در حال حاضر فقط با مقادیر ویژگی سفارشی CSS کار می کنند. این هنوز هم برای ترکیب سبک ها و جداسازی داده ها از طراحی بسیار مفید است. بیایید نگاهی به نحوه استفاده از پرس و جوهای سبک با ویژگی های سفارشی CSS بیندازیم:

شروع با پرس و جوهای سبک

فرض کنید HTML زیر را داریم:

<ul class="card->lis<t"
  li class=">card-<container"
>    div class=&<quot>;ca<rd&>q<uot>;
      ...
    /div
  /li
/ul

برای استفاده از پرس و جوهای سبک، ابتدا باید یک عنصر ظرف را تنظیم کنید. این نیاز به یک رویکرد کمی متفاوت دارد که بستگی به این دارد که از والدین مستقیم یا غیرمستقیم سؤال کنید.

استعلام مستقیم از والدین