URL dinámicas en CSS/JS

Question

Estoy dividiendo una de mis aplicaciones más grandes e introduciendo una url 'cdn' para alojar objetos comunes como CSS, javascript e imágenes para evitar la duplicación. Lo que tengo que hacer, sin embargo, es tener direcciones URL separadas para nuestros entornos dev, así que puede tener:.

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

dependiendo de qué entorno que estamos trabajando en lo que puedo conseguir que esto funcione para las cosas que se generan por nuestro código PHP, pero estoy perdido por los archivos .css y .js que serán llamados. Por ejemplo, ¿cómo hago algo como:

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

cambiar entre los diferentes dominios?

¿Cuál es la mejor manera de lidiar con eso?

[EDIT]

Sólo para que todo el mundo está clara, la dirección de CDN es un dominio diferente que el sitio. Por lo tanto, el sitio de desarrollo podría ser http://www-dev.domain.com que usaría http://cdn-dev.domain.com

Answer 1

Utilice rutas relativas, no rutas absolutas. Cuando se encuentra dentro de un archivo CSS, la ruta es relativa al archivo CSS y no a la página HTML.

Si el archivo CSS está aquí

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

Y su clase es

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

A continuación, el navegador intentará cargar la imagen desde

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

Answer 2

¿Solo usar las URL relativas al dominio?

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

A continuación, el navegador se verá bajo el dominio actual.

Answer 3

Literalmente he estado trabajando en lo mismo hoy y esto es lo que se me ocurrió.

Pegue esto en su archivo .htaccess en la raíz de su sitio. Obviamente, esto depende de Apache y 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] 

Esto enviará las solicitudes de los tipos de archivo de los soportes a su cdn y mantener las solicitudes de otros tipos en el servidor primario.

Answer 4

Si el servidor es el mismo , puedes usar rutas relativas. Me gusta /http/blah/test/images/button.png o ../images/button.png

Answer 5

Al usar URL relativas, puede forzar una url "base". En la < etiqueta de la cabeza >, use < base href = "http://cdn-dev.example.com" >. Luego, cada enlace relativo "/ style.css" apuntará a 'http://cdn-dev.example.com/style.css'

Como referencia: http://www.w3schools.com/TAGS/tag_base.asp

Answer 6

También puede tener un proceso de construir y utilizar plantillas para generar entorno de archivos específicos

por ejemplo, en un archivo llamado yoursite.template.css

botón .cool {imagen de fondo: url ('@@ @@ URL/images/button.png');}

crear el archivo yoursite.css que reemplace @@ @@ URL con el dominio usted quiere.

Answer 7

Bueno ... la solución que se me ocurrió fue ... sorta ... harapienta, fea y tonta. Pero, demonios, funcionó:

<?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"; 

?> 

Esto es, como se ha señalado, hacky y feo y se podría hacer mucho más bajitos. Pero, al menos, le permite definir ubicaciones específicas para grupos de archivos específicos según el host.

Answer 8

Dependiendo de la configuración del servidor, también se puede añadir el php-extensión a los nombres de archivo y hacer que se trata como scripts PHP también:

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

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

Esto también funciona para JavaScript-archivos.

Answer 9

Buscando una respuesta a esto también, vi uno simple: crea tu archivo css con clases duplicadas, una para el escenario 1 (carga de imágenes del mismo dominio) y otra para el escenario 2 (carga de imágenes desde CDN).

p. Ej.

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

A continuación, en su index.php introducir PHP para llamar a la clase correcta

por ejemplo,

<body class="container<?PHP if ($whatever) {echo "-CDN";} ?>">