New CSS Hacks to Target Safari

Entry categories Misc
Cerfs from L'animal dans la d├ęcoration (1897) illustrated by Maurice Pillard Verneuil. Original from the The New York Public Library. Digitally enhanced by rawpixel.

While trying to create a new scalable way to support Dynamic Type on iOS devices, I ran into a snag where it also affected Desktop Safari font sizes. After playing around, I came up with what I believe to be new Safari and iOS CSS targeting hacks.

/* iOS browsers */
@supports(font:-apple-system-body) and (-webkit-touch-callout:default){}
/* Desktop Safari */
@supports(font:-apple-system-body) and (not(-webkit-touch-callout:default)){}

Hope this helps.

Opinions and views expressed here don't necessarily reflect those of my employer.
Posted on