web-dev-qa-db-fra.com

Pourquoi utiliser addStyleSheet ou JHtml :: stylesheet plutôt que de lier un fichier CSS?

Selon la page wiki Ajout de Javascript et CSS à la page , vous pouvez ajouter une feuille de style avec addStyleSheet comme ceci:

$document = JFactory::getDocument();
$document->addStyleSheet($url);

Ou avec JHtml::stylesheet Comme ceci:

JHtml::stylesheet($url, array(), true);

Mais la page wiki Création d'un modèle de base indique à l'apprenant d'inclure des feuilles de style comme celles-ci:

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
</head>

Cela contourne addStyleSheet et JHtml::stylesheet. Est-ce une bonne idée? Quand utiliseriez-vous le premier et quand utiliseriez-vous le dernier?

Remarque: JHtml::_("script", …) et JHtml::_("stylesheet", …) sont presque exactement identiques à JHtml::script Et JHtml::stylesheet. Voir Que fait JHtml::_ .

jhtmljfactory
9
Flimm

JHtml est normalement utilisé dans les extensions car cela signifie que des remplacements peuvent être effectués, ce qui est une très bonne fonctionnalité si vous êtes développeur. Il étend également $document->... En ajoutant des fonctionnalités supplémentaires.

Voici un exemple:

/js
   /script.js
   /script.min.js

Lorsque vous utilisez JHtml, la version minified du script sera chargée afin de réduire les temps de chargement des pages. Lorsque vous activez le mode débogage dans la configuration globale, il charge la version nminified du fichier pour le rendre lisible.

Vous ne pouvez pas remplacer un modèle de la même manière que vous le faites pour des extensions. Par conséquent, de nombreux modèles utilisent <link>, Car tout remplacement peut simplement être effectué en ajoutant un fichier custom.css, Puis en y ajoutant votre code. . Ainsi, l’utilisation des balises natives <link> Est plus rapide que celle de l’API Joomla pour charger le fichier CSS.

7
Lodder

En plus des autres, le plus gros avantage que j'ai constaté est que tous les fichiers CSS/JSS sont dans le même tableau en même temps.

Cela peut ne pas sembler un avantage, mais un extrait d'un autre exemple

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

Plus tard, quand vous voulez changer system.css, vous apporterez des modifications et vous vous rendrez compte que vos utilisateurs disposent de l'ancien system.css dans leur cache avec votre nouveau contenu, ce qui signifie que vous devrez modifier le code pour obtenir une URL légèrement différente (ou réduire le temps de cache et permettre à l'utilisateur de télécharger plus souvent)

Lorsque vous utilisez la méthode JHTML lors de la génération du modèle, vous pouvez alors générer une "version" du fichier CSS/JS (filemtime est un bon choix, ou git commit ID, etc.). Ainsi, modifier le contenu instantanément donne le nouveau fichier CSS à toutes les personnes à consulter votre site. Des temps de cache longs + une génération instantanée signifient moins de téléchargements par page.

Échantillon de code (fonctionnement non testé, bien que j'utilise un code similaire)

$styles  = $this['asset']->get('css');
if ($styles) {
  foreach ($styles as $style) {
    if ($url = $style->getUrl()) {
      if ($url[0] == "/") {
      //its local, find it and add the mtime
        if (file_exists(getcwd() . $url)) {
          $url .= "?" .filemtime(getcwd() . $url);
        }
      }
      printf("<link rel=\"stylesheet\" href=\"%s\" type=\"text/css\" />\n", $url);
    } else {
      printf("<style>%s</style>\n", $style->getContent());
    }
  }
}

Ce code devra être modifié pour que votre système s'assure que les chemins sont correctement trouvés.

6
exussum

Joomla fournit sa propre API à partir de leur usine. Nous pouvons l'appeler JFactory.

Il n'y a pas de mal à utiliser:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

plus de:

$document = JFactory::getDocument();
$document->addStyleSheet($url);

Cependant, si vous incluez vos feuilles de style avec la méthode ci-dessus, elles seront incluses dans <head> section de votre modèle automatiquement avec <jdoc:include type="head" />. Pour aller plus loin, si nous développons notre propre extension et si vous voulez explicitement avoir votre propre CSS ou Javascript, alors vous pouvez le déclarer avec la méthode ci-dessus. Il sera à nouveau ajouté dans votre <head> section et vous évite de mettre à jour le modèle index.php

Parfois, vous voulez que vos scripts apparaissent à la fin de votre corps pour obtenir tous les éléments DOM chargés. Dans ce cas, vous voudrez peut-être inclure vos scripts à la fin de votre <body> élément avec les éléments suivants:

<script type="text/javascript" src="myScript.js"></script>

Vous obtiendrez également un contrôle supplémentaire pour gérer les CSS et les scripts, par exemple. vous pouvez supprimer les scripts et les feuilles de style par programmation si vous n'en avez pas besoin.

5
Sahil Purav

L'utilisation des méthodes "addXxxxx" pour le chargement de feuilles de style et de javascripts présente quelques avantages supplémentaires.

Il existe des extensions que vous pouvez installer pour rassembler ces fichiers et les gzip dans un seul fichier, améliorant ainsi la vitesse de traitement des pages (en réduisant les requêtes http et la taille des fichiers).

En outre, vous pouvez les utiliser dans les remplacements de modèle et de présentation pour vous assurer que les fichiers requis sont chargés. Par exemple, si certains de vos éléments de contenu requièrent une bibliothèque javascript spécifique (telle qu'une bibliothèque pour effectuer une présentation de photos de style Masonary), vous pouvez créer une présentation spécifique pour les types d'articles qui utiliseront ce mécanisme pour charger la bibliothèque js. et des feuilles de style spécifiques à ces types d’affichages. Cela signifie que le poids supplémentaire n’est ajouté qu'aux pages qui en ont besoin, tout en conservant les informations de version au même endroit. Ainsi, une édition modifiera plusieurs affichages de page, plutôt que de devoir faire plusieurs changements lorsque les choses changent (et nous les savons tous sera changer).

Personnellement, j'estime que ces avantages, ainsi que la possibilité de remplacer ces fichiers par des copies différentes, le cas échéant, suffisent pour en faire la méthode que je préfère pour les ajouter.

0
Arlen