Messenger FA (BlankTheme) ne prend pas en charge le CSS

par Shiyami Jeu 22 Aoû 2024 - 16:43

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://owltesttest.forumactif.com

Description du problème

Bonjour à tous !

Je viens aujourd'hui demander votre aide sur le pluggin Messenger FA de AngeTuteur modernisé par BlankTheme.
J'ai pu tester les deux sur mon forum test. Le pluggin de Ange Tuteur fonctionne sans mal, mais j'ai vraiment du mal avec le design et il me semble complexe de modifier le css puisque directement inclus dans le javascript du pluggin.
En revanche, lorsque j'installe celui de BlankTheme, le CSS n'est absolument pas pris en compte malgré les étapes que j'ai pu suivre à la lettre. Le javascript fonctionne sans soucis, mais c'est comme si le javascript était sourd aux modifications de style. Les seules modifications qui fonctionnent sont celles qui sont forcées par le !important , mais je ne souhaite pas forcer toutes les modifications. Ce serait trop lourd.

Je n'ai pas encore touché au Javascript, et le forum est actuellement en cours de modification de design (d'où son aspect inachevé).
Cependant, je vais vous fournir le overall_header qui comporte la feuille de style et le bouton Messenger.

(PS : si jamais, les variables accentClr ou autres couleurs déterminées par le pluggin n'ont pas été installé, mais de toute façon j'ai déjà essayé pléthores de solutions et elles n'apparaissent pas non plus. C'est comme si elles étaient inexistantes alors qu'elles sont bien dans la feuille de style du forum. Du fait, je les ai supprimé.)

Overall_header:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/>  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE}  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch (tickerDirParam) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function () { $('#fa_ticker_content').css('display', 'block'); var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); if (slid_vert) { var height_max = h_perso; $('ul#fa_ticker_content li').each(function () { if ($(this).height() > height_max) { height_max = $(this).height(); } }); $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto'); $('ul#fa_ticker_content li').height(height_max); } $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display', 'none'); $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function () {  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if (report != null) { report.focus(); }   Ticker.start({ height: {switch_ticker.HEIGHT}, spacing: {switch_ticker.SPACING}, speed: {switch_ticker.SPEED}, direction: '{switch_ticker.DIRECTION}', pause: {switch_ticker.STOP_TIME} });  document.onclick = function(e){ if (!e.target.classList.contains('navicon')) { if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") { document.getElementById('menu-btn').checked = false; } } }; });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); });  //]]> </script> {GREETING_POPUP} <style type="text/css"> #page-footer, div.navbar, div.navbar ul.linklist { display: block !important; } ul.linklist li.rightside, ul.linklist li.rightside a.copyright { display: inline !important; }  .jcarousel-skin-tango .jcarousel-item { text-align: center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  </script>  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap" rel="stylesheet"/> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>  <link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"/>  <script type="text/javascript" src="https://js01.fra.co/24922.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gp-kim/Blank-Theme@main/Messenger/css-messenger.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body id="modernbb">  <div id="hitskin_preview" style="display: block;"> <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <em>Hit</em>skin.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br/> <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="inactive_popup" style="z-index: 10000 !important;"> <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div> <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div> <div id="inactive_popup_buttons"> <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button> <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button> </div> </div> <script type="text/javascript"> $('#inactive_popup #inactive_popup_close').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; $('#inactive_popup').hide(50); }); $('#inactive_popup #inactive_popup_url').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; location.href = '{inactive_users_modal.U_MODAL}' }) </script>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div>  <br/> <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div> <div> <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> </div> <br/>  <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/> </form> </div> </div>   <div id="like_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="like_popup_message"> {LIKE_POPUP_MSG} </div> <div id="like_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/> </form> </div> </div>  <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div id="page-header"> <div class="headerbar"> <div id="headerbar-top"> <div class="wrap">  <div id="main_navbar"> <div class="chara_navbar">  <div class="avatar_navbar"> <div class="js-avatar"></div> <script> $(function(){ $.each(_userdata, function(key, value){ $(".js-" + key).html(value); }) }); </script> </div>  <div class="pseudo_navbar"> <span class="USERNAME"></span> </div> </div> </div>   <div id="classic_navbar"> <div class="navbar_info"> <ul> <li>{GENERATED_NAV_BAR}</li> <li> <a id="FAM-button-open" title="Forumactif Messenger"><i class="bi bi-chat-fill"></i></a></li> </ul> </div> </div>  </div> </div> </div>  <div id="fa_ticker_blockD" style="margin-top:4px;"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </div> </div> </div>  </div> <div class="conteneur_minwidth_IE modern-resp"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <div id="page-body">  <div id="fa_ticker_block" style="margin-top:4px;"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="container"> <div id="content-main"> <div id="main"> <div id="main-content">

Merci pour votre attention et vos futures réponses !

par **Toryudo** Jeu 22 Aoû 2024 - 18:41

Bonjour !

On peut voir sur la page que le CSS https://cdn.jsdelivr.net/gh/gp-kim/Blank-Theme@main/Messenger/css-messenger.css est bien pris en compte, à priori en intégralité.

Par contre, au niveau des variables, on peut voir qu'elles ne sont pas définies.
Par exemple, la couleur "--FAM-pluginBackground" n'existe pas, donc le background reste transparent.

Même chose avec :
--font
--FAM-windowSize
--FAM-shadowBox
--neutralDark
--FAM-button
--FAM-titleSize
--FAM-chatBackground
--FAM-gradientTop
--FAM-gradientBot
--FAM-sleepModeBackground
--FAM-accentClr
--FAM-secondClr
--FAM-fontSize
--FAM-textareaBackground
--FAM-titleClr
--FAM-fontClr
--FAM-msgBackground
--FAM-newMsgAnimation
--FAM-buttonsClr
--normal-size
--FAM-myMsgBackground
--FAM-fontLightClr
--FAM-buttonHover
--FAM-quoteBackground
--FAM-gradient

Vous avez peut-être oublié une étape dans le tuto qui explique qu'il faut alimenter ces valeurs ? (je ne le connais pas)

par Shiyami Jeu 22 Aoû 2024 - 19:21

Bonjour !
Merci pour votre réponse !

Effectivement, comme je l'avais précisé dans mon post, je les ai volontairement retiré car elles prenaient une place inutile actuellement sur mon css comme elles ne fonctionnaient pas.
Je les ai réinstallé pour que vous puissiez voir que le style n'est pas pris en compte correctement.

Voici également un screen du rendu du pluggin sur mon forum :

Screenshot:

Normalement, cela devrait rendre comme sur leur plateforme : https://blankthemerpg.forumactif.com/t76-messenger (leur icône est en haut à gauche).

Ce rendu quelque peu disgracieux est dysfonctionnel à la fois sur Google Chrome et sur Opera GX Messenger FA (BlankTheme) ne prend pas en charge le CSS 1f605

Messenger FA (BlankTheme) ne prend pas en charge le CSS 1f605

Je ne sais pas si vous avez une solution ? Car de mon côté, la feuille de style n'est pas prise en charge :/

par **Toryudo** Ven 23 Aoû 2024 - 13:42

Bonjour !

Alors, je ne sais pas si vous avez fait attention, mais sur votre page par exemple, je vois cette propriété :

Code:: --fam-pluginbackground: #fafbfc;

Mais elle est différente de celle qu'il faudrait mettre, avec des majuscules :

Code:: --FAM-pluginBackground: #fafbfc;

Vous pouvez vérifier si vous avez bien mis les majuscules comme il faut ?

par Shiyami Ven 23 Aoû 2024 - 14:42

Bonjour !

Merci à nouveau pour ta réponse et ton aide !

J'ai vraiment copié/collé comme dans le tutoriel. Il y a bien les majuscules où elles sont sensées apparaître.
Voici le code qu'il y a dans la feuille de style du forum correspondant au plugin :

Code:: :root { --FAM-windowSize: 750px; --FAM-fontSize: 14px; --FAM-titleFont: 'Open Sans'; --FAM-titleSize: 24px; --FAM-light: white; --FAM-dark: black; --FAM-accentClr: #4B57C5; --FAM-secondClr: #333c92; --FAM-fontClr: #232657; --FAM-fontLightClr: #484a65; --FAM-linkClr: #4B57C5; --FAM-titleClr: #171938; --FAM-buttonsClr: #171938; --FAM-pluginBackground: #fafbfc; --FAM-chatBackground: #f2f4f9; --FAM-textareaBackground: #fafbfc; --FAM-msgBackground: #dce3f4; --FAM-myMsgBackground: #fafbfc; --FAM-quoteBackground: #8a9fd236; --FAM-shadowBox: 0 0 20px var(--neutralDarker); /* Pas besoin de les modifier, elles sont relatives aux variables au-dessus */ --FAM-gradient: linear-gradient(-90deg, var(--FAM-pluginBackground) 20%, color-mix(in srgb, var(--FAM-pluginBackground), transparent 100%) 100%); --FAM-gradientTop: linear-gradient(180deg, var(--FAM-chatBackground) 20%, color-mix(in srgb, var(--FAM-chatBackground), transparent 100%) 100%); --FAM-gradientBot: linear-gradient( 0deg, var(--FAM-chatBackground) 20%, color-mix(in srgb, var(--FAM-chatBackground), transparent 100%) 100%); --FAM-sleepModeBackground: color-mix(in srgb, var(--FAM-chatBackground), transparent 30%); --FAM-newMsgAnimation: color-mix(in srgb, var(--FAM-accentClr), transparent 20%); }

Je n'ai pas eu besoin d'y toucher, tout était déjà écrit correctement.
Quand au css fourni par le tutoriel, tout est écrit de la même façon également.

Il ne s'agit pas uniquement que de la couleur ou de la typographie : tout le style n'est pas pris en compte. C'est comme si le plugin était lié au css fourni mais qu'il était incapable de l'utiliser.
La seule façon que j'ai trouvée de faire fonctionner cette feuille de style est d'appliquer des !important partout, mais ce n'est pas une solution viable.

J'ai testé pas mal de choses pour remédier à ce problème, mais je n'arrive pas à comprendre d'où il peut venir.
J'ai d'autres Javascripts, je les ai tous désactiver et le souci ne vient pas de là car il existe toujours malgré leur désactivation.

Voilà je suis un peu en manque de solutions :')

par **Toryudo** Ven 23 Aoû 2024 - 15:17

Hm, est-ce que vous pourriez mettre "Optimiser votre CSS" à "non" ?
C'est une option dans la Feuille de style CSS.
Je viens de tester de mon côté, j'ai l'impression qu'elle met tous les champs en minuscule automatiquement.

par Shiyami Ven 23 Aoû 2024 - 15:26

Effectivement, ça a l'air de fonctionner mais j'ai l'impression qu'il y a toujours des "erreurs". Notamment sur le choix du sujet. Les avatars ne sont pas au bon endroit. Après je pense que je pourrais peut-être réparé ça, mais j'avoue que ça m'intrigue.
Ce n'est pas "dangereux" de décocher cette case d'optimisation ? Je n'ai jamais eu besoin de faire ça.

Je vais vous montrer un screenshot :

Screenshot:

EDIT : Je crois avoir repéré un souci supplémentaire mais j'attends de pouvoir agir dessus ce soir avant de poursuivre ce sujet, histoire d'éviter de demander de l'aide si j'arrive à me débrouiller Wink

EDIT 2 : J'ai l'impression que c'est en remettant les bonnes div dans le Javascript que les soucis d'affichage que je pointais du doigt avant et après le premier edit se résolvent.
Ma question sur l'optimisation désactivée cependant n'est pas caduque, je ne sais pas vraiment si cela est "dangereux" ou non pour la suite :/

par **Toryudo** Ven 23 Aoû 2024 - 16:30

Non, ce n'est pas dangereux, c'est juste de la compression de données.

Par exemple, le code suivant :

Code:: :root { --FAM-windowSize: 750px; --FAM-fontSize: 14px; --FAM-titleFont: 'Open Sans'; --FAM-titleSize: 24px; --FAM-light: white; --FAM-dark: black; --FAM-accentClr: #4B57C5; --FAM-secondClr: #333c92; --FAM-fontClr: #232657; --FAM-fontLightClr: #484a65; --FAM-linkClr: #4B57C5; --FAM-titleClr: #171938; --FAM-buttonsClr: #171938; --FAM-pluginBackground: #fafbfc; --FAM-chatBackground: #f2f4f9; --FAM-textareaBackground: #fafbfc; --FAM-msgBackground: #dce3f4; --FAM-myMsgBackground: #fafbfc; --FAM-quoteBackground: #8a9fd236; --FAM-shadowBox: 0 0 20px var(--neutralDarker); /* Pas besoin de les modifier, elles sont relatives aux variables au-dessus */ --FAM-gradient: linear-gradient(-90deg, var(--FAM-pluginBackground) 20%, color-mix(in srgb, var(--FAM-pluginBackground), transparent 100%) 100%); --FAM-gradientTop: linear-gradient(180deg, var(--FAM-chatBackground) 20%, color-mix(in srgb, var(--FAM-chatBackground), transparent 100%) 100%); --FAM-gradientBot: linear-gradient( 0deg, var(--FAM-chatBackground) 20%, color-mix(in srgb, var(--FAM-chatBackground), transparent 100%) 100%); --FAM-sleepModeBackground: color-mix(in srgb, var(--FAM-chatBackground), transparent 30%); --FAM-newMsgAnimation: color-mix(in srgb, var(--FAM-accentClr), transparent 20%); }

Est optimisé/compressé comme ceci :

Code:: :root{--fam-windowsize:750px;--fam-fontsize:14px;--fam-titlefont:'Open Sans';--fam-titlesize:24px;--fam-light:#fff;--fam-dark:#000;--fam-accentclr:#4B57C5;--fam-secondclr:#333c92;--fam-fontclr:#232657;--fam-fontlightclr:#484a65;--fam-linkclr:#4B57C5;--fam-titleclr:#171938;--fam-buttonsclr:#171938;--fam-pluginbackground:#fafbfc;--fam-chatbackground:#f2f4f9;--fam-textareabackground:#fafbfc;--fam-msgbackground:#dce3f4;--fam-mymsgbackground:#fafbfc;--fam-quotebackground:#8a9fd236;--fam-shadowbox:0 0 20px var(--neutralDarker);--fam-gradient:linear-gradient(-90deg,var(--FAM-pluginBackground) 20%,color-mix(in srgb,var(--FAM-pluginBackground),transparent 100%) 100%);--fam-gradienttop:linear-gradient(180deg,var(--FAM-chatBackground) 20%,color-mix(in srgb,var(--FAM-chatBackground),transparent 100%) 100%);--fam-gradientbot:linear-gradient(0deg,var(--FAM-chatBackground) 20%,color-mix(in srgb,var(--FAM-chatBackground),transparent 100%) 100%);--fam-sleepmodebackground:color-mix(in srgb,var(--FAM-chatBackground),transparent 30%);--fam-newmsganimation:color-mix(in srgb,var(--FAM-accentClr),transparent 20%)}

C'est-à-dire qu'on retire tous les espaces inutiles, tous les retours à la ligne, tous les commentaires, on modifie "white" par "#000" parce que ça fait un caractère de moins, etc. On passe donc d'un fichier de 1356 caractères (octets) à un fichier de 1108 caractères (octets), c'est plus rapide à télécharger. C'est juste ça !

Je vais quand même en parler au staff, pour voir s'ils gardent ça comme ça ou s'ils corrigent. Techniquement, c'est aussi une optimisation de n'avoir que des caractères minuscules (pour la compression zip des données cette fois, parce qu'elles sont aussi automatiquement zippées/dézippées dans le navigateur), mais ce n'est plus de l'optimisation, c'est carrément du "rajout d'erreurs" à ce niveau. Ils ne regarderont sûrement pas tout de suite, donc en attendant, vous pouvez laissez l'optimisation à non, ça ne pose pas de problème !

par Shiyami Ven 23 Aoû 2024 - 16:50

Merci pour ces explications et pour cette aide !
Effectivement, transformer les majuscules en minuscules est un peu étrange si c'est de l'optimisation ! C'est une bonne idée de leur suggérer cette amélioration !

Encore merci pour vos messages, je mets le sujet en résolu Wink

Messenger FA (BlankTheme) ne prend pas en charge le CSS