Apply Single CSS Property To Chrome Only?

Question

I am having issues displaying an image in chrome, It displays fine on every browser except in chrome in stretches too far.

I am trying to change only a single CSS property, not multiple - and can't seem to achieve that. I'm trying to display the image at a width of 70% in chrome and 100% in every other browser. The code I have looks like:

#cover-img{
 width: 100%;
 -webkit-width: 70%;
}

Note the -webkit- I have in there I was under the impression would affect only chrome and safari, But it returns an invalid property name. Could someone explain why that is?

I read "How to apply specific CSS rules to Chrome only?", but every CSS only solution seems to affect all browsers when its only intended for chrome. Any recommendations for this? I can't find any CSS only solution that can target chrome exclusively.

EDIT:

Here Is A CodePen, to replicate the issue. When run in chrome, you'll see the header text displays outside of the container.

AFAIK -webkit-width isn't legal CSS. If you describe what the problem is on Chrome in a bit more detail and put a code snippet into your question which shows the problem when you run it (so we can see it for ourselves) we could help. — A Haworth, Aug 11 '21 at 07:01
You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. — Rob, Aug 11 '21 at 09:00

score 0 · Answer 1 · answered Aug 11 '21 at 07:45

The -webkit prefix applies to a very specific set of properties, and actually, Webkit is now the engine driving Chrome, Safari, Edge, and even Opera. Firefox is one of the only mainstream browsers not driven by webkit--it instead uses Gecko. So any attempt to target solely chrome using the webkit prefix will undoubtedly target just about anything except firefox.

One option you do have is to use the user agent to detect the browser. In fact, here's an entire Mozilla article on the subject. The User Agent is a string of data the browser sends to your page with information about the user's system, like the OS, browser and version, and web engine. It's definitely not a perfect solution for a few reasons:

User agents can be easily spoofed, though that is likely not too much of a concern for you as you are only using it to apply some extra CSS, but it's worth noting nonetheless. In fact, there is usually an option to change your user agent which is built directly into most browsers' developer tools.
CSS does not natively interact with the user agent, so you would have to use a scripting language to change your page based on the user agent. For example, you could use PHP or JS to add a class to your <body> element and then make whatever changes necessary using derivative selectors of body.someClass.
You can find examples of the format most popular browsers use for their user agents here, but they are subject to change at any time, and since again the majority of popular browsers are based on Webkit and/or the derivative Chromium, it can be difficult to distinguish them. As an example, here is my current user agent string from Chrome on Windows:

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"

You can see it not only says Webkit and Chrome in there, but also Safari, Mozilla, and even Gecko. You have to know what differentiates the different user agent strings to make any sense of them for this use case. For example, this one is from Opera:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41

It does still include WebKit, Chrome, Mozilla, Safari, and Gecko, but also OPR.

And this one from Mobile Safari:

Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1

It includes WebKit, Mozilla, Safari, and Gecko, but not Chrome.

TL;DR

To make a very long answer short, you can make this work, but it's about as hacky as what you're trying to do in the first place. The real question you may want to ask is why the image renders differently on Chrome and try to fix that issue rather than try to apply different CSS based on the browser.

Webkit was forked by Google into Blink many years ago and there is a lot of disconnect between the two now. I'm not sure it would be correct to say that Webkit drives all those browsers. — Rob, Aug 11 '21 at 09:03

Apply Single CSS Property To Chrome Only?

1 Answers1

TL;DR