Kirjutasin mõned varajased mõtted konteineri stiilis päringute kohta natuke aega tagasi. Praegu on veel varajased päevad. Need on juba määratletud CSS-i piiramismooduli 1. taseme spetsifikatsioon (praegu toimetaja mustandi staatuses), kuid seal on veel paar silmapaistvat arutelu toimumas.
Põhiidee seisneb selles, et saame määratleda konteineri ja seejärel rakendada stiile tinglikult selle järglastele selle arvutatud stiili alusel.
@container ? {
/* conditional styles */
}Parim näide, mida seni näinud olen, on kaldkirja eemaldamine millegi sarnase juurest , ja kui neid kasutatakse kontekstis, kus sisu on juba kaldkirjas:
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;
}
}See on üldine idee. Aga kui te seda ei teadnud, hoiab Miriam Suzanne, kes on spetsifikatsiooni toimetaja, pidevat ja põhjalikku kogumit isiklikud märkmed konteineri stiilis päringute kohta mis on avalikult kättesaadav. Seda värskendati eelmisel päeval ja veetsin seal mõnda aega, püüdes oma pead stiilipäringute nüansirikkamate aspektide ümber mähkida. See on mitteametlik värk, aga mõtlesin, et panen kirja mõned asjad, mis mulle silma jäid. Kes teab? Võib-olla on see asi, mida me lõpuks ootame!
Iga element on stiilikonteiner
Me ei pea isegi a-d selgesõnaliselt määrama container-name or container-type stiilikonteineri määratlemiseks, sest kõik on vaikimisi stiilikonteiner.
Niisiis, näete ülaltoodud näidet, mis eemaldab kaldkirja? Pange tähele, et see ei tuvasta konteinerit. See hüppab otse päringu juurde, kasutades nuppu style() funktsiooni. Niisiis, millise konteineri kohta küsitakse? See saab olema elementide otsene vanem rakendatud stiilide vastuvõtmine. Ja kui mitte seda, siis on järgmine lähim suhtekonteiner see on ülimuslik.
See meeldib mulle. See on väga CSS-y, et päring otsib vastet ja jätkab seejärel mullitamist, kuni see leiab sobiva tingimuse.
Minu väikesel ajul oli raske mõista, miks me saame stiilidel põhineva kaudse konteineri kasutamisest lahti saada, kuid mitte niivõrd, kui tegeleme dimensiooniliste päringutega, näiteks size ja inline-size. Miriam selgitab seda kenasti:
Dimensioonilised päringud nõuavad css-i isoleerimine konteineri suuruse, paigutuse ja stiili kohta, et vältida paigutussilmusi. Piiramine on laialdaselt kohaldatav invasiivne asi, mistõttu oli oluline, et autorid kontrolliksid hoolikalt, millised elemendid on (või ei ole) suurusega konteinerid.
Stiilipõhistel päringutel pole samu piiranguid. CSS-is pole juba praegu võimalust, et järeltulijate stiilid saaksid mõjutada esivanema arvutatud stiile. Seega ei ole vaja isoleerida ning elemendi loomisel ei ole invasiivseid ega ootamatuid kõrvalmõjusid. stiili päringu konteiner.
(Rõhuasetus minu poolt)
Kõik taandub tagajärgedele – millest pole ühtegi, kuna kõik on stiilipäringukonteiner kohe karbist välja võetud.
- Kui konteiner leitakse: tingimused lahendatakse selle konteineri suhtes.
- Kui mitu konteinerit ühtivad: lähim suhteline konteiner on ülimuslik.
- Kui vasteid ei leita:
unknowntagasi.
See on sama "andestav" vaim nagu ülejäänud CSS-is.
Konteiner võib toetada nii mõõtmete kui ka stiili päringuid
Oletame, et tahame määratleda stiilipäringu ilma selgesõnalise container-name:
@container style(font-style: italic) {
em {
font-style: normal;
}
}See toimib, sest kõik elemendid on stiilikonteinerid, ükskõik container-type. Just see võimaldab meil kaudselt küsida stiile ja tugineda lähimale vastele. Ja see on täiesti hea, sest jällegi pole stiilikonteinerite loomisel kahjulikke kõrvalmõjusid.
Peame kasutama selgesõnalist container-type mõõtmete päringute jaoks, kuid mitte niivõrd stiilipäringute jaoks, kuna iga element on stiilipäring. See tähendab ka seda, et see konteiner on nii stiil ja mõõtmete päring:
.card-container {
container: card / inline-size; /* implictly a style query container as well */
}Konteineri päringute esitamise välistamine
Võib-olla me ei taha, et konteiner osaleks sobitamisprotsessis. See on koht, kus võib olla võimalik seadistada container-type: none elemendil.
.some-element {
container-type: none;
}Selge stiiliga päringukonteinerid pakuvad rohkem kontrolli selle üle, mida päritakse
Kui me näiteks kirjutaksime stiilipäringu padding , pole usaldusväärset viisi kõige sobivama konteineri määramiseks, olenemata sellest, kas töötame selgesõnalise nimega konteineriga või lähima otsese emaga. See on sellepärast padding ei ole päritud vara.
Nii et sellistel juhtudel peaksime kasutama container-name et anda brauserile selgesõnaliselt teada, millistest konteineritest nad saavad tõmmata. Võime anda konteinerile isegi mitu selgesõnalist nime, et see vastaks rohkematele tingimustele:
.card {
container-name: card layout theme;
}Oh, ja container-name aktsepteerib suvalise arvu valikulisi ja korduvkasutatav konteineri nimed! See on veelgi paindlikum, kui on vaja aidata brauseril vastete otsimisel valikuid teha.
.theme {
container-name: theme;
}
.grid {
container-name: layout;
}
.card {
container-name: card layout theme;
}Ma mõtlen, kas seda võib pidada ka "varuks" juhul, kui ühest konteinerist üle minnakse.
Stiilipäringuid saab kombineerida
. or ja and operaatorid lubavad meil asju KUIVANA hoidmiseks kombineerida:
@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. */
}Stiilide vahetamine
Konteinerstiilis päringute ja a. määratlemiseks tehtav töö toggle() funktsioon. Näiteks võime tsükliga kahest läbi sõita font-style väärtused, ütleme italic ja normal:
em, i, q {
font-style: italic;
}
@container style(font-style: italic) {
em, i, q {
font-style: normal;
}
}Lahe. Kuid CSS-i lülitite ettepanek viitab sellele, et toggle() funktsioon oleks lihtsam lähenemine:
em, i, q {
font-style: toggle(italic, normal);
}Kuid kõik, mis on väljaspool seda tüüpi binaarset kasutusjuhtumit, on kus toggle() on vähem sobiv. Stiilipäringud on siiski head. Miriam tuvastab kolm juhtumit, kus stiilipäringud on sobivamad kui 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;
}
}Stiilipäringud lahendavad "Kohandatud atribuudi sisselülitamise häkkimise"
Pange tähele, et stiilipäringud on formaalne lahendus „CSS-i kohandatud atribuutide ümberlülitamise trikk”. Seal määrame tühja kohandatud atribuudi (--foo: ;) ja kasutage atribuutide sisse- ja väljalülitamiseks komadega eraldatud varumeetodit, kui kohandatud atribuut on seatud tegelikule väärtusele.
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. */
}
See on ülilahe, ka palju tööd, mille stiili konteinerpäringud muudavad triviaalseks.
Stiilipäringud ja CSS-i loodud sisu
poolt loodud sisu jaoks content vara ::before ja ::after pseudoelemendid, on sobiv konteiner element, millel sisu luuakse.
.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;
}
}Stiilipäringud ja veebikomponendid
Saame määratleda veebikomponendi konteinerina ja esitada selle kohta päringu stiili järgi. Esiteks on meil komponendist:
…
…
…
Seejärel kasutame :host pseudoelement konteinerina a seadmiseks container-nameon container-typeja mõned kõrgetasemelised atribuudid sellel:
:host {
container: media-host / inline-size;
--media-location: before;
--media-style: square;
--theme: light;
}Elemendid sees saab pärida parameetrite kohta Element:
@container media-host style(--media-style: round) {
[part='img'] {
border-radius: 100%;
}
}Mis järgmiseks?
Jällegi, kõik asjad, mille olen siia üles kirjutanud, põhinevad Miriami märkmetel ja need märkmed ei asenda ametlikku spetsifikatsiooni. Kuid need näitavad, mida arutatakse ja kuhu asjad võivad tulevikus jõuda. Ma hindan, et Miriam ühendas peotäie silmapaistvaid arutelusid, mis veel toimuvad, mida saame jälgida, et asjadega kursis olla:
