If you know CSS, you know that the above just seems to good to be true. Well, it is!
Aug 31, 2015 Creating a CSS file. Since the current version of TextEdit, the built-in text editor in Mac OS X, doesn’t allow saving “.txt” files in its default configuration, there are three options to. I can't test it on safari/mac but Safari and Google Chrome uses WebKit rendering engine so it is very likely that every hack works in Safari. Google Chrome is rather new player but it rapidly increases and there is a need for using specific styles only for that browser.
You really can’t make this happen without a little JavaScript. But, with a little JS, we can make our CSS much more complete.
Let’s imagine that we wanted to apply a whole bunch of CSS rules to Mac OS X browsers only. Wouldn’t it be great if we could just do something like:
Ideally, this would force all Mac OS X browsers to style paragraph tags with a 2em line height.
Well, as I said before, with a little JavaScript, we can actually make this possible. The below example uses jQuery.
Essentially, we’re adding the mac-os class name to your body tag if a Mac OS operating system is detected, which makes the above CSS rules possible!
Quick Tips
- You may not have the jQuery library loaded, in which case, this is easily done with “traditional” JavaScript:
document.getElementsByTagName('body')[0].className += ' mac-os'; - If you wish to target only Webkit browsers on the Mac (Safari and Chrome), you can couple this tip with webkit’s proprietary media query as follows:
- Similarly, if you wanted specific styles to target individual Mac browsers, you could do the following:
Then, within your CSS, you’re able to do something like the following:
- Although these tricks may do the job, they may cause issues for you down the line. It may make sense to “reset” your CSS styles first. Each browser has a different set of defaults styles for each element (some might have a line height of 1em for paragraph tags while others have 1.25 em as the height).The best way to ensure consistency is to first set a base style for all elements. This technique is popular within WordPress themes but can be done easily by adding this one line of CSS to the beginning of your stylesheet:
Minified CSS reset styles
Safari Mac Os 9
Css Hack Safari Mac Only Love
| /* IE8 Only */ |
| .myClass { |
| color:red0/; |
| padding:70px0/; |
| } |
| /* IE 6 Only */ |
| * html .myClass { |
| ... |
| } |
| /* All except IE6 standards */ |
| .myClass { |
| property /**/: value; |
| } |
| /* Firefox & IE 7, и выше */ |
| html>body .myClass { |
| ... |
| } |
| /* Modern browsers only (not IE 7) */ |
| html>/**/body .myClass { |
| ... |
| } |
| /* IE 7 Only */ |
| *:first-child+html .myClass { |
| ... |
| } |
| /* Firefox Only */ |
| @-moz-document url-prefix() { |
| .myClass { |
| ... |
| } |
| } |
| /* Opera Only */ |
| noindex:-o-prefocus, .MyClass { |
| color:red; |
| } |
| /* IE7 Only */ |
| div[class^='myClass'] .myClass2 { |
| ... |
| } |
| /* IE7 only */ |
| *+html .myClass { |
| ... |
| } |
| /* hack for Opera <=9 */ |
| html:first-child .myClass { |
| ... |
| } |
| /* Firefox, Opera, Konqueror, Safari */ |
| *|html .myClass { |
| ... |
| } |
| /* IE8 beta 2 only (?)*/ |
| html:first-child .myClass [attr|=a-b] { |
| ... |
| } |
| /* IE5/Mac only */ |
| /**//*/ .myClass { property: value; } /**/ |
| /* Gecko only */ |
| .myClass:not([attr*=']) { |
| ... |
| } |
| /* Opera < 9.5 only */ |
| @media all and (min-width: 0px) { |
| html:first-child .myClass { |
| ... |
| } |
| } |
| /* Safari only */ |
| .myClass:not(:root:root) { |
| ... |
| } |
| /* Safari 3.0 and Chrome only */ |
| @media screen and (-webkit-min-device-pixel-ratio:0) { |
| .myClass { |
| .... |
| } |
| } |
| /* Chrome browser */ |
| body:nth-of-type(1) .myClass { |
| ... |
| } |
| /* Safari browser css hack */ |
| body:first-of-type .myClass {property:value;} |