Skip to content

Instantly share code, notes, and snippets.

@danielstgt
Created December 25, 2021 02:01
Show Gist options
  • Save danielstgt/fbd1b277fb8e0adbf4131ec3181d6b10 to your computer and use it in GitHub Desktop.
Save danielstgt/fbd1b277fb8e0adbf4131ec3181d6b10 to your computer and use it in GitHub Desktop.
CSS text rendering based on hover detection
/* is not a touch device */
@media (hover: hover) {
body { text-rendering: optimizeLegibility; }
}
/* is a touch device */
@media (hover: none) {
body { text-rendering: optimizeSpeed; }
}
@danielstgt
Copy link
Author

Tailwind CSS Usage / Base Layer

@layer base {
    /* is not a touch device */
    @media (hover: hover) {
        body { text-rendering: optimizeLegibility; }
    }

    /* is a touch device */
    @media (hover: none) {
        body { text-rendering: optimizeSpeed; }
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment