CSS/JSの動的URL

Question

大きなアプリの1つを分割し、重複を避けるためにCSS、JavaScript、イメージなどの共通オブジェクトを格納する 'cdn' URLを導入しています。私は何をする必要があるか、しかし、私たちのdevの環境用に別のURLを持っているので、私が持っていることである：。

http://cdn-dev.example.com 
http://cdn-qua.example.com 
http://cdn.example.com 

私たちが取り組んでいるものを、環境に応じて、私はこれが生成されているもののために仕事を得ることができます私たちのPHPコードでは、私は、.cssファイルと.jsファイルが失われてしまいます。たとえば、次のようにするにはどうすればいいですか？

.cool-button { background-image: url('http://cdn.example.com/images/button.png'); } 

ドメインを切り替えるにはどうすればよいですか？

これを処理するにはどうすればよいですか？

[EDIT]

ちょうどので、誰もがクリアされ、CDNアドレスは、異なるドメインのサイトです。だから、devサイトはhttp://www-dev.domain.comとなるでしょうhttp://cdn-dev.domain.com

Answer 1

絶対パスではなく相対パスを使用します。 CSSファイルの内部では、パスはHTMLファイルではなく、CSSファイルからの相対パスです。

あなたのCSSファイルは、ここで

http://cdn.example.com/css/style.css 

であり、あなたのクラスは

.cool-button { background-image: url('../images/button.png'); } 

あるサーバーが同じであれば、ブラウザは

http://cdn.example.com/images/button.png 

Answer 2

ドメイン相対URLを使用するだけですか？

.cool-button { background-image: url('/images/button.png'); } 

ブラウザが現在のドメインの下に表示されます。

Answer 3

私は文字通り、今日も同じことに取り組んできました。ここで私が思いついたのはこれです。

これは、サイトのルートにある.htaccessファイルに貼り付けてください。これは明らかにApacheとMod_rewriteに依存しています。

RewriteEngine on 
RewriteBase/

# Redirect content to the CDN 

RewriteCond %{HTTP_HOST} !^cdn\.server\.com$ [NC] 
RewriteRule .*\.(jpg|gif|png|flv|css|js|swf)$ http://cdn.server.com/$0 [R=301,L] 

これはあなたのCDNに括弧内のファイルの種類のリクエストを送信して、プライマリサーバ上の他のタイプの要求を維持します。

Answer 4

から画像をロードしようとした場合相対パスを使用することができます。 like /http/blah/test/images/button.pngまたは../images/button.png

Answer 5

相対URLを使用する場合、「ベース」URLを強制することができます。 ヘッド>タグでは、<ベースhref = "http://cdn-dev.example.com" >を使用してください。その後、すべての相対リンク "/スタイル。CSSは、参考のためhttp://cdn-dev.example.com/style.css 『

」を指すようになります』：http://www.w3schools.com/TAGS/tag_base.asp

Answer 6

また、環境、特定のファイルにyoursite.template.css

というファイルに

などを生成するために、ビルドプロセスを持っているし、使用テンプレートをすることができます

.coolボタン{背景画像：URL（ '@@ URL @@ /画像/ button.png'）;}

はドメインと@@ URLを@@置き換えるよりyoursite.cssファイルを作成しますあなたは欲しい。

Answer 7

まあ...私が思いついた解決策は...まあまあ...ハッキリ、醜いとダム。しかし、地獄、それが働いた：

<?php 
    if ($_SERVER['SERVER_NAME'] == "www.domain.tld") { 

     $incs_path = "/usr/local/psa/home/vhosts/domain.tld/non-web-root-folder/private-files"; 

    } 
    else { 
     $incs_path = "incs"; 
    } 

require_once "$incs_path/$file-to-be-called.inc"; 

?> 

をこれが述べたように、ハックと醜いですとはるかにかわいらしく行うことができます。しかし、少なくとも、ホストに応じて特定のファイルグループの特定の場所を定義することができます。

Answer 8

サーバーの構成に応じて、また、あなたのファイル名に.PHP-拡張子を付加し、それらがあまりにもPHPスクリプトとして扱うことができます：

I.E.: style.css.php would contain: 

.cool-button { background-image url(<?php echo $bgImgUrl;?>); } 

これはまた、JavaScriptの-ファイルに対して動作します。

Answer 9

シナリオ1（同じドメインからの画像読み込み）とシナリオ2（CDNからの画像読み込み）の別のクラスを使用してCSSファイルを作成しました。

.container {background-image:url(my/site/image.png;)} 
.container-CDN {background-image:url(http://my.site.cdn.com/image.png;)} 

は、その後、あなたのindex.phpに

例えば適切なクラスを呼び出すためにPHPを導入します