Here we examine why you would use a protocol relative URL. Have you ever had this error in ie – “This page contains both secure and nonsecure items?” A protocol relative URL may also be called a “network-path reference” or “scheme-relative URL.” If your page is through HTTPS protocol, then it will request the assets be through HTTPS protocol also. If an asset is requested through HTTP on an HTTPS page it will throw an error. The error is “This page contains both secure and nonsecure items” error. This is where the protocol relative URL can help.
Protocol Relative URL – In use
Have you noticed when you use jQuery’s CDN, the URL looks like this?
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
This is a protocol relative URL.
Protocol Relative URL – Don’t break security!
According to Steve Yoast, this security issue is one of the few times relative URLs should be used. In JavaScript or CSS, it will help ensure files and the current page are served over the same protocol.
Protocol Relative URL – Full examples
They can be used in HTML, CSS, or javascript.
Protocol Relative URL – HTML
<img src="//surfingsuccess.com/images/logo.png">Protocol Relative URL – CSS
#theinternet { background: url(//mosthandsomemanever/nicklefevre.png); }Protocol Relative URL – Javascript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>Read more on Protocol Relative URLs from Paul Irish. He points out, a protocol relative URL is more appropriately called a “network-path reference” or “scheme-relative URL.”
I think it’s interesting that point Paul points out, “*Of course, if you’re viewing the file locally, it’ll try to request the file with the file://protocol.”
