[Résolu]Comment asynchroniser un CSS

ToulibreToulibre Member
juillet 2022 modifié dans Entraide

Bonjour, quel est le code pour asynchroniser un css et plus particulièrement site.css ?

Mots clés:

Réponses

  • Par exemple dans header.php je fais comme ceci :

    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="none" onload="if(media!='all')media='all'">
    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>"media="none" onload="if(media!='all')media='all'">
    

    mais je n'y arrive pas pour site.css
    Merci d'avance si quelqu'un connaît le moyen d'y parvenir.

  • juillet 2022 modifié

    Bonjour,

    Il existe un HOOK sur la fonction plugnsCSS , via un plugin, on pourrait faire quelque chose comme ceci en reprenant ta methode : https://github.com/gcyrillus/delaySiteCSS/tree/main

    <?php
    class delaySiteCSS extends plxPlugin {   
        const BEGIN_CODE = '<?php' . PHP_EOL;
        const END_CODE = PHP_EOL . '?>';
    
        public function __construct($default_lang) {
    
            # appel du constructeur de la classe plxPlugin (obligatoire)
            parent::__construct($default_lang);
    
            # déclaration des hooks
            $this->addHook('plxShowPluginsCss', 'plxShowPluginsCss');
    
    
        }   
        public function plxShowPluginsCss(){ 
        echo '<link rel="stylesheet" type="text/css" href="data/site.css" media="none" onload="if(media!=\'all\')media=\'all\'"  />';
                    echo self::BEGIN_CODE;
    ?>
        return true;
    <?php
            echo self::END_CODE;        
           }
    }
    ?>
    

    Est ce efficace ?

    Cdt

    Edit : autre solution possible à laquelle j'aurais du penser en premier lieu ;) , retirer de header.php

    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
        <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
    <?php
        $plxShow->templateCss();
        $plxShow->pluginsCss();
    ?>
    

    et les remettre dans footer.php .

    Cordialement


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • ToulibreToulibre Member
    juillet 2022 modifié

    Bonjour, ton plugin fonctionne à merveille pour site.css, merci beaucoup !

    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="none" onload="if(media!='all')media='all'">
    <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>"media="none" onload="if(media!='all')media='all'">
    

    ces 2 lignes de code fonctionnent très bien dans header.php ou dans footer.php avec tes 2 lignes de code de ton Edit.
    J'ai une question:
    Pourrais-tu faire de ton plugin qu'il prenne en charge également plucss et theme.css ?
    je teste sur ce site les résultats
    https://www.webpagetest.org/

  • juillet 2022 modifié

    Bonjour,

    Pourrais-tu faire de ton plugin qu'il prenne en charge également plucss et theme.css ?

    Je ne suis pas certain que cela soit une bonne idée, le fichier site.css est commun à tous les thèmes, alors que ces deux autres sont particulier au thème par défaut. La logique voudrais que cette modif soit faite directement dans le thème concerné comme tu le fait.

    Charger les feuille de style en fin de document ne se suffirait-il pas ?

    L’édit de mon post précédent voulais dire de modifier (sans plugin)
    le fichier header.php

    <?php if (!defined('PLX_ROOT')) exit; ?>
    <!DOCTYPE html>
    <html lang="<?php $plxShow->defaultLang() ?>">
    <head>
        <meta charset="<?php $plxShow->charset('min'); ?>">
        <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
        <title><?php $plxShow->pageTitle(); ?></title>
    <?php
        $plxShow->meta('description');
        $plxShow->meta('keywords');
        $plxShow->meta('author');
    ?>
    
        <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlPostsRssFeed($plxShow->plxMotor->mode) ?>" />
        <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
    </head>
    
    <body id="top" class="page mode-<?php $plxShow->mode(true) ?>">
    
        <header class="header">
    
            <div class="container">
    
                <div class="grid">
    
                    <div class="col sml-6 med-5 lrg-4">
    
                        <div class="logo">
                            <h1 class="no-margin heading-small"><?php if (eval($plxMotor->plxPlugins->callHook('spanMainLinkTitle'))) return; ?></h1>
                            <h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
                        </div>
    
                    </div>
    
                    <div class="col sml-6 med-7 lrg-8">
    
                        <nav class="nav">
    
                            <div class="responsive-menu">
                                <label for="menu"></label>
                                <input type="checkbox" id="menu">
                                <ul class="menu">
                                    <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
                                    <?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                                </ul>
                            </div>
    
                        </nav>
    
                    </div>
    
                </div>
    
            </div>
    
        </header>
    
        <div class="bg"></div>
    

    et le fichier footer.php

    <?php if (!defined('PLX_ROOT')) exit; ?>
    
        <footer class="footer">
            <div class="container">
                <p>
                    <?php $plxShow->mainTitle('link'); ?> - <?php $plxShow->subTitle(); ?> &copy; 2018
                </p>
                <p>
                    <?php $plxShow->lang('POWERED_BY') ?>&nbsp;<a href="<?= PLX_URL_REPO?>" title="<?php $plxShow->lang('PLUXML_DESCRIPTION') ?>">PluXml</a>
                    <?php $plxShow->lang('IN') ?>&nbsp;<?php $plxShow->chrono(); ?>&nbsp;
                    <?php $plxShow->httpEncoding() ?>&nbsp;-
                    <a rel="nofollow" href="<?php $plxShow->urlRewrite('core/admin/'); ?>" title="<?php $plxShow->lang('ADMINISTRATION') ?>"><?php $plxShow->lang('ADMINISTRATION') ?></a>
                </p>
                <ul class="menu">
                    <?php  if($plxShow->plxMotor->aConf['enable_rss']) { ?>
                    <li><a href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS'); ?>"><?php $plxShow->lang('ARTICLES'); ?></a></li>
                    <?php } ?>
                    <?php if($plxShow->plxMotor->aConf['enable_rss_comment']) { ?>
                        <li><a href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires'); ?>" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>"><?php $plxShow->lang('COMMENTS'); ?></a></li>
                    <?php  } ?>
                    <li><a href="<?php $plxShow->urlRewrite('#top') ?>" title="<?php $plxShow->lang('GOTO_TOP') ?>"><?php $plxShow->lang('TOP') ?></a></li>
                </ul>
            </div>
        </footer>
    
    </body>
        <link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
        <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
        <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
    <?php
        $plxShow->templateCss();
        $plxShow->pluginsCss();
    ?>
    </html>
    

    Ce qui correspond à peu prés à charger/afficher le contenu du document avant les feuilles de styles.

    Cdt

    Edit, pour faire quelque chose de plus flexible, tu peut éventuellement modifier le plugin pour qu'il recherche tous les attributs media="screen" pour les remplacer par ton astuce .

    possible autre version du plugin :

    <?php
    class delaySiteCSS extends plxPlugin {   
    
        public function __construct($default_lang) {
    
            # appel du constructeur de la classe plxPlugin (obligatoire)
            parent::__construct($default_lang);
    
            # déclaration des hooks
            $this->addHook('IndexEnd','IndexEnd');
        }   
    
            public function IndexEnd() {
                $find = 'media="screen"';   
                echo '<?php ';?>
                    ob_start();
                    echo 'media="none" onload="if(media!=\'all\')media=\'all\'"'; 
                    $output = str_replace('<?php echo $find; ?>', ob_get_clean(), $output);
             ?>
              <?php 
            }     
    }
    ?>
    


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • Salut @Toulibre,
    Une question que je me pose : pourquoi souhaites-tu faire cela ? PluXml est tellement léger qu'en général le site se génère très vite sur une connexion internet normale. Cette fonctionnalité est plutôt utilisée pour les sites hyper lourds qui chargent des tonnes de choses inutiles. Ce qui peut ralentir le chargement d'un site est souvent la présence de nombreuses polices à télécharger sur des sites externes ou des images non optimisées, rarement le css (sauf s'il y en a trop) :)

  • ToulibreToulibre Member
    juillet 2022 modifié

    @gcyrillus-nomade oui j'avais bien compris au sujet de supprimer du header.php et de le mettre dans footer.php, dans les deux cas cela fonctionne (ta méthode ou la mienne).
    Je testerais ce soir la variante du plugin et je t'en ferais le retour, merci :)

    @kowalsky
    je le fais pour le fun et pour supprimer les erreurs lors de tests, cela me permets également de finaliser les optimisations déjà effectuées :)

  • @gcyrillus-nomade Bonsoir, j'ai testé toutes les possibilités évoquées ci-dessus et elles fonctionnent.
    Excepté lorsque j'ai voulu utiliser ta variante, j'ai remis les attributs media="screen" dans header.php puis copié-remplacé le code du plugin variant donné. La page de mon site a alors affiché un message "erreur de code" ou un message qui y ressemble. Me suis-je mal pris dans la manipulation ? Si celui-ci parvenait à fonctionner tu atteindrais la perfectitude :)

  • @Toulibre je viens de te mettre sur une autre branche la variante qui fonctionne chez moi https://github.com/gcyrillus/delaySiteCSS/tree/str_replace (tester en php 8.15)
    cdt,

    probablement qu'une version en preg_replace serait plus appropriée , j'y jetterait un œil après le diner ou demain aprés midi.
    Cdt


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • @gcyrillus-nomade juste après avoir lu ton message j'ai téléchargé la variante directement sur ton dépôt et activé le plugin (après avoir supprimé la 1ère version).
    testé avec les attributs media="screen" une fois dans header.php et une autre dans footer.php, rien à faire cela ne fonctionne pas de mon côté. PluXml 5.8.7, Version de PHP : 7.3.33 et Apache (infos de mon hébergeur).
    le message dit : "erreur d'encodage de contenu, une erreur est survenue pendant une connexion à monsite.fr veuillez contacter les propriétaires du site web pour les informer de ce problème"

    J'ai donc réinstallé la 1ère version du plugin qui fonctionne très bien et inclus dans footer.php plucss.css et theme.css
    Quoiqu'il en soit tu m'as vraiment aidé et je suis satisfait ainsi, je t'en remercie :)

  • juillet 2022 modifié

    @Toulibre Cela à probablement à voir avec : https://forum.pluxml.org/discussion/7164/resolu-gzip-et-erreur-dencodage-de-contenu-avec-certains-plugin#latest

    <?php
    class delaySiteCSS extends plxPlugin {   
    
        public function __construct($default_lang) {
    
            # appel du constructeur de la classe plxPlugin (obligatoire)
            parent::__construct($default_lang);
    
            # déclaration des hooks
            $this->addHook('IndexBegin','IndexBegin');
            $this->addHook('IndexEnd','IndexEnd');
        }   
            // désactive de force la compression gzip si activée pour une compatibilité des plugins usant du hook indexEnd() ou hook perso similaire dans les templates
            public function  IndexBegin() {
                echo '<?php ';
    ?>
            $plxMotor->aConf['gzip'] ='0';
                ?>
    <?php           
            }  
            public function IndexEnd() {
                $find = 'media="screen"';   
                echo '<?php ';?>
                    ob_start();
                    echo 'media="none" onload="if(media!=\'all\')media=\'all\'"'; 
                    $output = str_replace('<?php echo $find; ?>', ob_get_clean(), $output);
             ?>
              <?php 
            }       
    }
    ?>
    

    Cdt

    Edit, voici une version avec preg_replace . https://github.com/gcyrillus/delaySiteCSS/tree/preg_replace
    elle prend aussi du coup media="screen,print" ou toutes autres valeurs sur toutes les balises <link />.


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • @gcyrillus-nomade parfait, r.a.s., nickel, cela fonctionne bien maintenant.
    Merci d'avoir pris le temps :)

  • Question: le mode gzip est-il désactivé en permanence ?
    Supposition: supprimer le mod_deflate detection pour que cela fonctionne correctement, s'il est présent.
    cdlt

  • Question: le mode gzip est-il désactivé en permanence ?

    Oui, pour l'instant je ne sais pas faire autrement.

    Supposition: supprimer le mod_deflate detection pour que cela fonctionne correctement, s'il est présent.

    Si tu utilises le Plugin ponctuellement à des fins de test ce n'est peut-être pas un réel soucis , si ? ( mod_deflate = htaccess si je comprend bien ton interrogation)

    cdlt

    Idem :)


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • @gcyrillus-nomade j'ai adopté définitivement ton plugin, dans mon administration il y a activer gzip "oui" ou "non" alors je suppose qu'il est intégré quelque part dans le code de PluXml et qu'il est possible de tenter l'expérience de désactiver le mod_deflate, je ne sais pas où il se trouve (pas dans mon htaccess).
    Ce n'est qu'une piste probable et cela permettrait éventuellement à d'autres plugins de refonctionner normalement.
    cdlt :)

  • oki, il faut seulement se servir d'un autre point d'insertion , par exemple ThemeEndHead https://github.com/gcyrillus/delaySiteCSS/tree/preg_replace-head mais ne seront traitée que les balises link situées entre <head> et </head>

    Cdt


    Cordialement,
    gcyrillus

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • ToulibreToulibre Member
    juillet 2022 modifié

    ces lignes:
    template(); ?>/css/plucss.css?v=1.3.1" media="screen,print"/>
    template(); ?>/css/theme.css?v=<?php echo PLX_VERSION ?>" media="screen"/>
    <?php $plxShow->templateCss(); $plxShow->pluginsCss(); ?>

    replacées comme à l'origine dans header.php.
    Tout fonctionne à merveille, si cela intéresse quelqu'un au moins il n'y a aucune modification complémentaire à effectuer après avoir installé ton plugin (le dernier). Idem à la désinstallation.
    Chapeau bas, merci beaucoup :)

Connectez-vous ou Inscrivez-vous pour répondre.