Relative URLs including the Domain

Just a neat little trick I saw while browsing the source code of Google Calendar. In some of their CSS files, they link to background-images using URLs that include everything but the protocol, which is something I hadn’t seen before.
The most comm…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Just a neat little trick I saw while browsing the source code of Google Calendar. In some of their CSS files, they link to background-images using URLs that include everything but the protocol, which is something I hadn’t seen before.

The most common usage of a relative URL is linked from the root (note the slash at the beginning), like so:

You can also use ../ to navigate up a directory in your path, but that’s boring. The interesting question is: what if I wanted to load content from a separate domain, while at the same time transparently using the protocol used on my page?

Do what Google Calendar does and use the following style:

Note the lack of http: or https: from the URL. If this page were hosted on https (we don’t pay for certificates around here, so you’ll have to put up with the security warning), the last image source will load from https as well at no additional development cost.

This seems like it would be especially useful if you were using the YDN Performance tip to Split Components Across Domains. Remember, we’re not just talking images. This involves how the browser resolves URLs, so could be used inside href tags, css urls (as Google Calendar did), etc.


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2023-01-29T04:57:17+00:00) » Relative URLs including the Domain. Retrieved from https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/.
MLA
" » Relative URLs including the Domain." Zach Leatherman | Sciencx - Thursday October 16, 2008, https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/
HARVARD
Zach Leatherman | Sciencx Thursday October 16, 2008 » Relative URLs including the Domain., viewed 2023-01-29T04:57:17+00:00,<https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/>
VANCOUVER
Zach Leatherman | Sciencx - » Relative URLs including the Domain. [Internet]. [Accessed 2023-01-29T04:57:17+00:00]. Available from: https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/
CHICAGO
" » Relative URLs including the Domain." Zach Leatherman | Sciencx - Accessed 2023-01-29T04:57:17+00:00. https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/
IEEE
" » Relative URLs including the Domain." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/. [Accessed: 2023-01-29T04:57:17+00:00]
rf:citation
» Relative URLs including the Domain | Zach Leatherman | Sciencx | https://www.scien.cx/2008/10/16/relative-urls-including-the-domain/ | 2023-01-29T04:57:17+00:00
https://github.com/addpipe/simple-recorderjs-demo