HTML and CSS Reference
In-Depth Information
<!-- display an email keyboard -->
<input type="email" />
<!-- display a numeric keyboard on iOS -->
<input type="tel" pattern="[0-9]*" />
With these code snippets, you can display all types of input fields for your users depending on your creative goals.
What makes this really easy and helpful is that the browser takes care of it all for you. You don't need to build and
customize specific input fields.
Another interesting thing to note is the font-smooth property. You'll often have some sort of animation in your
creative, and sometimes it will involve animation of copy elements. Figure 8-8 showcases what font smoothing looks
like on the “o” character.
Figure 8-8. The effect of the CSS font-smooth property
Some of that animation may involve copy or text elements, and there is a great CSS snippet to prevent jaggedness
or ridged animations on fonts. Here's some code to provide anti-aliasing on copy elements.
.smoothCopy {
font-smooth:always;
}
at the time of writing, font-smoothing was available only in Webkit browsers. it was not a part of any web
standard spec.
Note
Further to this topic, mobile advertising and CSS-based web fonts pose a potentially large problem. On the
one hand, advertisers and brands will want to use their actual fonts, as they are usually at the core of their branding
identity—think of Coca-Cola or Budweiser—and the only way to do that is to increase the k-weight for either CSS fonts or
transparent PNG images. On the other hand, the load experienced with CSS3 fonts leads to much longer download times
for end users, and more HTTP requests are needed for the various formats. There is no silver bullet for this scenario;
some clients will absolutely request that you use their branded fonts. The best thing to do is to show the client that doing
what it wants will come at a cost to users. Their experience may suffer, especially on lower bandwidth connections. If the
client insists, there are some very good optimized font libraries to use: Google's Web Font Library ( http://www.google.
com/webfonts ) , Adobe's Typekit ( https://typekit.com/ ), and WebType ( http://www.webtype.com/ ), which as you've
learned in Chapter 5, only bring in the format required for the device. Weigh the pros and cons of using or not using, and
consider transparent PNG files, too. However, when copy needs to change or be dynamic, PNGs are not an option. For
default font support on iOS devices, check out http://iosfonts.com . Android users have much more limited options
for default fonts—Droid Sans, Droid Sans Mono, Droid Serif, and Roboto—but hopefully more will come with future
updates of the OS.
 
 
Search WWH ::




Custom Search