Index

A

• **after pseudo element
  • about / Creating horizontal scrolling panels
• <a> tag
  • about / All hail the mighty <a> tag
• <address> element
  • about / The <address> element
  • URL / The <address> element
• <article> element
  • about / The <article> element
  • URL / The <article> element
• <aside> element
  • about / The <aside> element
  • URL / The <aside> element
• align-items property
  • about / The align-items property
• align-self property
  • about / The align-self property
• alignment properties, Flexbox
  • align-items property / The align-items property
  • align-self property / The align-self property
  • possible alignment values / Possible alignment values
  • justify-content property / The justify-content property
  • reference link / The justify-content property
• alpha channels
  • about / Alpha channels
• alpha transparency
  • about / New CSS3 color formats and alpha transparency
• alternate languages
  • specifying / Specifying alternate languages
• Android Software Development Kit (SDK)
  • URL / The viewport meta tag
• animating, with CSS3
  • about / Animating with CSS3
  • animation-fill-mode property / The animation-fill-mode property
• animation-fill-mode property
  • URL / The animation-fill-mode property
• animation properties
  • URL / Animating with CSS3
• audio
  • adding, in HTML5 / Adding video and audio the HTML5 way
• audio tags
  • about / Audio and video tags work almost identically
• Autoprefixer
  • URL / Choosing your auto-prefixing solution
  • about / Choosing your auto-prefixing solution

B

• **before pseudo element
  • about / Creating horizontal scrolling panels
• <b> element
  • about / The <b> element
  • URL / The <b> element
• backface-visibility
  • URL / CSS3 3D transformations
• background fill effect
  • creating / Creating a background fill effect
• background gradients
  • about / Background gradients
  • linear-gradient notation / The linear-gradient notation
  • radial background gradients / Radial background gradients
  • *extent* keywords, for responsive sizing / Handy 'extent' keywords for responsive sizing
  • patterns / Background gradient patterns
• Blink
  • about / date
• Bootstrap
  • URL / Avoid CSS frameworks in production
• Box Alignment
  • reference link / Perfect vertically centered text
• box shadows
  • about / Box shadows
  • inset shadow / An inset shadow
  • multiple shadows, adding / Multiple shadows
  • spread / Understanding spread
  • URL / Understanding spread
• breakpoint
  • about / Enter media queries
• browser support
  • setting / Setting browser support levels
  • tooling editors / A brief note on tooling and text editors
  • text editors / A brief note on tooling and text editors
  • defining / Defining a browser support matrix
  • functional considerations / Functional parity, not aesthetic parity
  • selecting / Choosing the browsers to support
• browser support, Flexbox
  • prefixing issue / Leave prefixing to someone else
  • auto-prefixing solution, selecting / Choosing your auto-prefixing solution
• BrowserSync
  • about / View and use the design on real devices
  • URL / View and use the design on real devices

C

• cascading style sheet (CSS)
  • about / Using media queries to alter a design
• Character Data (CDATA) marker
  • about / Styling an SVG with internal styles
• character encoding
  • specifying / Character encoding
• charset
  • URL / Character encoding
• combined media queries
  • reference link / Combine media queries or write them where it suits?
• conditionals
  • combining / Combining conditionals
• cross axis alignment, Flexbox
  • flex-start / Possible alignment values
  • flex-end / Possible alignment values
  • center / Possible alignment values
  • baseline / Possible alignment values
  • stretch / Possible alignment values
• CSS
  • conditional logic, for media queries / Basic conditional logic in CSS
  • media queries, combining / Media queries in CSS
  • wrapping, in media queries / Any CSS can be wrapped in a media query
  • feature forks, facilitating / Facilitating feature forks in CSS
  • SVG properties / SVG properties and values within CSS
  • SVG values / SVG properties and values within CSS
  • SVG, animating / Animate an SVG with CSS
• CSS 2.1
  • URL / Creating horizontal scrolling panels
• CSS3
  • features / Quick and useful CSS tricks
  • CSS multi-column layouts / CSS multi-column layouts for responsive designs
  • forms, styling with / Styling HTML5 forms with CSS3
• CSS3 2D transforms
  • defining / CSS3 2D transforms
  • scale / Scale
  • translate / Translate
  • rotate / Rotate
  • skew / Skew
  • matrix / Matrix
  • URL / Matrix
  • transform-origin property / The transform-origin property
• CSS3 2D Transforms Module Level 3
  • URL / The transform-origin property
• CSS3 3D transformations
  • about / CSS3 3D transformations
  • URL / CSS3 3D transformations
  • transform3d property / The transform3d property
  • using, with progressive enhancement / Use transforms with progressive enhancement
• CSS3 animations
  • URL / Animating with CSS3
• CSS3 color formats
  • about / New CSS3 color formats and alpha transparency
  • RGB color / RGB color
  • HSL color / HSL color
  • alpha channels / Alpha channels
  • color manipulation, with CSS Color Module Level 4 / Color manipulation with CSS Color Module Level 4
• CSS3 selectors
  • about / New CSS3 selectors and how to use them
  • CSS3 attribute selectors / CSS3 attribute selectors
  • CSS3 substring matching attribute selectors / CSS3 substring matching attribute selectors
  • gotchas, with attribute selection / Gotchas with attribute selection
  • attribute selectors, for selecting IDs / Attribute selectors allow you to select IDs and classes that start with numbers
  • attribute selectors, for selecting classes / Attribute selectors allow you to select IDs and classes that start with numbers
  • URL / The negation (:not) selector
• CSS3 structural pseudo-classes
  • about / CSS3 structural pseudo-classes
  • *last-child selector / The :last-child selector
  • nth-child selectors / The nth-child selectors
  • nth-based selectors / Understanding what nth rules do
  • nth-based selection, in responsive web designs / nth-based selection in responsive web designs
  • negation (*not) selector / The negation (:not) selector
  • empty (*empty) selector / The empty (:empty) selector
  • *first-line pseudo-element / Do something with the :first-line regardless of viewport
• CSS3 substring matching attribute selectors
  • about / CSS3 substring matching attribute selectors
  • *beginning with* / The 'beginning with' substring matching attribute selector
  • *contains an instance of* / The 'contains an instance of' substring matching attribute selector
  • *ends with* / The 'ends with' substring matching attribute selector
• CSS3 transitions
  • using / What CSS3 transitions are and how we can use them
  • defining / What CSS3 transitions are and how we can use them
  • URL / What CSS3 transitions are and how we can use them
  • properties / The properties of a transition
  • transition shorthand property / The transition shorthand property
  • multiple properties, declaring / Transition different properties over different periods of time
  • timing functions, defining / Understanding timing functions
  • fun transitions, for responsive websites / Fun transitions for responsive websites
• CSS animations
  • URL / Animating with CSS3
• CSS breakpoints
  • linking, to JavaScript / Linking CSS breakpoints to JavaScript
• CSS calc
  • about / CSS calc
  • URL / CSS calc
• CSS clipping
  • about / A note on CSS masks and clipping
  • URL / A note on CSS masks and clipping
• CSS Color Module Level 4
  • URL / Color manipulation with CSS Color Module Level 4
  • used, for color manipulation / Color manipulation with CSS Color Module Level 4
• CSS Conditional Rules
  • URL / Feature queries
• CSS custom properties
  • about / CSS custom properties and variables
• CSS Extensions module
  • URL / CSS custom properties and variables
• CSS filters
  • about / CSS filters
  • URL / CSS filters
  • available CSS filters / Available CSS filters
  • combining / Combining CSS filters
• CSS frameworks
  • avoiding, in production / Avoid CSS frameworks in production
• CSS Level 4 selectors
  • about / CSS Level 4 selectors
  • URL / CSS Level 4 selectors
  • *has pseudo class / The :has pseudo class
  • responsive viewport-percentage lengths / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
• CSS masks
  • about / A note on CSS masks and clipping
  • URL / A note on CSS masks and clipping
• CSS Media Queries
  • reference link / Amending the example for a larger screen
• CSS multi-column layouts
  • for responsive designs / CSS multi-column layouts for responsive designs
  • fixed columns / Fixed columns, variable width
  • variable width / Fixed columns, variable width
  • gap, adding / Adding a gap and column divider
  • column divider, adding / Adding a gap and column divider
  • reference link / Adding a gap and column divider
• CSS performance
  • warning / A warning on CSS performance
  • reference link / A warning on CSS performance
• CSS rule
  • about / Anatomy of a CSS rule
• CSS Transforms Module Level 1
  • URL / CSS3 3D transformations
• CSS variables
  • about / Basic conditional logic in CSS, CSS custom properties and variables
  • URL / Basic conditional logic in CSS, CSS custom properties and variables
• Cufón
  • URL / Web typography
• curves
  • references / Understanding timing functions
• custom @font-face typography
  • about / A note about custom @font-face typography and responsive designs

D

• <details> element
  • about / The <details> and <summary> elements
  • URL / The <details> and <summary> elements
• data URIs
  • about / A brief aside on data URIs
• defs tag
  • about / The defs tag
• desc tag
  • about / The title and desc tags
• doctype
  • about / The doctype
• dots per centimeter (dpcm)
  • about / High-resolution background images
• dots per inch (dpi)
  • about / High-resolution background images
• Draw SVG
  • URL / Creating SVGs with popular image editing packages and services

E

• <em> element
  • about / The <em> element
• easing function
  • references / Understanding timing functions
• Embedded Content
  • reference link / The intrinsic problem of responsive images
  • about / The intrinsic problem of responsive images
  • URL / Facilitate new-fangled image formats
• empty (*empty) selector
  • about / The empty (:empty) selector
• ems (em)
  • about / Combining media queries
• Extensible Markup Language (XML)
  • about / The graphic that is a document
• external style sheet
  • used, for styling SVG / Styling an SVG with an external style sheet

F

• *first-line pseudo-element
  • about / Do something with the :first-line regardless of viewport
• <figcaption> element
  • about / The <figure> and <figcaption> elements
  • URL / The <figure> and <figcaption> elements
• <figure> element
  • about / The <figure> and <figcaption> elements
  • URL / The <figure> and <figcaption> elements
• <footer> element
  • about / The <footer> element
  • URL / The <footer> element
• @font-face CSS rule
  • about / The @font-face CSS rule
  • URL / The @font-face CSS rule
  • used, for implementing web fonts / Implementing web fonts with @font-face
• fallback capability
  • for older browsers / Fallback capability for older browsers
• feature forks
  • facilitating, in CSS / Facilitating feature forks in CSS
  • feature queries / Feature queries
  • conditionals, combining / Combining conditionals
  • Modernizr / Modernizr
  • text ellipsis / Feature detection with Modernizr, New CSS3 selectors and how to use them
• feature queries
  • about / Feature queries
• fixed pixel design
  • converting, to fluid proportional layout / Converting a fixed pixel design to a fluid proportional layout
• Flexbox
  • need for / Why do we need Flexbox?
  • about / Introducing Flexbox
  • features / Introducing Flexbox
  • iterations / The bumpy path to Flexbox
  • reference link / The bumpy path to Flexbox, Possible alignment values, Wrapping up Flexbox
  • browser support / Browser support for Flexbox
  • characteristics / Getting Flexy
  • different layouts, inside different media queries / Different Flexbox layouts inside different media queries
  • implementation / Wrapping up Flexbox
• Flexbox, characteristics
  • perfect vertically centered text / Perfect vertically centered text
  • offset items, listing / Offset items
  • items order, reversing / Reverse the order of items
  • inline-flex / Inline-flex
  • alignment properties / Flexbox alignment properties
  • flex property / The flex property
  • footer, adding / Simple sticky footer
  • source order, modifying / Changing source order
• flex property
  • about / The flex property
  • flex-grow / The flex property
  • flex-shrink / The flex property
  • flex-basis / The flex property
• floats
  • about / Floats
• Fluid Grids
  • reference link / Converting a fixed pixel design to a fluid proportional layout
• fluid proportional layout
  • fixed pixel design, converting / Converting a fixed pixel design to a fluid proportional layout
  • with Flexbox / Why do we need Flexbox?
  • whitespace / Inline block and whitespace
  • inline-block / Inline block and whitespace
  • floats / Floats
  • table / Table and table-cell
  • table-cell / Table and table-cell
• Font Deck
  • URL / Implementing web fonts with @font-face
• Font Squirrel
  • URL / Implementing web fonts with @font-face
• forms
  • about / HTML5 forms
  • components / Understanding the component parts of HTML5 forms
  • placeholder attribute / placeholder
  • placeholder attribute, styling / Styling the placeholder text
  • required attribute / required
  • autofocus attribute / autofocus
  • autocomplete attribute / autocomplete
  • list attribute / List and the associated datalist element
  • datalist element / List and the associated datalist element
  • reference link / List and the associated datalist element, range
  • styling, with CSS3 / Styling HTML5 forms with CSS3
  • styling, with required input fields / Indicating required fields
  • background fill effect, creating / Creating a background fill effect
• Foundation
  • URL / Avoid CSS frameworks in production

G

• g element
  • about / The g element
• Google web fonts
  • URL / Implementing web fonts with @font-face
• gotchas
  • with attribute selection / Gotchas with attribute selection
• graceful degradation
  • about / Setting browser support levels
• graphical user interface (GUI)
  • about / Creating SVGs with popular image editing packages and services
• GreenSock
  • URL / Animating SVG with JavaScript
  • SVG, animating with / A simple example of animating an SVG with GreenSock
• Grid Layout Module Level 1
  • reference link / Wrapping up Flexbox
  • about / Wrapping up Flexbox
• gzip
  • about / The practicalities of separating media queries
  • URL / The practicalities of separating media queries

H

• *has pseudo class
  • about / The :has pseudo class
• <header> element
  • about / The <header> element
  • URL / The <header> element
• h1-h6 elements
  • about / A note on h1-h6 elements
  • URL / A note on h1-h6 elements
• HiDPI devices
  • media queries, using / Media queries for HiDPI devices
• high-resolution background images
  • about / High-resolution background images
• horizontal scrolling panels
  • creating / Creating horizontal scrolling panels
• HTML5
  • about / HTML5 markup – understood by all modern browsers
  • easy-going code / Easy-going HTML5
  • <a> tag / All hail the mighty <a> tag
  • semantic elements / New semantic elements in HTML5
  • text-level semantics / HTML5 text-level semantics
  • obsolete features / Obsolete HTML features
  • obsolete features, URL / Obsolete HTML features
  • elements, using / Putting HTML5 elements to use
  • elements, selecting / Applying common sense to your element selection
  • media, embedding / Embedding media in HTML5
  • references / A note about 'offline first'
• HTML5 Boilerplate
  • URL / Easy-going HTML5
• HTML5 markup
  • about / A sensible approach to HTML5 markup
• HTML5 page
  • about / Starting an HTML5 page the right way
  • doctype / The doctype
  • HTML tag / The HTML tag and lang attribute
  • lang attribute / The HTML tag and lang attribute
  • alternate languages, specifying / Specifying alternate languages
  • character encoding, specifying / Character encoding
• HTML tag
  • about / The HTML tag and lang attribute
• Hue, Saturation, and Lightness (HSL) color
  • about / HSL color

I

• <i> element
  • about / The <i> element
• @import
  • used, for combining media queries / Media queries with @import
• IcoMoon
  • URL / Re-using graphical objects from symbols
• Iconizr
  • URL / Generating image sprites, Optimising SVGs
• icon services
  • used, for creating SVG / Save time with SVG icon services
  • URL / Save time with SVG icon services
• iFrames
  • about / Responsive HTML5 video and iFrames
• image editing packages
  • used, for creating SVG / Creating SVGs with popular image editing packages and services
• image sprites
  • generating / Generating image sprites
• img tag
  • about / Using an img tag
• Inkscape
  • URL / Creating SVGs with popular image editing packages and services
• inline-block
  • about / Inline block and whitespace
  • reference link / Inline block and whitespace
• inline-flex
  • about / Inline-flex
• inline SVG
  • inserting / Inserting an SVG inline
  • graphical objects, re-using / Re-using graphical objects from symbols
  • colors, modifying / Inline SVGs allow different colors in different contexts
  • dual-tone icons, creating / Make dual-tone icons that inherit the color of their parent
  • graphical objects, re-using from external sources / Re-using graphical objects from external sources
• input types
  • about / HTML5 input types
  • email / email
  • number / number
  • number, with min range / min and max ranges
  • number, with max range / min and max ranges
  • number, with step attribute / Changing the step increments
  • url / url
  • tel / tel
  • search / search
  • pattern / pattern
  • color / color
  • date / Date and time inputs, date
  • time / Date and time inputs, time
  • month / month
  • week / week
  • range / range
• inset shadow
  • creating / An inset shadow
• internal styles
  • used, for styling SVG / Styling an SVG with internal styles
• items order, Flexbox
  • items, laying out vertically / How about if we want them laid out vertically instead?
  • column reverse, performing / Column reverse

J

• JavaScript
  • SVG, animating with / Animating SVG with JavaScript
  • CSS breakpoints, linking / Linking CSS breakpoints to JavaScript
• jQuery library
  • URL / How to polyfill non-supporting browsers
• justify-content property
  • reference link / Flexbox alignment properties
  • about / The justify-content property

L

• *last-child selector
  • about / The :last-child selector
• lang attribute
  • about / The HTML tag and lang attribute
  • URL / Specifying alternate languages
• linear-gradient notation
  • about / The linear-gradient notation
  • gradient direction, specifying / Specifying gradient direction
  • color stops / Color stops
  • reference link / Color stops
  • fallback, adding / Adding fallback for older browsers
• link tags
  • media queries, implementing / Media queries in link tags
• linting tools
  • about / Validators and linting tools

M

• <main> element
  • about / The <main> element
  • URL / The <main> element
• matrix transformations
  • for cheats and dunces / Matrix transformations for cheats and dunces
  • URL / Matrix transformations for cheats and dunces
• media
  • embedding, in HTML5 / Embedding media in HTML5
  • video, adding / Adding video and audio the HTML5 way
  • audio, adding / Adding video and audio the HTML5 way
  • fallback capability, for older browsers / Fallback capability for older browsers
  • video tags / Audio and video tags work almost identically
  • audio tags / Audio and video tags work almost identically
• media queries
  • benefits / Why media queries are needed for a responsive web design
  • reference link / Why media queries are needed for a responsive web design
  • about / Why media queries are needed for a responsive web design
  • conditional logic, in CSS / Basic conditional logic in CSS
  • syntax / Media query syntax
  • implementing, in link tags / Media queries in link tags
  • combining / Combining media queries
  • combining, with @import / Media queries with @import
  • combining, in CSS / Media queries in CSS
  • capabilities, for test / What can media queries test for?
  • used, for altering design / Using media queries to alter a design
  • CSS, wrapping / Any CSS can be wrapped in a media query
  • used, for HiDPI devices / Media queries for HiDPI devices
  • considerations / Considerations for organizing and authoring media queries
  • linking, to different CSS files / Linking to different CSS files with media queries
  • separating, practicalities / The practicalities of separating media queries
  • nesting / Nesting media queries 'inline'
  • considerations, for combining or writing / Combine media queries or write them where it suits?
  • inside SVGs / A note on media queries inside SVGs
  • implementation tips, for SVG / Implementation tips
• Media Queries Level 4
  • deprecated features / What can media queries test for?
  • deprecated features, URL / What can media queries test for?
  • about / Media Queries Level 4
  • URL / Media Queries Level 4
  • media features, scripting / Scripting media feature
  • reference link / Scripting media feature, Interaction media features, Environment media features
  • interacting, with media features / Interaction media features
  • media features, hovering / The hover media feature
  • environmental features / Environment media features
• Modernizr
  • about / HTML5 markup – understood by all modern browsers, Modernizr
  • URL / HTML5 markup – understood by all modern browsers
  • used, for feature detection / Feature detection with Modernizr
  • custom test, reference link / Feature detection with Modernizr
• moving element, with transform
  • URL / The transform-origin property
• multiple background images
  • about / Multiple background images
  • background size, setting / Background size
  • background position, setting / Background position
  • background shorthand / Background shorthand
• multiple shadows
  • creating / Multiple shadows

N

• <nav> element
  • about / The <nav> element
  • URL / The <nav> element
• namespace
  • about / Namespace
• negation (*not) selector
  • about / The negation (:not) selector
• non-supporting browsers
  • dealing with / How to polyfill non-supporting browsers
• non-visual desktop access (NVDA)
  • about / Taking ARIA further
  • URL / Taking ARIA further
• nth-based selectors
  • about / Understanding what nth rules do
  • example / Breaking down the math
• nth-child selectors
  • about / The nth-child selectors

O

• object tag
  • about / Using an object tag
  • reference link / Using an object tag

P

• Perspective Page View Navigation
  • URL / CSS3 3D transformations
• picture element
  • used, for art direction / Art direction with the picture element
  • fangled image formats, facilitating / Facilitate new-fangled image formats
• pixels (px)
  • about / Combining media queries
  • reference link / Combining media queries
• polyfill
  • about / HTML5 markup – understood by all modern browsers
• polyfills
  • handling / How to polyfill non-supporting browsers
• progressive enhancement
  • about / Setting browser support levels
  • embracing / Embracing progressive enhancement
• properties, CSS3 transitions
  • transition-property / The properties of a transition
  • transition-duration / The properties of a transition
  • transition-timing-function / The properties of a transition
  • transition-delay / The properties of a transition

Q

• quirks mode
  • reference link / The doctype

R

• radial background gradients
  • about / Radial background gradients
  • syntax / Breakdown of the radial-gradient syntax
• Red, Green, and Blue (RGB) color
  • about / RGB color
• regular expressions
  • about / pattern
  • URL / pattern
• rems (rem)
  • about / Combining media queries
• render blocking CSS
  • reference link / Linking to different CSS files with media queries
• repeating background gradients
  • creating / Repeating gradients
• responsive HTML5 video
  • about / Responsive HTML5 video and iFrames
  • reference link / Responsive HTML5 video and iFrames
• responsive images
  • about / Responsive images
  • intrinsic problem / The intrinsic problem of responsive images
  • resolution switching, with srcset / Simple resolution switching with srcset
  • advanced switching, with srcset / Advanced switching with srcset and sizes
  • advanced switching, with sizes / Advanced switching with srcset and sizes
  • art direction, with picture element / Art direction with the picture element
• responsive viewport-percentage lengths
  • vmax / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
  • vmin / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
  • vh / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
  • vw / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
  • URL / Responsive viewport-percentage lengths (vmax, vmin, vh, vw)
• responsive web design
  • reference link / Defining responsive web design
  • defining / Defining responsive web design
  • about / Responsive web design in a nutshell
  • nth-based selection / nth-based selection in responsive web designs
  • custom @font-face typography / A note about custom @font-face typography and responsive designs
  • in browser environment / Get designs in the browser as soon as possible
  • breakpoints, setting / Let the design dictate the breakpoints
  • viewing / View and use the design on real devices
  • using, on real devices / View and use the design on real devices
  • pragmatic solutions, coding / Coding pragmatic solutions
  • link, used as button / When a link becomes a button
  • simplest code, using / Use the simplest code possible
  • performance / Performance
  • enhancements / The next big things
  • references / The next big things
• responsive web page
  • building / Our first responsive example
  • HTML file, creating / Our basic HTML file
  • images, taming / Taming images
  • media queries, entering / Enter media queries
  • amending, for larger screen / Amending the example for a larger screen
  • shortcomings / The shortcomings of our example
• root SVG element
  • about / The root SVG element
  • references / The root SVG element

S

• <section> element
  • about / The <section> element
  • URL / The <section> element
• <summary> element
  • about / The <details> and <summary> elements
• scalable vector graphics (SVGs)
  • about / The shortcomings of our example
• Selectors Level 4
  • URL / Indicating required fields
• semantic elements
  • about / New semantic elements in HTML5
  • URL / New semantic elements in HTML5
  • <main> element / The <main> element
  • <section> element / The <section> element
  • <nav> element / The <nav> element
  • <article> element / The <article> element
  • <aside> element / The <aside> element
  • <figure> element / The <figure> and <figcaption> elements
  • <figcaption> element / The <figure> and <figcaption> elements
  • <details> element / The <details> and <summary> elements
  • <summary> element / The <details> and <summary> elements
  • <header> element / The <header> element
  • <footer> element / The <footer> element
  • <address> element / The <address> element
  • h1-h6 elements / A note on h1-h6 elements
• sIFR
  • URL / Web typography
• sizes attribute
  • used, for advanced switching / Advanced switching with srcset and sizes
  • browser support / Did you say the browser 'might' pick one image over another?
• Sketch
  • URL / Creating SVGs with popular image editing packages and services
• SMIL animations
  • URL / SMIL animation, The end of SMIL
  • about / SMIL animation
  • limitations / The end of SMIL
• Snap.svg
  • URL / Animating SVG with JavaScript
• Spackling Paste
  • about / HTML5 markup – understood by all modern browsers
• spinner controls
  • about / number
• srcset
  • used, for switching resolution / Simple resolution switching with srcset
  • used, for advanced switching / Advanced switching with srcset and sizes
• structural pseudo-classes
  • about / The negation (:not) selector
  • URL / The negation (:not) selector
• Style Tiles
  • URL / Get designs in the browser as soon as possible
• SVG
  • history / A brief history of SVG
  • URL / A brief history of SVG
  • creating, with image editing packages / Creating SVGs with popular image editing packages and services
  • creating, with icon services / Save time with SVG icon services
  • capabilities / Extra SVG capabilities and oddities
  • oddities / Extra SVG capabilities and oddities
  • SMIL animations / SMIL animation
  • styling, with external style sheet / Styling an SVG with an external style sheet
  • styling, URL / Styling an SVG with an external style sheet
  • styling, with internal styles / Styling an SVG with internal styles
  • animating, with CSS / Animate an SVG with CSS
  • animating, with JavaScript / Animating SVG with JavaScript
  • animating, with GreenSock / A simple example of animating an SVG with GreenSock
  • optimizing / Optimising SVGs
  • used, as filters / Using SVGs as filters
  • with media queries / A note on media queries inside SVGs
  • references / Further resources
• SVG, inserting
  • into web pages / Inserting SVGs into your web pages
  • with img tag / Using an img tag
  • with object tag / Using an object tag
  • as background image / Insert an SVG as a background image
  • data URIs / A brief aside on data URIs
  • image sprites, generating / Generating image sprites
  • methods / What you can do with each SVG insertion method (inline, object, background-image, and img)
  • caveats / What you can do with each SVG insertion method (inline, object, background-image, and img)
  • browser implementation / Browser schisms
• SVG-edit
  • URL / Creating SVGs with popular image editing packages and services
• SVG document
  • about / The graphic that is a document
  • root SVG element / The root SVG element
  • namespace / Namespace
  • desc tag / The title and desc tags
  • title tag / The title and desc tags
  • defs tag / The defs tag
  • g element / The g element
  • shapes / SVG shapes
  • paths / SVG paths
• SVG For Everybody
  • about / Re-using graphical objects from external sources
  • URL / Re-using graphical objects from external sources
• SVGO
  • URL / Optimising SVGs
• SVGOMG
  • URL / Optimising SVGs
• SVG paths
  • about / SVG paths
• SVG properties
  • about / SVG properties and values within CSS
  • URL / SVG properties and values within CSS
• SVG shapes
  • about / SVG shapes

T

• table
  • about / Table and table-cell
• table-cell
  • about / Table and table-cell
• text-level semantics
  • about / HTML5 text-level semantics
  • URL / HTML5 text-level semantics, The <i> element
  • <b> element / The <b> element
  • <em> element / The <em> element
  • <i> element / The <i> element
• text-overflow property
  • URL / Text ellipsis, New CSS3 selectors and how to use them
• text-shadow property
  • reference link / Multiple text shadows
• text editors
  • about / A brief note on tooling and text editors
• text ellipsis
  • about / Text ellipsis, Feature detection with Modernizr, New CSS3 selectors and how to use them
• text shadows
  • about / Text shadows with CSS3
  • blur value, omitting / Omitting the blur value when not needed
  • multiple text shadows, adding / Multiple text shadows
• title tag
  • about / The title and desc tags
• tooling editors
  • about / A brief note on tooling and text editors
• transform-origin property
  • URL / The transform-origin property
• transforms
  • scale / CSS3 2D transforms
  • translate / CSS3 2D transforms
  • rotate / CSS3 2D transforms
  • skew / CSS3 2D transforms
  • matrix / CSS3 2D transforms
• transitions and animations
  • URL / The transform-origin property
• translate
  • used, to center absolutely positioned elements / Using translate to center absolutely positioned elements
• translate3d
  • URL / The transform3d property
• tweening
  • about / SMIL animation
• Typekit
  • URL / Implementing web fonts with @font-face

U

• Ultimate CSS Gradient Editor
  • URL / Handy 'extent' keywords for responsive sizing
• Uniform Resource Identifier (URI)
  • about / A brief aside on data URIs
• user experience
  • tiering / Tiering the user experience
  • delivering / Practically delivering experience tiers

V

• validators
  • about / Validators and linting tools
  • URL / Validators and linting tools
• Velocity.js
  • URL / Animating SVG with JavaScript
• video
  • adding, in HTML5 / Adding video and audio the HTML5 way
• video tags
  • about / Audio and video tags work almost identically
• viewport
  • about / Our basic HTML file
• viewport meta tag
  • about / The viewport meta tag
  • reference link / The viewport meta tag
• viewports
  • content, loading / Hiding, showing, and loading content across viewports
  • content, hiding / Hiding, showing, and loading content across viewports
  • content, displaying / Hiding, showing, and loading content across viewports
  • heavy lifting, with CSS / Let CSS do the (visual) heavy lifting

W

• W3C validator
  • URL / A sensible approach to HTML5 markup
• WAI-ARIA
  • about / WCAG and WAI-ARIA for more accessible web applications, WAI-ARIA
  • roles, avoiding for semantic elements / Don't use roles for semantic elements
  • correct elements, using / If you only remember one thing
  • ARIA / Taking ARIA further
  • URL / Taking ARIA further
• WCAG
  • about / WCAG and WAI-ARIA for more accessible web applications, WCAG
  • URL / WCAG
• WebP
  • about / Facilitate new-fangled image formats
  • URL / Facilitate new-fangled image formats
• web pages
  • SVG, inserting / Inserting SVGs into your web pages
• WebPagetest
  • URL / Performance
• Webshims lib
  • URL / How to polyfill non-supporting browsers
• web typography
  • about / Web typography
  • @font-face CSS rule / The @font-face CSS rule
  • @font-face / Implementing web fonts with @font-face
  • custom @font-face typography / A note about custom @font-face typography and responsive designs
• whitespace
  • about / Inline block and whitespace
• word wrapping
  • about / Word wrapping
  • text ellipsis / Text ellipsis
  • horizontal scrolling panels, creating / Creating horizontal scrolling panels