//. 087 - Google I/O coté web développement

Показать описание

Un épisode spécial pour parler de la Google IO 2024 coté Web développement. Nous vous faisons un résumé des vidéos et nous faisons le point sur les nouveautés et le niveau d'implémentation dans les navigateurs Web. Avec nous, tenez vous à jour sur les nouvelles feature pour coder toujours mieux et propre !

# Retour sur la Google IO coté web développement :

**Version des navigateurs au moment de l'enregistrement:**

- Chrome 125 was released on May 24, 2024
- Firefox 126 was released on May 14, 2024
- Safari 17.5 (released on May 13, 2024)

## Vidéo principalement sur le CSS

## Animations

Implementation de plusieurs choses concernants les animations. Le souci c’est que pour le moment cela fonctionne principalement que dans chrome !

### Scroll driven animation :

Prise en charge : chrome 115, edge 115, firefox flag, safari No

- Devtools inspect scroll driven animation

### Self Document View transitions

Animation entre les routes

Prise en charge : chrome 111, edge 111, firefox No, safari STP

### View transitions classes

Pour les micro interactions

Prise en charge : chrome 125, edge 125, firefox No, safari No

### Cross Document View transitions

Prise en charge : chrome 126, edge 126, firefox No, safari No

## UI components

### Popover API

Prise en charge : chrome 114, edge 114, firefox 125, safari 17

### Anchor-positioned

Position par rapport à un élément (anchor-name, position-anchor)

Prise en charge : chrome 125, edge 125, firefox No, safari No

### Stylable select

Permet de styliser complètement un element `select`

Prise en charge : chrome flag, edge flag, firefox No, safari No

**Attention Experimental**

### Exclusive Accordion

Prise en charge : chrome 120, edge 120, firefox No, safari 17.2

Groupe d’accordion avec affichage un à la fois

### field-sizing: content

Prise en charge : chrome 123, edge 123, firefox No, safari No

TextArea qui prend la taille du contenu

### HR in select

Prise en charge : chrome 119, edge 119, firefox 122, safari 17

### Align-content for block

Prise en charge : chrome 120, edge 120, firefox 117, safari 17.2

### Light-dark()

Prise en charge : chrome 123, edge 123, firefox 120, safari 17.5

## Vidéo sur le niveau d'implémentation dans les navigateurs web

### Container Query

Prise en charge : chrome 105, edge 105, firefox 110, safari 16

### :has

Prise en charge : chrome 105, edge 105, firefox 121, safari 15.4

### Subgrid

Prise en charge : chrome 117, edge 117, firefox 71, safari 16

### CSS nesting

Prise en charge : chrome 120, edge 120, firefox 117, safari 17.2

### Search element

Nouveau tag HTML search pour englober un form de recherche. Et non pas un input qui existait déjà.

Prise en charge : chrome 118, edge 118, firefox 118, safari 17

### Responsive vidéo

Prise en charge : chrome 120, edge 120, firefox 120, safari 3.1

### inert attribut

Prise en charge : chrome 102, edge 102, firefox 112, safari 15.5

### color-mix()

Prise en charge : chrome 111, edge 111, firefox 113, safari 16.2

# State of HTML

1. Landmark : main, header, aside, …
2. tabindex : passer un élément focusable
3. Lazy loading attribut
4. src set et size attribut
6. Dialog element **22% jamais entendu parler**
7. autocomplete attribut
8. Detail et summary **27% jamais entendu parler**
9. Resource Hints (preload, etc..) **29% jamais entendu parler**
10. FormData **32% jamais entendu parler**
12. Popover API **53% jamais entendu parler**
13. Search input attribut **60% jamais entendu parler**
14. File System API **62% jamais entendu parler**
15. Fetch priority attribut **64% jamais entendu parler**
16. controlslist attribut **66% jamais entendu parler**
17. Web Share API **67% jamais entendu parler**
18. Inert attribut **79% jamais entendu parler**
19. Badging API **87% jamais entendu parler**

Retrouvez Double Slash sur :

Les plateformes de podcast :