Säilötyylisten kyselyjen varhaiset päivät

Olemme edelleen suuuuuper alkuaikoina konttikyselyiden kanssa. Liian aikaista laajalle selaintuelle, mutta Chromium tukee jo sitä, Safaria alkoi tukea sitä versiossa 16, ja Firefox on oletettavasti ei kaukana jäljessä.

Useimmissa alkuaikoina keskusteluissa, jotka pyörivät säilökyselyiden ympärillä, verrataan yleensä syntaksia mediakyselyihin.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

Molemmat tekevät kyselyitä min-width: 600. Erona on se, että mediakysely tarkastelee näkymän leveyttä käynnistääkseen kyseiset tyylimuutokset, kun taas säilökysely tarkastelee näkymän laskettua leveyttä. .posts elementti. Makea!

Mutta kuuntelun jälkeen CSS-podcastin jakso 59, Una ja Adam pohtivat säilökyselyiden tulevaisuutta: tyylikyselyitä! Nykyinen työluonnos CSS Containment Module Level 3 -spesifikaatiosta määrittää säilön tyyliset kyselyt:

A säilön tyylinen kysely mahdollistaa kyselyn lasketut arvot että kyselysäilö. Se on yksilöiden boolen yhdistelmä tyylin ominaisuuksia (), että jokainen tekee kyselyn yksittäisen kyselysäilön tietyn ominaisuuden.

Mutta ei vielä esimerkkejä syntaksista – vain lyhyt kuvaus:

A:n syntaksi  on sama kuin a ilmoitus, ja sen kysely on tosi, jos kyselysäilön tietyn ominaisuuden laskettu arvo vastaa annettua arvoa (joka lasketaan myös kyselysäilön suhteen), ei tiedetä, onko ominaisuus tai sen arvo virheellinen tai sitä ei tueta, ja epätosi muuten . Boolen syntaksi ja logiikka yhdistävät tyylin ominaisuuksia osaksi tyylikysely on sama kuin CSS-ominaisuuskyselyt. (Katso @support.)

Joten kyllä, ajan myötä meidän pitäisi odottaa saavamme jotain tällaista:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

Aika tyhmä esimerkki. Yksi huomioitava asia on, että container-type ei enää perustu konttiin inline-size mutta style. Voisimme käsitellä sen näin:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…mutta kaikki säilökyselyt ovat style kyselyt oletuksena. Hyvin. ainakin nykyisellään. Miriam Suzannella on mukava hahmotella mahdollisia ongelmia, joita saattaa ilmetä tuon kanssa.

Missä säilön tyylien tiedustelu voi olla hyödyllistä? En tiedä vielä! Mutta mielessäni pyörii muutama paikka:

• Muokatut omaisuuden arvot: Olemme nähneet mukautettuja ominaisuuksia, kuten tilailmaisimia, kuten DRY-kytkentämenetelmä Ana käsitteli hetki sitten. Arvo muuttuu, samoin kuin tyylit.
• Vaihtoehtoinen tumman tilan lähestymistapa: Sen sijaan, että perustaisimme kaiken runkoluokan muutokseen, joka määrittää uudelleen mukautettuja ominaisuusarvoja, voimme ehkä muuttaa koko väripaletin, jos esimerkiksi rungon tausta muuttaa väriä.
• Monimutkaisemmat kyselyehdot: Haluamme esimerkiksi käyttää tyylejä, kun size ja style kontin ehdot täyttyvät.

Una mainitsi myös CSS-podcastissa, että säilötyyliset kyselyt voivat auttaa estämään joitain kiusallisia tyylitilanteita, kuten jos kursivoitu teksti jo kursivoitussa. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}