Home Page Icon
Home Page
Table of Contents for
cover
Close
cover
by Ben Frain
Responsive Web Design with HTML5 and CSS - Third Edition
Preface
Who this book is for
What this book covers
Get the most out of this book
Get in touch
The Essentials of Responsive Web Design
The browser and device landscape
Defining responsive web design
Responsive web design in a nutshell
Browser support
Text editors
Tools for software development
Our first responsive example
Our basic HTML file
Taming images
A brief tangent on width/max-width for images
Enter media queries
Breakpoints
Amending the example for a larger screen
The shortcomings of our example
Summary
Writing HTML Markup
Getting the start of HTML pages right
The doctype
The html tag and lang attribute
Character encoding
The forgiving nature of HTML5 markup
A sensible approach to HTML markup
All hail the mighty <a> tag
New semantic elements in HTML5
The <main> element
The <section> element
The <nav> element
The <article> element
The <aside> element
The <header> element
The <footer> element
The HTML5 outline algorithm
A note on h1-h6 elements
The div element
The p element
The blockquote element
The <figure> and <figcaption> elements
<details> and <summary> elements
The <address> element
HTML text-level semantics
The <span> element
The <b> element
The <strong> element
The <em> element
The <i> element
Obsolete HTML features
Putting HTML elements to use
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
Web Content Accessibility Guidelines (WCAG)
WAI-ARIA
Taking ARIA further
Embedding media in HTML5
Adding video and audio in HTML
Providing alternate media sources
Audio and video tags work almost identically
Responsive HTML5 video and iframes
Summary
An exercise
Media Queries – Supporting Differing Viewports
The viewport meta tag
Why media queries are needed for a responsive web design
Basic conditional logic in CSS
Media query syntax
Media queries in link tags
Media query on an @import at-rule
Media queries in a CSS file
Inverting media query logic
Combining media queries
A number of different media queries
Everyday media queries
What can media queries test for?
Using media queries to alter a design
Advanced media query considerations
Organizing media queries
The practicalities of separating media queries
Nesting media queries "inline"
Combine media queries or write them where it suits?
Media Queries Level 4
Interaction media features
The pointer media feature
The hover media feature
The prefers-color-scheme media feature
Summary
Fluid Layout, Flexbox, and Responsive Images
Converting a fixed pixel design to a fluid proportional layout
Why do we need Flexbox?
Inline-block and white-space
Floats
Table and table-cell
Introducing Flexbox
The bumpy path to Flexbox
Leave prefixing to someone else
Choosing your autoprefixing solution
Getting Flexy
Perfect vertically centered text
Offset items
Reverse the order of items
How about if we want them laid out vertically instead?
Column reverse
Different Flexbox layouts with media queries
Inline-flex
Flexbox alignment properties
The align-items property
The align-self property
Possible alignment values
The justify-content property
The flex property
Simple sticky footer
Changing the source order
Wrapping with flex
Wrapping up Flexbox
Responsive images
The inherent problem of responsive images
Simple resolution switching with srcset
Advanced switching with srcset and sizes
Did you say the browser "might" pick one image over another?
Art direction with the picture element
Facilitate new image formats
Summary
Layout with CSS Grid
What CSS Grid is and the problems it solves
Basic Grid syntax
Grid-specific concepts and terminology
Setting up a grid
Explicit and implicit
grid-auto-rows and grid-auto-columns
grid-auto-flow
Placing and sizing grid items
gap
repeat
fr units
Placing items in the grid
span
dense
Named grid lines
grid-template-areas
Applying what you have learned so far
auto-fit and auto-fill
The minmax() function
Shorthand syntax
grid-template shorthand
grid shorthand
grid shorthand value – option one
grid shorthand value – option two
grid shorthand value – option three
Summary
CSS Selectors, Typography, Color Modes, and More
Selectors, units, and capabilities
Anatomy of a CSS rule
Pseudo-elements and pseudo-classes
CSS Level 3 selectors and how to use them
CSS attribute selectors
CSS substring matching attribute selectors
Chaining attribute selectors
CSS structural pseudo-classes
The :last-child selector
The nth-child selectors
nth-based selection in responsive web designs
Combinator selectors – child, next sibling, and subsequent sibling
The negation (:not) selector
The empty (:empty) selector
Responsive viewport-percentage lengths (vmax, vmin, vh, and vw)
CSS calc
CSS custom properties
Setting a fallback value
env() environment variables
Using @supports to fork CSS
Feature queries
Combining conditionals
Web typography
System fonts
The @font-face CSS rule
Implementing web fonts with @font-face
Optimizing font loading with font-display
font-display
Variable fonts
font-face changes
Using a variable font
Font features
Exercise
CSS color formats and alpha transparency
RGB color
HSL color
Alpha channels
Summary
Stunning Aesthetics with CSS
Text shadows with CSS
Omit the blur value when it's not needed
Multiple text shadows
Box shadows
Inset shadow
Multiple shadows
Understanding spread
Background gradients
Linear-gradient notation
Specifying gradient direction
Color stops
Radial background gradients
Breakdown of radial gradient syntax
Handy "extent" keywords for responsive sizing
Repeating gradients
Background gradient patterns
Multiple background images
Background size
Background position
Background shorthand
High resolution background images
CSS filters
Available CSS filters
Combining CSS filters
A warning on CSS performance
CSS clip-path
clip-path with url
CSS basic shapes
clip-path with a circle
clip-path with ellipse
clip-path with inset
clip-path with polygon
clip-path with URL (clipping source)
Animating clip-path
mask-image
mask-image example
mix-blend-mode
Summary
Using SVGs for Resolution Independence
A brief history of SVG
An image that is also a readable web document
The root SVG element
namespace
The title and desc tags
The defs tag
The g element
SVG shapes
SVG paths
Creating SVGs with popular image editing packages and services
Saving time with SVG icon services
Inserting SVGs into your web pages
Using an img tag
With an object tag
Inserting an SVG as a background image
A brief aside on data URIs
Generating image sprites
Inserting an SVG inline
Reusing graphical objects from symbols
Inline SVGs allow different colors in different contexts
Making dual-tone icons that inherit the color of their parent
Recoloring SVGs with CSS custom properties
Reusing graphical objects from external sources
What you can do with each SVG insertion method (inline, object, background-image, and img)
Browser schisms
Extra SVG capabilities and oddities
SMIL animation
Styling an SVG with an external style sheet
Styling an SVG with internal styles
SVG properties and values within CSS
Animating an SVG with CSS
Animating SVG with JavaScript
A simple example of animating an SVG with GreenSock
Optimizing SVGs
Using SVGs as filters
A note on media queries inside SVGs
SVG implementation tips
Summary
Further resources
Transitions, Transformations, and Animations
What CSS transitions are and how we can use them
The properties of a transition
The transition shorthand property
Transitioning different properties over different periods of time
Understanding timing functions
CSS 2D transforms
Scale
Translate
Using translate to center absolutely positioned elements
Rotate
Skew
Matrix
Transform-origin property
CSS 3D transformations
The translate3d property
A progressive enhancement example using translate3d
Animating with CSS
The animation-fill-mode property
Exercises and training
Summary
Conquer Forms with HTML5 and CSS
HTML5 forms
Understanding the component parts of HTML5 forms
The placeholder attribute
Styling the placeholder text
Styling the input caret with the caret-color property
The required attribute
The autofocus attribute
The autocomplete attribute
The list attribute and the associated datalist element
HTML5 input types
The email input type
The number input type
Using min and max to create number ranges
Changing the step increments
The url input type
The tel input type
The search input type
The pattern input attribute
The color type input
Date and time
The date input type
The month input type
The week input type
The time input type
The range input type
Styling HTML5 forms with CSS
Indicating required fields
Creating a background fill effect
Summary
Bonus Techniques and Parting Advice
Breaking up long URLs
Truncating text
Creating horizontal scrolling panels
Horizontal scrolling panels with Grid
CSS Scroll Snap
The scroll-snap-type property
The scroll-snap-align property
The scroll-padding property
Smooth scrolling with CSS scroll-behavior
Linking CSS breakpoints to JavaScript
Get designs in the browser as soon as possible
Test on real devices
Embrace progressive enhancement
Define a browser support matrix
Functional parity, not visual parity
Choosing the browsers to support
Tiering the user experience
Avoid CSS frameworks in production
Hiding, showing, and loading content across viewports
Validators and linting tools
Performance
Performance tools
The next big things
Summary
Other Books You May Enjoy
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Title_Page
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset