style.css unique préférable avec link ou javascript ?

[ortolojf]

Bonjour

Je suis en train de modulariser les scripts css de mon site.

J'ai environ une petite dizaine de scripts css par fonctionnalités, avec le script maître sans classe.

Je vais in fine charger un seul script, mais j'ai besoin de me rafraîcĥir les idées.

Un script css doit-il de préférence être chargé avec <link rel="stylesheet" src="/style.css"> ou bien est-il utile de le charger en Javascript de manière asynchrone ?

C'est-à-dire générer ce même <link>, en mode asynchrone ?

Merci beaucoup pour votre aide.

Amicalement.

 

[spout]

Si tu fais ça tu auras un problème nommé FOUC: https://fr.wikipedia.org/wiki/FOUC

J'utilise Webpack dans tous mes sites et par défaut il met le CSS dans le bundle JS (oui oui), mais je n'aime pas cette façon alors heureusement il y a un module MiniCssExtractPlugin pour séparer les 2.

 

[passion]

Ah ça y est ?!
Les grandes décisions pour le début d'année ?
Le design va être refait ou pas...

 

[ortolojf]

Merci beaucoup à Spout et passion

Je vais suivre le conseil de Alsacreations en mettant un <link simple.

Pour ce qui est du design et l'apparence graphique, je prévois théoriquement un arrangement des premières cellules à gauche des tableaux des paris gagnés ( 2 pages ), et éventuellement des simplifications dans le Panneau de Configuration.

Et puis si possible, simplification des css, léger changement des couleurs et diminution du nombre de couleurs, etc...

Actuellement, aucune des catégories/sélecteurs css des 10 fichiers css n'est en doublon ( sauf le .bouton que j'arrange illico ).

Cependant, à l'intérieur de chaque fichiers css j'ai quelques catégories/sélecteurs quasiment identiques.

Merci beaucoup pour votre aide.

Amicalement.

 

[rick38]

Google recommande de mettre inline dans le header le css qui habille ce qu'il y a au-dessus de la ligne de flottaison, puis de charger en asynchrone le fichier css qui s'occupe du reste de la page.

Mais ça c'est la théorie, je ne l'ai jamais fait car c'est compliqué et que si des gens scrollent très vite avant que le fichier n'ait fini de se charger, ils auront logiquement quand même l'effet flash.

 

[ortolojf]

Bonjour rick38

Voilà j'ai trié, et remplacé les couleur avec un script php.

Je n'ai plus que 51 couleurs au lieu de 63+

J'ai tiré les couleurs de remplacement du site https://hexcol.com

Pour l'instant je teste en local.

Merci beaucoup de votre aide.

Amicalement.

/**
  * Couleurs
  **/
#000;
#00f;
#441;
#030;
#060;
#090;
#090;
#099;
#0c0;
#0f0;
#333;
#390;
#393;
#399;
#39c;
#3cf;
#3fc;
#3ff;
#600;
#666;
#6c6;
#6c9;
#6f6;
#6fc;
#909;
#93f;
#963;
#996;
#9f3;
#9f9;
#9fc;
#c33;
#c60;
#c63;
#c93;
#ca6;
#cc6;
#cc9;
#ccc;
#cf3;
#cf9;
#dbd8a0;
#f90;
#f96;
#f9f;
#fc0;
#fcc;
#ff0;
#ff3;
#ffc;
#fff;
#4f856a;
#57e07f;
#58c334;

 

[ortolojf]

Bonjour

Le site est up avec le nouveau style.css

Merci de me dire vos avis.

Url : https://www.pronostics-courses.fr

La logique du Panneau de Configuration n'a pas été modifiée.

Amicalement.