Ordre de chargement des fichiers et du code-css /MQ-css

Bonjour
Comment fonctionne les navigateurs pour le chargement du code css au niveau fichier , code MQ et logique d'application (algo lit le code css et applique DOM ou inversement)
je na borde pas la spécificité ni de spécificité qui s hériterait .... ( trop complexe !?)

A solution
les fichiers css sont chargés en premier ( car dans header) .
le tag du code html est parser et le code css est immédiatement appliquer

B solution
les fichiers css sont chargés en premier ( car dans header) .
le code html est parser dans sa totalité puis le code css est appliquer .
Est à partir du css (1) que la recherche se fait ou à partir du DOM (2)?
1) j ai un sélecteur dans mon css ou se trouve til dans le dom ?
2) j ai un sélecteur dans mon DOM ; existe t il dans mes CSS disponible ?


C pour un fichier css
Si ce fichier css contient du code css dans MQ et en dehors comme ci dessous .
----
selector1 {code css }
MQ {selector1 {code css } }
selector {code css }
MQ {selector {code css }}
----
Comment les navigateurs appliquent ils le code css ?
Lisent ils le code non MQ puis demande la taille du "navigateur" et regardent les MQ qui s appliquent par la suite ? ou appliquent ils les instructions dans l ordre de lecture d apparition du code css et si il y a correspondance entre MQ et taille du navigateur ?

MQ et javascript
MQ ne gère que le activatio net la sesactivation du code css ? il me semble . Quel outils existent pour activer /désactiver le code javascript lors du franchissement du breakpoint ?
Si j ai un menu avec un javascript qui ne doit s appliquer que pour un interval MQ "cd" et pas "ab" ; y a t il une librairie qui peut activer ce script lors du passage de ab vers cd et le désactiver lors du passage de de cd vers ab ? . Lors de ce passage : css s'appliquent il avant le javascript ou inversement ou cela dépend du code css et js ?
a<------>b c<---actif---->d

Merci
Modifié par 75lionel (17 Feb 2016 - 10:39)

Bonjour,

Déjà, les navigateurs ne font pas tous exactement la même chose.

Ceci étant, en gros (vraiment en gros), ils commencent par décoder le HTML (y compris les éventuels scripts javascript) et le css (en parallèle ou séquentiellement, de manière synchrone ou asynchrone : ça dépend de beaucoup de choses) : on obtient alors ce que certains appellent un "arbre de rendu".

Les navigateurs procèdent ensuite à l'affichage de cet arbre de rendu.

Quand la construction de l'arbre de rendu est longue (du fait des temps de téléchargements des différentes ressources nécessaires, ou de la durée d'exécution de codes javascript, ou pour toute autre raison), les navigateurs peuvent afficher des états intermédiaires de l'arbre de rendu pendant quelques instants.

Ceci veut dire qu'il n'y a pas mise à jour de l'affichage à chaque balise html ou règle css rencontrée lors de la construction de l'arbre de rendu (les navigateurs n'en n'auraient pas le temps), mais seulement "de temps en temps".

En ce qui concerne les media queries, et si on suppose pour simplifier que l'on est dans un cas où tout est suffisamment rapide pour qu'il n'y a pas affichage en cours de route, on aura donc parcours de l'ensemble des css, "puis" affichage (qu'il y ait des media queries ou pas ne change rien en fait).

Après l'affichage initial de la page, lorsqu'il y a du code javascript qui s'exécute, ou si l'utilisateur agit par exemple en redimensionnant une fenêtre, ou pour toute autre raison, cela a pour effet d'abord de modifier l'arbre de rendu, puis l'affichage lorsque celui-ci est mis à jour "de temps en temps".

Amicalement,
Modifié par parsimonhi (25 Feb 2016 - 08:54)

Bonjour,
Un article intéressant sur le sujet est disponible surdeveloppez.

Bonjour,

sepecat a écrit :
Bonjour,
Un article intéressant sur le sujet est disponible sur developpez.

Celui-là, il mérite une impression et même une reluire en cuir. Très intéressant (il faut juste faire attention qu'il a déjà 5 ans).

Amicalement,

parsimonhi a écrit :
Bonjour,Celui-là, il mérite une impression et même une reluire en cuir. Très intéressant (il faut juste faire attention qu'il a déjà 5 ans).
Amicalement,

Effectivement, c'est avec des articles tel que celui-là qu'on s'aperçoit que certains connaissent leur sujet ET savent faire partager cette connaissance avec leurs lecteurs... ce qui n'est pas toujours gagné d'avance.
On a tous croisé des petits "génies", très forts dans leur domaine de compétence mais incapables de maintenir un auditoire éveillé en captivant son attention par la clarté de l'exposé.
Sur la temporalité de l'article, tu as parfaitement raison de la signaler afin que chacun puisse approfondir ces bases en recherchant les évolutions survenues récemment (je pense notamment aux moteurs de javascript et à l'utilisation du processeur graphique).

merci pour le lien .