Same CSS about font in different browser preforms different

Question

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?

Answer 1

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;
}
}