Como usar caminhos relativos / absolutos em URLs css?

Eu tenho um servidor de produção e desenvolvimento. O problema é a estrutura do diretório.

Desenvolvimento:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

Produção:

  • http://sofpt.miximages.com/relative-path/
  • http://live.com/resources/css/style.css

Como posso ter um style.css na pasta css que usa em ambos os servidores o mesmo caminho para o background: url propriedade de background: url ? Existe algum truque que eu possa usar com caminhos relativos?

A URL é relativa à localização do arquivo CSS , portanto, isso deve funcionar para você:

 url('../../images/image.jpg') 

O URL relativo retorna duas pastas e, em seguida, para a pasta images – deve funcionar para ambos os casos, desde que a estrutura seja a mesma.

De http://www.w3.org/TR/REC-CSS1/#url :

URLs parciais são interpretadas em relação à origem da folha de estilo, não em relação ao documento

Pessoalmente, eu iria corrigir isso no arquivo .htaccess. Você deveria ter access a isso.

Defina seu URL CSS como tal:

 url(/image_dir/image.png); 

No seu arquivo .htacess, coloque:

 Options +FollowSymLinks RewriteEngine On RewriteRule ^image_dir/(.*) subdir/images/$1 

ou

 RewriteRule ^image_dir/(.*) images/$1 

dependendo do site.

Eu tive o mesmo problema … toda vez que eu queria publicar meu css .. Eu tive que fazer uma pesquisa / replace .. e caminho relativo não funcionaria para mim porque os caminhos relativos eram diferentes de dev para produção.

Finalmente estava cansado de fazer o search / replace e criei um css dynamic, (eg http://www.mysite.com/css.php) é o mesmo mas agora eu poderia usar minhas constantes do php no css. algo assim

 .icon{ background-image:url('icon.png'); } 

e não é uma má idéia para torná-lo dynamic, porque agora eu poderia compactá-lo usando o compressor YUI sem perder o formato original no meu servidor de desenvolvimento.

Boa sorte!

Intereting Posts