CSS rules for webkit-based browsers

Question

I have the following CSS code:

#mgheader .letters { display: inline-block; margin-left: 55px; margin-top: -45px; position: absolute; } #mgheader .letters { display: inline-block; margin-left: 10px; position: absolute; } 

Now I want to execute the first time only in Google Chrome and Safari, and the second in other browsers .

I tried this, but the second code seems to always execute:

 @media screen and (-webkit-min-device-pixel-ratio:0) { #mgheader .letters { display: inline-block; margin-left: 55px; margin-top: -45px; position: absolute; } } #mgheader .letters { display: inline-block; margin-left: 10px; position: absolute; } 

How can i fix this?

Answer 1

The problem is that you are redefining your webkit style with a style other than webkit. Reverse ordering should fix this:

 #mgheader .letters { display: inline-block; margin-left: 10px; position: absolute; } @media screen and (-webkit-min-device-pixel-ratio:0) { #mgheader .letters { display: inline-block; margin-left: 55px; margin-top: -45px; position: absolute; } } 

You can also check that your -webkit-min-device-pixel-ratio works on all devices using webkit, but it probably does.

For reference, cascading style sheets are read from top to bottom. The keyword is Cascading. If one CSS rule is specified before the same CSS rule, the latter takes precedence. In your example, you were specifically configured for webkit browsers, but then redefined it with general style rules. Reordering means that the webkit style here will override the overall style (without affecting browsers without a website).