Reducing font size on retina displays


#1

I had this code block in my styles.less, and I swear it used to work, pre-shadow-dom:

atom-text-editor::shadow {
  -webkit-font-smoothing: subpixel-antialiased;
   @media (-webkit-min-device-pixel-ratio: 2) {
       font-size: 12px;
  }
 }

However, my font is now the same size (as set in preferences) for my Thunderbolt display and for my retina MBP. It used to make it smaller for the MBP, Is this possible?


#2

I suspect you may be being bitten by the same issue I mentioned here:

Namely that at-rules generally have to be outside other CSS rules. Have you tried reversing the clauses?

@media (-webkit-min-device-pixel-ratio: 2) {
  atom-text-editor::shadow {
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 12px;
  }
}

#3

No dice there either. Font is the same size. To make it obvious when testing, use some thing obvious:

@media (-webkit-min-device-pixel-ratio: 2) {
    atom-text-editor::shadow {
        font-size: 4px;
   }
}

#4

This works:

@media (-webkit-min-device-pixel-ratio: 2) {
    atom-text-editor::shadow * {
      -webkit-font-smoothing: subpixel-antialiased;
      font-size:13px !important;
    }
 }

#5

Using the inspector you should be able to find the exat rule that apply to the element you want to change (check the inherited styles part as well, it can help a lot). By doing so you’ll be able to remove the !important in your rule, which is alway a bad practice (except when there’s just no other way to make a rule apply).


#6

You can’t apply styling directly on the ::shadow pseudo-element, so you’ll always have to select something inside it


#7

Thanks. I started trying things and hit upon *