#12955

Gecko Reflow Visualization - mozilla.org - YouTube

En référence à mon dernier post, voici une vidéo en slow-motion qui montre comment Gecko (Firefox) affiche une page web.
On note très bien les différents passages du moteur DOM sur la page, pour y placer les éléments de la page, avant le rendu final.

Voici une autre vidéo (50 minutes) où un intervenant de Mozilla explique en détail comment fonctionne un moteur de rendu (Gecko) : http://www.dailymotion.com/video/xp69td_un-navigateur-comment-ca-marche_news

Si vous faites du CSS ou du JS, je vous conseille de regarder ça, on y apprend des choses.

Sinon, dans les outils de développeur de Firefox, il y a un onglet (à activer dans les paramètres) pour visualiser tout ce qui se passe : action sur le DOM, reflow, recalcul des styles…
https://www.youtube.com/watch?v=ZTnIxIA5KGw

#12954

timovn/jscss-tiles · GitHub

Je viens de voir que parfois, surtout Chrome, buguait sur ce script : le calcul des tailles des images avait déjà commencée que les images n’avaient pas encore toutes chargées dans le navigateur.

Il faut impérativement lancer le JS quand la page a finie de charger (ou au moins les images). On fait ça avec un onload :
window.addEventListener('load', tileImages);


Si ça marchait dans Firefox et pas toujours dans Chrome, c’est parce que la fonction JS « getComputedStyle » ne fonctionne pas pareil.

Un style CSS, par exemple une largeur, se calcule en 3 étapes :
– 1) la valeur déclarée : c’est la valeur retenue (selon les règles de spécificité CSS) une fois que le CSS est calculé.
– 2) la valeur calculée : quand on déclare une valeur en pourcent, le navigateur transforme ça en pixels (ex : largeur du bloack parent = 200px, et l’enfant fait 50%, la valeur calculée est 100px).
– 3) la valeur retenue : quand il y a plusieurs niveaux d’imbrication de valeurs relatives (%, em, en…), il faut parfois recalculer certaines zones.

À l’issue de la 3e étape : chaque élément de la page dispose alors de tailles, et positions finales sur la page. Le rendu est alors effectué.

Sauf que… pour certaines propriétés CSS, en particulier « width » et « height », le « getComputedStyle » retourne la valeur calculée (étape 2) et non la valeur finale (étape 3), ce qui pose un problème dans le cas présent.

Chrome et Firefox ne renvoient pas toujours les mêmes valeurs à cet endroit précis : je crois que Firefox refait un rendu en plus de tout ça (c’est pour ça que ça marchait dans Fx et pas Chrome).

Tout ceci devient assez compliqué. Mais savoir commence fonctionne un navigateur en internet permet parfois de s’en sortir.
https://github.com/timovn/jscss-tiles

#12953

▶ CHRIS : 10 Façons Insolites de Voir Nos Chiffres - YouTube

Intéressant tout ça !

Et toutes les interprétations expliquent pas mal de choses : le 7 « divin » explique pourquoi c’est le 7 est souvent un chiffre porte bonheur ou un chiffre magique (dans Harry Potter, c’est le chiffre le plus puissant, la raison pour laquelle Voldemort utilise 7 horcruxes).
https://www.youtube.com/watch?v=iIslxncwtFc

#12951

Thomas Citharel sur Twitter : "Comment tromper les outils des internets (NoFlash, NoScript, RequestPolicy, & VPN au Liechtenstein). @lehollandaisv http://t.co/lDyMvJpv2x"

Les modules de vie privée sont sympa pour masquer les informations d’un navigateur. Mais il reste possible de détecter les navigateurs, même sans UA, en JS : https://jsfiddle.net/wvbdnb8o/

Et même sans JS, il reste possible de le détecter en CSS : certains éléments (-moz-, -webkit-…) par exemple, ne sont exécutés que par certains navigateurs. Il suffit qu’on mette une URL dans la valeur de cet élément CSS — URL différente pour chaque navigateur — et le serveur peut savoir quel URL navigateur est utilisé.

Selon l’évolution des spéc CSS, il est même possible de trouver une fourchette de la version utilisée.

Je n’ai pas testé tout ça, mais si c’est possible alors soyez sûr que Google, FB & Co l’utilisent déjà depuis longtemps.
https://twitter.com/TcitWorld/status/630152893149147136