Conditionele regels

(Conditional rules)

Module definieert een API voor @media: niet omstreden.

En een nieuwe @supports om in de toekomst regels te kunnen maken
alleen voor implementaties die een bepaalde eigenschap (niet)
ondersteunen. Op dit moment nog niet duidelijk of er voldoende
implementaties voor @supports zullen zijn.

@media – niets nieuws t.o.v. niveau 2
(maar niet de Media Queries)

Conditionele regels

De module definieert:

• @media (maar niet de Media Queries)

  • Eigenschappen van het medium/apparaat (zie elders)
  • Niets nieuws t.o.v. niveau 2

• @supports

  • Eigenschappen van de UA
  • Toekomst nog onzeker

• API voor @media en @supports

Syntax 1

Test voor een ondersteunde eigenschap of waarde:

@supports ( display: flex ) {
  body, #navigation, #content { display: flex }
  ...
}

De regels worden alleen toegepast door UA's die de eigenschap display of de waarde flex kennen

Syntax 2

Test voor een niet-ondersteunde eigenschap of waarde:

@supports not ( display: flex ) {
  body, #navigation, #content { display: box }
  ...
}

De regels worden toegepast door UA's die de eigenschap display of de waarde flex niet kennen

Syntax 3

Combinaties met AND en OR

@supports (display: outside) or
    (color: hsl(0,100%,100%)) {...}
@supports (display: outside) and
    (color: hsl(0,100%,100%)) {...}

AND, OR en NOT kunnen willekeurig gecombineerd worden, maar alleen met expliciete haakjes:

((color: red) or (color: #f00)) and
 ((margin: auto) or (padding: auto))

Demo

Uit de demo:

@supports (display: flex) {
  .supports.flex {display: block}
}

Einde

→ Terug naar agenda