Colors in CSS based on Browser

Question

I have a webpage & the colors are washed out in Chrome. The pic below shows the exact same URL with the left side on Firefox & the right side on Chrome.

It is not so subtle, for example, the text 'Search...' inside the search bar is not visible at all!!

The shadow provides a slight 3D effect & this is almost completely wiped out in Chrome!

I have searched this issue & almost all solution seem to suggest the person who visits the page should make somekind of adjustment at their end & I cannot go around telling all the visitors to the website to do that.

So, my question is, can the colors be specified based on the browser in CSS?

The running app can be found here eaterydemo.netlify.app/menu

.container {
display: flex; gap:12px;
flex-direction: column}

.item {
  margin: 0 1rem 0;
  padding: 0.5rem 1.1rem 0.5rem;
  background: linear-gradient(
    to bottom,
    hsl(18, 64%, 59%) 0.25rem,
    hsl(220, 20%, 97%) 0% 100%
  );
  color: hsl(188, 95%, 7%);
  border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;      
  justify-content: space-between;
  position: relative;
  filter: drop-shadow(0.05rem 0.05rem 0.05rem rgba(0, 0, 0, 0.5));
  z-index: 2;
}

.search-bar {
  display: inline-block;
  width: clamp(80px, 15vw, 120px);
  color: hsl(0, 0%, 100%);
  background: hsl(220, 13%, 28%, 0.8);
  border: none;
  border-radius: 0.25rem;
  padding: 1rem;
  margin:1rem;
}

<div class="container">
<div class="item">
      <span className="item">Rest</span>
      <span className="price">₹ 50</span>
</div>
<div class="item">
      <span className="item">Rest</span>
      <span className="price">₹ 50</span>
</div>
<div class="item">
      <span className="item">Rest</span>
      <span className="price">₹ 50</span>
</div>
<div class="item">
      <span className="item">Rest</span>
      <span className="price">₹ 50</span>
</div>
</div>

<div class="search-container">
      <input
        class="search-bar"
        type= "search"
        placeholder="Search..." />
 </div>

How does the existing stylesheet looks like for the given field? Can you please provide a minimal working example? — Green绿色, Feb 14 '22 at 09:31
PS, you need a semicolon after `border: 1px solid blue` in your CSS. — Nicolas Goosen, Feb 14 '22 at 17:34
Have you tried using `box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);` under .item instead of `filter: drop-shadow`? — Nicolas Goosen, Feb 14 '22 at 17:40
@NicolasGoosen Using the `box-shadow` instead of `filter: drop-shadow` worked! I had used 'filter: drop-shadow` because I though that I would get the shadow without the border radius. So, thanks. I have now added the search bar also in the minimal working example (the text 'Search...' is barely visible in Chrome), any suggestion on that? — moys, Feb 15 '22 at 04:23
I think it's a matter of using a proper reset. Resets are css libraries that focus on f giving a consistent base so any styles on top of them behave equally between browsers. You can try adding one before any css (like normalize css) — Daniel Cruz, Feb 15 '22 at 04:30
I have already used a reset in my project from here https://www.joshwcomeau.com/css/custom-css-reset/ Can you provide any other rest I should use, especially related to color since I am having issues with color. — moys, Feb 15 '22 at 04:41
@NicolasGoosen If you can put your suggestion as the answer I will accept it. Thanks. — moys, Feb 15 '22 at 05:00

score 1 · Answer 1 · answered Feb 15 '22 at 04:52

1

the reason Search text is not visible properly is because you are not applying css to it. Browsers behave differently for pseudo elements, in your case ::placeholder. No css has been applied to it.

.SearchBar_search-bar__3hLMw::placeholder {
    color: hsl(var(--font-color-primary));
}

and regarding shadow I couldn't see the issue on my Chrome and Firefox, but on Safari dropshadow filter is not working. Instead filter you can use box-shadow as it will work on all browsers.

answered Feb 15 '22 at 04:52

prograk

559
4
14

I just figured out the `placeholder` issue from this post as well https://stackoverflow.com/questions/9451902/changing-an-inputs-html5-placeholder-color-with-css-does-not-work-on-chrome up-voted your answer. – moys Feb 15 '22 at 04:59

score 1 · Accepted Answer · answered Feb 17 '22 at 16:05

1

Have you tried using box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%); under .item instead of filter: drop-shadow?

answered Feb 17 '22 at 16:05

Nicolas Goosen

583
5
14

score 0 · Answer 3 · answered Feb 14 '22 at 09:55

0

No, colours can't be specified based on the browser in CSS. You can detect the browser in javascript (see here), but not directly from inside CSS. It's not necessarily a good (sustainable) idea, though.

My suggestion would be to show us your CSS. It's very odd that Chrome would be showing this so wrong. Perhaps your CSS is using prefixed properties and you need to move on to using the regular properties.

answered Feb 14 '22 at 09:55

Nicolas Goosen

583
5
14

what do you mean by `prefixed properties`? I am using a CSS custom variable and calling the variable in the components of my React app. – moys Feb 14 '22 at 11:02
prefixed properties are properties which start with `-moz`, `-webkit`, etc., e.g., `-moz-column-count`. They are used by browser vendors for non-standard or not-yet-standardized properties. See: https://stackoverflow.com/questions/18083056/what-are-moz-and-webkit – Green绿色 Feb 14 '22 at 11:48
ok. Understood. However, I do not use any `prefixed properties` in my css. – moys Feb 15 '22 at 03:28

Colors in CSS based on Browser

3 Answers3