DPI-dependent CSS in Atom and everywhere else too

4 December 2017

139 words

When programming on low-resolution screens, I like to use 10pt Monaco with antialiasing turned off. But when switching to my MacBook’s retina display, I want antialiasing turned back on. Until now, I would manually comment/uncomment some CSS in Atom’s styles.less file to change this.

Turns out, you can define CSS rules based on the current screen resolution. By adding the following to styles.less, Atom automatically switches the font and antialiasing settings as soon as you move the window from one screen to the other:

atom-text-editor {
  @media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 150dpi) {
    .line {
      -webkit-font-smoothing: none;
      font-family: Monaco;
      font-size: 10;
      transform: translateX(1px);
      font-style: normal !important;
      * {
        font-style: normal !important;
      }
    }
  }
}

The transform line is there because Atom will sometimes cut off the first column of pixels when antialiasing is turned off.