چندتا نوشتم افکار اولیه در مورد جستجوهای سبک ظرف کمی قبل هنوز روزهای اولیه آنها قبلا در تعریف شده اند CSS Containment Module Level 1 مشخصات (در حال حاضر در وضعیت پیش نویس ویرایشگر) اما هنوز چند بحث برجسته در حال انجام است.
ایده اصلی این است که می‌توانیم یک ظرف را تعریف کنیم و سپس بر اساس استایل محاسبه‌شده‌اش، استایل‌ها را به‌طور مشروط برای فرزندان آن اعمال کنیم.
@container <name>? <conditions> { /* conditional styles */
}بهترین مثالی که تا به حال دیده ام، حذف حروف کج از چیزی شبیه به آن است <em>, <i>و <q> هنگامی که آنها در زمینه ای استفاده می شوند که در آن محتوا از قبل مورب نوشته شده است:
em, i, q { font-style: italic; /* default UA behavior */
} /* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) { em, i, q { font-style: normal; }
}این ایده کلی است. اما اگر نمی دانستید، میریام سوزان، که ویرایشگر مشخصات است، مجموعه ای مداوم و کامل از یادداشت های شخصی در مورد درخواست های سبک ظرف که در دسترس عموم است. روز گذشته به‌روزرسانی شد و من مدتی را در آنجا گذراندم و سعی کردم سرم را در اطراف جنبه‌های ظریف‌تر پرس‌وجوهای سبک قرار دهم. این چیزهای غیررسمی است، اما فکر کردم مواردی را که برایم جالب بود یادداشت کنم. چه کسی می داند؟ شاید این چیزهایی باشد که در نهایت بتوانیم منتظر آن باشیم!
هر عنصر یک ظرف سبک است
ما حتی نیازی به اختصاص a به صراحت نداریم container-name or container-type برای تعریف یک محفظه سبک زیرا همه چیز به طور پیش فرض یک محفظه سبک است.
بنابراین، مثال بالا را می بینید که حروف کج را حذف می کند؟ توجه داشته باشید که ظرف را شناسایی نمی کند. با استفاده از style() عملکرد. بنابراین، چه ظرفی در حال پرس و جو است؟ این خواهد شد والد مستقیم عناصر دریافت سبک های کاربردی و اگر نه، پس همینطور است نزدیکترین ظرف نسبی بعدی که اولویت دارد
من آن را دوست دارم. این بسیار CSS-y است که پرس و جو برای یک مطابقت جستجو کند، سپس به حباب کردن ادامه دهد تا زمانی که یک شرط منطبق را پیدا کند.
برای مغز کوچک من سخت بود درک کند که چرا می‌توانیم از یک ظرف ضمنی بر اساس سبک‌ها فرار کنیم، اما وقتی با پرس و جوهای ابعادی سر و کار داریم، نه چندان size و inline-size. میریام به خوبی توضیح می دهد:
پرس و جوهای ابعادی به css نیاز دارند مهار در اندازه، طرح، و سبک ظرف به منظور جلوگیری از حلقه های طرح. مهار یک چیز تهاجمی است که به طور گسترده اعمال می شود، بنابراین مهم است که نویسندگان کنترل دقیقی بر روی اینکه چه عناصری ظروف اندازه هستند (یا نیستند) داشته باشند.
پرس و جوهای مبتنی بر سبک محدودیت یکسانی ندارند. در حال حاضر هیچ راهی در CSS وجود ندارد که سبک‌های نسلی بر سبک‌های محاسبه‌شده یک اجداد تأثیر بگذارند. بنابراین هیچ محدودیتی لازم نیست، و هیچ عارضه جانبی تهاجمی یا غیرمنتظره ای در ایجاد یک عنصر به عنوان یک عنصر وجود ندارد. ظرف پرس و جو.
(تاکید از من است)
همه اینها به پیامدهایی ختم می شود - که هیچ کدام از آنها وجود ندارد تا جایی که همه چیز یک محفظه پرس و جوی سبک درست خارج از جعبه باشد.
- اگر ظرفی پیدا شد: شرایط علیه آن ظرف حل می شود.
- اگر چندین کانتینر مطابقت داشته باشند: نزدیکترین ظرف نسبی اولویت دارد.
- اگر هیچ منطبقی پیدا نشد:
unknownبرگشت
همین طور است روحیه "بخشش" مانند بقیه CSS.
یک کانتینر می تواند پرس و جوهای ابعادی و سبک را پشتیبانی کند
بیایید بگوییم که می‌خواهیم یک پرس و جوی سبک را بدون صریح تعریف کنیم container-name:
@container style(font-style: italic) { em { font-style: normal; }
}این کار می کند زیرا همه عناصر ظروف سبک هستند، مهم نیست container-type. این چیزی است که به ما امکان می‌دهد به طور ضمنی استایل‌ها را پرس و جو کنیم و به نزدیکترین تطابق تکیه کنیم. و این کاملاً خوب است زیرا، باز هم، هیچ عارضه جانبی جانبی هنگام استقرار ظروف سبک وجود ندارد.
ما باید از یک صریح استفاده کنیم container-type برای پرس و جوهای ابعادی، اما نه چندان برای پرس و جوهای سبک، زیرا هر عنصر یک پرس و جوی سبک است. این همچنین به این معنی است که این ظرف هر دو یک سبک است و پرس و جو ابعادی:
.card-container { container: card / inline-size; /* implictly a style query container as well */
}مستثنی کردن یک ظرف از پرس و جو
شاید ما نمی خواهیم ظرفی در روند تطبیق شرکت کند. آنجاست که ممکن است تنظیم شود container-type: none روی یک عنصر
.some-element { container-type: none;
}کانتینرهای پرس و جوی سبک صریح کنترل بیشتری بر آنچه که پرس و جو می شود ارائه می دهد
اگر مثلاً بخواهیم استایلی بنویسیم padding ، هیچ راه مطمئنی برای تعیین بهترین کانتینر منطبق وجود ندارد، صرف نظر از اینکه با یک کانتینر با نام صریح کار می کنیم یا نزدیکترین والد مستقیم. به این دلیل است padding ملک ارثی نیست
بنابراین، در آن موارد، ما باید استفاده کنیم container-name تا به صراحت به مرورگر اطلاع دهند که از کدام کانتینرها می توانند خارج شوند. حتی می‌توانیم چند نام صریح به یک ظرف بدهیم تا با شرایط بیشتری مطابقت داشته باشد:
.card { container-name: card layout theme;
}اوه، و container-name هر تعداد اختیاری و قابل استفاده مجدد نام برای یک ظرف! هنگامی که به مرورگر کمک می‌کند هنگام جستجوی موارد منطبق را انتخاب کند، این انعطاف‌پذیری بیشتری دارد.
.theme { container-name: theme;
}
.grid { container-name: layout;
}
.card { container-name: card layout theme;
}من به نوعی تعجب می کنم که آیا ممکن است در صورتی که یک کانتینر از روی آن رد شود، این یک "بازگشت" نیز در نظر گرفته شود.
پرس و جوهای سبک را می توان ترکیب کرد
La or و and اپراتورها به ما این امکان را می دهند که wueries را برای خشک نگه داشتن چیزها ترکیب کنیم:
@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) { .bubble::after { border-block-end-color: inherit; inset-block-end: 100%; }
} /* is the same as... */
@container bubble style(--arrow-position: start start) { /* etc. */
}
@container bubble style(--arrow-position: end start) { /* etc. */
}تغییر سبک ها
بین کوئری های سبک کانتینر و غیررسمی Tab Atkins همپوشانی کمی وجود دارد پیشنهاد برای CSS Toggles. به عنوان مثال، ما می توانیم دو چرخه را طی کنیم font-style ارزش ها، بگو italic و normal:
em, i, q { font-style: italic;
} @container style(font-style: italic) { em, i, q { font-style: normal; }
}سرد. اما پیشنهاد برای CSS Toggles نشان می دهد که toggle() تابع یک رویکرد ساده تر خواهد بود:
em, i, q { font-style: toggle(italic, normal);
}اما هر چیزی فراتر از این نوع استفاده باینری جایی است toggle() کمتر مناسب است با این حال، درخواست های مربوط به سبک ها خوب است. Miriam سه مورد را شناسایی می کند که در آن استایل کوئری ها مناسب تر از a هستند toggle():
/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) { em, i, q { background: lightpink; }
} /* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) { em, i, q { background: lightpink; }
} /* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) { em, i, q { /* clipped gradient text */ background: var(--feature-gradient); background-clip: text; box-decoration-break: clone; color: transparent; text-shadow: none; }
}پرس و جوهای سبک "هک تغییر ویژگی سفارشی" را حل می کند
توجه داشته باشید که پرس و جوهای سبک یک راه حل رسمی برای این است “ترفند تغییر ویژگی سفارشی CSS”. در آنجا، یک ویژگی سفارشی خالی (--foo: ;) و از روش بازگشتی جدا شده با کاما برای روشن و خاموش کردن خصوصیات استفاده کنید، زمانی که ویژگی سفارشی روی مقدار واقعی تنظیم شود.
button { --is-raised: ; /* off by default */ border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1)); box-shadow: var( --is-raised, 0 1px hsl(0 0% 100% / 0.8) inset, 0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2) ); text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
} button:active { box-shadow: var(--is-raised, 0 1px 0.2em black inset);
} #foo { --is-raised: initial; /* turned on, all fallbacks take effect. */
}
این فوق العاده جالب است، همچنین کارهای زیادی که پرس و جوهای کانتینر سبک را بی اهمیت می کند.
پرس و جوهای سبک و محتوای تولید شده با CSS
برای محتوای تولید شده توسط content خاصیت ::before و ::after شبه عناصر، ظرف مطابق عنصری است که محتوا بر روی آن تولید می شود.
.bubble { --arrow-position: end end; container: bubble; border: medium solid green; position: relative;
} .bubble::after { content: ""; border: 1em solid transparent; position: absolute;
} @container bubble style(--arrow-position: end end) { .bubble::after { border-block-start-color: inherit; inset-block-start: 100%; inset-inline-end: 1em; }
}پرس و جوهای سبک و اجزای وب
می‌توانیم یک کامپوننت وب را به‌عنوان یک ظرف تعریف کنیم و آن را با استایل جستجو کنیم. اول، ما داریم <template> از جزء:
<template id="media-host"> <article> <div part="img"> <slot name="img">…</slot> </div> <div part="content"> <slot name="title">…</slot> <slot name="content">…</slot> </div> </article>
</template>سپس از :host شبه عنصر به عنوان یک ظرف برای تنظیم a container-name، یک container-typeو برخی از ویژگی های سطح بالا روی آن:
:host { container: media-host / inline-size; --media-location: before; --media-style: square; --theme: light;
}عناصر داخل <media-host> می تواند پارامترهای را پرس و جو کند <media-host> عنصر:
@container media-host style(--media-style: round) { [part='img'] { border-radius: 100%; }
}بعدی چیست؟
باز هم، تمام مواردی که در اینجا یادداشت کردم بر اساس یادداشت های میریام است، و آن یادداشت ها جایگزینی برای مشخصات رسمی نیستند. اما آنها نشانه ای از آنچه در حال بحث است و جایی که ممکن است در آینده اتفاق بیفتد هستند. من قدردانی می کنم که میریام چند بحث برجسته را که هنوز در حال انجام است را به هم مرتبط کرد و ما می توانیم آنها را دنبال کنیم تا از همه چیز مطلع باشیم:
- Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.اینجا کلیک کنید
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://css-tricks.com/digging-deeper-into-container-style-queries/
