-1

When I tried to set font style on a label, the code worked perfectly on Edge, but the font was much smaller on Chrome.

This is the code:

.block-footer-text{
  letter-spacing: -0.5px;
  font-size:10px;
}
<p class = "block-footer-text">
  the text
</p>

I tried to add font-size and font-family, but it did not work. I also searched and I found this on Stack Overflow. However, according to the answer, the code is targets Chrome, Safari and Edge, and I want to separate Chrome and Edge. I also found other posts but they need to use JavaScript.

Is there any way to perform different CSS on Edge and Chrome without using JavaScript?

Han Han
  • 328
  • 12

1 Answers1

0

Keep in mind that the other question you reference does have a CSS only way to do it as a different answer. However, that answer doesn't specifically cover a way to differentiate Chrome vs. Edge.

This source shows the relatively modern way (2022) of differentiating Chrome and Edge specifically:

/** Microsoft Edge */
@supports (-ms-ime-align: auto) {
div {
display: block;
}

/* Other browsers... */

}
/** Chrominum */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
div:not(*:root) {
display: block;
}
}
Chipster
  • 117
  • 7
  • Thanks for answering. However, it does not work, and it will only perform Chromium CSS, [here](https://raw.githubusercontent.com/qwerty6688/CSSPerformance/main/code.txt) is the example I tried. – Han Han Jun 16 '23 at 17:02