State of web plateform

CSS

accent-color

accent-color: auto;

accent-color: red;
accent-color: #5729e9;

Définir la couleur des éléments (checkbox, radio, etc..)

size-adjust

size-adjust: 90%;

harmoniser la taille des polices

@layer

@layer utilities {
  .padding-sm {
    padding: .5rem;
  }
}

@layer theme, layout, utilities;

créer des layers pour créer des cascades et mieux gérer l'héritage

subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

Récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille

:has()

a:has(> img)

Cibler un élément en fonction des enfants

@container

@container (min-width: 700px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Dimensionner un élément en fonction de sa taille

16

aspect-ratio

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;

aspect-ratio: attr(width) / attr(height);

conserver un ratio au niveau de la taille

16

offset-path

/* URL */
offset-path: url(#path);

/* Formes */
offset-path: circle(50% at 25% 25%);
offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');

Définir un tracé à suivre pour une animation

16

color-contrast

color-contrast(#008080)

Définir automatiquement une couleur de contrast

16

HTML

dialog

<dialog open>
  <p>Salutations, à tous et à toutes !</p>
</dialog>

une popup native et accessible !

input datetime-local

<label for="party">Veuillez saisir une date et une heure pour la fête :</label>
<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">

une popup native et accessible !

fetch priority

<img src="/images/in_viewport.svg" fetchpriority="low" alt="">

<link rel="preload" href="/js/script.js" as="script" fetchpriority="hight">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(...
</script>

<iframe src="https://example.com" width="600" height="400" fetchpriority="low"></iframe>

Définir une priorité sur des éléments

inert

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Geler un élément pour le rendre non utilisable

Viewport unit

dvh dynamic viewport height
lvh largest viewport height
svh smallest viewport height

dvw
lvw
svw

Nouvelle unité pour la gestion du Viewport

JS API

Media Session API

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)'
   })
}

Contrôle des médias entre OS et devices

Navigation API

navigation.addEventListener('navigate', navigateEvent => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Nouvelle API de navigation

Page Transition API

// When the user clicks on a link/button:
async function navigateToSettingsPage() {
  // Capture and visually freeze the current state.
  await document.documentTransition.prepare({
    rootTransition: 'cover-up',
    sharedElements: [element1, element2, element3],
  });
...
}

Éléments partagés pour faire des transitions de page avancées

Safari !

Web Inspector

Extensions

Web Push !!

Sur Mac pour la version 16

L'année prochaine sur IOS

State of web platform 2022

By Faramaz Patrick

State of web platform 2022

  • 83