Hard coded URLs in CSS file

Question

The project I'm working on has hard coded URLs in the CSS file like this:

a.edit
{
    background: url(/TestSite/Images/Edit.png) no-repeat top left;
    display: inline-block;
    width: 16px;
    height: 16px;
    padding:1px;
    margin:1px;
    text-indent: -9999px; /* hides the link text */
}

When the site is moved to production, these links break. I'm looking for a solution so it just works where ever the site is run.

This is what I came up with and it works but I'm wondering if there is a better way:

<script>
    $(document).ready(function () {
        $("a.edit").css('background', 'url(' + $("body").data("baseurl") + 'Images/Edit.png) no-repeat top left');
    });
</script>
<body data-baseurl="~/">...</body>

What is the URL structure of the pages themselves? If the pages are under `/TestSite/` then I don't see why you would include this in the css URL — matt b, May 21 '12 at 17:04
@BrianWarshaw, care to elaborate why you consider this to be a great question? — walther, May 21 '12 at 17:07
Won't relative URLs break if the CSS file is used from a URL that isn't in the same "directory"? — Brian Warshaw, May 21 '12 at 17:08
I wonder if there's a way in MVC to do what you might do in PHP in this case--point to a PHP file for the CSS and have some processing for determining your environment. — Brian Warshaw, May 21 '12 at 17:10
I tried relative paths but I didn't realize it was relative to the CSS file. Thanks for the help. — tzerb, May 21 '12 at 17:11
@walther Because I, like the OP, didn't realize that the paths in a CSS file were relative to the CSS file--I assumed that they were relative to the html source referencing the css file. — Brian Warshaw, May 21 '12 at 17:18
Indeed it would--my focus has shifted largely to desktop apps since being a web developer years ago, so I done forgot :-) Of course, you could always serve stylesheets as from a controller action, and store the stylesheet in a Razor view with rules. But I would totally agree that for his specific case, that just ain't necessary. — Brian Warshaw, May 21 '12 at 17:30

score 7 · Accepted Answer · edited May 21 '12 at 17:23

7

CSS handles relative URLS relative to where the stylesheet is located. Take advantage of that and don't rewrite URLs in javascript.

edited May 21 '12 at 17:23

Brian Warshaw

22,657
9
53
72

answered May 21 '12 at 17:05

moribvndvs

42,191
11
135
149

Bingo. I tried relative paths but I didn't realize it was relative to the CSS file. Thanks for the help – tzerb May 21 '12 at 17:10

score 3 · Answer 2 · answered May 21 '12 at 17:04

3

Use on production and development server the same folder structure. And use relative paths

answered May 21 '12 at 17:04

Vladimir Starkov

19,264
8
60
114

1

Good answer but unfortunately it’s not under my control. It is a corporate environment and both sides would squak if I tried to change either. – tzerb May 21 '12 at 17:13
@tzerb I don't know about it. But you can try to use relative paths relatively to `base meta` tag. and display different `base` to production and development server – Vladimir Starkov May 21 '12 at 17:19

walther · Answer 3 · 2012-05-21T17:11:12.450

2

Don't really understand what's the problem you're facing. Use relative paths instead of absolute and you will be fine no matter the hosting provider...

Btw, one more thing to consider - what if the client turns off javascript? ;)

edited May 21 '12 at 17:11

answered May 21 '12 at 17:04

walther

13,466
5
41
67

score 1 · Answer 4 · edited May 23 '17 at 12:25

1

How about a relative URL?

a.edit
{
    background: url(Images/Edit.png) no-repeat top left;
    ...
}

edited May 23 '17 at 12:25

Community

1
1

answered May 21 '12 at 17:04

FishBasketGordo

22,904
4
58
91

Hard coded URLs in CSS file

4 Answers4