Bonjour à tous, bienvenue sur ce nouvel épisode de Double Slash, le podcast où on parle
de web-développement, le seul et unique en français, très rare.
Comme d'habitude, nous sommes avec Alex, salut Alex !
Salut Patrick, salut tout le monde !
Cette fois, je n'ai pas bugué le dernier épisode, j'ai un petit peu bugué deux secondes,
tu vois ? Mais là, ça va, c'est nickel !
Il a un trop parfait.
On fait un petit sommaire ou pas ?
Peut-être juste avant de partir sur le sommaire, un grand merci pour toutes les personnes
qui viennent liker, nous encourager, commenter les épisodes, mais aussi nous soutenir via
le GitHub sponsor.
Un grand merci à eux, ça nous fait super plaisir, n'hésitez pas à promouvoir le podcast.
On est toujours en croissance et ça, c'est grâce à vous.
Et donc, un grand merci d'être là.
Aujourd'hui, sur cet épisode, on va parler de Google Io, on ne va pas parler de Kotlin
ou de IA, mais on va regarder à travers le prisme des éléments du web qui vont évoluer
avec le prisme HTML CSS.
Il y a beaucoup de choses qui ont évolué sur les dernières années et la cuvée 2024
reste un petit peu dans le mémer parce qu'on arrive avec des nouvelles balises HTML qui
sont de plus en plus implémentées dans les navigateurs.
Merci, la mise à jour automatique des navigateurs.
Mais en tout cas, ils ont annoncé pas mal de choses, pas mal de choses aussi sur l'animation,
sur des balises, sur de la performance.
Ça va être assez intéressant.
Alors ça va être technique sur du HTML CSS, on est d'accord.
Mais je pense qu'on arrive à un niveau là où ça va être vraiment, vraiment intéressant
et sans faire un gros spoiler.
On peut dire quand même qu'il y a de plus en plus de choses qui sont natives et que
le HTML et le CSS sont en train de gratter des parts au JavaScript et je pense que c'est
une très bonne chose.
Bien carrément.
Les navigateurs c'est notre plateforme en tant que développeur web.
C'est notre OS.
C'est notre travail.
C'est notre OS.
C'est important de se tenir à jour parce qu'effectivement, comme tu dis, il y a de
plus en plus de choses qui sont implémentées nativement et sans JavaScript.
Donc on arrive à faire des choses de plus en plus sans avoir besoin de utiliser JavaScript,
etc.
Donc c'est très intéressant pour la perte.
Pour nous aussi c'est plus simple.
Donc ça c'est une très bonne chose et il faut se tenir à jour.
Donc l'épisode est là pour ça.
C'est cool.
Exactement.
Beaucoup de gens ont, et avant de tomber dans la tannière du lapin blanc de chez Google
avec toutes les balises, un petit retour vite fait sur les commentaires.
On a eu pas mal de commentaires qui étaient assez instructifs, justement sur de la migration
de symphonies.
Oui en fait, on avait parlé de Rector PHP dans le dernier épisode, un système pour
améliorer le code de PHP, etc.
Et on a eu deux commentaires quasiment les mêmes où ils expliquaient que eux utilisaient
Rector pour migrer des applications symphonies d'une ancienne version à la plus récente,
etc.
Donc ça leur permet de migrer facilement.
En fait Rector, comme tu le disais, ça suggère du code et tu l'acceptes ou pas.
Et après tu fais ta migration beaucoup plus facilement, etc.
Si tu n'avais pas Rector.
Donc outil très utile pour des applications un peu anciennes qui ont migré sur des versions
plus récentes.
Il y avait ça.
On a aussi un commentaire parce qu'il y a eu la réacte conf jusqu'à la veille ou
deux jours avant l'épisode de l'an dernier épisode.
On n'en a pas trop parlé.
Il y avait une annonce que personne n'attendait.
En gros, c'était l'annonce de la réacte conf.
C'est Remix en fait qui n'aura pas de version 3 de Remix a priori, de Remix.
Parce qu'en fait il y avait Remix et Ria Krutteur qui étaient quasiment identiques
en fait en termes d'appui.
D'ailleurs, j'en avais parlé une fois qu'il y avait déjà tout dedans en Ria Krutteur
les actions.
Ils avaient vraiment...
Ils s'en ont du compte qu'en fait c'était double travail de tenir ça à jour.
Donc ils ont décidé de migrer, enfin de repasser tout sur Ria Krutteur version 7 qui
va sortir.
De fusionner quoi.
Ouais, de fusionner et de ne pas faire de V3 en Remix en fait et de maintenir que Ria
Krutteur.
Il était les dépendances et aussi le temps de dev.
Ouais, ouais, ouais.
Donc ça a rien de recoder deux fois la même chose.
Personne n'attendait ça.
C'était l'annonce de la raconte.
Et puis il y a aussi V2L sur le...
Alors il y a le React compiler qui est sorti.
Donc en plus de la version 19 de React qui est bientôt en version stable, il y a le
React compiler qui est sorti officiellement, enfin qui n'est pas encore totalement terminé
mais il y a un playground qui est disponible.
On peut tester le code et ça nous donne le code compilé tout ça.
Donc il y a eu pas mal de tests, de vidéos, tout ça que j'ai déjà vu et il a l'air
assez efficace pour rendre un code vraiment plus performant.
Même il y a des gens qui volontairement insèrent des choses qui ralentissent le code.
Et le compiler est capable de le rendre rapide en fait même si voilà.
Donc il est plutôt efficace.
Donc en fait, tu es en train de dire qu'on va pouvoir coder n'importe comment et le
compiler va gérer la perve pour nous.
C'est bien ça.
On va coder comme des chèvres et puis c'est peut-être ce qu'on fait déjà.
C'est exactement ce que j'allais dire.
Je veux dire peut-être qu'on le fait déjà et on est persuadé qu'on est bon mais en
fait on ne l'est pas du tout.
On a déjà parlé.
C'est vraiment la raison de pourquoi le React compiler est créé.
C'est qu'on est sur certaines notions, on n'est pas très bon et donc le React compiler
va régler tous ces problèmes.
Donc voilà, même si on n'est pas bon, on en a un code de performance.
Et par contre, petite déception d'un autre côté, c'est que pour l'instant, il sera
disponible.
Ce n'est pas un truc à part au quoi tu vas rajouter.
C'est un plugin Babel.
Je crois qu'il y a peut-être une autre version mais voilà, c'est un truc Babel.
Tu vois, quand on rajoute sur ton tooling ça.
Donc c'est un peu dommage.
Après, de toute façon, ce qui est toujours problématique, c'est cette notion de build.
En fait, bokeh, tu as un nouvel outil qui va compiler.
Donc de toute façon, si ça compile, c'est que c'est dans ton build, à un moment donné,
il va falloir à l'insérer dans ta phase de build, dans ton pipe de construction.
Et donc comme tout outil, il faut l'insérer au bon moment avec tout l'artifice qui va
arriver.
Mais en même temps, c'est la contrepartie inévitable.
Tu ne peux pas faire ça.
Après, je pense que ça va évoluer sur d'autres tools.
Moi, personnellement, Babel, j'utilise plus depuis un moment.
Donc voilà, on verra.
Il y a d'autres versions qui vont sortir.
En tout cas, c'est prometteur.
Ça, c'est clair.
Donc voilà, intéressant à suivre.
Cool.
Allez, on part tout de suite sur Google.
On retourne sur Google Io et toutes les annonces qui ont été faites.
Alors, je crois que depuis le 24 mai, on est passé sur la dernière version de Chrome,
le moteur de Chrome.
À savoir que Chrome, le navigateur, mais Edge, utilise le même moteur.
Donc c'est la version 125, je crois, ou 120.
Et Firefox utilise et a aussi été mis à jour, on va dire, courant mai.
En fait, ils ont un peu synchronisé toute leur mise à jour pour sortir une des nouvelles
versions en temps et en heure pour cet événement.
Ouais, sauf Safari qui traîne un peu les pieds.
Mais on ne va pas en reprendre.
C'est bon.
Bref.
Pour donner une idée des versions sur lesquelles on est, niveau navigateur, notez bien que
la dernière Chrome, peut-être qu'il y en a une, on est quoi ?
On est 29 mai.
Je ne pense pas qu'il y en a une depuis.
125 sur Chrome et Edge, 126 sur Firefox et 175 sur Safari.
Qui est le petit monton noir des navigateurs.
Même s'il n'y en a plus que trois, navigateur aujourd'hui, c'est plus important.
C'est quand même vachement plus facile, même si on rajoute parfois les moteurs sur
un mobile qui sont légèrement différents.
Ouais, alors ça c'est notre problème.
C'est correct.
Par raison de l'on a parlé.
Ok.
Ils ont fait une petite vidéo qu'on mettra évidemment dans les liens de l'épisode
où en fait, ils nous brossent un peu la dernière tendance sur le web UI, qui est
une version un peu designée.
Ils vont parler plutôt de design ou vraiment d'éléments HTML clairement.
Un peu les deux sur principalement CSS, mais il y a un peu de HTML aussi.
C'est vraiment les choses qui arrivent, qui sont disponibles, qui vont arriver.
Il y a pas mal de choses.
En fait, il y avait, concernant notre web développement, il y a deux vidéos principales
sur le web UI.
Là c'est ce que tu dis.
Il y en a une autre sur les web platforms, je sais comment ça s'appelle.
Et puis après il y avait deux, trois petites vidéos d'un quart d'heure qui détaillent un
peu les animations, des choses comme ça, les PWA.
Il y a quelques vidéos.
Mais les deux grosses vidéos sont là, on va en parler.
Donc la première était principalement CSS HTML.
Excellent.
Et ça vaut le coup de s'infliger les 45 minutes ?
Oui.
C'est too much, c'est un peu long ou pour le coup ils ont vraiment condensé et ça
vaut le coup.
Alors si vous écoutez l'épisode, vous pouvez vous passer à regarder.
On l'a fait pour vous.
On l'a fait pour vous.
Non, mais après c'est toujours intéressant.
Franchement, je recommande toujours de reconnaître ça parce qu'il faut se tenir au courant pour
faire évoluer ces façons de coder.
Donc oui, c'est toujours intéressant de regarder.
Mais grâce à notre épisode, vous pouvez éviter.
Il y a une grosse partie de cette conférence où ils ont parlé des animations.
Il y a de plus en plus d'animations natives maintenant qui s'intègrent directement.
Alors pour ceux qui sont un peu nostalgiques ou qui voudraient comprendre toutes les animations,
on a fait une série il y a un an ou deux, je ne sais plus maintenant, où on parlait
en fait de toutes les animations CSS, JavaScript, 3D, l'autilite ou ça.
Il y a une série d'animations.
Vous pouvez aller voir directement ces épisodes là où on vient parler en fait vraiment des
fondations.
C'est comment on utilise l'animation, qu'est-ce qui est déclenché d'un autre navigateur.
Et tous ces concepts d'animation sont toujours les mêmes.
Après, c'est les outils qui vont les déclencher, qui vont évoluer.
Et là, pour faire cours, on rentre dans le natif et on va pouvoir utiliser des scrolls
driven animation.
Donc c'est des animations qui se déclenchent au niveau du scroll.
Alors historiquement, on a des grosses librairies comme JSAB qui vont venir interagir où on
va pouvoir mettre un gros paquet de JavaScript pour faire cours, pour déclencher des événements
au scroll et animer des éléments de la page.
Et maintenant, ça passe en natif ?
Oui, ça passe en natif.
Alors c'est vrai, comme tu dis, les scrolls animation, c'est très à la mode depuis un
petit moment, mais c'est même insupportable sur certains sites.
Mais c'est très, voilà, les marketing des designers, tout ça.
Ils adorent ça.
Donc le problème, c'est que comme tu dis, il faut mettre JSAB, il faut mettre une librairie,
même s'ils ont fait de gros progrès au niveau du poids, etc.
Les perf, oui.
Ouais, les perf, tout ça.
JSAB est facile à l'emploi, tout ça.
C'est celle qui est le plus utilisée, mais effectivement, c'est en natif.
Alors attention, la partie animation qu'on va détailler là, c'est principalement disponible
que dans Chrome et dans Edge.
Et là, tout s'effondre.
Voilà, tout s'effondre pour l'instant parce qu'en fait, certaines sont disponibles
en flag et pourquoi qu'il y en a même.
La scrolls drive animation, c'est que en flag sur Firefox.
Et par contre, tout ce qui est le reste de Safari ne prend rien pour l'instant en charge.
Bon, après, c'est pas très grave parce que finalement, tu peux peut-être faire
un truc un peu progressif.
Voilà, si ça le prend en charge, tu les mets.
Si ça le prend pas en charge, tant pis, il n'y a pas d'animation.
Donc là, ce qu'on Chrome, on les animation, les autres n'ont pas.
Ce n'est pas très grave non plus.
Sauf si ton client est sur Safari et te dit, mais moi, j'ai pas l'animation.
Et là, tu es mal.
Après, il y a pour revenir sur les animations,
il faut bien garder en tête aussi que le mieux est l'ennemi du bien.
Et souvent, on aurait tendance à en mettre trop.
Alors là, je vais enlever ma casquette de développeur et mettre plus celle
d'un designer ou de ou en tout cas, quelqu'un qui va se concentrer sur l'Hex.
Même si nous, en tant que développeur, à un moment donné,
il faut qu'on se base aussi sur, qu'on s'intéresse à un minimum sur l'Hex.
Mais trop d'animation, en fait, vient, vient totalement tuer l'expérience
de navigation. Donc il faut trouver la bonne proportion.
Et pour revenir sur le sujet des animations, scroll.
OK, ils ne sont pas disponibles.
Ce n'est pas grave.
On vient dégrader l'expérience, mais on vient pas.
En fait, ce n'est pas un moins qu'on en...
C'est une expérience en plus qu'on donne à ceux qui ont le navigateur
compatible avec les animations qu'on va faire.
Ils vont avoir une expérience, dit enrichi,
mais les personnes qui n'ont pas les animations,
ils n'ont pas...
On n'a pas dégradé leur expérience de navigation à tel point
que ça allait totalement pourri.
Ils vont voir les mêmes éléments,
sauf qu'il y aura moins l'effet.
C'est tout.
Oui, c'est clair.
Et puis ce qui est cool, c'est qu'une fois que c'est implémenté,
si dans un an, Safari le prend en charge,
automatiquement, ça va fonctionner sur Safari.
Donc tu travailles pour l'avenir.
En gros, donc voilà.
Après, c'est quand même un petit investissement parce que
toutes ces technologies là,
justement, ils ont fait une petite playlist
où en fait, clairement, le nom de la liste, c'est Master the Art
of Scroll Animation.
Donc, c'est comment maîtriser l'art subtil,
on va dire, du Scroll Animation.
Donc, ça, c'est super intéressant parce que c'est assez didactique.
C'est des petites vidéos de 5, 6 minutes
où vraiment, il prend étape par étape
et il nous prend par la main pour justement
mettre en place ce système
et en tout cas, maîtriser cette nouvelle API de Scroll Animation.
Ouais, c'est top.
Il y a une toute une playlist de vidéos.
Donc, ça, c'est parfait.
Donc, il y aura le lien pour si vous voulez apprendre plus sur les animations.
Donc, le truc, c'est que voilà, c'est quand les éléments
rentrent dans la page sont visibles, il se passe une animation, etc.
Et tout ça, c'est du CSS.
C'est purement CSS.
Donc, c'est plutôt pas mal.
Ça, c'est un peu comme les timeline,
tout ça qu'on utilise déjà pour les transitions, tout ça.
Donc, c'est vraiment pas trop compliqué à utiliser.
Ça donne des effets plutôt performants, c'est natif.
Donc, c'est top.
Et puis, en plus, il y a le DevTools.
En fait, maintenant, tu peux inspecter en fait
des Scroll Animation.
Ah, ça, c'est...
Ça fait vraiment marcher rien, et tout.
Donc, c'est...
Enfin, sur Chrome, évidemment.
Donc, c'est plutôt...
Ouais, c'est...
Enfin, je pense qu'il faut commencer à se mettre tranquillement dessus,
à prendre comment ça fonctionne,
et puis peut-être implémenter un petit peu quand vous êtes sûrs
que vos visiteurs, tout ça,
sont sur Chrome ou des choses comme ça.
Dans un temps, c'est vrai qu'on peut être amené à faire des applications
où on sait précisément que là, ça sera du Chrome
ou des trucs comme ça.
Et dans ce cas...
Après, toute la difficulté,
elle est le ratio entre le temps passé sur l'animation
et qui paye.
Tu vois, parce que, en fait,
parce que c'est une nouvelle technique, c'est super cool,
c'est super chiadé, ça fait un effet,
wow, de ma boule, là-dessus, on est d'accord.
Par contre, on peut vite passer du temps
à implémenter ça, à mettre en place ça,
et il faut que le client aussi soit en accord
avec le fait de payer ou le projet, en fait,
soit calibré de telle manière que,
ok, on va chercher cet effet, wow,
mais ça prend du temps,
et le temps, c'est de l'argent sur des devs
où on doit industrialiser le truc.
C'est toujours le compromis un peu compliqué.
Par contre, j'avais regardé,
on suit déjà depuis pas mal de temps les View Transition,
donc c'est des animations qui se déclenchent
quand on navigue d'une page à l'autre.
On avait vu que ça commençait à arriver tranquillement.
Est-ce qu'il y a eu des évolutions là-dessus ou pas ?
Oui, alors c'est déjà les self-documentes View Transition,
donc quand c'est une application interne,
tu navigues entre les pages,
donc là tu peux animer la transition entre les deux pages,
prendre un élément.
Alors souvent l'exemple qui est donné,
c'est la photo qui s'agrandit, etc.
Quand tu es dans une liste,
la photo de la liste de l'item, elle va s'agrandir.
C'est souvent l'exemple qui est donné,
et c'est vrai que ça rend bien,
c'est ce qu'on retrouve dans le mobile aussi,
beaucoup dans les applications.
Donc ça, c'est super sympa.
Voilà, les applications natives.
Donc ça, c'est cool.
Évidemment, c'est toujours pas prêt en compte sur Firefox,
et Safari, en draft,
je ne sais pas où ils en sont,
mais c'est un petit peu en standby.
Mais bon, ça va arriver.
Mais en tout cas, sur Chrome et Edge,
ça fait depuis la 111 que ça existe,
donc ça fait quand même un petit moment.
Donc ça, c'est déjà quelque chose qui est possible à utiliser.
Après, il faut savoir aussi
qu'il y a les View Transition sur les transitions de route,
mais on a aussi des micros,
tout ce qui est micro-interaction,
qui est possible, pareil, avec ce même système.
C'est-à-dire quand tu as animé des éléments de liste,
tout ça, tu vas supprimer un élément dans une liste,
tu vas faire une animation.
Donc il y a toutes ces possibilités d'animer des micro-interactions,
et ça, c'est pareil, c'est sur les View Transition
aussi qui prennent ça en charge.
Donc on parle beaucoup des routes transition,
mais il y a aussi toutes ces micro-interactions
qui vont être possibles.
Et pour le coup, ça, ça fait un effet vraiment sympa
sur rajouter un item, enlever un item d'une liste.
Ou les prier, tout ça.
Exactement.

Donc ça, c'est pas mal.
Ouais, top.
Ça vient d'arriver, ça, c'est tout frais.
C'est sur les Chrome et Edge 125, tout ce qui est micro-interaction.
Mais enfin, si tu...
Il y a plein d'exemples déjà et ça donne...
Ouais, ça, c'est vraiment...
C'est une des choses qui est vraiment intéressante.
Et ce qui arrivera bientôt aussi,
parce que tu as les View Transition au niveau des routes
qui internent donc l'application
et il y a les Cross Document View Transition qui vont arriver.
Donc ça, c'est pareil, c'est une transition entre les routes.
Mais par exemple, tu...
Tu as un site, c'est sur un domaine,
et puis tu vas envoyer les gens sur le même domaine,
mais un sous-domaine, tu vois.
C'est ton domaine, double slash.dev,
sauf que ça va être podcast.double slash.dev.
Donc là, entre ces deux domaines,
normalement, ça fonctionne pas les View Transition.
Et là, c'est...
Donc, tu as Chrome 126 et Edge 126,
et toujours pas Firefox, Safari, mais bon, voilà.
C'est au Chrome.
Et on pourra aussi faire une transition
entre les domaines sous-domaine, tout ça.
Donc ça, c'est pas mal aussi.
OK, donc ouais, c'est...
En fait, on ramène l'animation
donc pas au niveau de l'interne du site,
mais on passe au niveau supérieur.
Et donc, c'est la page directement,
enfin, le document dans ton navigateur.
Ouais, ouais, ouais.
Donc voilà, les animations, ça arrive,
mais pour l'instant, que sur Chrome et Edge.
Dac, Dac.
Autre point aussi,
des... le fameux pop-over
qui arrive quasiment en natif,
enfin, pas quasiment, même en natif.
Là, pour le coup,
t'as fait un petit code-pen qu'on pourra partager.
0 CSS, 0 JavaScript.
Et en fait, au clic du bouton,
on affiche, en fait,
ça fait un peu l'équivalent d'une modale,
en fait, on pourrait dire.
Et on l'affiche directement au clic.
Et tous ces fonctionnements,
si on clique en dehors de cette modale,
ça s'efface.
Ouais, donc là, en quoi, en trois attributs,
même pas, non, deux attributs,
c'est parti, quoi.
Ouais, tout ça.
Ah non, c'est super.
C'est magique.
Ouais, c'est super magique.
Après, on rajoute un petit peu de style
pour faire un petit effet sympa
avec des animations en CSS pure.
Et puis, c'est vraiment top, quoi.
Et donc ce pop-over arrive...
Alors, ça, est-ce que c'est déjà utilisé accessible ?
Ouais.
Pas crôme, ça fait un peu de temps.
C'est implementé depuis un petit moment,
la 114, donc ça fait peut-être plus d'un an.
Les Firefox, ça arrivait, et Safari 17.
Donc ça, c'est récent dans Firefox, Safari,
mais voilà, ça marche dans tous les navigateurs.
Donc petit à petit, d'ici un an, un an et demi,
on pourra dire qu'une grosse majorité
des gens le auront disponible avec les mises à jour.
Donc, ouais, ouais.
Juste avec l'attribut, tu mets juste un...
Comme tu...
On va expliquer pour ceux qui sont en audio,
on attribue...
Donc le div sur un div, tu mets pop-over, l'attribut,
avec un ID, et ensuite, le bouton target,
en fait, pop-over target, c'est l'ID du div.
Et puis, voilà, tout simplement,
il n'y a aucun JavaScript, c'est natif.
Magique.
Magique.
Magique, magique.
Après, tu vois, je suis curieux de savoir si,
en fait, les grosses librairies de composants
qui ont été designées, voilà, souvent,
on va dire, pour faire court,
mais beaucoup, beaucoup de dev frontes ou de gros projets,
en fait, vont s'appuyer sur cette librairie de composants.
Je pense à Shad, CN, ou Vutify, ou Material Design,
voilà, ou en tout cas, une librairie de composants.
Je suis curieux, en fait, si ces librairies de composants
vont faire la migration pour enlever au fur et à mesure
leur JavaScript, tu vois.
Je suis vraiment curieux de ça.
Je pense, oui, ils vont le faire,
mais pas dans l'immédiat, en tout cas,
parce qu'en fait, quand tu as des librairies comme ça,
qui sont utilisées mondialement,
tu ouvres un panel de browser,
toi, si tu n'as pas un certain pourcentage,
tu ne peux pas implémenter Popover,
parce que ça ne manchera pas.
Donc, souvent, dans les vidéos,
là, surtout celle de Rachelle Andrew,
elle dit souvent, par exemple, le Popover,
elle dit, en 2026, on sera assez couverts
pour l'implémenter totalement dans les librairies,
tout ça, il y aura assez de couverture.
Et on va reparler de Rachelle Andrew.
Mais oui, en fait, l'idée, c'est de commencer
à garder un œil dessus,
et après, ça arrivera de manière native partout
dans toutes les librairies,
mais de toute façon, il faut un temps de transition
entre l'apparition et l'utilisation,
on va dire, de manière générale et globale.
Mais voilà, mais après, comme je disais,
si jamais tu fais une web app
ou un truc comme ça pour une entreprise spécifique,
tu sais que les personnes vont utiliser Chrome
sur leur ordinateur, c'est un truc intranet de tout ça,
et là, tu peux l'utiliser,
parce que tu connais ta cible et tu sais que c'est Chrome.
Yes.
Autre point aussi,
ils nous ont fait une introduction
sur le CSS Encore Positioning API.
Alors, qu'est-ce que c'est à quoi ça sert ?
Alors, ça, c'est un truc super intéressant,
vraiment très intéressant, alors c'est encore tout frais,
mais ça va être top, top, top,
c'est de pouvoir positionner un élément par rapport à un autre.
En fait, tu l'accroches dessus,
donc tu lui donnes cette ancre,
et il reste positionné par rapport à cette ancre,
peu importe si cet élément bouge, se déplace, etc.
Tout ce que tu veux.
Donc, tu peux mettre à gauche, à droite, etc.
Donc, tu peux faire des tout-le-tips,
un peu comme on fait.
Dans pas mal de trucs,
mais pas que ça, en fait, ça va beaucoup plus loin que ça.
Ça peut être pour la navigation,
pour le sous-menu qui s'ouvre, etc.
Et il y a un panel de positionnement qui est disponible,
et tu as même des choses un peu plus avancées
où la pop-up va se déplacer si elle n'a pas assez de place.
Tu la positionnes à droite, par exemple,
et elle n'a pas assez de place,
elle va se mettre en dessous,
ou des choses comme ça.
Elle va s'auto positionner.
Donc, ça va assez loin dans les réglages,
et c'est quelque chose qui va être vraiment très sympa à utiliser,
parce que ça va nous faciliter la vie pour positionner des éléments.
Donc là, on donne vraiment l'exemple de cet tout-le-tip qui s'ouvre,
mais il donnait d'autres exemples sur les navigations,
enfin on peut avoir plein d'exemples.
Et oui, je pense que c'est un élément qui est super intéressant à suivre,
et j'ai hâte de pouvoir l'implémenter.
Nice.
Parce qu'en fait, oui, en fait, ce qu'on se rend compte,
c'est une sorte de position absolue ou relative,
mais intelligent,
où on a beaucoup plus de finesse et de contrôle sur les possibilités.
Donc...
Tu le fixes, tu prends pour un élément.
Tu dis, ça, c'est ton élément, tu restes accroché.
Un peu de la même manière qu'on fait avec du relatif absolu,
sauf qu'en fait, il y a toujours cette notion de parent et enfant.
Enfin, d'encre, on va dire,
pas de maître, je ne sais pas comment on pourrait dire,
mais il y a un élément qui va être l'encre
et l'autre élément qui va être l'affichage qu'on va vouloir positionner.
Donc c'est vraiment une connexion entre deux éléments
qui va nous permettre de faire des affichages...
Oui, les attributs,
c'est que tu donnes un nom d'encre
et ensuite, tu positionnes par rapport à cet encre, ce nom.
Donc là, il y aura un lien sur l'explication de la PDI, comment elle fonctionne.
Et ensuite, il y a aussi une page qui donne plein d'exemples
sur les différentes positions, etc.
Donc tu cliques sur les éléments et ça te positionne différemment.
Donc plein d'exemples.
Et...
Interessant.
Oui, là, il y a une démo interactive
où on voit parfaitement la propriété
avec la valeur dans laquelle on a...
la valeur qu'on a rentrée
et on voit directement, visuellement,
quel impact ça va avoir.
Après, ce que je vois, ce qui peut être super cool,
c'est mettre de l'intelligence
parce que s'il n'y a pas assez d'espace,
comme tu disais,
mon tout le type, je voudrais qu'il s'ouvre à droite,
mais peut-être que la taille de l'écran ne le permet pas de mon utilisateur,
sauf que je ne peux pas contrôler la taille de mon écran.
Donc, le premier...
OK, on va calculer si l'espace est disponible et tout ça.
Ah non, c'est hyper complexe.
Voilà, c'est...
Et tu commences à faire un GIF là, c'est...
Exactement.
Et là, on ouvre la boîte de pendants
avec des niveaux de complexité hallucinants.
Là, en fait, on va pouvoir faire ça nativement
et de manière automatique.
Donc, top.
Oui, et tu vois, par exemple,
tu as un tout le type qui s'ouvre au-dessus de l'élément.
Il reste ouvert et tu scrolls.
Donc, à un moment donné, il arrive au niveau du navigateur.
Et en fait, tu peux le faire, passer en dessous, en fait.
Tu vois, par exemple, automatiquement.
Et ça, c'est des choses, oui, effectivement, tu peux le faire en GIF.
Alors, vas-y, c'est...
Eventments, scrolls, etc.,
calcul, tout ça, performance, les std.
Donc...
Ouais.
C'est une propriété hyper intéressante.
Pour moi, c'est une des plus belles propriétés
qui arrivent prochainement dans les nébégateurs
parce que ça va nous aider à beaucoup de choses, en fait.
Ça vous simplifie la vie et toujours, tu vois,
encore un truc pour Power, c'est s'enlève du JS.
Ça, ça enlève encore du JS.
Donc, on enlève des JS.
Bientôt, on fera plus de JS, peut-être.
Je n'y crois pas.
Je n'y crois pas.
Je n'y crois pas.
Mais en tout cas, la tendance va là-dessus.
Nice.
Autre élément.
Je n'ai pas dit juste vite fait,
c'est disponible dans Chrome 125 et Edge 125.
Et évidemment, pas sur Firefox, c'est pas sur Safari.
Merci.
C'est très patient.
Allez, autre point aussi qui est sorti,
c'est le styleable select élément.
Ouais.
Donc, en clair, quand on a un menu select,
on va pouvoir en fait,
designer les éléments des options.
Sauf qu'on va pouvoir avoir beaucoup plus de contrôle là-dessus.
C'est la nouvelle balise HTML.
C'est select option, c'est ça ?
En fait, non, c'est plus simple que ça.
Oui, après, il y a des balises un petit peu supplémentaires.
Mais c'est plus simple que ça.
C'est qu'en fait,
c'est Huma, c'est le qui faisait la présentation CSS.
Là, elle avait déjà, elle montre un tweet de 2017 ou 2018,
je sais plus où elle dit, on ne peut toujours pas styliser les selects en fait,
en CSS.
C'est toujours aujourd'hui, ce n'est toujours pas disponible.
Et voilà, c'est vrai que c'était un problème.
En fait, on peut, alors on arrive avec du CSS stylisé aujourd'hui,
un peu plus poussé, mais c'est toujours, voilà, du hack, etc.
Et en fait, ça arrive là prochainement.
Alors c'est encore expérimental,
mais on va pouvoir styliser totalement les selects en fait.
Donc, il donne l'exemple du drapeau, etc.
Donc là, voilà, c'est l'exemple,
par exemple, celui-là, le select avec la data liste,
où tu as des options avec le drapeau, etc.
Tu peux vraiment styliser comme tu veux avec le CSS, tout ça.
Donc en fait, les selects vont devenir totalement stylisables.
On va dire des éléments HTML classiques,
et ce qui fait qu'on pourra injecter tout ce qu'on veut,
par exemple, une petite image à côté du nom.
Oui, mais plus main que ça encore.
Tu peux vraiment aller beaucoup plus loin.
Donc c'est encore expérimental, mais tu vois,
tu peux le faire avec un bouton dedans, etc.
Tu peux vraiment customiser l'intérieur du select,
et puis voilà, le rendu est totalement stylisable.
Par contre, ça va poser un problème aussi,
et c'est peut-être pour ça que sa farie est moins un peu, on va dire,
friand de ce genre de nouveautés.
Parce qu'en fait, ça oblige aussi à mettre à jour
le comportement de iOS et de Android.
Mais en fait, les selects sont interprétés différemment
sur nos téléphones,
parce qu'on a des selects qui sont, on va dire,
un peu nativement interprétés.
Et là, si on vient modifier les règles,
eux aussi, il faut qu'ils modifient leurs règles d'affichage.
Et là, c'est peut-être beaucoup, beaucoup moins marrant pour eux.
Et c'est peut-être pour ça aussi qu'ils sont hyper réticents
à mettre à jour parce que ça les force à faire taquiller de réécriture.
Ah oui, c'est totalement.
Bah oui, c'est clair.
Alors, apporte pas beaucoup d'argent, tu vois, Apple.
Donc, ça ne te reste pas fort.
Et t'es dur, Apple, t'es dur.
Après, ce qui est aussi va être compliqué,
c'est qu'on va, vu qu'on va pouvoir designer et interpréter
avec des couleurs, des bordeurs, des choses comme ça,
mais rajouter des images,
aussi, ils vont perdre le côté uniformisation de leur kit UI.
Et donc, ça, alors, c'est à la fois bien et pas bien,
parce que c'est super bien,
parce qu'en tant que dev, on récupère le contrôle,
on peut designer et afficher ce qu'on veut parfaitement au pixel,
comme on veut.
Ce qui est pas bien, c'est qu'on va casser un peu les trucs natifs.
Et donc, potentiellement, j'entends déjà des designers dire oui,
mais en fait, les gens sont habitués au kit UI de chez Apple ou de chez Android,
et donc, ils s'y retrouvent,
si là, ça change, ça bouscule les habitudes, tout.
Ouais, je sais pas.
Par contre, ce qui est sûr, c'est que sur l'implémentation,
là, ils vont, ça va transpirer, quoi.
Ouais, t'as raison, c'est vrai que,
non, c'est vrai que t'avais pas pensé à ça, tu vois,
donc t'as raison de dire ça,
effectivement, c'est un aspect à prendre en compte.
Après, les designers, comme ils ne font jamais les maquettes mobiles,
ce n'est pas un problème.
Et là, tu vas, on va se faire tracher par tous les...

Par tous les gars qui jouent à Figma toute la journée.
À chaque fois que j'ai des maquettes,
et la version mobile, tu fais comme tu veux.
Ouais, chaque fois, c'est ça.
Ok.
Voilà, voilà.
Top.
En tout cas, c'est expérimental.
Donc, Zspoca, on flag sur Chrome, et puis pas du tout pour le reste.
Mais c'est encore expérimental, mais bon, à suivre.
Aujourd'hui, on sait que ça sera possible dans quelques temps,
donc à suivre, à voir comment ça évolue.
Après, même sur l'expérimental,
on se rend compte qu'aujourd'hui,
le temps de latence entre l'expérimental
et l'implémentation native dans les navigateurs est assez courte.
Et donc, au final, ça pourrait arriver très, très rapidement.
Au final.
Après, celui-là, c'est comme tu dis,
c'est un élément qui est quand même central,
et c'est peut-être plus complexe que ce qu'on imagine.
Donc effectivement, celui-là sera un petit peu plus long.
Avoir.
Avoir.
Un autre élément qui débarque et qui vient en native,
c'est l'élément, on va dire, details.
Mais ce que nous, on appelle souvent accordéon,
le côté...
Je clique et ça va étendre les propriétés,
donc les propriétés sont cachées.
Souvent, c'est utilisé pour les foires aux questions.
Souvent, voilà, les FAQs.
On clique sur la question,
BIM, on a la réponse qui est automatiquement développée et affichée.
Et donc ça, c'est la balise details, je crois.
Alors en fait, la details,
c'est en fait ce qu'ils ont rajouté, ce qui arrive.
En fait, la details, c'est déjà dispo et personnellement,
je l'utilise pas mal.
C'est une très bonne balise.
Alors, à l'image de la pop-up,
ça te permet justement de déplier les éléments sans GIS.
Tu mets aucun GIS, là, tu mets details sur ma summary.
Et quand tu cliques sur summary, ça t'ouvre le dessous.
Donc c'est parfait.
Moi, j'adore utiliser cette balise.
Tu peux la styliser comme tu veux, etc.
Mettre des flèches avant, après, ce que tu veux.
Alors, on a déjà discuté la dernière fois.
Non, il n'y a pas d'animation quand tu ouvres.
Effectivement, on m'avait déjà dit,
il y a déjà un gars qui m'a dit,
ouais, moi, je bossais avec une agence,
j'ai voulu l'utiliser, effectivement, il n'y a pas d'animation,
donc ils ont de suite refusé, etc.
Les animations, voilà, un peu brutales.
Les animations arrivent.
Je sais que ça va arriver.
Ne serait-ce que l'ouverture un peu plus en transition.
Mais dans l'ensemble, c'est vraiment une super balise.
Et en plus, c'est totalement accessible, etc.
Donc ça, c'est top.
Enfin, moi, je recommande.
On en reparlera de toute façon après.
Mais ce qui arrive là dans la conf, c'est l'exclusive accordion.
En fait, c'est le fait qu'actuellement,
quand tu as plusieurs détails,
tu peux les ouvrir tout en même temps, etc.
Tu as tendu à ouvrir une, tu ouvres...
Si tu en as une qui est ouverte et que tu ouvres l'autre,
alors, tu es déjà sur l'exclusive.
Normalement, sur celui-là, voilà,
tu ouvres les deux en même temps, etc.
Et bien, ce qui arrive, en fait,
c'est le fait de justement ce que tu faisais justement,
c'est que si tu en as une ouverte,
elle va se fermer et l'autre va s'ouvrir, en fait.
C'est un attribut qui te permet de n'ouvrir qu'une à la fois.
Ça, c'est la nouveauté qui arrive.
Parce que, nativement,
tu peux ouvrir toutes les questions et t'as toutes les réponses.
Et là, c'est le fait de s'en sélectionner qu'une seule.
Et avec l'ajout d'un petit,
c'est quoi, ça sera un tel...
Mais un nom.
En fait, tu mets le même nom sur les détails.
D'accord.
Donc, ça veut dire qu'ils sont dans le même groupe.
Et donc, à partir de là, en fait,
simplement, il sait qu'il doit fermer l'autre et ouvrir ça là.
C'est tout simplement.
Et de manière native, il va...
Et c'est totalement native, sans GIS, rien du tout.
Enfin, moi, c'est une de mes balises préférées, dernièrement.
Ça doit l'utiliser et elle marche super bien.
Et tu peux vraiment la styliser à fond.
OK.
Voilà.
Donc là, c'est là.
Franchement, je vous recommande de l'utiliser parce que c'est top.
Parfait.
Sauf si votre agence vous dit,
« Non, je veux une perfor. Je veux de la animation. »
C'est pas grave.
Je vous invite à aller avoir la librairie GIS
qui s'appelle AutoAnime.
Et vous verrez que, en fait,
c'est une surcouche qu'on avait déjà parlé sur l'épisode d'animation.
Mais la librairie AutoAnimate
est plutôt très sympa
parce qu'elle va automatiquement interpréter les éléments qui changent dans le domes
et va mettre un petit effet sympa.
Donc en un attribut, alors oui, il y a du JavaScript.
Oui, c'est pas native.
Il y a du JavaScript.
Mais on peut faire des animations ultra sympas et ultra chiadées
en ajout que avec un mot.
Et c'est compatible en plus nativement en GIS,
mais React, vu Angular,
tous ils ont fait les sublibraries
et on met le bon attribut dans le composant.
Et pfff, ça fait de l'animation.
Yes.
Euh...
Yes, on déroule size, sizing, content.
C'est quoi ?
C'est sur les champs, en fait, de texte
où on va pouvoir les resizez.
Et c'est quoi exactement ?
En fait, tu mets cet attribut,
field-siting, content et le champ, en fait,
tu vas citer un texte à réa qui a une certaine hauteur,
en fait, et en fait, tu vas taper,
tu vas revenir à la ligne, etc.
Et après, il va s'agrandir tout seul,
faire un mesure que tu vas taper.
Enfin.
Il n'y aura pas de barre de scroll.
Le truc va s'agrandir et ça sera beau.
Enfin.
Enfin.
Ouais, ouais.
Alors, il y a des librairies qui gèrent ça.
Déjà, mais c'est vrai que c'est pour l'expérience utilisateur,
c'est pourri, quoi.
C'est vraiment...
Tu ne peux pas faire sans ça, sinon,
bah, tu vas dire, ton input de texte
est pas du tout...
Enfin, c'est pas ergonomique, c'est pas agréable à taper.
Et donc, tu pètes un câble.
Donc, t'es obligé, en fait, d'avoir quelque chose pour gérer ça.
Et le fait que tu n'es rien à faire et que ça soit natif, c'est...
Ouais, et puis en plus, c'est juste un truc à mettre dans le CSS.
Donc, alors, ça sera pris en compte sur Chrome 123 et Edge.
Et puis, si c'est pas pris en compte, bah, tant pis.
Et si c'est pris en compte, ça marche.
Donc, on peut l'utiliser déjà aujourd'hui pour les Chrome, tout ça.

Nice.
Cool.
Nice.
Des petits HR.
On peut utiliser des HR.
HR et une select, ouais.
Dans les selects, en fait,
tout simplement, on peut mettre des HR entre les options pour séparer
et donc mettre une barre.
Ça semble...
C'est pas grand chose, mais...
Ça change la vie.
C'est un tout petit truc, mais...
Il y a des groupes, tu peux aller des groupes séparer, tout ça.
C'est cool, quoi.
Et c'est pris en compte.
Nice.
Ça, c'est aussi disponible dans pas mal de browser.
Alors, après, je sais pas si tu mets un HR dans le select,
si ça déconne après dans les ceux qui sont pas pris en compte.
À tester, j'ai pas testé, mais...
Bon, à voir.
Nice.
Ah, la suivante, elle est top.
La suivante, elle est...
Align Content for Block.
Wow, c'est quoi ça ?
Et ben, en fait, c'est enfin,
c'est-à-dire en 2024,
on va pouvoir mettre en CSS Align Content...
C'est quoi, c'est Middle ou Center, je sais plus.
Ouais, Center.
Et en fait, ton contenu va s'aligner automatiquement
dans ton élément block,
donc dans n'importe quel élément.
Voilà, dans un div, tout ça.
Le truc était donc,
t'as pas besoin de mettre de Flexbox, tout ça.
Et c'est natif.
Wow.
Donc, en fait, est-ce qu'on n'est pas...
Le fameux centrage, tu vois,
quand on ne l'a jamais pu faire.
Exactement, est-ce qu'on n'a pas trouvé, en fait,
l'élément ultime qui va mettre tous les développeurs d'Alcorn,
parce qu'il y a plein de petites vidéos
qu'on trouve sur le net ou sur Twitter,
des mêmes, on te sait disait,
OK, comment on fait pour centrer une div ?
C'est la question.
Centrer un élément dans la div.
Et là, t'as 20 000 approches,
t'as l'approche Flex, l'approche Grid,
l'approche M-O-T, Marginoto, t'as...
Et là, en fait, avec ça,
ça y est, c'est fini.
On vient tuer le débat.
Ça sera Align Content for Block.
Et ça, c'est, par contre, c'est implémenté quand ?
C'est implémenté, c'est dans Chrome 120 et Firefocus.
Donc, c'est assez récent, mais ça marche, tu le mets,
ça marchera pour toutes les dernières versions.
Allez, terminé.
Merci.
Il n'est plus besoin de mettre Flexbox
et d'avoir tous les problèmes liés à Flexbox.
Yeah, nice.
Et Light Dark, c'est quoi cette propriété ?
Light Dark ?
Ah oui, alors ça, c'est un raccourci.
C'est dommage, j'ai pas mis l'exemple,
j'aurais dû mettre l'exemple.
Mais c'est un raccourci, en fait,
pour faire les thèmes Light ou Thème Dark, en fait.
En fait, c'est au lieu de mettre un média query
pour dire que je suis dans Light ou je suis dans Dark.
Tu mets tout simplement Light Dark avec les deux couleurs
sur l'élément pour Light et pour la Dark,
entre parenthèses, et ça prend en compte.
T'as plus un, donc ça te diminue le code CSS.
Et avec juste cette propriété, tu peux mettre les deux couleurs disponibles.
Et ce qui voudrait dire que, en fait,
tu gères pas le Light ou le Dark côté de la page,
mais plutôt sur l'élément.
Mais ça, c'est ce qu'on faisait déjà, en fait, sur Light.
Oui, mais sauf que tu mettais une média query pour dire
que je suis dans le Thème Dark ou pas.
Sauf que tu as mis un média query.
En fait, tu supprimes un média query.
Ok, tu mets Light Dark, Light Thierry Dark, entre parenthèses,
les deux couleurs, et ça prend l'une ou l'autre en fonction du Thème.
Ok, pas mal.

Ok, nice, nice, nice.
Ça récent, ça c'est récent aussi.
Chrome 123, Firefox 120, 17.5 pour Safari.
C'est très récent, mais voilà, petit à petit, on va l'implementer.
Ça marchera partout.
Dac, Dac, deuxième vidéo aussi de la Google Yo,
donc qui est, qui sont, toutes ces vidéos sont disponibles
sur Chrome for Developer, sur la chaîne YouTube Chrome for Developer.
Là, c'est une conférence pareille de 40 minutes.
On est quasiment sur le même temps que la première.
Là, c'est Rachel, je ne sais plus comment elle s'appelle.
Rachel Andrew.
Rachel Andrew, voilà, qui est, je ne vais pas dire la maman du CSS,
mais c'est un peu ça.
C'est quelqu'un qui est dans l'écosystème CSS depuis des années,
qui a vraiment fait la promotion des Flexbox, des gris,
de toutes ces nouvelles propriétés qu'on utilise.
Et là, en fait, elle revient sur, sur cette Google Yo pour nous parler
de tous les éléments, leur utilisation.
J'ai vu un petit has, qui sortait,
qui offre vraiment des possibilités de ma boule.
Ouais, elle revient sur les, alors c'était proche de la première vidéo de CSS,
mais là, elle revient sur les principales évolutions.
Ce qui est disponible en fait dans les navigateurs.
Donc là, ce qu'on va lister, en fait,
c'est la plupart sont disponibles dans tous les navigateurs,
dans des versions plus ou moins récentes.
Mais voilà, c'est vraiment les propriétés,
enfin les éléments qu'il faut connaître en tant que développeur,
parce que la plupart sont implémentés et qu'il faut pas hésiter à les utiliser, clairement.
Et ce qui est intéressant aussi, c'est qu'au début de la conf,
elle explique que pour beaucoup de gens, c'est difficile en fait de se tenir à jour
sur les nouveautés CSS, HTML, tout ça, qui sont implémentés dans la navigateur.
Donc, va, double slash, c'est là pour ça.
On vous tient au courant, juste en nous écoutant.
Nice, top, t'as le petit placement de produit nickel.
Oui, carrément.
Donc, il y a les containers query qui sont de vraiment une bonne pratique maintenant,
et qui sont implémentés partout.
Dans l'ensemble, c'est quand même bien implémenté.
Chrome 105, Firefox 110 et Safari 16.
Donc, on est quand même dans des versions, c'est pas les plus récentes.
Donc, on regarde dans CanEuse, mais on est dans des versions quand même,
enfin on doit être à 80% d'utilisation, peut-être 85 à tester.
Donc, container query, ça permet de tester, ça vise en fait pour appeler le container en lui-même.
Les media query, c'est la fenêtre, et donc les éléments se dimensionnent par rapport à la fenêtre,
la taille de la fenêtre.
Le container query, c'est par rapport à la taille de l'élément.
En fait, tu le vises.
De l'élément par an.
Voilà.
Le media query, le parent, c'est la taille de l'écran, enfin du document,
alors que le container query, c'est la taille de l'élément que tu as ciblé.
Voilà, tout simplement.
Donc, ça permet d'être très précis.
Et pour un même élément, en fonction de sa taille qui l'a disponible,
en fait, il va prendre différents aspects.
Donc, c'est vraiment très précis, c'est une propriété qui est super utile.
Oui.
Et qui est pas mal à utiliser.
Et il y a un autre truc sur lequel, donc, Azz, pour le coup, on a déjà parlé,
ça, c'est vraiment, pour moi, ça, c'est un game changer quand même.
Complètement.
2.Azz, c'est donc implémenté Chrome 105.
Chrome, ça fait quand même un petit moment.
Fallait qu'un Fox 121, c'est un peu plus récent et Safari 15.4, ça doit faire,
ouais, peut-être deux ans, un truc comme ça.
2.Azz, ça permet de cibler, en fait, un élément.
Qu'est-ce qu'il a à l'intérieur, en fait, en fonction de ce qu'il a dedans.
Donc, s'il est vide, s'il est tel, quel est l'élément dans tel état, tout ça,
donc on peut aller très loin.
Ça évite d'utiliser du JS, parce qu'avant, on était obligé de utiliser du JS pour
définir ce qui était contenu dans un élément.
Avec le Azz, on peut tout faire en CSS, donc, très, très puissant.
C'est une des propriétés les plus puissantes, là, qui est sortie, dernièrement, clairement.
C'est un pseudo, c'est une pseudo classe.
Ouais, c'est ça.
Ouais, mais très, très, très, très, super puissant.

Nice.
Un autre point aussi, c'est les gris de...
Alors, ok, ça fait super longtemps que c'est utilisé les gris.
On ne saura que reconseiller et utiliser des gris pour faire des layouts.
Pour moi, c'est l'élément le plus intéressant.
C'est vraiment la construction de tapage avec les différents éléments de ton layout.
Par contre, ce qui est nouveau, c'est justement les subgris.
Donc, c'est de pouvoir contrôler les éléments internes, en fait,
on va dire les grands enfants de ce layout-là.
C'est ça ?
Ouais, ouais, ouais.
De toute façon, comme tu dis, si vous n'utilisez pas de gris aujourd'hui, franchement,
c'est quand même bien dommage parce que ça apporte énormément de choses.
Et pas que faire des gris.
Je vous...
Personnellement, j'utilise pour...
Enfin, on peut vraiment positionner les éléments précisément.
Moi, je suis complètement d'accord.
Juste un tout petit truc qui moi,
où j'utilise grid,
où en fait, au lieu de faire trois positionnements,
où en fait, si je dois centrer verticalement et horizontalement,
en première approche, ça serait possible de faire un flex.
Après, un Justify Item Center et un Item Center.
Donc en fait, je vais centrer en horizontal et en vertical.
Sauf que j'ai tapé trois propriétés.
Et donc, si je fais un grid avec place, content, center,
ça le fait automatiquement.
Et donc, je n'ai tapé que deux propriétés.
Je suis une grosse féniaise.
Mais en tout cas, sur des petits éléments où je veux centrer les deux,
je vais utiliser beaucoup...
Donc même sur des petits éléments, grid, c'est pas stupide, quoi.
Non, non, c'est pas stupide.
Et donc, la problématique, c'est quand tu fais un grid,
en fait, tous les éléments intérieurs deviennent de grid item.
Et donc, on ne pouvait pas positionner.
Donc là, donne l'exemple de trois photos avec le descriptif de l'image.
Forcément, si ça revient sur deux lignes, ce n'est pas aligné, etc.
Donc avec grid subgrid,
tu vas pouvoir aligner les grids item à l'intérieur, etc.
Donc, c'est une avancée pour pouvoir positionner, enfin, les textes, les titres.
Enfin, qui n'a pas déjà eu des titres sur deux lignes
et les autres sur une ligne qui sont du coup pas alignés, etc.
C'est le truc classique, quoi.
Donc, subgrid permet d'aligner.
Voilà, l'exemple qu'elle donne, voilà.
Après, c'est super aligné, c'est parfait.
Donc, tout le monde est content, le client est content.
Et nous, on a utilisé une nouvelle propriété.
Voilà, c'est encore assez récent par rapport au reste, 117, 71 et 16.
Mais bon, c'est déjà disponible et rien n'empêche.
Alors, c'est ça qui est cool, c'est que le CSS,
c'est quand c'est pas disponible dans le navigateur, il l'ignore, en fait, tout simplement.
Donc, ça veut dire qu'on peut l'utiliser,
ceux qui le prennent en charge ne vont l'utiliser
et ceux qui le prennent pas en charge, l'ignore.
Donc, voilà, il ne faut pas hésiter à utiliser des choses assez nouvelles en CSS.
Ça sera pris en compte que pour les nouveaux navigateurs.
Et comme ça, en fait, notre code est Futur Proof.
Et déjà prêt pour le futur.
Carrément.
Donc, ça, c'est bien.
Autre avancée, alors, c'est celle qui fait débat.
Entre nous, est-ce qu'il faut mettre du CSS nesté ou pas ?
Pour petite historique,
avant, on était obligé d'utiliser des postes compilateurs,
donc du SAS, du les, du poste CSS,
où en fait, on venait à imbriquer du CSS les uns dans les autres.
Donc, des classes dans des classes, dans des classes, voilà, pour pouvoir
encapsuler tout ça.
Et ça, en fait, cette propriété devient native maintenant avec le CSS nesté.
La vraie question, c'est, est-ce qu'il faut nester ?
Ça, ça, ça ne tige.
Alors, contrairement à ce que je viens de dire juste avant,
où on peut utiliser le propriété CSS, ça, le CSS nesting,
on ne peut pas l'utiliser si jamais c'est pas pris en compte.
Attention à ça, parce que je pense que le CSS va complètement déconner
si jamais c'est pas pris en compte.
Donc, ça, après, chacun est libre de faire ce qu'il veut.
Moi, personnellement, j'évite de l'utiliser.
Mais voilà, pour ceux qui veulent l'utiliser,
le CSS nesting est disponible donc nativement maintenant
avec des équivalences quasiment la même écriture que du SAS,
à quelques différences près.
Mais voilà, c'est disponible dans les navigateurs les plus récents.
Nice, nice.
Autre fait et autre balise qu'on utilise souvent,
ça va être l'élément de search.
En tout cas, on va faire de la recherche et comment on va utiliser ça,
comment on va l'implementer.
En HTML, il y a un élément qui s'appelle search.
Et qu'est-ce que ça amène de nouveau ?
En fait, c'est juste un input où tu vas mettre search dessus.
Et en fait, ce sera native, accessible, etc.
Voilà.
Ok, donc en fait, c'est un input enrichi, on pourrait dire.
Ouais, c'est ça avec une croix pour vider, etc.
Enfin, un truc natif, un reset et tout ça.
OK.
Il est très simple.
Celui-là, il est super simple.
Pour le coup, sur celui-là, il n'y a rien qui...
Ça ne changera pas la vie.
Ouais, ça ne va pas changer la vie.
Mais si vous faites du search avec, par exemple,
le search, je dis ça, je dirais.
Super intéressant.
Ok.
Autre point qui sort, c'est les responsibles vidéo.
Qu'est-ce que c'est que ça ?
C'est de l'lecteur où en fait, on va garder l'aspect, le ratio.
C'est quoi ?
J'aurais dû mettre un exemple.
C'est vrai que ça, je ne vais pas penser à mettre un exemple.
C'est tout simplement, tu sais, dans les images,
tu peux mettre différentes images en fonction,
et tu mets pour telle taille, si c'est supérieur à 500,
ça sera ça.
Le sourcette.
Voilà, le sourcette, etc.
En fait, ce n'était pas disponible dans les vidéos.
Ça va être disponible dans les vidéos.
Tout simplement, on pourra mettre un affichage,
une vidéo différente en fonction, si c'est un mobile,
si c'est un desktop, etc.
Et ça, on ative dans le HTML.
D'accord.
Donc, en fait, c'est le sourcette pour la vidéo, en fait.
Ouais, en quelque sorte.
Oui, oui, c'est ça.
Excellent.
Et potentiellement, ce qui voudrait dire que sur Twitter,
on pourrait dire qu'on mettrai, en fait, si on a un aspect Twitter,
on met une vidéo carrée.
Si on est sur YouTube, on met une vidéo en 169e,
et si on est sur Insta, on met une vidéo en vertical.
Potentiellement, on pourrait faire ça, en fait.
C'est ça ?
Parce qu'on aurait le lecteur qui, en fait,
viendrait appeler les trois vidéos différentes,
mais on aurait que le même lecteur avec les trois vidéos différentes.
Avec ces conditions, on fonctionne.
Et ils se font interpréter de manière nice.
Ça, c'est pas mal.
Ça, c'est cool.
Et puis, étonnamment, c'était implémenté dans Safari depuis la version 3.
Donc, ça fait un moment que ça existe dans Safari.
Évidemment, pas dans les autres.
Donc, maintenant, ça sera disponible depuis la version 120
dans tous les autres.
Nice.
Autre point,
Inert attribute.
Alors, je ne sais pas du tout ce que c'est.
Alors, qu'est-ce que ça amène ?
L'Inert attribute, en fait,
c'est un attribute que tu mets sur n'importe quel élément.
Et l'exemple qu'on va donner, c'est
tu vas offrir une pop-up.
Et tout ce qui est derrière, en fait, tu vas mettre Inert.
Ça veut dire que tout ce qui est derrière n'est pas sélectionnable.
En fait, tout simplement, ça devient non sélectionnable,
non accessible, non cliquable, etc.
Donc, c'est juste un attribut qu'on rajoute
et qui rend l'élément non sélectionnable et non cliquable.

Inert.
Inert.
C'est le mot et bien choisi.
Ouais, bien sûr.
Ce qui va nous, là, je pense que l'exemple de la modale
est vraiment très parlant.
Et quand tu cliques sur l'élément.
Ouais, et en plus, au niveau accessibilité,
en fait, ce qui fait, c'est que si tu as une modale
et que le reste est en Inert,
en fait, si tu navigues en tabulation,
ça n'ira pas sur les éléments Inert.
Ça restera dans la modale, tu vois.
Donc, il y a un côté accessibilité aussi qui est vachement important.
Yes.
Couleur, pareil, nouvelle propriété sur les couleurs,
ou en tout cas, on va pouvoir mixer les couleurs.
Même si ça, c'est déjà implémenté pas mal
sur les blends ou les choses comme ça, les saturées,
il y a déjà, enfin, tu en peux de joie.
Il y a des choses qui sont jouées avec pas mal de choses, ça, déjà.
Ouais, mais tout n'est pas dispo,
mais oui, comme tu dis, il y en a déjà des dispo.
Par contre, celle-là, Color Mix, elle est pas mal.
L'arrive, en fait, ça te permet de mixer deux couleurs, en fait.
D'accord, tout simplement.
Et donc, l'intérêt, c'est de pouvoir...
Alors, c'est l'exemple le plus donné sur Color Mix,
c'est de pouvoir faire des teintes de couleur.
Par exemple, tu as une couleur primary en bleu,
et ensuite, tu vas lui mettre du blanc à différents pourcentages,
et ça va te faire une teinte de primary avec différents états.
Ça, c'est souvent l'exemple le plus donné.
Donc...
OK.
Après, j'ai toujours pas compris l'avantage
de ces nouveaux formats de couleurs, les OK, LCH, tout ça.
Alors, pour le coup, je n'ai pas fait l'effort,
et c'est de ma faute.
Je n'ai pas fait l'effort de me renseigner
et de lire quelles étaient les specs.
Et en fait, je n'ai pas trouvé l'avantage d'utiliser ça.

En fait, l'avantage, c'est ce que...
Si quelqu'un a une info, je prends.
Non, mais l'avantage, en fait, c'est ça ouvre le spectre des couleurs.
Et donc, tu as plus de possibilités d'être au plus près de la couleur
définie dans la maquette.
D'accord.
C'est surtout ça, ça ouvre le spectre des luminosités, etc.
Donc, on a plus de couleurs qu'avant, en fait, simplement.
C'est ce que ça apporte.
Un niveau de contrôle d'exactitude de couleurs bien plus élevée, quoi.
Ouais, alors après, la plupart du temps,
pour la plupart des maquettes, ce ne sera pas vraiment utile,
mais peut-être potentiellement pour certains éléments qui sont très poussés en couleur,
etc. Ça peut être utile, je ne sais pas.
Mais apparemment, comme moi, tu n'as pas eu le besoin pour l'instant de ces nouvelles couleurs.
Après, ce n'est pas pris en charge par tous les browser, mais...
Ouais.
Moi, celle que j'utilise beaucoup, c'est la HLS en ce moment, je crois.
OK.
C'est pas mal.
Et ça fait quoi ?
En fait, c'est une façon d'écrire la couleur qui est plus simple.
Et en changeant juste un paramètre, tu arrives à changer...
Ne serait-ce que pour les over, etc.
La même couleur, tu peux changer légèrement la teinte.
Et c'est plus simple.
C'est plus confort, quoi.
Ouais, c'est plus confort à écrire, plus simple aussi, à gérer.
OK.
Nice.
Nice, nice.
OK.
Pas mal, tout ça.
Ça va arriver au fur et à mesure.
Et on devait aussi de se coupler un peu avec une sorte de...
Détat, en fait, de...
Ça existe dans le GS, ça existe dans plein de techno.
Il y a un rapport qui est sorti aussi qui s'appelle le State of HTML.
Et c'est sorti quasiment en même temps.
Et on se rend compte en fait qu'il y a beaucoup de nouvelles...
De nouveaux tags qui sont parfois utilisés, parfois pas du tout.
Et donc, en fait, il y a toujours un décalage entre ce qui sort,
sur un exemple typique, c'est la Google Io,
où on va parler des nouvelles balises,
sauf que qu'est-ce qui est vraiment utilisé,
qu'est-ce que les développeurs utilisent vraiment,
et quels sont en fait le niveau de connaissance aussi de ces tags
qui les utilisent, sur quels sites et tout ça.
Et donc, c'est l'objectif de ce rapport State of HTML
qui est sorti.
On mettra évidemment les liens dans la description.
Et pour faire court, qu'est-ce que t'en as gardé
et qu'est-ce que t'en as retenu de ce State of HTML ?
Bah, comme j'avais déjà dit dans le dernier épisode,
ça a été beaucoup répondu par des Américains en majorité.
Donc, voilà, ce sera un State of HTML plutôt américain.
Même s'il y a des Européens, tout ça, quand on est pendus,
mais ça reste une minorité.
Mais ça reste, comme tu dis, c'est intéressant à garder
et voir l'évolution au fil des années,
parce qu'en fait, ça permet de savoir en fait ce qui est utilisé,
ce que les gens connaissent,
est-ce que tu connais ça, est-ce que t'as entendu parler de ça,
ou pas.
Donc, il y a des résultats assez étonnants des fois.
Mais voilà, j'ai noté un peu toutes les...
Alors, il y en a une quarantaine de propriétés qui sont demandées.
Moi, j'en ai noté 19, enfin, même un peu moins.
Donc, voilà, on va faire le tour vite fait.
J'espère que vous avez pris un aspirin, c'est bon, là.
C'est pas trop mal à la tête.
C'est l'épisode technique aujourd'hui.
Vas-y, après, on peut commencer par des éléments
qui sont assez utilisés et on va dire,
surtout l'utilisation sémantique.
Voilà, on pense à nav, main, aside, header, footer.
Au lieu de faire une div ID footer,
on prend directement la balise sémantique footer
et section, et c'est beaucoup plus propre.
Et au final, on se rend compte que c'est utilisé
quand même à 50% par les personnes qui ont répondu.
Ouais, c'est ça, en fait.
Voilà, il y a des balises assez...
Moi, j'appelle ces trucs assez basiques.
C'est des choses que tu es censé connaître.
C'est un site des développeurs.
Comme tu dis, les landmarks, les elements, footer, etc.
Il y a le tab index qui permet de définir
l'ordre des tabulations quand tu navigues
à la tabulation clavier.
Les illodines, je veux dire, si aujourd'hui tu connais pas les illodines,
c'est grave.
Par contre, j'ai mal lu...
En fait, c'est 96% au global qui les utilise.
Là, pour le coup, pour les éléments sémantiques,
j'ai mal lu...
J'ai mal interprété les chiffres...
Non, c'est 96.
Ouais, ok, c'est plutôt bon.
Et par exemple, sur le les illodine que tu viens,
qui est le chargement incremental de l'image,
que si elle est dans le view, dans l'écran,
là, pour le coup, ça descend à 57%.
Je dis 57% uniquement qui l'utilisent,
c'est quand même grave.
Je suis assez étonné.
Après, certains peut-être l'utilisent sans le savoir,
parce qu'il y a des CMS, tout ça, qui les mettent automatiquement, parfois.
Donc, voilà, je ne sais pas.
Ou si tu les uses Next, par exemple,
ils vont mettre automatiquement du les illodine sur les images,
donc peut-être qu'ils l'utilisent sans le savoir.
C'est la magie des trucs.
Les SRC7 et les size attributes, c'est pareil.
C'est pour rendre l'image en fonction de la taille de l'écran,
comme on parlait pour les vidéos.
C'est pareil, il y a des...
Tu vois, c'est que 53 qui l'utilisent.
Donc, il dit, bon, finalement, tu vois, il y a encore du boulot au niveau de la performance,
parce que les illodines, les SRC7, tout ça,
c'est toutes des choses de performance.
Et on voit que la moitié qui l'utilise,
donc il y a encore beaucoup de travail à faire,
à ce niveau-là.
Mais c'est pour ça qu'il y a un super épisode sur la performance,
avec Erwin, sur l'épisode qu'on avait fait avec lui.
Justement, il nous expliquait
comment utiliser et implémenter, on va dire,
nativement toutes ces best practices
pour éviter de faire de la performance à posteriori,
parce que c'est toujours plus difficile
de faire de la performance à posteriori.
Une fois que le code est chippé,
une fois que c'est mis en place,
c'est beaucoup plus dur d'aller chercher de la performance,
alors que si nativement on a implémenté les bonnes choses,
nativement, c'est performant.
Oui, oui, oui.
De toute façon, la performance,
il faut se faire une base de connaissance,
parce que ce n'est pas automatique, ce n'est pas magique.
On pense souvent que je sors un site statique,
ça sera rapide, mais non,
tu peux faire un site statique lent aussi,
si tu mets des images trop lourdes, etc.
Bon, revenons au state of HTML.
Il y a toute une partie aussi
qui concerne les web component,
alors ça, on passera dessus,
parce que c'est assez détaillé,
donc on ne va pas non plus tout ça.
On va revenir sur les éléments.
Si tu vas dans feature,
tu auras tous les éléments à la suite,
normalement, tu es déjà dedans.
Donc, j'avais notre dialogue et les mots.
Dialogue et les mots, c'est la...
Il est en deuxième, non ?
On remonte.
Non plus haut.
Dialogue, dialogue,
dit-il-vous pas ?
Non, je n'ai pas le dialogue, mais je veux...
Je ne suis pas mis dans l'ordre.
Je vais le trouver, t'inquiète.
Donc ça, par exemple, il y avait 22%
qui n'ont jamais entendu parler.
C'est un élément assez récent,
qui te permet de faire une sorte de modal,
mais assez étonnant quand même,
parce que normalement, il est implémenté un peu partout.
Details et summaries,
on en a parlé juste avant.
C'est un mieux...
Il permet de faire des éléments collabsibles.
Des facuts, tout ça.
Pareil, 27% qu'on n'a jamais entendu parler.
Donc, sauf les gens qui utilisent...
qui écoutent double-slash.
Qui écoutent double-slash ?
Maintenant, vous savez,
utiliser des details.
Des details et summaries, ouais.
J'avais les ressources ints.
Donc tout ce qui...
Tu sais, les prilodes,
tout ça, quand tu peux priloder une image
ou des fonte,
où ne serait-ce qu'un fichier chérastrique.
Ah, ouais.
Tu vas mettre dans le head.
Ouais, pas par exemple,
tu vas faire un defer,
ou tu vas faire un async sur ton chargement de script,
pour éviter, en fait,
de bloquer le rendu de ta page, quoi.
C'est ça ?
Tout ces choses-là, voilà,
qui permettent toujours pareil performance.
Quand tu vois 29%,
on n'a jamais entendu parler.
J'ai l'impression que le côté performance,
il y a encore beaucoup de travailleurs.
Ah, clairement.
Mais, en fait, c'est une méconnissance
de l'utilisation
de toutes ces attributs, en fait,
qui, pour le coup,
te permettrait,
ou permettrait d'avoir un site beaucoup plus performant.
Ouais, c'est clair.
Mais c'est des choses, en fait,
qui ont été implémentées...
Il y a longtemps, en plus.
Il y a un moment,
et beaucoup par l'équipe Chrome,
pour améliorer les performances,
parce qu'elles sont focuss un peu performance.
Et c'est des choses qui sont utilisées à aujourd'hui.
Tu peux vraiment...
Tu sais, le LCP,
l'élément le plus gros quand tu as le chargement de la page,
un prefetch
ou un preload au début de la page
sur une image qui est en LCP,
mais ça te change le résultat du test,
ça change tout.
Il y a des choses comme ça
qui sont très simples à mettre en place,
qui apparemment, pour 29% des gens,
ils ne savent pas ce que c'est.
Il y a le Formdata.
C'est un truc JavaScript
qui permet de...
souvent utiliser pour les formuleurs,
pour envoyer via Actio,
des data, tout ça.
T'as jamais utilisé ça ?
Moi, j'utilise.
Ah, OK, OK.
Ah non, c'est souvent même,
des fois, obligé d'utiliser avec...
Ouais, ouais, ouais, c'est comme ça.
Exactement, en fait,
t'as beaucoup de services
où il t'est obligé d'avoir
ton type de données formatée comme ça.
Ouais, et bien, 32%
jamais entendu parler.
Tu imagines ?
C'est énorme.
Et ça, en plus, c'est un truc qui est dispo,
dans tous les brosers.
Natif quoi.
Tu l'as juste là, tu vois,
tu as 50% qui est en l'air de l'utiliser,
et puis
16% quand on a entendu parler
et 32% qui n'ont jamais entendu parler.
Ouais, c'est assez...
Ah, c'est faux, quoi.
Donc, ceux qui écoutent l'épisode,
voilà, Forme Data.
Forme Data, les gars.
Regardez sur MBM.
On a Data List.
Data List, elle est vraiment intéressante.
Alors, personnellement, je l'utilise jamais.
Mais t'as quand même 41% des gens
qui n'ont jamais entendu parler.
Alors Data List,
tu mets à une Data List sous un input,
et ça te fait une sorte de
suggestion, en fait.
Tu te commences à taper dans l'input,
et ça va te suggérer les éléments
de Data List qui correspondent à ce que t'as tapé.
En fait, c'est une sorte de
de suggestion, mais dans la page.
De Select, en fait, c'est le mix un peu
de l'input et du Select.
Ouais.
C'est un peu ça.
Alors, personnellement, moi, en natif,
je ne vais pas l'utiliser.
Par contre, je suppute que la livraie
de composants que j'utilise,
utilise ça.
Ah, voilà.
Je suis...
Oui, de toute façon, c'est clair,
parce qu'en fait, c'est implémenté
massivement dans tous les browser, c'est dispo.
Donc, ça, tu peux l'utiliser sans problème.
41% des gens n'ont jamais entendu parler.
Bon, c'est comme ça.
Popover API.
53% des gens n'ont jamais entendu parler.
Pareil, Popover, récent, mais quand même,
je veux dire, en plus, si tu regardes un peu
les vidéos YouTube, tout ça, Popover,
c'est une des choses qui a été implémentée
récemment, mais qui est quand même disponible.
Donc, normalement, tu devrais connaître,
au moins, la Popover.
Bon.
Je suis assez débitatif
sur certains résultats, en fait.
Ouais, mais enfin, non, c'est...
T'es triste, en fait.
Je me rends compte que,
pourtant, il y a pleu...
En fait, avec le web, aujourd'hui,
l'information est disponible de partout.
Tu as des vidéos, tu as tout ce que tu veux.
Il faut encore faire l'effort.
Mais...
Autre truc qui est sympa,
pour le coup, moi, je me suis pas mal
penché là-dessus, parce que
j'ai fait des versions un peu mobiles
et PWA.
Une API
qui...
Et là, je suis super triste de voir
qu'il y a 70% des quasiment des gens
qui ne le connaissent pas.
C'est le Web Share API.
Et ça, en fait, c'est super sympa
quand tu veux partager le lien
avec quelqu'un
sur iOS.
En fait, tu as un bouton
et ça va t'ouvrir la pop-up
et tu vas retrouver tous tes éléments
si tu veux partager sur WhatsApp,
sur Signal, sur Telegram
et tout ce que tu veux.
Tu vas pouvoir directement le faire.
Et ça, en fait...
Moi, j'ai découvert ça
avec, justement,
une liste de toutes les API
qu'on peut utiliser pour les PWA.
Et en fait, le Web Share
a mis du temps à arriver
et il est maintenant
plutôt bien
implémenté.
Par contre, toujours pareil.
On va parler de mobiles.
Oui, sur mobiles,
l'expérience est beaucoup plus intéressante
sur mobiles, c'est clair.
Ah bah ça te donne la même expérience
de partage que sur les applications natives.
Ça trouve le même système, c'est vraiment top.
Et oui, 67% des gens qui ne connaissent pas.
C'est...
Maintenant, vous connaissez aussi.
Il vous dit triste.
Voilà, vite fait.
Finir. Il y a le inert qu'on a parlé
juste avant. 80% des gens
qui n'ont jamais entendu parler, le inert.
Voilà.
Et le... un qui est moins connu, par contre,
c'est vrai, le badging API.
Ça, c'est pareil, c'est pour les PWA, tout ça.
C'est une API pour mettre des badges
au niveau des onglets, tout ça.
Ou dans les applications...
Ça, c'est super sympa.
Par exemple,
une notification qu'on a reçue
sur notre...
dans notre navigateur.
Aujourd'hui,
iOS gère les notifications.
Donc, PWA plus
notification, c'est possible.
Vous pouvez faire ça.
Et coupler avec ce
badge API,
vous avez la petite pastille
directement, sur l'icône.
Donc, c'est quand même
super, super intéressant.
Ouais. Alors ça,
c'est encore
plus ou moins expérimental, voire
peu implémenté, mais... Oui.
Bon, ça arrive.
Donc, voilà, en gros,
il y a une quarantaine de propriétés
à regarder. C'est toujours super
intéressant. Moi, j'adore ces trucs-là, parce que
c'est toujours très intéressant
de découvrir parfois des choses que tu connais pas, en fait.
Ah ouais, tiens. Je ne connaissais pas
cette API, etc. Donc la Web Share, tout ça.
Donc, voilà.
Je recommande d'aller voir les résultats.
C'est intéressant. Regarder les API, il y a souvent
le lien sur MDM et ça permet de se documenter
et d'en apprendre plus.
Yes.
Je crois qu'on a fait le tour
en fait des éléments HTML
qui sont sortis
de toutes ces nouvelles
tendances qui arrivent.
Et en fait,
moi, je vois vraiment ça comme des outils.
En fait, c'est des outils dans
ma boîte à outils. Et plus j'ai d'outils
dans ma boîte à outils de développeurs,
plus je vais me permettre de faire
des sites performants rapides
et de simplifier, en fait.
Parce que le tag natif,
le bonbeau, c'est vraiment
une histoire de vocabulaire.
En fait, plus j'ai de vocabulaire, plus
c'est facile pour moi d'exprimer
de construire ma phrase. Et bien, ça va être
exactement pareil avec toutes ces
propriétés natives en HTML.
Je vais pouvoir faire plus de choses.
Moins de complexité, c'est plus simple,
c'est plus performant, c'est plus
facile. Donc,
d'où l'intérêt, en fait, de
suivre toutes ces tendances
là. Et on s'excuse
pour toutes les personnes qui
ont déjà mal à la tête avec tous les tags.
Mais en tout cas, si vous êtes
restés jusqu'au bout de l'épisode,
pensez à nous mettre un petit
pouce et à dire que vous êtes plutôt
fan des tags HTML.
Dites nous aussi
ce que, lesquels vous utilisez,
lesquels vous n'utilisez pas,
celles, ceux que vous avez
découverts peut-être.
Et on est toujours
à l'écoute de vos retours.
Un grand merci pour tous ceux qui sont
restés jusqu'au bout de l'épisode.
Et on vous dit à bientôt. Ciao ciao.
A plus, ciao.
Retrouvez double slash sur le plate-formes
de podcasts préférés. Et sur le site
internet du podcast www.slash-podcast.fr
Sur le site, vous allez retrouver
tous les liens de l'épisode, les références,
évoquées durant l'émission.
Sous-titres réalisés par la communauté