競合するCSSとJavascript

Question

Joomla Webサイトのコンポーネントを開発しています。このWebサイトには、洗練されたCSSとスクリプト（つまり、いくつかのK2コンポーネントが名前が付けられています）を含む洗練されたテンプレートがあります。このコンポーネントでは、カラーボックスを使用してモーダル画像ギャラリー

このコンポーネントがCSSプロパティと呼ばれ、テンプレートのjavascriptの関数が失敗すると、すぐに一部のページが表示されます。 これらのCSSとJavaScriptを書いていないので、CSSとスクリプト間の競合を防ぐのは非常に面倒です。

だから私の質問は何ですか

実際のスクリプトにあまり深く入り込むことなく、これらのスクリプト間の競合を防ぐ方法はありますか。

これをガイドしてください。

事前に感謝

Answer 1

K2はJoomlaのコンテンツコンポーネントです。フレームワークのプラグインまたはアドオンが互いに競合することは珍しいことではありません。残念ながら、JoomlaまたはK2フォーラムで回答を検索する必要がある場合があります。どちらでも、競合が解消されるまで（できれば）、他のプラグインを1つずつ無効にしてみてください。

Answer 2

JavaScriptの主な競合の1つは、MooTools（一部のJoomla機能に必要）と他のJavaScriptライブラリの間です。最も一般的なのは、DOMセレクターとして一般的に使用される$グローバル変数です。

MooToolsではIDのみで選択しますが、JQueryなどの他のライブラリではCSSセレクターを使用します。

したがって、JQueryなどの別のJavaScriptライブラリをロードするJoomla拡張機能がある場合、問題が発生します。 JQueryには、特定のソリューションがあります。 http://docs.jquery.com/Using_jQuery_with_Other_Libraries

ただし、他のライブラリについては、JSに飛び込むか、同じ機能を提供するがMooToolsを使用する拡張機能を使用する必要があります。

CSSに関しては、これを回避する唯一の方法はCSSファイルを編集することです。優れた拡張機能では、CSSに何らかの名前空間を使用する必要があります。たとえば、すべてのCSSクラスの前にコンポーネント名を付けます。または、コンポーネントまたはモジュールなどにちなんで名付けられたラッパー要素ですべてのHTMLをラップします。

これが存在しない場合は、自分で追加する必要があります。

おそらく最も簡単なのは、拡張機能のHTMLを編集して追加することです：

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

拡張機能の周り。

次に、拡張機能のCSSを編集して追加します

#extension-name 

すべてのCSSセレクターの前。

たとえば、次の場合：

.left-column {
  float: left;
}

変更：

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

正規表現の検索と置換でこのプロセスを自動化することもできます。