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
svwNouvelle 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
Copy of State of web platform 2022
By Alex Duval
