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.

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