Responsive Web Design with HTML5 and CSS - Third Edition

Kup polskie wydanie:

Spis treści ebooka

• Preface
  • Who this book is for
  • What this book covers
  • Get the most out of this book
  • Get in touch
    • Reviews
• 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 its 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

pokaż cały spis treści

ukryj recenzje