CSS Hacks for Firefox 1

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.

One of my favorite CSS Firefox hack creations that I sent to BrowserHacks.com, simple and clean — for all versions 1.0 and up:

/* Firefox 1+ (All) */

_:-moz-tree-row(hover), .selector { property:value; }

Author: Jeff Clayton

And for Firefox 1.x (Only):

/* Firefox 1.x */

_:-moz-tree-row(hover), _::-moz-viewport, .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 1, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Firefox 22

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 is the simplest of the ones I have created. It works, but will appear in earlier versions of Firefox if a flag has been set by the user. This does not really matter in most cases.

/* Firefox 22+ */

@supports (-moz-appearance:none) {
    .selector { property:value; } 
}

Author: Jeff Clayton

This slight change allows it to require version 22 and newer:

/* Firefox 22+ */

@supports (-moz-appearance:none) and (display:flex) {
    .selector { property:value; } 
}

Author: Jeff Clayton

This is the older way, the first way I found and tested to do this.

/* Firefox 22+ */

@supports (-moz-appearance:meterbar) and (display:flex) {
    .selector { property:value; } 
}

Author: Jeff Clayton

For those who like one-liners, here is a CSS hack I created for this purpose using pseudos:

/* Firefox 22+ */

_:-moz-tree-row(hover), _::-moz-range-progress, .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 22, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Chrome 28+ (Not Safari!)

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

This one I found in programs, but not originally planned as a hack. It is very good so I sent it to BrowserHacks.com for inclusion.

/* Chrome 28+ (and Opera 14+) */

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

Author: Jeff Clayton

One I wrote before -webkit-appearance:none appeared…

/* Chrome 28+ (and Opera 14+) */

@supports (-webkit-font-smoothing:antialiased) {
    .selector { property:value; } 
}

Author: Jeff Clayton

And to target JUST Chrome 28:

/* Chrome 28 (and Opera 14-15) */

@supports (overflow:-webkit-marquee) {
    .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 28, Cool Code, CSS, CSS Hacks, Hacks, Software, Tech, Web, Web Browser, Web Browsers

CSS Hacks for Safari 6.1, 7, 8, 9 and 10 (Not 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.

UPDATED for Safari 10.1 (Late March 2017 Update)

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-9) 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/

That out of the way here are hacks for you to use for more recent versions of Safari.

Please be aware that these are hacks, and some of them are truly non-standard CSS code (which is why only some browsers are affected by them) and will not filter through SASS or other compilers or filters because they try to remove the non-standard data or convert to cross-browser form which completely destroys what we are trying to do here. To use them anyway, in many cases you must use your filter first, then apply the hack afterward. Such is the nature of a hack and does require the extra work of either including an external unfiltered CSS file or code block afterward. 

For 9 specifically, I have been working on a page for that, so – rather than retype the same code, go here for hacks to affect Safari 9 (including a hack for iOS only now): My Safari 9 CSS Hacks

Here is one for Safari 7.1 and newer:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

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

}
Author: Jeff Clayton

Here is one I worked out for Safari 10.1+:
(YES the double media query is a necessity!)

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media
{
    .safari_only { 

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

    }
}}

Author: Jeff Clayton

This hack I worked out by combining multiple other hacks is for 6.1-10.0 (not 10.1):

/* Safari 6.1-10.0 (10.1 is the latest version of Safari at this time) */

@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

Below is a hack that separates 6.1-7.0 from the above 7.1+
These also required a combination of multiple hacks in order to get the right result:

/* Safari 6.1-7.0 */

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

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

    );}
}

Author: Jeff Clayton

To use them:

This text will be Blue in Safari

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

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

and mirror here:

http://browserstrangeness.github.io/css_hacks.html#webkit

Tagged with: , , , , , , , , , , , , ,
Posted in Apple, Computers, CSS, CSS Hacks, Hacks, iOS, Macintosh, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, Safari, Safari-All, Tech, Web, Web Browser, Web Browsers

Browser History – How to split up Chrome 22-28 with CSS Hacks (the best way so far…)

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.

With my Chrome 22-28 hack, what if you needed just one of these due to a difference in CSS? (This does happen, hence the need for browser version hacks of specific numbers.) Mostly this is just for interest in puzzle solving, but not recent. The main purpose being the attempt to target specific browsers if possible.

From my Chrome and Safari hacks page:

/* Chrome 22-28 (and Opera 14-15) */

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

Grabbing several from my Live CSS Hacks Test Page:

Do this one first to target Chrome 25 (The next couple will override 22-24):

/* Chrome 22-25 */

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

Now the overrides:

/* Chrome 22-23 */

@media screen and(-webkit-min-device-pixel-ratio:0) {
    _::-moz-svg-foreign-content, _:scope, .selector {
        property:value;
    }
}
/* Chrome 24 */

@media  screen and (orientation) {
     ::webkit, .selector {
        property:value;
    }
}
Tagged with: , , , , , ,
Posted in Chrome, Chrome-All, Computers, Cool Code, CSS, CSS Hacks, Hacks, Safari, Web, Web Browser, Web Browsers

Promo Television Commercial by Locke Productions

Recently I worked with Locke Productions to create a promo television commercial to fill a 15 second spot. I believe it went very well.

Several people have asked me about this ‘Bill Masters’ person – he is a character, not a real person. ***No Attorneys were harmed in the making of this film.*** What does this commercial sell? It sells video production.

For more information, please feel free to check IMDB:

[ Me on the Internet Movie Database – http://www.imdb.com/name/nm2464961 ]

Tagged with: , , , , , , ,
Posted in Acting, Commercial, Film, Media, Movies, Production, Television, TV

CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

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 was released in 2015 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.

Windows phones supporting Windows 8.1 Mobile (using Internet Explorer 11) and now also Windows 10 have decided to bring back that idea and alias multiple webkit prefixes to match the standard CSS features. What this means is that many of the CSS hacks for Chrome or Safari that are in the wild are also be picked up by Microsoft’s Edge Browser.

The final CSS for Windows 10 and the new Edge Browser is complete at this time, and I have made the updates here since the preview versions which combined MSIE 11 and Edge capabilities in many cases. For convenience-of-number-order, the Microsoft Edge browser starts numerically at version 12.

So for the Windows 10’s Microsoft Edge Browser here are some that target JUST that browser: (newer one)

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  .selector { property:value; } 
}

Version-Specific CSS Hacks Continue Here:

/* Microsoft Edge Browser 15+ - @supports method */

@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14+ - @supports method */

@supports (-ms-ime-align:auto)
and (not (-ms-accelerator:true)) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14 - @supports method */

@supports (-ms-ime-align:auto)
and (not (-ms-accelerator:true))
and (not (-webkit-text-stroke:initial)) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14- - @supports method */

@supports (-ms-ime-align:auto)
and (not (-webkit-text-stroke:initial)) {
  .selector { property:value; } 
}

And for those who like one-liners as well:

/* Microsoft Edge Browser 12+ (All) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Additional numbered versions follow:

/* Microsoft Edge Browser 13+ - one-liner method */

_:-ms-lang(x), _::-webkit-meter-bar, .selector { property:value; }
/* Microsoft Edge Browser 13+ - @supports method */

@supports (-ms-ime-align:auto) and (color:unset) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 13 - @supports method */

@supports (-ms-accelerator:true) and (color:unset) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 13- (12-13) - @supports method */

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 12 */

@supports (-ms-accelerator:true) and (not (color:unset)) {
  .selector { property:value; } 
}

If you had been following my postings during the Windows 10 Technical Preview (back when they were calling the ‘Edge’ browser ‘Project Spartan’, you may recall I had a third one I developed and was working on (a media query.) The end result is how these things work – during the preview process it worked, and several worked for both Internet Explorer 11 AND Microsoft Edge. When the final version of Windows 10 was released, these two still were effective but the third one only worked on the preview version. I am not concerned with ‘preview-only’ hacks, but only with ones that affect the browser world as a whole – so I removed it and only the two final working versions of my CSS hacks for the MS Edge Browser are here.

It has been pointed out in the comments below that it can be handy to have Internet Explorer and Microsoft Edge combined into one hack. Thanks got to Mrunal for the suggestion. This one works for that purpose:

/* Internet Explorer 10+, Microsoft Edge Browser */

_:-ms-lang(x), .selector { property:value; } 

I was looking at MS Documentation for Internet Explorer 11 and found an interesting remark about having fixed an error in Internet Explorer 10 and below where it had been failing to load external style sheets if there is a malformed @charset line included, such as with angle brackets. The _:-ms-lang(x) hack I created can be placed in an external stylesheet to create MSIE 11+ AND Edge styles like so:

/* Internet Explorer 11+, Microsoft Edge Browser */
/* Put this code in external stylesheet: ie11up.css */

@charset "";

_:-ms-lang(x), .selector { property:value; } 

The external style sheet also loads using Firefox 19 and newer or the ms-lang hack would not be required. For further notes, I have yet to test it in extremely old versions of Safari at this time. Chrome 1+ (all), Firefox 19+, Internet Explorer 11+, and Microsoft Edge 12+ and modern versions of Safari load the sheet.

The above combination above works as planned only for Internet Explorer 11+ and Microsoft Edge 12+ (all versions of Edge).

For other specific Internet Explorer Hacks, those can be found on my Internet Explorer CSS Hacks page.

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

http://browserstrangeness.bitbucket.io/css_hacks.html or the mirror at http://browserstrangeness.github.io/css_hacks.html

Tagged with: , , , , , , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Hacks, Internet Explorer, Microsoft, Software, Spartan, Spartan-All, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10

JavaScript window.close() workaround method that works

NOTE: This script has 1 requirement that the page to be closed cannot be the original page. It must be opened as a new window. If you wish to close a page that has been posted via form, the page must first have still been opened in a separate window. If you are running any security programs, test the sample page first with them disabled if you are having issues. I have not seen any examples of modern browsers not working with this script if the above requirement has been met.

For those with hassles with window.close() or self.close() not working, there is a way for a JavaScript button to do this. You must use the complete code (HTML AND JAVASCRIPT BOTH!) for this to work. Scroll down to view all. A link to [ a working test page ] using script to open and script to close is included. Be sure to click the ‘Open in New Window/Tab’ button on the page to open a new popup window, and then click the ‘Close This Window/Tab’ button on the newly opened window.

Most versions do not work anymore due to security restrictions. The close option specification expects that it cannot be closed by anything other than the script that opened it… so this workaround basically attempts to reopen a window then close it:

open(location, '_self').close();

I am calling it from a button press so it is **user initiated**, and it is still working fine using Chrome 35-40, Internet Explorer 11, Safari 7-8, and ALSO Firefox 35-40. I tested using version 8.1 of Windows and Mac OS X 10.6, 10.9 & 10.10.

The complete code:

The launcher window (window_close_tester.htm):

<script language="javascript">

function open_a_window() 
{
   window.open("window_to_close.htm"); 

   return false;
}

</script>

<input type="button" onclick="return open_a_window();" value="Open New Window/Tab" />

The opened window (window_to_close.htm):

<script language="javascript">

function quitBox(cmd)
{   
    if (cmd=='quit')
    {
        open(location, '_self').close();
    }   
    return false;   
}

</script>

<input type="button" onclick="return quitBox('quit');" value="Close This Window/Tab" /> 

Try this test page:

http://browserstrangeness.bitbucket.io/window_close_tester.htm

Tagged with: , , , , , , , , , , , ,
Posted in Chrome, Computers, Cool Code, Firefox, Internet Explorer, Programming, Safari, Spartan, Tech, Web, Web Browser, Web Browsers

OS/Platform Specific 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.

Is it possible to target a specific computer or OS with CSS Hacks?

There is a way to do some of this by nature of the browser you are using, a little deductive reasoning, and a few tricks… not everything will do it but there are a few you can use for OS targeting with CSS only. Scripting offers more options of course. This reflects about 6 months of research and work on my part for accuracy as noted in the text below.

At this time I do not know of a way to do this with Chrome and I have not looked into Opera, especially now that it uses much of the same methodology as Chrome. Chrome did not release a version for Mac until version 3. Also for a Mac, Google has issued a statement that OS X 10.6-10.8 will not be supported after Chrome 49 so Chrome 50 and newer will indicate Mac OS X 10.9 (Mavericks) or newer.

Firefox, Internet Explorer/Edge, and Safari have better options though.

Firefox 4 and newer can detect that a Windows theme is being used, so even old versions of Firefox will at least detect whether you are or are not using Windows. I created this a while back and tested this again today:

@media screen and (-moz-windows-theme) {
    .windows {
        color:red;
    }
}

By the same token, this one works for anything but Windows, again for Firefox 4 and newer:

@media not screen and (-moz-windows-theme) {
    _:-moz-ui-valid, .nonwindows {
        color:red;
    }
}

-moz-os-version was added in firefox 25 media queries but only has a few options according to the mozilla documentation from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

OS’s: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10

This set therefore only works in modern Firefox browsers version >= 25. At the time of this posting update, Firefox is version 35.

@media screen and (-moz-os-version:windows-xp) {
    .windows,.winxp {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-vista) {
    .windows,.vista {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win7) {
    .windows,.win7 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win8) {
    .windows,.win8 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win10) {
    .windows,.win10 {
        color:red;
    }
}

Microsoft’s Edge Browser (Formerly Spartan) is at this time only in Windows 10. To detect it:

/* Microsoft Edge Browser (12+ = ALL) */

@supports (-ms-accelerator:true) {
    .windows,.win10 {
        color:red;
    }
}

There are also ways to detect Macintosh computers as well.

Firefox >= 24 introduced a new scrollbar overlay method for OS X 10.7 Lion and newer that is detectable with a media query:

@media screen and (-moz-overlay-scrollbars) {
    .mac,.mac10_7up {
        color:red; 
    } 
}

Firefox >= 25 also has a way to detect Mac OS X since they added support for OS X font smoothing in version 25:

@supports (-moz-osx-font-smoothing:auto) {
    .mac,.mac10_6up {
        color:red;
    } 
}

Because @media queries and @supports filters can nest within each other, the following is now possible — in order to target JUST OS X 10.6 Snow Leopard with Firefox 24 and newer:

@supports (-moz-osx-font-smoothing:auto) {
  @media not all and (-moz-overlay-scrollbars) {
    .mac,.mac10_6 {
        color:red; 
      }
    } 
}

Firefox 17 and above only support Mac OS X 10.6+ (Snow Leopard and newer) so if you have results from any of the above OS X CSS rules, you are not using OS X 10.5 or older. (https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29)

Conversely, again in Firefox 25+ it is possible to negate OS X (10.6 and newer) — Since 10.5 and older do not support this version of Firefox, it means this one is not Mac at all:

@supports (-moz-appearance:none)
  and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    .nonmac {
        color:red; 
    } 
}

iOS (iPad and iPhone) do not (yet…? will they ever?) have a version of Firefox, so Firefox with OS X font smoothing really does only cover Mac computers only, not Apple mobile devices at this time.

By negating both at once, we have a way to target what is left: Anrdoid/Linux, again with Firefox 25 and newer:

@supports (-moz-appearance:none)
  and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    @media not screen and (-moz-os-version) { 
       .lindroid {
           color:red; 
       }
    } 
}

If you are using Internet explorer, version 6 or newer (Windows XP and newer) then you are clearly using windows no matter what. That can be determined in more than one way as well.

Conditional comments existed in windows up until internet explorer 9, so those can be used to gather more information:

This only detects that you have windows, but not necessarily the version because Internet Explorer 6-9 only existed on the windows platform. At this time, Internet Explorer 11 is the current version so this does not detect 10 and 11, but 9 and before:

<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">

    .windows {
        color:red;
    }

</style><![endif]-->

Internet Explorer 6 only existed in Windows XP, or older Windows versions no longer used today, so this works for that one:

<!--[if (IE 6)]><style type="text/css">

    .windows,.winxp {
        color:red;
    }

</style><![endif]-->

Internet Explorer 7 existed in Windows XP Vista and also is often emulated when you click the compatibility mode choice in Internet Explorer 8 or newer however. This one works if you are using Internet Explorer 10 or newer, so you have windows 7 or 8.

@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) { 
    .windows {
        color:red;
    }
}

One of my creations that I personally crafted detects Internet Explorer 11 or newer, which is available for Windows 7 and newer, up to 8.1.

_:-ms-fullscreen, :root .windows { 
    color:red; 
}

If you don’t want to use Internet Explorer Conditional Comments but would rather Media Queries, these do exist:

To detect Internet Explorer 6-7 (therefore Windows XP and older up to Windows 7) this works:

@media screen\9 
{
    .windows {
        color:red;
    }
}

This one I created for Internet Explorer 9 since none existed. (so win 7 or win vista)

@media screen and (min-width:0\0) and (min-resolution:.001dpcm) 
{
    .windows {
        color:red;
    }
}

This detects Internet Explorer 8 (Therefore windows XP-windows 7)

@media \0screen
{
    .windows {
        color:red;
    }
}

I crafted this media query from various other parts over the last year, and It handles Safari 6.1 and newer. Safari is version 7 at the time of this posting. Macs and mobile devices such as the base Android browser, will be detected in this fashion:

@media screen and (-webkit-min-device-pixel-ratio:0)
 and (min-color-index:0)
{
    .mac_or_mobile {(;
        color:red;
    );} 
}

Here is a better way to detect for most newer macs, and NOT include mobile devices such as iPads (or Androids) – Again it is for Safari 6.1 and newer, so it is a Mac…:

@media screen and (-webkit-max-device-pixel-ratio:1)
 and (min-color-index:0)
{
    .mac_osx {(;
        color:red;
    );} 
}

If you want the mobiles instead, this works for recent hi-definition ones:

@media screen and (-webkit-min-device-pixel-ratio:1.1)
 and (min-color-index:0)
{
    .retina {(;
        color:red;
    );} 
}

I have more about mobile phones and tablets here: https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/ and here: https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/

Mac did have Internet Explorer for a while, but did not make newer versions after version 5.5.

Windows did have Safari for a while as well, but did not make newer versions after version 5. Most windows users never use Safari, so you could generally rule out windows when Safari is detected.

If you include all of the above styles into a document, the divs below will reflect the results of the styles from above:

Per Firefox and Internet Explorer/Edge:

<div class="windows"> If this is Windows this is red </div>

<div class="winxp"> If this is Windows XP or older this is red </div>

<div class="win10"> If this is Windows 10 this is red </div>

Per Firefox:

<div class="vista"> If this is Windows Vista this is red </div>
<div class="win7"> If this is Windows 7 this is red </div>
<div class="win8"> If this is Windows 8 this is red </div>

<div class="nonwindows"> If this is NOT Windows this is red </div>

<div class="nonmac"> If this is NOT Mac OS X this is red </div>

<div class="mac"> If this is Mac OS X this is red </div>

<div class="mac10_7up"> If this is Mac OS X 10.7 or newer this is red </div>
<div class="mac10_6up"> If this is Mac OS X 10.6 or newer this is red </strong>
<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </strong>
<div class="lindroid"> If this is Linux or Android this is red </div> Per Safari: <div class="mac_osx"> If this is a Mac using Safari (desktop or laptop computer) this is red (includes old mobile devices but not before iOS 6) </div> <div class="mac_or_mobile"> If this is a Mac or a mobile device using Safari (Android or iPad/iPhone) this is red </div> <div class="retina"> If this is a hi-def mobile device using Safari (Android or iPad/iPhone) this is red </div>

Additional notes on detection…

Windows versions based on Internet Explorer (for ease of reference):

As stated above if you detect Internet Explorer 6, you are using XP (or older Win)

If you detect Internet Explorer 7-8, you are using Windows XP, Vista, or Windows 7

If you detect Internet Explorer 9 you are using Windows Vista or Windows 7

If you detect Internet Explorer 10 you are using Windows 7 or Windows 8.0

If you detect Internet Explorer 11 you are using Windows 7 or Windows 8.0/8.1 or Windows 10

If you detect Microsoft Edge you are using Windows 10

Windows 10 is the current version of Windows at the time of this posting.

For historical interest, if you really want to, you could actually determine Internet Explorer 5 or less on a Mac with an old hack I have found:

/*\*//*/ .mac_internet_explorer { color:red; } /**/

The Mac version of Internet Explorer was only available on the old PowerPC Macs, not the Intel models.

Tagged with: , , , , , , , , , , , , , , , , , , ,
Posted in Apple, Chrome, Computers, Cool Code, CSS, CSS Hacks, Firefox, Hacks, Internet Explorer, Linux, Macintosh, Microsoft, OS, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, OS_Targeting, Safari, Software, Spartan, Tech, Vista, Web, Web Browser, Web Browsers, Windows, Windows 10, Windows 7, Windows 8, Windows 8.1, Windows Vista, Windows XP

What are these CSS Hacks anyway? What do they have to do with fixing broken web sites? [NOT “Hacking!!!”]

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 check out my [Live CSS Hacks Test Page at Bitbucket] MIRROR at [Live CSS Hacks Test Page at GitHub] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Have you ever had or seen a web site that works fine… mostly… but not in (name a specific web browser here)? …or even a specific version (maybe it works properly in Internet Explorer 10 but not 11 for example)?

A few pages to check out:

That is the bane of the web programmer/developer in today’s world. They build it usually using a Windows or Mac-based machine and invariably it works great on the platform or web browser it was designed with but NOT on others.

Why this is the case? Simply there many programmers working on each web browsers’ programming, and they are very large applications… and while they are supposed to follow the current web standards it is not all that easy, and sometimes not even entirely intended. Web sites are the same way, especially the larger and more complex ones.

What do you do about it???!!! How do I get my own site to work on ALL browsers the same way, or at least ‘well enough’…

GENERAL DISCLAIMER: Always attempt to make the site work properly with good cross-browser CSS first, then only if there is still a problem, especially if it is time-sensitive, you can consider resorting to using a CSS hack. This is ALL LEGAL — while it is odd code, this is not talking about breaking into anything, just providing methods of fixing errors in web sites where they don’t act right in every web browser.

‘Well enough’ is the key actually. Older browsers simply do not have the same level of capability that the new ones do so making them work ‘the same on every platform’ is not always possible. What we do is attempt to write good CSS formatting that ‘degrades nicely’ so on every platform, a good looking site exists, even if it is different than the original design — the end user will be happy and won’t care so much of the difference.

What about sites that SHOULD look good on modern browsers, and it is clear that the browser can in fact handle everything my site throws at it?? That is the question we are trying to solve here. Often it is a case of finding common ground… rewriting CSS and testing it on all of the major browsers to make it work right is the right way to do it.

HOWEVER– there is not always enough time to do it if your customers need it to look right immediately in say Internet Explorer, or Safari on a Mac, etc… (Chrome and Firefox are the other ones that are major players so these 4 are what most people strive to target.)

Here is where it is often necessary to find a quick fix, one that works for the meantime until a better CSS solution is found. That is what CSS Formatting Hacks are all about — a way to target specific browsers, or a set of browsers ONLY, with CSS for only those browsers.

How it works is rather simple in idea but often more complicated in structure, or just hard to understand because CSS hacks may not actually look like they should do anything at all. Often a company creates special CSS for usage on their own web browsers. There are also cases where certain CSS functionality is added to browsers when newer versions are released. That is where most of these CSS hacks or hack combinations come from, sometimes there is even an occasional outright CSS bug that only affects one or a few different browsers or version(s) of those browsers.

If we know for example that it works fine in every browser but say Firefox 29 and newer, then we attempt to find a CSS formatting hack that allows us to insert CSS into a site that only affects versions 29 and newer… or if we cannot find a hack that does that, then we look for one that works on older versions (specifically 28 and older in this example if we can). Here is one example:

/* Firefox 29+ (using a media query) */

@media screen and (min--moz-device-pixel-ratio:0)
 and (min-resolution:3e1dpcm) {

    /* Any CSS here shows up only in Firefox 29 and newer */
 
    body {
        background-color:gray; 
        color:red;
    } 
}

The best answer is to play the odds. What versions are your customers going to be using? If your demographic never uses older versions of say Internet Explorer 9 or less, then why be concerned about that set of browsers? The answer is maybe you do not, so then you would want to focus your attentions on the browsers that your customers are going to be using the most, and THEN maybe see if your sites at least look basically fine on other browsers in case you get the uncommon straggler with out of date computer equipment.

Well that is what these are all about– Test your site and see what browsers don’t render your site properly, and then find what CSS would fix that. If you try it and that throws off other web browsers, then you may need to (at least temporarily) use a CSS hack to solve the problem until you can find a better solution.

While I hope to find hacks for every version of every major browser out there, it is not always possible. If you cannot find a hack for your specific version, then use them in order from oldest to newest. In a style sheet they do overwrite each other in text order, so write CSS for say version 28+ [meaning: 28 and newer a.k.a chrome >= 28 for the more mathematically inclined] of chrome first, then for version 29+ sequentially on a page, so the last CSS you have in your style sheet targets the most recent web browsers. That is not a dead set rule of course, just a guide to work from. If you need to use a hack, use it in whatever order does what you need it to accomplish.

There are many on this blog for this purpose. Try not to overuse them but only in a pinch if absolutely necessary. I also contribute new hacks and test hacks for browserhacks.com. You will see much work there of mine as well. I have been working with Hugo, Tim and Fabrice since Fall of 2013 to help that site have what it needs to help the web development community at large.

Jeff

Jeff Clayton
IT Director, Senior Software Engineer, Professional Photographer

Tagged with: , , , , , , , , , , , , , , ,
Posted in Apple, Chrome, Computers, Cool Code, CSS, CSS Hacks, Firefox, Hacks, Internet Explorer, Linux, Macintosh, Microsoft, OS, OS X 10.10 Yosemite, OS X 10.6 Snow Leopard, OS X 10.7 Lion, OS X 10.8 Mountain Lion, OS X 10.9 Mavericks, Safari, Software, Spartan, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10, Windows 7, Windows 8, Windows 8.1, Windows XP