Why Use Protocol-Relative Urls at All

Why use protocol-relative URLs at all?

As of December 2014, Paul Irish's blog on protocol-relative URLs says:

2014.12.17: Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.

Unless you have specific performance concerns (such as the slow mobile network mentioned in Zakjan's answer) you should use https:// to protect your users.

What protocol is loaded when using protocol-relative URLs?

If you're referring to URLs like www.example.com/style.css, that won't work because the protocol is completely missing; a browser will treat www.example.com as some kind of directory path name.

If you're referring to URLs like //www.example.com/style.css, that is a protocol-relative URL; it uses the same protocol as what the browser is already using to request the referring page. For example, if the browser had requested a page with https://www.example.com, then that URL will be requested over HTTPS and not HTTP.

Browser support for these URLs is generally pretty good; see the following questions:

• Is it valid to replace http:// with // in a <script src="http://...">?
• Can I change all my http:// links to just //?

Relative urls vs Protocol-relative URLs

tl;dr: Yes.

Relative references are always applied against a base URI (see how).

In HTML5, the document base URL is, in the common case (i.e., no base element, no iframe-srcdoc document, no about:blank), the document's address.

So if you have a document at http://example.com/foo, a link with the relative reference /bar will link to the URL http://example.com/bar. And if the document is at https://example.com/foo, it will link to https://example.com/bar.

Are protocol-relative URLs relative URLs?

Every relative URL is an unambiguous URL given the URL it is relative to. So if your page is http://mypage.com/some/folder/ then you know the relative URL this/that corresponds to http://mypage.com/some/folder/this/that and you know the relative URL //otherpage.com/ resolves to http://otherpage.com/. Importantly, it cannot be resolved without knowing the page URL it is relative to.

A relative URL is any URL that is relative to something and cannot be resolved by itself. An aboslute URL does not require any context whatsoever to resolve.

Preventing secure/insecure errors by using protocol relative URLs for image source

Found an interesting gotcha for the use of protocol relative URLs:

You have to be careful to only use
this syntax in pages destined for
browsers. If you put it in an email,
there will be no base page URL to use
in resolving the relative URL. In
Outlook at least, this URL will be
interpreted as a Windows network file,
not what you intended.

from here

Essentially though there are no valid reasons why this shouldn't work as long as the request is made by a browser and not an external email client.

more info from here:

A relative URL without a scheme (http:
or https:) is valid, per RTF 3986:
Section 4.2. If a client chokes on it,
then it's the client's fault because
they're not complying with the URI
syntax specified in the RFC.

Your example is valid and should work.
I've used that relative URL method
myself on heavily trafficked sites and
have had zero complaints. Also, we
test our sites in Firefox, Safari,
IE6, IE7 and Opera. These browsers all
understand that URL format

---

Related Topics