266
How to begin using HTML5/CSS3.
Web Design with HTML and CSS Digital Classroom- @font-face Web Fonts
As explained in Lesson 6, the ability to use a wide range of fonts in your designs has
been extremely limited for many years. There is increasing support for the ability to
add custom fonts to your page designs using the @font-face property, which allows
the designer to specify a particular font and provide a source link for the font; this,
in turn, allows a user’s browser to download the necessary font for use. This feature
has the potential to dramatically transform the appearance of web pages worldwide,
although it comes with many of the same browser support issues as the various
HTML5 features.
These are just a few of the highlights of what is to come in CSS3. Remember that these
HTML and CSS3 features are not supported by all browsers and it will still be some time
before they become part of a web designer’s standard toolbox. While it is exciting to
contemplate what the future of web design will look like, it needs to be tempered by the
reality of what you can use today.
How to begin using HTML5/CSS3
How and when to begin using HTML5 features has a lot to do with browser support. For
example CSS animations are relatively well-supported in WebKit-based browsers, which
include Apple Safari and Google Chrome. CSS animation is not supported in the versions of
Firefox or Internet Explorer available at the time of publication of this book, but we expect
it to be supported in the next major versions of these browsers.Using web services to determine browser support
Given the shifting and evolving nature of the web browser and mobile landscape, a number of
web sites have appeared to help designers and developers determine which HTML5 and CSS3
features are currently supported.
caniuse.com
This site provides a series of tables that illustrate the past, current, and future browser support for
the various HTML5 and CSS3 properties. The site also has useful information such as the user
statistics for any particular feature, which can help you decide whether to use that feature.
http://www.modernizr.com
This site automatically detects the browser you are using and displays the support for the various
features of HTML5 and CSS3 on the home page. However, the site does not allow you to
compare feature support of other browsers on the market.
http://www.html5test.com
This site is similar to the Modernizr site in that it automatically detects the browser you are using,
but it then creates a score based on whether your browser supports diff erent features.