Protocol Relative URLs in HTML and CSS

Introduction

Every Web-Designer knows that awkward moment when he designed a new web page and going to test it with https in a second step. Everything with hardcoded http:// urls will probably stop working - when your browser respects good SSL Security.

The problem is that you're trying to load fonts or images from an unencrypted connection. I saw that issue on Firefox and Chrome recently.

Use of protocol relative urls!

One possible solution is to use protocol relative urls if you rely on third party fonts or images.

For example when you want to use Google Fonts, it says you need to add the following line to your HTML header:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

This can cause serious issues when surfing that web page through https but you can make use of protocol relative urls simply by removing the protocol handler and let the browser decide which one to use - depending on the initial connection protocol. So just remove the handler...

<link href='//fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>

and you're done.

This also works in CSS quite well. Here is an example for a background image (dispite the fact that you should use relative urls to the document instead of the host in CSS)

.img { background: url('//example.com/image.png'); }

Now your whole web page is completly protocol independent!