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 One-Liner:

/* Safari 9+ */

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

Author: Jeff Clayton

And a One-Liner that is not for iOS:

/* Safari 9+ (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!

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

@supports (-webkit-text-size-adjust:none) 
   and (not (-ms-ime-align:auto)) {
     .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

CSS Hacks for Firefox 3.5+

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. 3.5 introduced several new CSS methods that can be used for our purposes.

Here is a CSS hack I created as a one-liner for 3.5 and up:

/* Firefox 3.5+ */

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

Author: Jeff Clayton

A slightly different composite version including a media query:

/* Firefox 3.5+ */

@media screen and (orientation) {
     _:-moz-tree-row(hover), .selector { property:value; } 
}

Author: Jeff Clayton

Here is one created for Firefox 3.x newer than 3.0 (3.5-3.6)

/* Firefox 3.5-3.6 */

_:not(), _:-moz-handler-blocked, .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.5, Hacks, Software, Tech, Web, Web Browser, Web Browsers