accent-color: auto;
accent-color: red;
accent-color: #5729e9;
Définir la couleur des éléments (checkbox, radio, etc..)
size-adjust: 90%;
harmoniser la taille des polices
@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
.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
a:has(> img)
Cibler un élément en fonction des enfants
@container (min-width: 700px){
.card {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Dimensionner un élément en fonction de sa taille
16
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: attr(width) / attr(height);
conserver un ratio au niveau de la taille
16
/* 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(#008080)
Définir automatiquement une couleur de contrast
16
<dialog open>
<p>Salutations, à tous et à toutes !</p>
</dialog>
une popup native et accessible !
<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 !
<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
<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
dvh dynamic viewport height
lvh largest viewport height
svh smallest viewport height
dvw
lvw
svw
Nouvelle unité pour la gestion du Viewport
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.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
// 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
Sur Mac pour la version 16
L'année prochaine sur IOS