TIL how to get what browser with just css

POSTED ON: Dec 05, 2022

TAGS: browsers safari css

Today I learned about how to tell what browser you are using with just CSS.

/** Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  div {
    display: block;
  }
}

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

/** Mozilla Firefox */
@-moz-document url-prefix() {
  div {
    display: block;
  }
}

/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
  div {
    display: block;
  }
}

/** Chrominum */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  div:not(*:root) {
    display: block;
  }
}

via How to Create Browser Specific CSS Code

Related TILs

Tagged: browsers

• Next: TIL Proving people wrongIn chapter 3 where during training, a instructor said to another student, 'You're a tiny little man. Those waves will break you in half.' The student said, 'I won't quit.'
• Previous: TIL prependWhen you're creating new elements in Javascript, you want to attach the new element to something that exists in the DOM already. You do that with append, and prepend.