CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge A set of useful CSS3 media queries to target only specific versions of the various browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Edge. As we know,Chrome is a Webkit browser,Safari is a Webkit browser too,and Also Opera,so it's very hard to target the Google Chrome,using media queries or CSS hacks,but Javascript is really more effective. Here is the piece of Javascript code that will target Google Chrome 14 and later, var isChrome =!!window.chrome &&!!window.chrome.webstore.
Css Wall Hack
If you know CSS, you know that the above just seems to good to be true. Well, it is!
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:
Css For Chrome Only
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!
Counter-strike Hack
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
Counter-strike Source Hack
| 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. Thats why i am looking for hack for Google Chrome. |
| Hack 1: @media and -webkit-min-device-pixel-ratio |
| Testsuite: This text is red in Google Chrome. |
| This hack uses webkit specific feature. |
| /* will be red only in google chrome */ |
| #test1{color:green;} |
| @media screen and (-webkit-min-device-pixel-ratio:0) { |
| #test1{color:red;} |
| } |
| Hack 2: For Google Chrome and Opera<10 |
| Testsuite: This text is red in Opera<10 and Google Chrome. |
| All hacks with brackets i found testing lot of css in google chrome and other browsers so if you are blogging about it please give link to this site or to mynthon.net. |
| This hack uses bracket hack. When you open bracket only Google Chrome and Opera will stop processing this line on semicolon. Other browsers will ignore any code after opened bracket until closing bracket will be found. It is important to close bracket or any code after opening bracket will be ignored. It is also important to put semicolon (;) at the end of first line of the hack! |
| /* will be red only in opera and google chrome */ |
| #test2{ |
| color:green; |
| -bracket-:hack(; |
| color:red; |
| ); |
| } |
| Hack 3: For Google Chrome |
| Testsuite: This text is red in Google Chrome. |
| This hack is similar to 'Hack 2' but it works only in Google Chrome. You have to start line with round bracket to make it work. |
| /* will be red only in google chrome */ |
| #test3{ |
| color:green; |
| (-bracket-:hack; |
| color:red; |
| ); |
| } |
| Hack 4: For Google Chrome |
| Testsuite: This text is red in Google Chrome. |
| This hack is similar to 'Hack 2' but it works only in Google Chrome. If you replace round brackets with square brackets this hack will work only in Google Chrome. |
| /* will be red only in google chrome */ |
| #test4{ |
| color:green; |
| -bracket-:hack[; |
| color:red; |
| ]; |
| } |