When using a CDN in conjunction with HTTPS / SSL, customers often find that the CDN product they use lacks an HTTPS endpoint, or the one provided is different from the standard, non-HTTPS one.

One simple solution to this would be to force the loading of your CDN assets via HTTP like so:

This leads to one other issue, however…

Why dont I see the Blue/Green Bar?

When a page and all of its assets are served over HTTPS, modern web browsers provide a visual indicator—usually in green or blue. This is designed to provide visitors with the confidence to shop or register on your site.

When your HTTPS pages are served with “mixed content” (as it sounds, this is a situation in which HTTPS and HTTP assets are both being loaded on a single page, this indicator does not appear. This could happen for any number of reasons — all beyond the scope of this article — but there’s a simple solution for addressing this with only a few short lines of code.

Disabling CDN on HTTPS pages only

W3 Total Cache ships with documentation (Performance > FAQ) that provides instructions on disabling each of the caching types. Combined with a simple PHP function and WordPress hook, we’re able to conditionally disable the CDN for pages that utilize HTTPS.

Add the following code snippet to your theme’s functions.php file:

add_action('wp_head','nocdn_on_ssl_page');
function nocdn_on_ssl_page() {
if ($_SERVER['HTTPS'] == "on") {
define('DONOTCDN', true);
}
}

This of course assumes that you have W3 Total Cache active and that the only assets being served over HTTP are originating from your CDN (otherwise, you might need something like this). When you reload a page being served over HTTPS, you should notice that the familiar green / blue indicator appears in your address bar.

Note: we’ve found that MaxCDN‘s SSL support and easy integration with W3 Total Cache provides a solid solution for many customers.

This is an exciting new business model, now everyone can benefit for the years of effort we’ve put into best practices and methodologies we’ve developed.

What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).

For those that just want to see the code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.

I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.