在CSS中控制相对URL

Question

I have my product pages arranged like this:

home_directory/products/product_one/  
home_directory/products/product_two/  

etc

Each directory has its own "index.html," "first_image_small.jpg," "first_image_large.jpg," "second_image....you get the idea.

I'm using CSS "background-image" and Media Queries so that those images will switch out for screen size both "onLoad" AND when someone flips portrait/landscape or resizes their browser. (by the way, please check out this question if you have an idea how to do that in JavaScript because the only answer so far is "onLoad"-only).

Anyway, according to this question , if I try to link each "index.html" to a single stylesheet it will look for the images relative to the stylesheet's directory instead of each "index.html"s (and yes, I understand why it needs to be that way).

The obvious solution is to duplicate the stylesheet in each product directory, but that's kind of a mess for maintenance. Any more elegant solutions?

Answer 1

it does not seem to be possible to have relative url's in css use another base path than the css file's path. the specification states:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

however if you do not want to use any serverside scripting or javascript you can symlink the css files on your server. this will allow you to edit the file at only one place:

assuming your directory structure and the css at: home_directory/style.css . do the following on the unix command line:

cd home_directory
ln -s style.css products/product_one/
ln -s style.css products/product_one/

you will have created symbolic links to the original file. the browser will be able to access them from the different paths.

if you are using an apache webserver it might be necessary to allow for symlinks. for this add the following line to the configuration or .htaccess

Options +FollowSymLinks

alternatively you can setup a server rewrite rule that will serve the css file from any path, without the need for symbolic links. documentation for apache can be found here .

Answer 2

If using Less / Sass is allowed, there is a really straight forward solution: import the css file with Less/Sass.

---

Let's see how it would be done using Less. Assuming that your folder structure looks like this:

• home_directory
  • css ( your common css file goes here )
  • products
    • product1
      • css
      • images
    • product2
      • css
      • images

For your common css file (located in home_directory/css ):

• All the styles related to products will have relative paths. Eg: background:url("../images/pic.jpg");
• Change the extension from .css to .less (I don't know if this is necessary, but I had problems if I kept the extension as .css)
• When you import the .less file use rel="stylesheet/less"

For the products css file (located in home_directory/products/productX/css ):

• The Less file will have the same content for all the products.

• It will have only one line of code (assuming that your common css file is styles.less):

    @import "../../../css/styles.less"; 

...And basically, that's it. You don't need to change the content of the product stylesheets, just the common css file and you are done.

Note: You'll have to compile the styles with the Less compiler and it will automatically generate the CSS for you. Or if you don't like the compiler, you could use the less.js file (although it's only recommended for testing and not for production)