SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is -*-text-size-adjust: 100%; safe?

    I've been using html {-webkit-text-size-adjust: 100%;} to prevent the iPhone and iPad from inflating some fonts and not others. This seems to be a well-accepted solution online. Should I expand that to include moz and ms browsers?

    Code:
    html {-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Typically you only need to worry about WebKit as that seems to be only engine that tends to adjust text sizes, on IE mobile and stock android browsers (and Firefox) I've never seen the issue occur before.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Chris. Do you think it's safe to throw them in there anyway?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can find more information at the mozilla site here.

    As is is an experimental technoilogy you always use it at your own risk but its unlikely that any harm will come from it unless of course the spec changes; but that's the risk you run with most vendor prefixed code.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    For WebKit devices I've seen no evidence of foul play as far as it causing issues with layouts and such but I would be careful around using the non-prefixed and -moz prefix's as they may cause undesired results on desktop browsers, the best option would be to stick with -webkit-text-size-adjust as typically only WebKit browsers scale the fonts up.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm surprised there could be undesired results on desktop browsers. The following documents says "Only mobile browser do support this CSS property.":

    https://developer.mozilla.org/en-US/...xt-size-adjust

    May I ask where you got that info?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tonearm View Post
    I'm surprised there could be undesired results on desktop browsers. The following documents says "Only mobile browser do support this CSS property."
    You didn't read all of it.

    If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page
    This is a big problem on desktop browsers, so it's best to serve up -webkit-text-size-adjust: none; to small devices via media queries. (It's safe to set it to 100% instead of none, though. However, I haven't found 100% to work very well.)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Both boilerplate and bootstrap use just the following.

    Code:
    body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%} 
    /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
    So you are reasonably safe to add the above code without harming desktop browsers.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Both boilerplate and bootstrap use just the following
    Interesting. I guess I'll have to revisit 100%, as I found it didn't do much when I tested it a while back (I was still getting the ugly, random text resizing in mobile Safari).

  10. #10
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    While it may not break on desktop browsers now Chrome may implement it into their Blink engine soon but until someone does implement it the property is safe to use.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Interesting. I guess I'll have to revisit 100%, as I found it didn't do much when I tested it a while back (I was still getting the ugly, random text resizing in mobile Safari).
    I must admit I've not done much testing (especially without owning a mobile) but I can't believe that there is no merit in the technique especially when advocated by some distinguished authors. However if you look at the specs they say that percentage is at risk as it is not clearly defined.

    There's some more useful info here.
    https://wiki.mozilla.org/CSS/text-size-adjust

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I have never found the need. If I used it though it would be on a specific area. Not a broad stroke like on the body.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    I have never found the need. If I used it though it would be on a specific area. Not a broad stroke like on the body.
    The problem is that you nver know when or where the device is going to decide to increase the font size. On the iPhone, at least, font size increases seem to be utterly random, where one paragraph is larger than another. It's a very weird bit of behaviour that needs serious rethinking, as it's nothing but a PITA IMHO.

  14. #14
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would be careful around using the non-prefixed and -moz prefix's as they may cause undesired results on desktop browsers
    On which browser does 100% cause undesired results?

    Interesting. I guess I'll have to revisit 100%, as I found it didn't do much when I tested it a while back (I was still getting the ugly, random text resizing in mobile Safari).
    On which WebKit browser specifically does 100% not work properly?

    While it may not break on desktop browsers now Chrome may implement it into their Blink engine soon but until someone does implement it the property is safe to use.
    Even once it is implemented on desktop browsers, "100%" should still be safe since it only defines a starting point for text size, unlike "none". That is unless the spec changes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •