How to target for Chrome only browsers CSS

Question

For some reason Chrome shows this span unusually higher than FireFox.

As a result, I wrote the following CSS:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}

The following is the HTML:

  <li class="nav-item">
    <a
      class="nav-link"
      data-toggle="tooltip"
      title="Shopping cart"
      id="{{ shoppingCart }}"
      routerLink="/shopping-cart"
      ><span class="justForChrome"
        >Shopping Cart<span id="counter">{{ counter }}</span></span
      ></a
    >
  </li>

While this is working in Chrome, now FireFox is showing the span to high. If I set the margin-top to 100% in FireFox developer tools, then it is perfect, but margin-top at 100% on Chrome sends the span upwards.

What can I do? I swear this was working a few weeks ago. I would expect that firefox would not even find the span.justForChrome selector rule in the CSS

Thanks in advance

UPDATE

In case anyone else is going through this, I thought I would show what finally worked. Whether it is the fact that I have to compile the Angular app, which creates a new "bundled" stylesheet or if it is because I placed the media queries at the end of the scss file, I do not know, but here are the media queries that I used at the end of the scss file, which worked:

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .selector:not(*:root),
  span.justForChrome {
    display: block;
    margin-top: 23%;
    text-align: right;
  }
}
@-moz-document url-prefix() {
  span.justForChrome {
    display: block;
    margin-top: 94px !important;
    text-align: right;
  }
}

Currently the site is still in beta, but here is a :

Both the words "Shopping Cart" and the number are on the "baseline" of the navbar.

As usual, thanks for all the help.

Without a minimal html + css example that can completely reproduce this issue, it's going to be hard for you get a good answer. I'd suggest you add such an example. — maazadeeb, Feb 07 '19 at 02:29
What are you trying to do? Note that a percentage value on margin top works relative to the width of the nearest block container https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top#Values and that could be causing troubles. There must be a better way to do what you want to do but it's not clear. — arieljuod, Feb 07 '19 at 02:31
Possible duplicate of [How to apply specific CSS rules to Chrome only?](https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only) — Mukyuu, Feb 07 '19 at 02:37
@Mukyuu thank you for responding, but I am doing what they suggest in that post and it is not working. That is why I am posting the question again. I have also read that this particular hack no longer works with Bootstrap 4 — kronus, Feb 07 '19 at 03:33

score 1 · Accepted Answer · answered Feb 07 '19 at 04:01

1

I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

Note that .chrome is a class name and you can change with other class names.

Check the following JsFiddle or snippet:

.test {color:red;}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>

answered Feb 07 '19 at 04:01

Mukyuu

4,695
7
32
51

Thank you @mukyuu, that worked. The following is a dropbox link to a screen shot showing both Chrome and FireFox working the way I expect - https://www.dropbox.com/s/vkz1osen6o4y97s/chrome-firefox-fix.png?dl=0 – kronus Feb 07 '19 at 16:21
I spoke to soon https://www.dropbox.com/s/01sazqqotk1bglq/firefox-scss-not-working.png?dl=0 - locally in my dev env this worked, but when I compile the Angular 6 app - I guess something happens to the scss file, when Angular compiles it into one of the bundle files – kronus Feb 07 '19 at 16:59
Just curious: What's the min-resolution for? Is it something Chrome supports but not Opera or something? – Squirrelkiller Apr 20 '20 at 09:37
Also: What does the .selector: not(root) stuff mean? Why not just put .test in there? – Squirrelkiller Apr 20 '20 at 10:29
This is green in Firefox 85, so the hack doesn't work for it. – waterplea Mar 03 '21 at 08:03

How to target for Chrome only browsers CSS

1 Answers1