---
title: DPI-dependent CSS in Atom and everywhere else too
date: 2017-12-04
status: published
layout: ../layouts/Post.astro
---

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][tricks].
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:

```scss
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.

[tricks]: https://css-tricks.com/snippets/css/retina-display-media-query/