Responsive Web Design with HTML5 and CSS3电子书

Responsive Web Design with HTML5 and CSS3

Table of Contents

Responsive Web Design with HTML5 and CSS3

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Getting Started with HTML5, CSS3, and Responsive Web Design

Why smart phones are important (and old IE isn't)

Are there times when a responsive design isn't the right choice?

Defining responsive web design

Why stop at responsive design?

Examples of responsive web design

Get your viewport testing tools here!

Online sources of inspiration

HTML5—why it's so good

Saving time and code with HTML5

New, semantically meaningful HTML5 tag elements

CSS3 enables responsive designs and more

The bottom line—CSS3 won't break anything!

How can CSS3 solve everyday design problems?

Look Ma'—no images!

What else has CSS3 got to offer?

Can HTML5 and CSS3 work for us today?

Responsive web designs are not magic bullets

Educating our clients that websites shouldn't look the same in all browsers

Summary

2. Media Queries: Supporting Differing Viewports

You can use media queries today

Why responsive designs need media queries?

Media query syntax

What can media queries test for?

Using media queries to alter our design

The best way to load media queries for responsive designs

Our first responsive design

Don't panic but our design is fixed-width

Responsive designs—making images as economical as possible

Content clipping in smaller viewports

Stopping modern mobile browsers from auto-resizing the page

Fixing the design for different viewport widths

With responsive designs, content should always come first

Media queries—only part of the solution

We need a fluid layout

Summary

3. Embracing Fluid Layouts

Fixed layouts aren't future proof

Why proportional layouts are essential for responsive designs

Amending a design from fixed to proportional layout

A formula to remember

Setting a context for proportional elements

It's always important to remember the context

Using ems rather than pixels for typography

Fluid images

Making images scale with the viewport

Specific rules for specific images

Putting the brakes on fluid images

The incredibly versatile max-width property

Serving different images for different screen sizes

Setting up Adaptive Images

Put background images somewhere else

Where fluid grids and media queries come together

CSS Grid systems

Rapidly building our site with a Grid system

Summary

4. HTML5 for Responsive Designs

What parts of HTML5 can we use today?

Most sites can be written in HTML5

Polyfills, shims, and Modernizr

How to write HTML5 pages

Economies of using HTML5

A sensible approach to HTML5 markup

All hail the mighty <a> tag

Obsolete HTML features

New semantic elements in HTML5

The <section> element

The <nav> element

The <article> element

The <aside> element

The <hgroup> element

The HTML5 outline algorithm

The <header> element

The <footer> element

The <address> element

Practical usage of HTML5's structural elements

What about the main content of the site?

HTML5 text-level semantics

The <b> element

The <em> element

The <i> element

Applying text-level semantics to our markup

Adding accessibility to your site with WAI-ARIA

ARIA's landmark roles

Embedding media in HTML5

Adding video and audio the HTML5 way

Providing alternate source files

Fallback for older browsers

Audio and video tags work almost identically

Responsive video

Offline Web applications

Offline Web applications in a nut shell

Making web pages work offline

Understanding the manifest file

Automatic loading of pages to the offline manifest

About that version comment

Viewing the site offline

Troubleshooting Offline Web applications

Summary

5. CSS3: Selectors, Typography, and Color Modes

What CSS3 offers the frontend developer

CSS3 support in Internet Explorer versions 6 to 8

Using CSS3 to design and develop pages in the browser

Anatomy of a CSS rule

Vendor prefixes and how to use them

Quick and useful CSS3 tricks

CSS3 multiple columns for responsive designs

Adding a gap and column divider

Word wrapping

New CSS3 selectors and how to use them

CSS3 attribute selectors

CSS3 substring matching attribute selectors

The "beginning with" substring matching attribute selector

The "contains an instance of" substring matching attribute selector

The "ends with" substring matching attribute selector

A practical, real world example

CSS3 structural pseudo-classes

The :last-child selector

The nth-child selectors

Understanding what nth rules do

The negation (:not) selector

Amendments to pseudo-elements

Is :first-line handy for responsive designs?

Custom web typography

The @font-face CSS rule

Implementing web fonts with @font-face

Help—my CSS3 @font-face headings look messy

A note about custom @font-face typography and responsive designs

New CSS3 color formats and alpha transparency

RGB color

HSL color

Fallback color values for IE6, IE7, and IE8

Alpha channels

Summary

6. Stunning Aesthetics with CSS3

Text shadows with CSS3

HEX, HSL, or RGB color allowed

Pixels, em, or rem

Preventing a text shadow

Left and top shadows

Creating an embossed text-shadow effect

Multiple text-shadows

Box shadows

Inset shadow

Multiple shadows

Background gradients

Linear background gradients

Breakdown of linear gradient syntax

Radial background gradients

Breakdown of radial gradient syntax

Repeating gradients

Background gradient patterns

Responsive considerations for CSS3

Bringing CSS3 properties together

Multiple background images

Background size

Background position

Background shorthand

More CSS3 features

Sizeable icons which are perfect for responsive designs

Summary

7. CSS3 Transitions, Transformations, and Animations

What CSS3 transitions are and how we can use them

The properties of a transition

The transition shorthand property

Transition different properties over different periods of time

Understanding timing functions

Fun transitions for responsive web sites

CSS3 2D transformations

What can we transform?

scale

translate

rotate

skew

matrix

Matrix transformations for cheats and dunces

transform-origin property

Dabbling in CSS3 3D transformations

Breaking down the 3D effect

3D transformations not ready for prime time

Animating with CSS3

Putting CSS3 transformations and animations together

Summary

8. Conquer Forms with HTML5 and CSS3

HTML5 forms

Understanding the component parts of HTML5 forms

placeholder

required

autofocus

autocomplete

list (and the associated datalist element)

HTML5 input types

email

number

url

tel

search

pattern

color

Date and time inputs

date

month

week

time

datetime and datetime-local

range

How to polyfill non-supporting browsers

Styling HTML5 forms with CSS3

Form-specific CSS3 pseudo class selectors

Summary

9. Solving Cross-browser Responsive Challenges

Progressive enhancement versus graceful degradation

Reality

Should you fix old versions of Internet Explorer?

Statistics (again)

Personal choice

Modernizr—the frontend developer's Swiss army knife

Fix styling issues with Modernizr

Modernizr adds HTML5 element support for old IE

Add min/max media query capability for Internet Explorer 6, 7, and 8

Conditional loading with Modernizr

Changing navigation links to a drop menu (conditionally)

High resolution devices (the future)

Summary

Index