//. 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
Lien de la vidéo : • The latest in Web UI (Google I/O ‘24)
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
Vidéo pour apprendre : • Unleash the power of Scroll-Driven Animations
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
https://codepen.io/goodmotion/pen/jOo...
Prise en charge : chrome 114, edge 114, firefox 125, safari 17
Anchor-positioned
[https://developer.chrome.com/blog/anc...](https://developer.chrome.com/blog/anc...)
https://anchor-tool.com/
Position par rapport à un élément (anchor-name, position-anchor)
Prise en charge : chrome 125, edge 125, firefox No, safari No
Stylable select
https://open-ui.org/components/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
https://developer.chrome.com/docs/css...
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
Lien de la vidéo : • What's new in the Web (Google I/O ‘24)
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
Lien des résultats : https://2023.stateofhtml.com/en-US/fe...
1. Landmark : main, header, aside, …
2. tabindex : passer un élément focusable
3. Lazy loading attribut
4. src set et size attribut
5. Custom element https://developer.mozilla.org/en-US/d...
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*
11. Datalist *41% jamais entendu parler* https://developer.mozilla.org/en-US/d...
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 :
Twitter : / doubleslash_dev
Twitch : / doubleslash_dev
Site internet : https://bit.ly/2AVWnI9
Les plateformes de podcast :
iTunes : https://apple.co/3fTguFo
Spotify : https://spoti.fi/317wtvD