HTML+SSL CSS Hacks for Firefox 22 and 23
[ View All Firefox CSS Hacks ]
These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.
Occasionally there are browser versions that are different in that the developers focus on other updates rather than CSS. Sometimes that means a different method of hack may need to be found. Versions 22 and 23 are (as most ways to differentiate a browser) easier with JavaScript, but natively there is an html difference that is usable. I had not found a straight CSS method (or other type of hack) that divides these two apart, so I looked at this method for the fun of something a little bit different. If you are familiar with CSS hacks this will be rather basic reading, but this is meant for just documenting a method and pointing out that other basic features other than CSS can perform the right task and produce the right result. In this case it is a change in security. Firefox 23 blocks insecure non-ssl (http://) stylesheets from loading from within ssl-secured (https://) stylesheets using the @import feature. In order to make sure we have both http and https, we need to call a chain of 2 stylesheets. The first one, https://www.yourlocation.com/ssl_stylesheet.css which in turn uses @import to load the second one (which is insecure) at https://www.yourlocation.com/non-ssl_stylesheet.css This stylesheet chain will load styles from Firefox versions 1-22. My usual test page loads the hacks for 22 and 23, but not 23+... It turns out that loading a set of stylesheets remotely does not load them fast enough for the local CSS. (A Race Condition). Loading them together, on the same server which handles both http and https appears to not have that problem. @supports feature queries became available in version 22 of Firefox, and because I have Firefox queries to target those browsers, we an use them to divide them. All other browsers already would not load insecure stylesheets from within secure stylesheets. Additional test page here (including Firefox 23+): http://jeffclayton.github.io/mixed_ssl_css.htm The hacks are the same, the order that the colors are loaded are different. From your original html document, load the stylesheet normally with pre-set colors.
<style type="text/css"> /* index.html */ /* start with a blank slate [for non-Firefox browsers as well] */ .ff23up { color:white; } .ff23 { color:white; } .ff22 { color:white; } /* use CSS to make changes for firefox only */ @supports (-moz-appearance:none) and (display:flex) { .ff23up { color:red; } } @supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff23 { color:red; } } </style> <link rel="stylesheet" type="text/css" href="https://www.yourlocation.com/ssl_stylesheet.css" media="screen" />
In my example I chose github to host because githubpages allow the use of both http and https to serve up their documents. The only function this sheet has is to load an external sheet. You could of course also load ssl-only styles in this sheet if you like. The real reason for it however is just to middleman calling a non-secure stylesheet.
/* Contents of the SSL stylesheet */ /* https://www.yourlocation.com/ssl_stylesheet.css */ @import url("https://www.yourlocation.com/non-ssl_stylesheet.css")
Now if you use this sheet as-is, any styles in it target Firefox 1-22. That is fine if that is your goal, but for the purpose of separating version 22 and 23 we need to use one of my previous CSS hacks.
/* Contents of the NON-SSL stylesheet */ /* https://www.yourlocation.com/non-ssl_stylesheet.css */ /* Firefox 23+ [This one works if on same server as the SSL stylesheet] */ @supports (-moz-appearance:none) and (display:flex) { .ff23up { color:white; } } /* Firefox 23 */ @supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff23 { color:white; } } /* Firefox 22 */ @supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .ff22 { color:red; } } Author: Jeff Clayton
Versions 23 and above can be told to ALLOW insecure styles to be loaded from secure style sheets, but it is not recommended to set that in your browser by default. This means that if you have both http and https access to your directory structure, this method will work 'right out of the box.' These can be seen (with live files) as mentioned here: [ http://jeffclayton.github.io/mixed_ssl_css.htm ] Or View my regular test page with the pair of Firefox 22 and 23 hacks (and others) at: [ http://browserstrangeness.bitbucket.org/css_hacks.html ]
