HTML+SSL CSS Hacks for Firefox 22 and 23

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 ]

Advertisements
Tagged with: , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Firefox, Firefox 22, Firefox 23, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Chrome 46+

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.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead.
More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Here is a CSS hack for Chrome 46 I crafted after researching chrome features:

/* Chrome 46+ (and Opera 33+) */

@supports (-webkit-appearance:none)
   and (motion-path:path('M0,0')) {
     .selector { property:value; } 
}

Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Tagged with: , , , , , , ,
Posted in Chrome, Chrome 46, Cool Code, CSS, CSS Hacks, Hacks, Software, Tech, Web, Web Browser, Web Browsers

Safari 9 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.

Safari has changed since version 6.1, as many have noticed.

Please note: if you are using Chrome on iOS (at least in versions 6.1-8) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

For about a month I have been working on Safari 9 (beta) – Safari 9 on iOS (and the beta which is due to be released soon for desktops) and here is the resulting set of CSS hacks for you.

/* Safari 9 (only) */

@supports (overflow:-webkit-marquee)
   and (justify-content:inherit) {
     .selector { property:value; } 
}

Author: Jeff Clayton

A couple of one-Liners:

/* Safari 9.0+ */

 _:default:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton
/* Safari 9.0-10.0 */

_::-webkit-:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

a support features query:

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite
   and (object-fit:fill) {
     .selector { property:value; } 
}

Author: Jeff Clayton

And other One-Liners:

/* Safari 9.0+ */

 _:default:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton
/* Safari 9.0-10.0 (non-iOS) */

_:-webkit-full-screen:not(:root:root), .selector { property:value; } 

Author: Jeff Clayton

There is now a way as of Safari 9 to target iOS devices as well!
(updated October 2017)

/* Safari 9+ (iOS Only!) */

@supports (-webkit-text-size-adjust:none) 
   and (-webkit-marquee-repetition:infinite
 and (object-fit:fill) {
     .selector { property:value; } 
}

Author: Jeff Clayton

To see them working live, As always — I have created a test page here:

http://browserstrangeness.bitbucket.org/css_hacks.html#webkit

Tagged with: , , , , , , , , , , ,
Posted in Apple, Computers, Cool Code, CSS, CSS Hacks, Safari, Safari 9

How to get the Microsoft Edge browser out of WebKit Media Queries that work for Safari and Google Chrome

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.

Update: These are tested in Windows 10’s release version.

The Production Version of Windows 10 has just been released which includes the new Edge (Formerly the Spartan Project) web browser. The CSS rendering engine has differences. In 2010 there was a push for Microsoft to add -webkit- prefixes to the CSS settings but that was thrown out after a little time in the sun.

So we have a problem — there are multiple different WebKit (Chrome and Safari) hacks out there that are now picked up by MS Edge… Including one of the most used and famous media queries:

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
}
The Old and Out-Of-Date Standard Webkit Hack

SO — Use this set for Chrome, or the below for Safari instead:

My old Media Query combo still works properly and Targets Chrome 29+, ruling out Safari, Firefox and MS Edge (which now also cover @supports feature queries)

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    .selector { property:value; } 
}
Author: Jeff Clayton

Though old, some people still need to check for older Chrome browsers. This one still only targets chrome (versions 22-28). Also not Edge, Safari or Firefox.

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}
Author: Jeff Clayton

This Safari hack I worked out by combining multiple other hacks is for 6.1+:
(Safari 9 is the latest version of Safari at this time.)

/* Safari 6.1+ */

@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
{
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}
Author: Jeff Clayton

Additional info…

During the Windows 10 Preview version testing phase, I had been working with different CSS to find the gold nugget in the midst of the mess of code that was being combined and edited to break away from Internet Explorer 11. The result of those is in my CSS hacks for MS Edge page.

Now that Safari 9 finalized @supports feature detection, use the above code instead if you just want to target Chrome. Firefox is also beginning to target webkit so this one rules out that browser as well.

Looking at these there us a simple fix (a non-edge wrapper) we can use. Here is a nested media/supports block that will solve this for you:

/* Chrome 28+, Safari 9+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @supports (not (-ms-accelerator:true))
    and (not (-moz-appearance:none)) {
      .selector { property:value; } 
} }
Author: Jeff Clayton

To target just Safari, use the Safari-Only CSS I worked out on my Safari Hacks collection page.

Like the majority of my testing, they can be viewed live here on my live CSS Hacks testing page:

http://browserstrangeness.bitbucket.org/css_hacks.html

*NOTE*

A different point that is important – comments saying things do not work right– without example code, or any examples at all, are not helpful and cannot be assisted. If there is a valid need for assistance in codewriting, whether by me or another helpful programmer, please provide a live site that can be checked.

What is required for anyone to assist you: HTML page you are working on; Which CSS Hack you are attempting; What browser are you using (please verify exact version numbers!); What OS are you using (some hacks are specific to OS); Most ‘hack’ issues I have seen are where the hack was not completely copied properly. Are you using the CSS hack exactly as written, copy and paste rather than attempting to type it out – and checking the code to see if it copied exactly afterwards? (Some use a ‘missing space’ or a slash that does not translate well if not copied exactly). Are you running the hack through a compiler or filter? (That will not often work as they get altered. They must be used as-is in most cases.) What is happening in that browser as opposed to other browsers? (Or do they do the same thing?) Have you modified your browser settings so that it is not the ‘out of the box’ version? These things would be very helpful indeed. Thanks in advance.

Tagged with: , , , , , , , , , , , , , ,
Posted in Chrome, Chrome-All, Computers, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Hacks, Safari, Safari-All, Spartan, Spartan-All, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10

CSS Hacks for Chrome 43+

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.

General disclaimer: start with good CSS and only use these if you need them in a pinch.

* If you are using iOS Chrome (say in version 7 or 8) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. It may LOOK like Chrome, but is NOT using the Chrome engine, but the Safari engine from Apple instead.
More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Here is a CSS hack for Chrome 43 going through Chrome source code:

/* Chrome 43+ (and Opera 30+) */

@supports (-webkit-appearance:none) and (R:0) {
     .selector { property:value; } 
}

Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Tagged with: , , , , , , ,
Posted in Chrome, Chrome 43, Cool Code, CSS, CSS Hacks, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Firefox 4+

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.

Here are a couple of CSS hacks I put together for version 4.

A one-liner using a pseudoclass:

/* Firefox 4+ */

_:-moz-ui-valid, :root .selector { property:value; }

Author: Jeff Clayton

There are media queries out there, this is one I cleaned up and simplified:

/* Firefox 4+ */

@media (-moz-device-pixel-ratio) { .selector { property:value; } }

Source: My Simplest Version of an Old Query

As mentioned above, to test this live, view it on my test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Tagged with: , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Firefox, Firefox 4, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Firefox 3.6+ and Firefox 3.6-

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.

Versions 3.0, 3.5, and 3.6 of Firefox have some differing CSS. This is a set that I created for the 3.6 variation.

Here are a few for 3.6 and newer:

/* Firefox 3.6+ */

@media screen and (-moz-images-in-menus:0) {
     body:last-child .selector { property:value; } 
}

Author: Jeff Clayton
/* Firefox 3.6+ */

_:-moz-locale-dir(ltr), .selector { property:value; }

Author: Jeff Clayton
/* Firefox 3.6+ */

html:not(:-moz-handler-crashed) .selector { property:value; }

Author: Jeff Clayton

Here is a one I created that targets only 3.6 – using this and the 3.5-3.6 hack in order one can separate 3.5 and 3.6.

/* Firefox 3.6 */

_:not(), _:-moz-handler-crashed, .selector { property:value; }

Author: Jeff Clayton

Targeting anything 3.x and below is possible (Firefox below version 4) with a version of the ‘not’ selector:

/* Firefox 3.6- (Firefox < 4.0) */

_:not(), .selector { property:value; }

Author: Jeff Clayton

As mentioned above, to test this live, view it on my test page at:

[ http://browserstrangeness.bitbucket.org/css_hacks.html ]

Tagged with: , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Firefox, Firefox 3.6, Hacks, Software, Tech, Web, Web Browser, Web Browsers