Bonjour à tous et bienvenue sur ce nouvel épisode de Double Slash.
Il s'est passé plein de choses au mois de juin, il y a eu beaucoup de conférences et surtout
il y a eu la Google Io et la WWDC, donc c'est la conférence des développeurs de chez Apple
et de chez Google. Ils ont annoncé beaucoup de choses qui étaient déjà en place, on sait très
bien que Chrome et Google font un peu la messe sur le web. Un deuxième acteur c'est Apple.
Donc lors de ces deux conférences, ils ont fait beaucoup d'annonces et on va parler de ça
aujourd'hui dans cet épisode et comme toujours je vais le faire avec Patrick. Salut Patrick, comment
vas-tu ? Salut, salut, salut à tous, ça va bien. Et donc du coup on tu t'es infligé ou t'as pris
plaisir à regarder toutes ces vidéos de la Google ? Oui, j'ai pris plaisir après. En gros les
deux événements c'est principalement orienté mobile, Android, iOS et compagnie, les applications
et tout ça, mais il y a une partie qui concerne les navigateurs parce que ça nous concerne beaucoup
au niveau du développement web et donc il y a eu quand même des vidéos où il expliquait les
évolutions de Chrome et après Apple, les évolutions de Safari parce que Safari on attend depuis
longtemps que ça avance un petit peu et enfin ils ont l'air de se bouger. Ça c'est la bonne nouvelle
en fait. Mais non, c'était cool, très intéressant à faire. Et bien à la limite vu que tu as fait une
super présentation, on va analyser point par point et puis on va discuter de tout ça. Après on peut
faire le point déjà au niveau des personnes qui ne sont pas encore au fait de tous les
navigateurs. Aujourd'hui on a une dominance quand même vraiment flagrante et notamment en France de
Google Chrome. Mais après il faut savoir qu'il y a aussi Safari qui est un acteur important parce
qu'en fait Safari est déjà très présent sur iOS donc c'est quelque chose qu'on va vraiment
prendre en compte. Safari qui est très important puisqu'on a une grande partie de la population
des visiteurs qui sont sur iOS et il faut savoir aussi un truc très important c'est que malgré
tout si on peut mettre des Chrome, des Firefox etc sur son iPhone, ça reste quand même du Safari
puisque derrière c'est des webviews puisque en fait c'est interdit de développer un navigateur pour
iOS. Donc dans tous les cas ça reste toujours du Safari que ça soit de webview ou du Safari pure.
Donc ça c'est vraiment important à savoir quand on est développeur web que sur iOS
reste du Safari. Donc le fait que ça soit un petit peu en stagnation l'évolution de Safari depuis
quelques temps c'est un petit peu handicapant pour les développeurs. Mais tu viens de dire
qu'ils avaient fait du mieux. Oui mais justement c'est ce qu'on va voir.
On attaque par le CSS des nouveaux points. Alors c'est vraiment les
features qui sont arrivées dans une majorité de navigateurs. Quand je parle j'ai vraiment
mis Firefox, Edge, Chrome et Safari. Edge sachant que c'est Chromium comme moteur donc c'est très
proche de Chrome. Donc souvent c'est à peu près les mêmes implementations. Mais quand je mets
les petits... le fait que ça soit pris en compte c'est aussi il faut bien prendre en compte que c'est
les dernières versions. Donc il faut toujours en fonction de votre population de visiteurs,
de navigateurs, tout ça. Il faut quand même vérifier si les versions ça fonctionne. Par exemple
si tu as une feature qui marche que sur la dernière version de Chrome, ce qu'on n'a pas mis à jour
leur version de Chrome, ça ne marchera pas. Donc c'est toujours un truc à faire attention.
Et pour le coup, pour ceux qui ne connaissent pas un site qui s'appelle Can I use, c'est hyper
intéressant justement. On va taper la propriété ou l'API qu'on veut utiliser et on va avoir tout
l'historique de tous les navigateurs et à savoir à partir de quelle version de ce navigateur,
l'API, cette fonctionnalité est disponible. Pour ceux qui ne connaissent pas Can I use.
C'est la base. Si vous ne connaissez pas, ça craint quand même.
Mais non, au contraire. Maintenant vous connaissez.
Alors je vais même rajouter un truc sur Can I use. Quand tu deves, en fait,
que tu installes ton opérance de dev, tu as aussi browser list que tu utilises dans l'environnement
de dev et qui va permettre à auto-préfixeur tous les trucs qu'on utilise avec Post-CSS,
d'aller chercher les versions de navigateurs que tu cibles et de rajouter les préfixes
en fonction des navigateurs que tu cibles. C'est niveau dessus.
Normalement, tout automatisé, browser list avec les navigateurs et il y en a par défaut.
Après, tu peux configurer si tu as vraiment des versions que tu veux cibler.
Et après, quand tu vas compiler ton truc, ça va rajouter tout ce qu'il faut pour être adapté
au navigateur. Et ça va chercher sur Can I use, sur la base de données.
Du coup, CSS accent color ?
Yes. Alors ça, c'est un truc qui est pas mal pris en compte.
Je rajoute encore une chose. C'est qu'en fait, sur la vidéo de Google,
avant, c'était très long d'avoir des implementations dans les navigateurs,
mais là, ça bouge. Ils se mettent tous d'accord. Ça avance vraiment dans le bon sens.
Et ce qu'ils ont bien fait voir, c'est que l'année dernière, ils avaient présenté
des choses comme accent color en 2021. Et qu'en 2022, en fait, il y a beaucoup de navigateurs
qui l'ont déjà implémenté. Donc on voit qu'en un an, ça bouge, ça va vite, alors qu'avant,
il fallait des années avant d'implémenter un truc. Donc ça, c'est vraiment une bonne nouvelle.
Et ça avance dans le bon sens sur quoi. Donc accent color, en fait,
c'est une nouvelle propriété qui est un peu basée comme les variables qu'on utilise dans le CSS
et qui permet de définir une couleur. Tu sais, dans ton navigateur,
quand tu as les boutons radio, les checkbox, des choses comme ça,
en fait, tu as une couleur souvent par défaut, soit de l'OS ou un truc comme ça,
et maintenant, on va pouvoir définir une couleur. Et donc tu définis la couleur accent color.
Et ça va définir ton checkbox. Il va devenir rose, jaune, ce que tu veux.
Ce qui est super cool, c'est que tu peux customiser ton template aux couleurs de ton client
avec une seule propriété. Et les slider, tout ça.
Il y a un effet « wow » et un effet customisation qui est direct et hyper facile à implémenter.
Et si en plus on peut variabiliser ça, chaque client a cette couleur accent color
qui vient automatiquement mettre à jour son template.
Est-ce que c'est génial comme c'est sur une variable ? En fait, si tu utilises le dark ou le light
thème que tu vas implémenter, tu peux changer cette variable. Et donc tu as l'accent de color
qui va s'adapter au thème. Donc c'est vraiment pas mal. Donc ça, c'est prêt en compte par tous
les brosers et donc à utiliser sans… Sans modération.
Sans modération, carrément.
Adjust size, non, size adjust pour le coup.
Ouais, alors ça c'est une nouvelle propriété qui permet donc, j'ai indiqué,
à harmoniser les tailles de police. En fait, à quoi ça sert exactement.
Donc c'est pas encore sur Safari mais c'est déjà sur une majorité.
Faut savoir que quand c'est pas implémenté par un navigateur,
juste il l'ignore en fait. Donc c'est pas gênant de l'utiliser,
même si c'est pas compatible dans Safari.
Alors donc ça sert à harmoniser. En fait, des fois tu as la police par défaut,
et puis tu as une police que tu vas utiliser, que tu vas charger.
Et parfois ça peut prendre un peu de temps. Tu vois, t'as un petit flash entre la police par défaut
et le… Tu vois ce que je veux dire ? Ouais. Et t'as un petit décalage en fait.
Des fois, parce que les polices sont pas toutes pareilles. En fait,
tu as des fois des espaces un peu plus larges entre les dettes, tout ça.
Donc en fait, avec le size adjust, en fait, tu peux vraiment
essayer d'ajuster au maximum pour que ça ressemble à ta police.
Ça fait que quand ça va remplacer avec la bonne police,
t'auras quasiment pas de décalage en fait.
Excellent.
Voilà. Ça c'est une propriété qui est importante aussi pour éviter le changement
de layout en fait, quand ça charge la bonne police, excellent, la remplace.
Ouais, pour pas qu'il y ait des différences de design ou d'implémentation de design
entre le navigateur.
Exactement, ouais. C'est tout bête, mais ça peut servir.
Nouvelle propriété à lait.
Alors le lait, ça, c'est grosse, grosse nouveauté.
C'est déjà bien pris en compte après avoir avec les anciennes versions.
Donc ça permet de créer des lait.
En fait, c'est pour mieux gérer les cascades et l'héritage.
En fait, souvent, tu vas faire un...
Ça concerne beaucoup les thèmes, en fait, que tu peux utiliser,
que tu vas que tu utilises dans des CMS, des choses comme ça.
Et souvent, tu es obligé d'après...
Quand il y a des choses qui sont implémentées sur des éléments,
les boutons, les choses comme ça, tu es obligé de faire des fois
des importants, des trucs comme ça pour écraser, en fait, le truc d'origine.
Parce que ça a été malade.
Mais je crois que c'était la base, le important.
C'est ça, c'est ça.
C'est la règle 1, maîtriser le important.
T'es fou, quoi. Jamais, jamais.
Le depth qui me met un important, je le dégage.
Mais, ok.
Donc, en fait, tu vas pouvoir...
En fait, on pourrait dire que c'est des classes, de classes, en fait,
des sortes de...
Non.
En fait, c'est plus des groupes.
C'est des groupes que tu vas...
Et que tu peux faire...
C'est toi qui vas gérer, en fait, l'héritage et la cascade, en fait.
Dans quel sens ça va hériter, dans quel sens ça va faire une cascade.
Et donc, ça t'évite d'écraser des choses, en fait.
Alors, c'est assez nouveau, c'est encore assez...
Moi, je n'ai pas encore essayé.
C'est vraiment tout.
Mais tu vois, on peut faire un layer avec plusieurs tannes
et choisir l'ordre, tu vois, comme sur l'exemple.
Et ça a l'air assez puissant.
Alors, il y a déjà des layers dans...
Tywin CSS.
Mais ça n'a rien à voir.
Alors, je ne sais pas comment ça va être géré, en fait.
Est-ce que Tywin va devoir enlever le système de layer
ou changer le nom?
Parce que du coup, ça va faire la même chose.
Et ça s'écrit de la même façon.
Après, peut-être qu'ils ne utilisent pas les mêmes API.
Donc, peut-être qu'ils le font, vu qu'ils le génèrent, en fait,
il est un pilet, enfin, tu vois, il est rendu.
Donc, peut-être qu'ils utilisent une autre méthode.
En tout cas, ça fait quelque chose de plus natif
et de plus modulaire.
Et ils font évoluer.
On le voit, le CSS a évolué de plus en plus.
C'est surtout pour de plus en plus,
pour de plus modulaire et de plus orangez le code, tout ça.
C'est ce qui arrive de plus en plus avec les variables,
avec les layers, maintenant.
Donc, on peut vraiment faire un code CSS super propre.
Il n'y a plus d'excuse.
Il n'y a pas d'excuse.
Attention, les importants, c'est interdit.
OK, les subgrades.
Du coup, on connaissait déjà
le système de grid avec des displays flèques,
puis après, il y a eu des displays grides.
Et donc là, en fait, on a un subgrid.
Ouais.
Alors, subgrid, c'est tout nouveau.
C'est à peine à pénémenter dans Firefox
et pas encore dispo dans Chrome, tout ça.
Mais il faut le prendre en compte.
Ça va arriver probablement la semaine prochaine.
Ça sera beaucoup plus pris en compte.
En fait, l'exemple qui donne,
c'est que tu peux faire une grid avec des items dedans,
des sortes de produits, tu vois.
Par exemple, on prend un truc qui se remercie avec une grid.
Et en fait, ce qui se passe,
c'est que des fois, le titre est plus ou moins long,
des choses comme ça, la description est plus ou moins longue
dans ton item.
Et en fait, tu n'arrives pas à aligner tout ça.
En gros, subgrid, ce que j'ai compris,
c'est que ça permet d'hérité de la piste du parent
pour aligner les titres, etc.
Ça permet d'ajuster vraiment
dans chaque item
les petits éléments qui sont dedans.
Donc en fait, ça reprendra
les propriétés du parent
pour essayer de les appliquer.
Ça reprend des propriétés,
comme le gap, tout ça,
et tu peux les réappliquer
et peaufiner tout ça.
Ça a l'air assez puissant.
C'est encore tout nouveau, mais...
C'est pas encore bien implémenté.
Non, ça n'a pas encore bien implémenté.
As, c'est un pseudo-éléments.
As, et donc, là, on va pouvoir
mettre de quoi, c'est une sorte de logique
dans le CSS.
Alors celui-là, il est top.
En fait, tout simplement,
quand tu as un élément, tu veux
savoir ce qu'il a comme enfant,
et tu l'utilises le 2.as.
Tu vas pouvoir savoir, pour exemple,
si un UL a des liens à l'intérieur,
si une image est la reine...
Mais c'est quoi, ça te renvoie un boulet 1 ?
Ça te renvoie quoi ?
En fait, c'est en CSS.
Par exemple, tu définis
que si l'encre est là,
un span à l'intérieur ou une image,
par exemple, comme dans l'exemple,
tu veux lui appliquer un style différent.
Donc, tu peux tester en fait ces enfants,
ce qu'on ne pouvait pas faire avant.
Ok, donc en fait, c'est une sorte de boulet 1,
où entre la parenthèse,
tu vas mettre la condition,
c'est-à-dire, as
entre parenthèse, à l'intérieur,
il y a une image.
Donc, je vais appliquer...
Si il y a une image, j'applique
ce style-là,
si il n'y en a pas, je peux faire une valeur par défaut.
Ou je viens changer
si à l'intérieur
de l'élément que j'ai sélectionné,
il y a
un élément que j'ai annoncé.
Donc en fait, c'est une sorte de if
en CSS.
Ouais, c'est ça.
T'as déjà le note qui existe,
il y en a plusieurs déjà qui existent,
mais le note, tu peux définir que si il n'a pas cette classe,
ça sera ça.
Mais là, c'est vraiment puissant,
parce que c'est quelque chose qu'on pouvait le faire
que avec JavaScript en fait.
On pouvait juste tester avec JavaScript,
s'il avait des enfants, s'il avait tellement d'élément
à l'intérieur, tout ça. Et donc, c'était obligatoire
d'utiliser JavaScript, et même maintenant, on peut le faire
en CSS pur, savoir
s'il a des enfants, s'il a tel enfant, s'il a tel balisé
à l'intérieur. C'est hyper puissant,
et ça, c'est une grosse avancée.
Donc, il est déjà dispo sur Chrome,
sur Safari, dans la version qui arrive là,
normalement, la CES.
Et, forcément,
ce sera vite implémenté, je pense,
par Edge et Firefox.
Firefox, derrière.
Ouais.
Des conditions dans du CSS.
Pas mal, ça. Pas mal.
Ad container.
Et là, on vient toucher
quelque chose de monstru.
Là, ça, c'est énorme.
C'est très, très gros.
C'est des sortes de
media query pour les containers.
Donc, en gros, aujourd'hui,
on peut
le contrôle des éléments, on peut le faire
que en fonction de la taille de la fenêtre, etc.
Donc, en responsive,
classique. Et là, on va pouvoir
faire en fonction du container,
la taille du container. Donc, on va cibler un div.
On va le dire si tu fais taille taille,
c'est comme ça que tu t'as machin.
Si tu es grand, si tu es 900,
tu fais comme ça le positionnement. Enfin, voilà,
tu peux vraiment cibler le container en lui-même,
et il va se contrôler tout seul, en fait.
Donc, au lieu, en fait,
c'est du media query
pour les éléments.
Ouais, c'est ça.
Et en fait, ça veut dire que
l'exemple qui donne pas mal, en fait,
c'est une sorte de card, en fait,
que tu... Et en fait, la même
card, tu peux lui donner différents
formats, en fait, en fonction
d'où elle est, de la largeur qu'elle prend, et tout ça.
Et c'est toujours le même code HTML.
Sauf qu'avec les media query, enfin, les
médias des containers query, on appelle.
Le ad-content.
Ouais. Et tu vas pouvoir lui donner
un aspect différent en fonction de sa largeur.
Et c'est hyper puissant, en fait.
Excellent.
Et ça, ça arrive donc dans Safari 16.
Et bientôt, j'espère,
dans les autres. C'est
encore tout nouveau.
C'est prometteur.
C'est super prometteur. Ah, mais ça, c'est
une évolution énorme, en fait, de pouvoir contrôler
vraiment les éléments indépendamment.
C'est...
Aspect ratio
qui arrive en natif.

celui-là, il était déjà pas mal dispo.
On pouvait déjà l'utiliser.
Mais ça, il faut vraiment reparler.
Puis ça arrive aussi sur Safari.
Et c'est quelque chose qu'il faut utiliser, en fait,
quand on fait... Alors, il y a le fameux hack.
Tu sais,
pour les vidéos, par exemple, pour que ce soit en 9-16e,
en 16-9e, pardon, avec...
un cover derrière machin, on fait un truc
avec une margine top négative. Je sais plus comment ça marche d'ailleurs.
Enfin, un truc dans ce style...
52% de chez la CAC.
Ah, ouais, le hack est 52%.
Juste pour faire du 16-9e.
Il n'y a plus besoin, en fait, parce que tu mets
juste aspect ratio. Et puis, 16-9e,
ou 1 sur 1, enfin,
ce que tu veux. Et il y a même la possibilité
d'utiliser les attributs.
En fait, s'il a un attribut,
ton élément, widths et height,
tu peux utiliser les attributs pour qu'il
garde le même ratio en fait
en fonction de la taille.
Tu viens de lui définir...
Ça se redéfinit bien comme il est d'origine, en fait.
En fonction de... même s'il réduit, il garde
son même aspect, en fait.
Donc on arrête de faire des hacks et ça sort.
On arrête, on arrête de faire un truc...
Un truc propre.
Non, ça, c'est une super propriété.
Il ne faut pas hésiter d'utiliser, parce que
c'est hyper simple et ça te permet d'avoir
des images dans le bon...
dans le bon de la bonne taille, quoi.
Parfait.
Parfait.
Offset pass.
Alors celui-là, c'est un truc qu'on
utilisera beaucoup moins. Mais qui est quand même
important à savoir, c'est pour les animations
simplement, en fait, avec offset pass,
on définit
un tracé.
Et après, l'élément va suivre ce tracé
au niveau de l'animation. Donc c'est
plutôt puissant.
Et donc, c'est un peu comme un SVG.
En fait, tu fais des passes, tu peux utiliser
les formes qui existent déjà, les circles, les squares, tout ça.
Ça s'est poussé, quand même, techniquement,
mais ça nous permet vraiment
de faire avec du CSS des animations
avec un tracé vraiment spécifique
qui sera joué.
Donc, c'est pas mal.
Ça arrive sur Safari 16. Donc Safari 16,
c'est la prochaine version qui sort, là, je ne sais pas
quand il va sortir de la beta, l'OS, là, mais peut-être
à la fin de l'été.
Mais ça arrive et c'est déjà
disponible dans Chrome Chrome, puisque c'est
dans Edge et en Chrome.
Excellent.
Color contrast.
Celui-là, il est hyper puissant.
Malheureusement, pas encore dispo.
C'est bien.
En fait, c'est une proposition.
C'est expérimental.
Oui, c'est un flag.
En fait, tu peux l'avoir en Chrome.
Oui, c'est ça.
C'est une proposition qui va
passer forcément, qui va être
implémentée, parce qu'en fait, c'est hyper puissant.
Donc on peut l'utiliser déjà en flag, je crois,
sur Chrome.
Mais ça permet de...
Tu sais, le WCAG, tout ça, on a
au niveau des couleurs.
C'est un texte sur un fond.
C'est un test pour avoir le AAA
ou le WA.
Pour calculer une sorte de ratio
de contraste, si...
Pour l'accessibilité.
C'est suffisamment contrasté.
Et bien, en fait, et des fois, voilà, c'est pas évident.
Il faut chercher la bonne couleur, machin, tout ça.
Et bien, en fait,
color contraste, c'est une fonction CSS
qui te permet, automatiquement,
en fonction que tu vas lui mettre
en paramètres, en fait, tu peux mettre plusieurs paramètres,
mais simplement, tu peux lui mettre le paramètre
de ton fond.
Et automatiquement, ça va te générer
une couleur qui sera assez contrastée
pour se mettre dessus en tant que texte.
Mais par contre,
c'est pas dangereux en termes
de design. Si moi, je récupère
une planche, et le designer, il a mis
une couleur, je le mets
cette propriété, et ça vient casser le design.
Alors...
...

...
Alors, ça, c'est... Alors, les designers...
Euh...
Alors, c'est...
...
C'est important de...
Non, c'est pour ça que...
...il n'en compte, il y a pas de problème, quoi.
Non, en fait, c'est pour ça qu'il y a plusieurs paramètres,
parce que tu peux forcément aller chercher
une couleur qui ressemble à celle qui est définie de base.
Ok.
Mais si les designers avaient un petit peu
d'accessibilité en tant que...
... Quand ils designent un petit peu,
ça serait... Moi, c'est une autre histoire.
Mais...
... si ils ont fait ça bien, il y a pas de soucis,
quoi. Ok.
Color contraste qui vient
vérifier tout ça avec
un flag.
Il y a du nouveau sur le HTML,
ouais.
Ça évolue.
HTML.
Une balise, euh...
Dialogue. Alors, la dialogue,
celle-là, elle est déjà disponible.
Et il faut l'user et en abuser.
Euh... C'est une balise qui est censée
remplacer tout ce qu'on fait, souvent les...
Les modales, tout ça, en fait,
avec les dives, là.
Voilà, les sortes de pop-up qui s'ouvrent
avec un overlay derrière pour afficher un truc,
un bouton, n'importe quoi.
Ce qu'on a tendance à faire avec du CSS,
c'est javascript, hein. C'est...
Enfin, moi, je les perceaux, je les fais jusqu'à maintenant,
je les fais avec d'un div...
Voilà, qui est avec un bouton fermé, tout ça,
machin. Et sauf que là, maintenant,
ça arrive avec... En atif, en fait.
En atif. En atif, totalement en atif.
Alors, l'avantage d'être en atif, en fait,
c'est que c'est totalement accessible. C'est-à-dire que...
En fait, quand tu vas ouvrir
ton dialogue, bon, déjà, ça va ficher.
Après, tu peux styliser tout ça, machin, à mettre une ombre.
Enfin, tout ce que tu veux. Et en fait,
ça enferme, déjà, la tabulation,
elle est enfermée dans le dialogue.
Donc, quelqu'un qui navigue avec un...
Avec un clavier,
pour l'accessibilité, en fait, il reste enfermé
dans ce dialogue. Il ne peut pas en sortir, tu vois.
Donc, c'est géré naturellement, nativement.
Et puis, après, il y a d'autres avantages, comme
fermer la pop-up quand tu appuies sur escape,
des choses comme ça. Donc, c'est totalement accessible.
Et voilà. Aujourd'hui, enfin,
je conseille tout le monde d'utiliser ça en priorité,
quoi, pour faire des pop-ups.
Pour faire des modales, quoi.
Le truc qu'on connaît.
Et c'est bien supporté
par tous les néo-gataires.
Ouais, c'est bien supporté et je pense que ça va
de plus en plus disponible.
Alors, un nouvel attribut
ou...
Nouvelle attribut. Ouais, c'est un nouvel attribut
dans les inputs
avec le datetime
local.
Ouais, ça permet de faire...
En fait, il faut... On n'a pas d'exemple,
c'est dommage, on a dû préparer un exemple.
Ça ouvre tout simplement
une sorte de système classique
que tu vas choisir la date, tout ça.
Comme on peut faire un JavaScript,
sauf que là, ça sera natif.
Ça va s'adapter
au temps local, quoi, si tu es en France,
si tu es en États-Unis, et puis après,
il y a plein d'autres attributs. Basé sur les infos
du navigateur. Voilà, basé sur l'infos
des navigateurs. Et en plus, tu peux
mettre des... Il y a d'autres attributs
qui vont avec pour dire maximum de date,
minimum, etc.
Donc c'est hyper
très bien fait.
Ça s'adapte aussi...
Tu sais, le truc con, mais
des fois, les trucs qu'on peut faire en JavaScript
là, tu vas sélectionner une date
et bah sur mobile, les date-pickers,
exactement. Ça, souvent, sur mobile,
c'est un peu pourave, parce que ça devient
tout petit, machin, tu ne peux pas cliquer, tout ça.
Et bah là, c'est natif. Donc, ça va
ouvrir un date-picker qui sera adapté au mobile,
en fait, tout simplement. Selon
sur iOS ou sur Android,
ça s'affichera en tant que date.
Voilà. Donc ça, c'est
un super attribut qui est déjà accessible
sur tous les navigateurs les dernières versions.
Ready to go.
Fetch
Priority
Alors, c'est
un peu du JS, mais pas tant.
Alors, c'est de la
tribu qu'on met dans les
balises. Alors, c'est assez complexe,
parce qu'il y a plusieurs types
de balises, les images, les links, les scripts,
les e-frames, tout ça.
Alors, c'est quelque chose qu'on ne doit pas
forcément utiliser
tout le temps.
C'est ce qui est dit, c'est crôme,
puisque c'est l'ISPO d'ailleurs, sur Chrome et sur Edge.
Mais de temps en temps, ça peut être utile
si tu as une image
qui, tu sais, le first input délai,
ou des trucs comme ça. C'est pas le
first content full paint. Le premier
élément le plus large, là,
qui est souvent une image.
Et bien, en fait, tu peux
éventuellement, si ça te fait descendre de score,
utiliser ce fetch priority
en high, qui va te permettre
de charger très rapidement cette image et
tu auras un bon score en FCP.
Ça, c'est un exemple. Mais après, il y a d'autres choses.
Si tu as un script qui n'est pas prioritaire,
tu peux le mettre en low, comme ça, il sera
chargé plus tard. Voilà.
Voilà. Faut savoir que ça existe.
C'est pas quelque chose qu'on va utiliser
tous les jours, mais, de temps en temps, ça peut être utile
pour améliorer le chargement de la page.
Ok. Donc, en fait, on vient
une sorte de hiérarchisé
aussi bien
les liens
dans la balise
les images
ou les scripts ou les iframes.
On va pouvoir, en fait,
les étager
comme on veut pour justement
aller optimiser la performance.
Je pense que l'idéal, tu vois, c'est de
plutôt utiliser en low
pour dire, bah ça, cet élément, il est pas
prioritaire. Ben, charge le plus tard, on s'en fout.
Tu vois, je pense que c'est plus, on
utilisera plus le low que le high.
Ouais. Après, si tu veux,
si t'as beaucoup, peut-être que t'as
meilleur temps d'hérarchiser aussi,
mais oui, tu viens dégrader
ce qui n'est pas important, quoi.
Yes.
Inert.
C'est quoi ?
C'est...
Ce label inert, c'est
attribué qu'on vient mettre sur des divs
inert. Alors, ça permet
de rendre un
élément sur la page, et ça peut
être la page entière, si tu veux aussi.
En fait, ça le rend non-clicable,
non-selectionnable, etc.
En fait,
voilà, ça rend...
En fait, c'est l'équivalent, c'est l'équivalent
du disable qu'on met sur les boutons,
mais là, on va pouvoir le mettre
sur n'importe quel
élément. Ouais.
Donc, il y a une div, une image,
ou que cege... Ouais, n'importe.
Et on revient sur le même truc
d'accessibilité, ça permet
de ne pas pouvoir sélectionner
avec le clavier les éléments
qui sont en inert, en fait.
Ok. Donc, en fait, c'est surtout
des améliorations d'accessibilité
sur le HTML.
Oui et non.
Oui et non.
De toute façon, c'est ça beaucoup, l'HTML, c'est beaucoup d'accessibilité,
mais c'est oui et non, parce qu'en fait,
tu peux aussi avoir des gens qui sont
totalement avec des souris, tout ça,
valides, mais qui vont, qui ont des...
qui sont pas forcément à l'aise.
En fait, si tu veux, l'exemple qui donnait,
par exemple, c'était un carousel,
où tu vas avoir un élément qui est
central, ou c'est avec celui-là que tu dois
interagir, et tu as d'autres éléments
sur le côté, tu les rends inertes, comme ça,
la personne ne va pas pouvoir cliquer à côté,
ou machin, et se tromper, tu vois.
En fait, c'est vraiment pour rendre le
focus sur un élément, en fait, et
visible tous les autres.
Donc, c'est pas mal aussi, c'est...
Ouais, pardon.
Pour tout ce qui est grouping, en fait.
Enfin, si tu veux regrouper tous ces
éléments, parce que ton
disable, il ne va être que sur ton bouton,
mais pour pas rentrer dans le label,
tu viens
prendre l'ensemble
de la div, et tu la rends
inertes. Ouais, c'est ça. Cool.
Pas mal, les prix en charge par
tous les brossers aussi, les dernières versions.
Et même, ça farie.
16.
Il ne carri pas.
Le viewport
unite. On accéille
nouvelle unité. Ouais, alors là,
les unités commencent à avoir pas mal.
Enfin, moi, personne, j'utilise quasiment toujours les mêmes, mais...
Ouais, après...
OK. Et qu'est-ce que ça amène,
cette nouvelle unité, pour la gestion
des viewports ? Alors, ça sera principalement
utilisable sur mobile, en fait,
puisqu'en fait, comme tu sais,
sur mobile, en fonction
de site à la barre,
de... comment on a dit, la barre
où tu mets l'URL, tout ça, qui est visible,
qui n'est pas visible, parce que, en fonction de...
si tu scrolles ou pas, des fois, la barre, elle disparaît,
des choses comme ça. C'est là où on va utiliser
le DVH, le dynamic viewport 8, par exemple,
parce que, bah, ça va changer, en fait,
tu vois, la hauteur, en fonction, si la barre,
ce barre, ou si la barre revient,
après, t'as le largeur, t'as le small host,
enfin, voilà. La même chose, avec
sa farie, qui a bougé sa barre
de son URL de... Ouais.
En haut, et hop, elle est passée en bas.
Ça a changé la
navigation, quoi.
Ouais. Donc, c'est surtout sur mobile,
et voilà, ça nous permet
de vraiment d'avoir la hauteur du viewport,
en fonction de, voilà, si la barre est visible,
ou pas visible, tout ça. Donc, ça,
c'est assez récent. C'est une nouvelle unité
qui peut être utilisable, voilà, temps en temps,
si on a des choses vraiment qui doivent rendre toute la hauteur,
ou la largeur aussi, parce que ça marche aussi, en largeur.
En fonction, si ton téléphone est en paysage,
ou en portrait, et voilà,
se dispose sur sa farie 16, qui arrive,
mobile aussi, et puis
Firefox, et bientôt, j'espère,
sur Chrome, voilà.
Yes.
Du J.S.
Du J.S. Parce que, dans le
navigateur, il y a du HTML, il y a du CSS,
il y a du J.S. Toujours.
Il y a des nouvelles API. Alors,
on regarde ça.
Media session, qu'est-ce que c'est que ça?
Alors, media session, c'est...
Alors, franchement, je ne sais pas si
ce sera hyper utile, mais bon, elle existe.
Bon, en fait, ça permet de contrôler
le média, en fait,
par exemple, sur ton ordi,
si tu as un... tu sais, si tu lances
un média, une vidéo, tout ça, tu peux avoir
accès avec la télécommande.
Ils te donnent l'exemple via la montre.
Tu vois, tu peux contrôler via la montre,
le média. Enfin, je n'ai pas tout compris,
mais ça permet, en fait, de donner accès
aux médias qui sont en lecture, en fait, en cours,
et de donner les infos, comme le titre,
l'artiste, l'album. Ce que fait déjà un petit peu
le Mac, moi, je sais que quand je lance
une musique dans mon...
Voilà, quand tu lances ton...
Je suis arrivé.
Quand tu lances, il y a une musique
dans ton Apple Music, là, dans ton ordi.
En fait, tu as un truc en haut
qui affiche que tu es en train de lire. Telle musique,
avec tel album, etc.
Là, ça sera un peu la même chose, ça sera dans le navigateur,
et tu pourras afficher l'album, la musique, tout ça,
le nom, tout ça. Et donc ça marche.
Ça en atif. Oui, ça en atif, et ça marche
dans les téléphones, dans les montres
connectées, etc.
Ça permet d'afficher ce qu'il y a en cours
des lectures.
Ça marche. Navigation
IPI,
là, il rechange...
Non, c'est complètement nouveau.
C'est complètement nouveau.
Aujourd'hui, on a la History.
Navigation... Non, c'est pas la navigation,
c'est la Windows History
qui permet de faire du pop, du push,
tout ça, machin, qu'on utilise
dans les web apps, principalement
pour naviguer dans la web app.
Et là, en fait, c'est en train de travailler
sur une nouvelle API de navigation,
qui sera totalement nouvelle, qui n'est pas du tout
implémenté, on est vraiment expérimental, mais il travaille
dessus, et ça permettra, justement, comme l'exemple
qui est là, en fait,
de te rajouter des événements,
de découter des événements,
en fonction de navigation, tout ça,
et de faire des...
des choses en fonction de
quelle page, où tu navigues, etc.
Donc ça donnera vraiment un accès total
aux URL de navigation, ça sera
basé sur de l'événement,
tu vois, et ça va être assez puissant,
mais on est vraiment, vraiment
expérimental, mais ça devrait arriver prochainement.
Par contre, ça veut dire aussi
que toutes les librairies
majeures, type
réacte-routeur,
vue-routeur,
ou NUXT, enfin NEXT,
toutes ces librairies
qui utilisent le routage,
si ils doivent changer
leur mode de
construction.
Là, pour le coup,
c'est un gros, gros, gros breaking
change, quoi.
C'est un gros...
Ouais, ouais, ouais, ouais, oui, c'est
une grosse avancée, c'est pour ça que je pense
ça va prendre quand même du temps pour qu'elle soit vraiment
écrite complètement et
implémentée dans les navigateurs, mais
ça va faire un gros changement et ça sera adapté.
En fait, c'est ça aussi, c'est que maintenant
les API qui s'implémentent, en fait, sont vraiment adaptés
ou voilà, ce qu'on fait en fait,
les web apps, ça prend vraiment le lead, donc
ils nous manquent des outils comme ça,
tu vois, et donc ça arrive, je ne sais pas quand,
mais en tout cas,
ils y travaillent.
Ils y travaillent, c'est prometteur.
De manière connexe, en fait,
il y a la page transition
API, qui est dans le même
train, on va dire,
si ils changent le routeur,
ça va nous permettre
d'accéder
à la transition entre les pages.
Alors ça, c'est assez énorme,
pareil, experimental, donc
on a mis les deux là, mais c'est vraiment
deux choses qui, ça ne va pas
arriver demain, mais ça va quand même
arriver dans pas très longtemps, et il faut
quand même savoir que ça va exister.
Et les pages de transition,
en fait, c'est un nouveau système qui permettra
de partager des éléments
entre les pages.
Et donc ça permettra de faire des effets de transition
comme on a déjà sur le mobile,
en fait, tu sais, quand tu
cliques
sur une carte,
une image,
et en fait, l'image se déplace
en haut, ça grandit pour être
le header de la page numéro 2, en fait.
Exactement, c'est exactement l'exemple qu'on donne souvent.
Et en fait, ça permettra
de faire ça, donc de partager un élément
entre deux pages, et
voilà, l'image, par exemple, et bah ça grandir,
se déformer, tout ça, c'est pas une transition
qui sera vraiment fluide,
qu'on peut avoir sur les mobiles,
qui se déja sur les mobiles.
On peut déjà faire ça, mais avec des librairies
tiers qui sont très gourmandes,
des gésapes, et beaucoup,
beaucoup, beaucoup de codes.
Donc ça, on pourra le faire
ça nativement,
une fois de plus, c'est en mode
c'est en mode expérimental.
C'est un mode expérimental, c'est vraiment tout
nouveau, ils en parlent tout juste maintenant,
ils en ont parlé pendant la Google Iow,
il y a des vidéos qui sont disponibles, on va les montrer bien.
Mais c'est hyper prometteur de pouvoir
faire des transitions comme ça, facilement,
avec des éléments qui sont partagés entre les pages et tout.
Et normalement, si je ne me trompe pas,
ça devrait fonctionner même
sur un site classique, qui change
de, qui recharge la page pour changer de page,
c'est vraiment assez poussé.
Top, après, si on
se base sur l'implémentation
des nouvelles fonctionnalités qu'on a vu il y a un an,
il nous montre ça, si ça
prend le même
le même taux d'adoption,
bon, l'année prochaine, c'est bon.
J'espère.
On verra.
On verra.
On parle de safari un peu.
Yes, safari, il y a une vidéo
qu'on mettra en lien aussi qui explique
les évolutions de safari, ça dure
une trente-deux minutes, elle est super intéressante
et à toutes les évolutions de safari,
version 16, donc qui arrive bientôt.
Et voilà,
j'ai noté quelque chose
importante, dont l'évolution
du web inspecteur, donc le DevTools
s'en fait évolue, il y a des nouveautés à l'intérieur,
ils organisent un peu le truc, tout ça,
puis il y a un truc, il y a un peu des boutons
tu sais, comme dans Chrome, quand tu fais du
flex ou des grilles, des trucs comme ça, tu peux
accéder directement à des petits boutons
qui te permettent de la ligne à gauche, la ligne à droite,
de voir en live en fait, tout ce type de choses-là.
Donc ils implémentent, on voit que d'un coup
la DevTools s'il évolue.
Alors qu'il est...
Après, il peut-être qu'il arrive
un petit peu tard quand même.
C'est clair.
Enfin, le DevTools
de Chrome
a vraiment fait mal,
le Firefox
est très très bon aussi.
Le Safari était vraiment à la traîne.
En fait, il rattrape le retard,
tout simplement non?
Je suis peut-être un peu touchant.
Je sais pas
si il rattrape le retard, mais bon, ça bouge.
Il y a encore beaucoup de travail
après le retard.
Des extensions?
Et donc du coup,
ils ont annoncé que
ça prendra maintenant
les extensions, en fait, ça sera
les mêmes APIs
que les DevTools de Chrome, tout ça.
Qui est une API
qui est standard en fait.
Et donc, a priori,
ça sera facile d'implémenter des extensions
sur Safari.
Donc, je sais pas
tout à profondi, mais normalement, ils disent
que bon, vu que ça s'est utilisé même d'API,
ça sera quasiment la même chose.
Ok, donc le portage
d'une extension Chrome
à une extension Safari,
c'est beaucoup plus facile.
Ouais, carrément.
C'est ce qui est annoncé après.
Donc ça veut dire qu'il change beaucoup de choses.

C'est assez bizarre, parce que
les DevTools s'évoluent, les extensions deviennent plus faciles
à développer. On dirait qu'ils ont envie
d'avoir des développeurs, tout ça,
des combots sur Safari en gros.
C'est bizarre, d'un coup, je sais pas ce qui se passe.
Après,
peut-être qu'ils
réouvrent
en fait. Ils se remettent
dans une position où ils essayent de réouvrir.
C'est bien, c'est bien.
Après, je pense quand même qu'ils arrivent peut-être un petit peu
trop tard, avant que
tous les Dev
repassent pour faire du développe
sur Safari.
Je pense que
ils arrivent peut-être un peu tard.
Mais c'est mon point.
Après, tu sais,
Chrome, ils sont arrivés, ils ont pris
une grosse majorité de marché, alors qu'avant,
c'était d'autres navigateurs.
Faire Fox était beaucoup plus haut, avant, c'était Explorer.
Ça bouge tout le temps.
Ouais, je suis convaincu.
Sauf que Safari, par définition,
tu ne touches que les développeurs Mac.
Ils sont sur Mac OS.
Donc déjà, tu cutes
beaucoup, beaucoup, beaucoup.
Donc...
À moins que demain, ils nous ressortent un Safari
pour Windows.
Comme à l'époque.
Là, tu mets la pièce, mais moi,
je ne te suis pas.
Moi, je ne te suis pas.
Le web push
de quoi ?
Pardon ?
Ils ont parlé du web push.
L'enfin, parler du web push.
Ouais, le truc qu'on attend depuis
je ne sais même plus d'ailleurs.
Le truc qui s'est pris,
c'est surtout qu'ils ont fait la sourdine
pendant des années et des années.
Alors qu'ils n'ont pas vraiment
implementé ce système de notification.
C'était la muette
totale.
Aucune réaction.
Rien, mais rien du tout.
Et puis, toujours leurs trucs
propriétaires
pour le Safari Mac.
Et rien sur le Safari
iOS.
Et puis là, d'un coup,
enfin, enfin, le web push
arrive qui sera
implementable de la même façon que sur Chrome, etc.
Donc, c'est les mêmes appels.
Tout va fonctionner pareil.
Donc, enfin, Aléluia
qui arrive sur la version 16, donc, sur Mac
qui va bientôt sortir.
Et ils annoncent l'année prochaine sur iOS.
Donc, enfin, on va pouvoir faire
des notifications push
dans iOS.
L'année prochaine peut-être.
Moi, je vois
une dernière, c'était un des derniers
derniers remparts
sur les PWA.
Alors, je sais que les développeurs natifs
ne veulent pas entendre ce mot-là.
Mais les PWA, les Progressive Web App,
ou en clair,
on va développer
une web application
et en utilisant
les bonnes balises,
des manifeste,
des services workers, on va pouvoir
l'incorporer
dans notre téléphone mobile.
Et on se rapproche
du comportement
d'une application
native.
Par contre, on n'aura pas accès
au processeur, tout ça.
Mais pour faire une application
de réservation de, je sais pas,
ou un to-do list,
ou la majorité,
des 80%
des web apps,
la puissance est déportée,
tout le calcul est déporté,
à part pour les jeux,
ou pour le Queen Foonie Latence propre.

avec le web push
et l'utilisation des notifications
pour le web
et accessible depuis iOS,
là, je vois
une grosse rempart
qui saute
pour l'adoption et le développement
des PWAs.
Souvent,
je ne sais pas de toi, mais la plupart des gens
qui parlent des PWAs,
sont souvent la première feature qui demande
est-ce qu'on peut mettre des notifications ?
C'est vraiment le truc qui fait...
C'est pas toujours le cas.
En fait, ça peut être
un frein.
C'est-à-dire, je ne peux pas,
j'ai pas accès aux notifications
pour iOS,
et donc ça peut être un frein.
Parfois,
il y a des apps qui ne nécessitent pas
d'avoir
des notifications.
Et pour le coup, quand on leur parle
des 30%
de tout ce qui passe dans l'appli
payé pour Apple
ou pour Google,
là, ils considèrent peut-être que...
Donc en tout cas, ça change.
Mais
c'est clair que ces notifications
ça mène un gros, gros, gros, gros plus.
Ah, clairement.
Épée de PWAs.
C'est à la même API, quoi.
Ouais, ouais, ça sera la même API, donc un seul serveur, tout ça.
Et puis, donc quand tu rajoutes
si tu mets ça, les webpages sur Safari,
si tu mets la transition API
qui va arriver aussi,
ouais, la PWAs va devenir
de plus en plus importante et va pouvoir remplacer
ces 80% d'applications qui pourraient
te faire un PWR.
Et on sort
du Dictact, des Store et tout ça.
Alors là, on va pas se faire des amis,
c'est clair.
Parce que tous les développeurs natifs vont nous tomber
dessus et voilà.
Mais, à Emit,
ça fait aussi partie
du jeu, quoi.
Je pense que
à un moment donné,
le web en fait évolue
et aujourd'hui
avoir 3 codes base
identiques.
Enfin, 3 codes base qui font la même chose
et avec 3 codes base
à entretenir,
c'est hyper, hyper compliqué.
Et si en plus c'est pour faire des choses
assez simples technologiquement,
les clients sont riches,
c'est bien.
Ça entretient
le partage.
C'est bien, mais bon,
c'est une aberration
en termes de DEF.
Et une fois de plus, on ne dit pas
que les PWAs vont tout remplacer
et vont se substituer
et que c'est la mort du mobile, loin de là,
jamais de la vie. Mais en tout cas,
il y a beaucoup
de web-app
qui peuvent être incorporés sur le téléphone
en mode
directement
sur le téléphone. Et c'est que du web.
Parfait.
J'ai 2-3 trucs encore à rajouter
pour Safari, qui parait
de manifeste.
Ils évoluent au niveau de l'icône aussi,
ils ne prenaient pas en compte les icônes dans les manifeste.
Donc là, ça va être pris en compte aussi.
Il y a plein de petits trucs comme ça encore
où on n'a pas parlé.
Et puis après, il y a beaucoup d'évolution aussi javascript
au niveau du code vraiment pur javascript,
quelques fonctions qui seront implémentées,
des nouvelles fonctions, comme le point A.
qui permet de sortir un élément du tableau
en définissant son numéro.
Des choses toutes simples, ou avant on faisait
des hacks, on prenait la longueur
moins x machin.
Bref, voilà.
En fait, on avait des...
Non, c'était pas des hacks, c'était des
des fonctions
une sorte de fonctions utilitaires
qui nous parentaient et là ça va être
en natif.
Il y a plein de petits trucs comme ça. On mettra
les liens de façon des vidéos, j'explique tout,
mais c'est assez complet, c'est super intéressant.
Et puis il faut se tenir à jour tout ça,
parce qu'il y a des choses qui sont implémentées.
Il faut aussi faire évoluer notre
façon de coder aussi, c'est ça qui est important.
Ne pas garder notre façon
toujours la même en fait, il faut évoluer.
Il y a des nouvelles choses qui arrivent.
C'est important en tant que développeur de faire évoluer sa façon de coder.
Et le meilleur moyen de rester informé
c'est d'écouter Double Slash
et de
nous mettre un pouce,
un petit commentaire. Vous êtes pas d'accord
avec nous, dites-le nous.
Un commentaire,
un pouce, un like, un sub, tout ça.
Et puis
nous, on est toujours
friands de
voir tout ça.
Merci Patrick, merci
à tous pour ceux qui sont restés au bout
de l'épisode. Et puis on vous dit
à bientôt pour la prochaine.
Ciao ciao !
Merci pour tous les liens de l'épisode, les références
évoquées durant l'émission.