CSS et Javascripts en conflit

Question

Je développe un composant pour le site Web de Joomla. Ce site Web possède un modèle sophistiqué avec des fichiers CSS et des scripts sophistiqués (certains composants de K2 sont nommés). Dans ce composant, j'utilise colorbox pour afficher une galerie d'images modale, mais il se trouve que

dès que ce composant est appelé propriétés CSS et que les fonctions de javascript du modèle échouent, entraînant certains affichages de pages usées. Comme je n’ai pas écrit ces CSS et javascripts, il m’aura beaucoup de mal à éviter les conflits entre CSS et scripts.

Alors, quelle est ma question?

Existe-t-il un moyen d'éviter les conflits entre ces scripts sans plonger beaucoup dans les scripts eux-mêmes?

Merci de me guider à travers cela.

Merci d'avance

Answer 1

K2 est un composant de contenu pour Joomla. Il n’est pas inhabituel que des plug-in ou add-ons de framework aient des conflits les uns avec les autres. Malheureusement, vous devrez peut-être chercher des réponses dans les forums Joomla ou K2. Sinon, vous pouvez essayer de désactiver les autres plug-ins un par un jusqu'à ce que le conflit disparaisse (si tout va bien).

Answer 2

L’un des principaux conflits JavaScript est entre MooTools (requis pour certaines fonctionnalités de Joomla) et d’autres bibliothèques JavaScript. Le plus commun est la variable $ global qui est communément utilisée comme sélecteur DOM.

Dans MooTools, il sélectionne uniquement par ID, tandis que dans d'autres bibliothèques telles que JQuery, il utilise des sélecteurs CSS.

Ainsi, si vous avez une extension Joomla qui charge une autre bibliothèque JavaScript telle que JQuery, vous rencontrerez des problèmes. Pour JQuery, il existe une solution spécifique. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Cependant, pour d'autres bibliothèques, vous devrez vous plonger dans le JS ou utiliser une extension offrant les mêmes fonctionnalités mais utilisant MooTools.

En ce qui concerne CSS, la seule solution consiste à modifier les fichiers CSS. Les bonnes extensions doivent utiliser une sorte d’espacement de noms pour leurs CSS. Par exemple, préfixez toutes les classes CSS avec le nom du composant. Ou placez tout le code HTML dans un élément wrapper nommé d'après le composant, le module, etc.

Si cela n’existe pas, vous devrez l’ajouter vous-même.

Le plus simple est probablement de modifier les extensions HTML et d'ajouter:

<div id="extension-name">
  <!-- extension HTML here -->
</div>

autour de l'extension.

Editez ensuite les extensions CSS et ajoutez

#extension-name 

avant tous les sélecteurs CSS.

Par exemple, si vous avez:

.left-column {
  float: left;
}

changez le en:

#extension-name .left-column {
  float: left;
}

Vous pouvez même automatiser ce processus avec une recherche regex et son remplacement.