Including JS and CSS files relative to website root - javascript

I'm looking for best practices when including CSS/JS files, in terms of the file URI. I see people include files both relative from the website root by giving the full URI to the file:
<link rel="stylesheet" href="/my/path/to/css/main.css">
I tend to do it this way because I find it easier to know where the file is when I'm reading the code, and I've not come across an issue with it. But I also see a lot of relative includes:
<link rel="stylesheet" href="css/main.css">
Which way do you define the file location and why? Is one better than the other?

I prefer relative includes because they are robust against platform changes (e.g. deploying from test to live platform) because as long as the internal structure of your project does not change they still will work while absolute paths may break in such cases.
Also it's sometimes difficult to know the absolute path while the relative document dependent path is pretty obvious.
However, if you have files in several different places throughout your project, you would have different relative paths each time (for the same file which might be quite confusing), so in this case absolute ones might be preferred (for robustness' sake you should have the webroot path in a variable or similar: $WEBROOT/css/main.css). It all comes down to your personal needs I guess.

In the first case, the URI is absolute to the website's domain. So, the URI would be:
http://www.example.com/my/path/to/css/main.css
For the second method, the path is relative to the current path. So let's say you are now in
http://www.example.com/store/product/121
Then the path to the css files would be:
http://www.example.com/store/product/css/main.css
Thus, it depends where are your files located.

Related

How to specify absolute path when the program parses relative path?

I'm using a Javascript library which takes a string specifying a relative path as an option. Using this path, it loads a CSS files which is used for the theme. However, I have placed the themes files elsewhere and want to reference this using an absolute path instead.
This path is relative to the page which calls it. So if the path I gave was /absolute/path/file.js, and I am on [host]/abc/def/ghi, it will call [host]/abc/def/ghi/absolute/path/file.js. If I am on [host]/xyz, it will call [host]/xyz/absolute/path/file.js
I cannot simple go up two or three levels ../../ because that might not be the root directory. Instead, I am doing ../../../../../../../../absolute/path/here.css, to ensure it goes as far back as practically necessary, which does work.
There are no option in the library to use base path.
Is there a more elegant way to specify an absolute path when the library parses only relative paths?

How can I generate a path relative to a Javascript/jQuery file?

I have a CMS template that uses JavaScript/jQuery to insert an image onto the page. This works fine when I specify an explicit path to the image, but because I use the template on several sites, the path needs to be determined automatically.
Making things a little harder is the fact that the path to the template (and therefore the image I'm linking to) changes periodically with each revision to the template.
Here's the (extremely simple) relevant code at the moment - which technically works in the short term, but is not the solution I'm looking for:-
src = '../template_v1/images/pdf_small.png'
This correctly generates the base URL, but breaks as soon as the template version is incremented (and the path changed) to template_v2 or template_v3, for example.
The JavaScript/jQuery file (again, included with the template) is located at http://www.domain.com/template_v1/js/this_file.js - so with that in mind, I want to be able to automatically generate a path to the image relative to the location of the this_file.js file. If this were CSS this would be easy, as non-explicit paths are relative to the CSS file calling the path - but I don't know how to accomplish this with JavaScript/jQuery.
Thanks in advance for any tips.
Do you need to go up a folder at the start of the source? Would going from the current directory work and stay within the template folder entirely:
src = './images/pdf_small.png'

RequireJS - custom paths and the text! plugin

I'm working on a SPA, and have optimized one of my code files with the requireJS optimizer, and set the new path like this:
config.paths['billingmanager/billing/billing'] = 'billingmanager/billing/billing-build';
Unfortunately, code that now (conceptually) does this
require(['text!billingmanager/billing/billing.htm'], callback);
now attempts to find billingmanager/billing/billing-build.htm and fails miserably.
Can can I tell text! that, no matter how the normal require path for billingmanager/billing/billing is set, I want you to fetch the file billingmanager/billing/billing.htm—period.
I do have a workaround, to do something like this
config.paths['billingmanager/billing-htm'] = 'billingmanager/billing/billing.htm';
and then manually know to use require(['text!billingmanager/billing-htm']); but I'm really hoping there's a simple fix here.
I've not run into this specific problem but the first thing I'd do to work around it would be to replace the path I give to text! with a relative path, which should avoid the clash with the path you've got in your paths. So, for instance:
require(['text!../parent/billingmanager/billing/billing.htm'], callback);
Of course the actual relative path you should use depends on the architecture of your application. It turns out that just using ./ won't be enough to work around RequireJS' cleverness so in the illustration above, I'm backing out of the current directory and then going back in. I've assumed that the current directory is name parent.
Note that the rules for path resolution for the path given to text! is different than the regular path resolution rules. Normally, adding an extension to a path given to require will completely bypass the paths setting. So require(['billingmanager/billing/billing/foo.js']... will look for a file named billingmanager/billing/billing/foo.js relative to baseUrl and will not use the paths setting you've shown in the question. This is not the case for paths given to text!. These paths go through the paths setting even if they have an extension. (This is documented here.)

Accessing the img directory from scripts and css files

I am using the html5 boilerplate layout which has a css, img, and js directory at the same level. I am having all kinds of issues accessing images from my .css files and .js files. I have been warned that using ../ may cause problems, but without some kind of url generator (like I have with my template files), how can I best access images from my .js and .css files?
One robust way to access static resources in CSS is to always give the full path:
body {
background-image: url("/path/to/image.png");
}
Notice the preceding / character. It tells the browser to look for the file at the root of the server. For example, if you currently are on http://example.com/pictures/album/5 then the above CSS will find the background at http://example.com/path/to/image.png.
Using the full path also encourages you to keep your resources well organized.
This is not to say that using relative paths is a bad thing, though. If you are working on a CSS project and put it in a sub-folder, say /static/myproject/project.css, then you can refer to images in that folder using relative paths.
If we say that your project is at /static/myproject, and the folder structure looks like this:
/static/myproject/project.css
/static/myproject/back-button.gif
/static/myproject/forward-button.gif
Then, in your CSS file, you can call the images relative to the CSS file:
.back {
background-image: url("back-button.gif");
}
.forward {
background-image: url("forward-button.gif");
}
The problem with doing it like this is that resources tend to be stored all over the place. That makes it more difficult to reuse resources.

What is the correct way to specify relative paths in streamed CSS?

I'm working in Firefox and relative paths are not working.
One caveat is that I stream my .css file using AJAX and add it to the DOM dynamically.
Another caveat is that my site is entered in one of two ways:
www.host.com (use this for production)
or
www.host.com/dev/ (use this for dev)
Images are either here:
www.host.com/host/images
or
www.host.com/dev/host/images
depending upon how you enter the site.
I can post any information needed and test out a solution.
I was using
../images/name.jpg
but the browser somehow took this for:
hosts.com/images/name.jpg
which does not exist.
This is a question about relative paths and implementing correctly.
Absolute Path URLs
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:
What is the correct way to specify relative paths in streamed CSS?
You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to google it would be ...
If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.
Relative Path URLS
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information
listed filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is
located in the/library/weekly folder on my site.
Determine the location of the page or image you want to link to. The
Beginner's Resource Center is located here: /library/beginning/
Compare the locations and to decide how to point to it From this
article, I would need to step up one directory (to/library) and then
go back down to the beginning directory
Write the link using the rules listed above: ...
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
The relative paths are always relative to the CSS location, not the web page location that references the CSS file. So the question is, what is the location of the CSS file to start with? If you make all paths relative to it, it should work for both your production and development URLs.
I need to test this out, but for dynamically inserted CSS all paths are relative to the root directory or www.host.com...where this resolves to...this is essentially saying all paths are actually absolute...this is the behavior I am seeing in FireFox.

Categories