Index

Symbols

<a> element 32

<address> element 43

<article> element 35

<aside> element 36

<b> element 44

<blockquote> element 39

<details> element 41-43

<dialog> element 56-58

<div> element 39

<em> element 45

<figcaption> element 40

<figure> element 40

<footer> element 36, 37

<header> element 36

<hgroup> element 38

<i> element 45

<main> element 34

<nav> element 35

<p> element 39

<section> element 34

<span> element 44

<strong> element 44

<summary> element 40-43

@font-face CSS rule 200

used, for implementing web fonts 200-202

:has() relational pseudo-class 191, 192

!important declaration 411

in cascade layers 412, 413

@import at-rule

media queries 70

:is() functional pseudo-class 189, 190

:root pseudo-class 352

@supports to fork CSS

conditionals, combining 197, 198

feature queries, using 196, 197

using 195, 196

:where() functional pseudo-class 190, 191

A

A11Y project

reference link 49

Accessible Rich Internet Applications (ARIA)

about 49

reference link 49

advanced media queries 77-81

advanced resolution switching

with sizes 281

with srcset 281

alpha channels 216

with functional notation 217, 218

with hex 216, 217

alternate media sources

providing 52, 53

anchor tag 32

Andrey Sitnik

reference link 444

Android Studio 77

angle gradients 244

animation-fill-mode property

reference link 349

art direction

with picture element 282, 283

associated datalist element 375, 376

audio tag 53

autocomplete attribute 374

autofocus attribute 373

AVIF image format 275

Axe DevTools

reference link 49

B

background fill effect

creating 400, 401

background gradient

about 238

conic gradient 244-246

extent keywords, for responsive sizing 243

linear-gradient notation 239

patterns 248, 249

radial background gradient 242

repeating gradient 247

background image

SVG, inserting as 296

basic conditional logic, CSS 68

Bennett Feely’s Clippy

URL 266

Bohemian Coding’s Sketch

URL 293

Bootstrap

URL 437

box shadows 236

inset shadow 236

multiple box shadow 237

spread value 237

breakpoint 18, 19

browser

designs, obtaining 434

picture element, using 282

browser and device landscape 4

browser support matrix

defining 435

functional consideration 436

selecting 436, 437

user experience 437

C

calc() function 360, 361

Can I Use website 6

caret 371

caret-color CSS property

used, for styling input caret 371

caret symbol 174

cascade layers 406-408

declaring 408, 409

!important declaration 412, 413

naming 408

nesting, inside other layers 410

old browser support 414

priority of rules, in and outside layers 409

reference link 412

rules, adding 409

chaining attribute selectors 175-177

Character Data marker (CDATA) 309

character encoding 30

child combinator selector 185

clamp() function 362, 363

reference link 363

clipping source 266

CMYK color space 219

color, concepts and terminology 219

color space 219

gamut 219-221

color-contrast() function 229-231

color formats 222

color-mix() function 229

reference link 229

color stops 240, 241

color type input 387

combinator selectors

about 185

child combinator selector 185

empty (:empty) selector 187, 188

negation (:not) selector 186, 187

next sibling selector 186

subsequent sibling selector 186

comps 94

conic gradient 244-246

container

naming, reasons 88, 89

relative lengths 90

container queries 86, 87

possibilities 90

using 88

content across viewports

displaying 438

hiding 438

loading 438

control flow 68

CPU timeline feature

reference link 442

CSS 78

basic conditional logic 68

SVG properties within 309

SVG values within 309

used, for animating SVG 310, 311

used, for styling HTML5 forms 393-396

CSS 2D transforms 328, 330

matrix 335

module 329

rotate 334

scale 330

skew 334

translate 331

translate, using to center absolutely positioned elements 332, 333

CSS 3D transformations 338-341

translate3d example 343-345

translate3d property 341, 342

CSS3 Media Queries module

reference link 68

CSS animation 345-348

animation-fill-mode property 348, 349

CSS attribute selectors 172, 173

reference link 177

CSS attribute selectors, substring 173

beginning with 174

contains an instance of 174

ends with 175

CSS background patterns

reference link 248

CSS basic shapes 262

clip-path with circle 262, 263

clip-path with ellipse 264

clip-path with inset 264

clip-path with polygon 265, 266

clip-path with URL 266, 267

reference link 262

CSS capabilities 170

CSS clip-path 262

animating 267, 268

CSS color

current state 221, 222

@media (color-gamut) media query 224

P3 222, 223

CSS Conditional Rules Module Level 3

reference link 196

CSS custom properties

SVGs, re-coloring with 302-304

CSS file

media queries 71

CSS filters 254, 255

combining 260

selecting 255-259

CSS Fonts Module Level 4

reference link 207

CSS frameworks

avoiding 437, 438

CSS functions 359, 360

calc() function 360, 361

clamp() function 362, 363

max() function 362

min() function 361, 362

CSS Gradient Generator

reference link 244

CSS Grid 130

concepts and terminology 131

problem solving 130

syntax 130

CSS Images Module Level 3 specification

reference link 239

CSS length unit, to measure media queries

ems (em) 72

pixels (px) 72

rems (rem) 72

CSS Media Queries (Level 3)

reference link 24

CSS Media Queries (Level 4)

reference link 24

CSS Media Queries Level 5

deprecated features 74

CSS nesting 414

browser support tickets 418

feedback, on proposal 418

implementation, for browser support tickets 418

media queries, nesting 417

syntax 418

working 414-417

CSS Object Model (CSSOM) 203

CSS performance 260, 262

reference link 260

CSS Property Value syntax

reference link 156

CSS rule

anatomy 170

CSS Scrollbars Styling Module Level 1

reference link 427

CSS scroll-behavior

scrolling 432, 433

CSS Scroll Snap 430

reference link 430

scroll-snap-align property 431

scroll-snap-stop property 432

scroll-snap-type property 430, 431

CSS selectors 170, 172

CSS structural pseudo-classes 177

last-child selector 178

nth-child selector 178

CSS transition 322-324

multiple properties, declaring 325, 326

properties 324

shorthand property 325

CSS units 170

CSS Values

reference link 361

custom axis 207

custom ident 148

custom properties

environment variables 357, 358

fallback value, setting up 357

specificity 356, 357

theming 353, 354

values, obtaining with JavaScript 355

values, setting with JavaScript 355

web components 358, 359

working with 352, 353

D

datalist specification

reference link 376

Data Uniform Resource Identifier (URI) 296-298

date and time input type 388

date input type 388, 389

month input type 390

range input type 392, 393

time input type 391

week input type 390

date input type 388, 389

defs tag 291

desc tag 291

device lab

testing 434

DRAW SVG

URL 293

dual-tone icons

creating, to inherit parent color 301, 302

dynamic viewport 194

E

email input type 376, 377

Embedded content specification

reference link 279

embedding media, in HTML5 50

HTML audio, adding 50, 51

HTML video, adding 50, 51

empty (:empty) selector 187, 188

emulators

responsive designs, testing on 77

environment variables 357, 358

reference link 358

explicit grid 137

explicit grid section

reference link 132

explicit item placement 131

Extensible Markup Language (XML) 288

external style sheet

used, for styling SVG 308, 309

F

fallback

providing, for older browsers 227, 228

feature queries 196

Figma

reference link 444

Filter Effects Module Level 1

reference link 254

filters

SVG, using as 314-316

fixed pixel design

converting, into fluid proportional layout 94-99

Flash of Invisible Text (FOIT) 203

Flash of Unstyled Text (FOUT) 203

flex

wrapping with 123-126

Flexbox 99

alignment properties 107

autoprefixing solution, selecting 100

benefits 93, 99

characteristics 100

column reverse 106

history 100

inline-flex 106, 107

items, laying out vertically 105

need for 99

offset items 102, 104

order of items, reversing 104, 105

vertically centered text 101, 102

wrapping up 127

Flexbox alignment properties

about 107, 108

align-items 109

alignment values 110-112

align-self 109, 110

cross axis 107

flex property 113-115

main axis 107

sticky footer 116, 117

flex fraction (fr) 143

fluid proportional layout

fixed pixel design, converting into 94-99

Fontastic.me

reference link 294

font-display 203, 204

reference link 204

used, for optimizing font load 202

font-display, values

auto 204

block 204

fallback 204

optional 204

swap 204

font load

optimizing, with font-display 202

font optimization technique

reference link 202

font stacks 199

Foundation

URL 437

frontend web development 444

G

gamut 219, 221

g element 292

Glyphhanger

reference link 201

gradient direction

specifying 239

graphical objects

reusing, from external sources 304, 305

reusing, from symbols 299, 300

Graphical User Interface (GUI) 293

GreenSock

URL 312

used, for animating SVG 312-314

Grid

nested elements, allowing 159-161

grid area 131

Grid Layout

explicit grid 137

implicit grid 137

setting up 132-136

Grid Layout items

auto-fill keyword 151-153

auto-fit keyword 151-153

dense 145

fr unit 143

gap 143

grid item, placing 144

grid-template-areas 149-151

minmax() function 153, 154

named grid lines 146-149

placing 140-143

repeat 143

sizing 140-143

span 144, 145

grid shorthand 155, 156

option one value 156

option three value 157, 158

option two value 156, 157

grid-template-areas

reference link 151

grid-template shorthand 155

grid track 131

grouping elements 33

grouping selectors 188, 189

has() relational pseudo-class 191, 192

is() functional pseudo-class 189, 190

where() functional pseudo-class 190, 191

H

high-resolution background images 253

horizontal scrolling panel

creating 424-427

hover media feature 83

HTML5

semantic elements 33

HTML5 Boilerplate

reference link 31

HTML5 elements

reference link 33

HTML5 forms 368, 369

associated datalist element 374-376

autocomplete attribute 374

autofocus attribute 373

component parts 369, 370

input caret, styling with caret-color CSS property 371

list attribute 374-376

placeholder attribute 370

required attribute 371, 372

styling, with CSS 395, 396

HTML5 forms, with CSS

background fill effect, creating 400, 401

required fields, indicating 396-399

styling 393

HTML5 input types

about 376

color type input 387

date and time input type 388

email input type 376, 377

number input type 378-380

pattern input attribute 385-387

search input type 385

tel input type 383, 384

url input type 381, 382

HTML5 markup 30, 31

HTML5 outline algorithm 37, 38

HTML5 outline algorithm testing

reference link 38

HTML elements

usage 46, 48

HTML markup

approach 31

HTML pages 29

character encoding 30

doctype 29

HTML5 markup 30, 31

HTML markup approach 31

lang attribute 29

tag attribute 29

HTML text-level semantics 43

<b> element 44

<em> element 45

<i> element 45

<span> element 44

<strong> element 44

reference link 43

hue, saturation, and brightness (HSB) value 215

hue, saturation, and lightness (HSL) 215, 216

alpha channels 216

lightness 216

saturation 216

I

IcoMoon

reference link 294, 299

iconizr

URL 298

if/else statement 68

iframes 53, 54

embedding 55

image editing packages

used, for creating SVG 293

image formats 274

alternate image formats, providing 283

AVIF 275

comparisons 276, 277

WebP 275

image optimization

working 276

images

enhancing, with picture elements 278, 279

reference link 273

image sprites

generating 298

img tag

using 295

implicit grid 137

grid-auto-columns property, using 138, 139

grid-auto-flow property, using 140

grid-auto-rows property, using 138, 139

implicit item placement 131

Inkscape

URL 293

Inkscape gallery

reference link 293

inline SVGs

dual-tone icons, creating to inherit parent color 301, 302

used, for changing colors on context 301

input caret

styling, with caret-color CSS property 371

inset shadow 236

interaction media features, Media Queries Level 5

hover media feature 83, 84

pointer media feature 82, 83

internal styles

used, for styling SVG 309

J

Jake Archibald

reference link 313

JavaScript

custom properties, values setting with 355

custom property, values obtaining with 355

used, for animating SVG 311

justify-content

alignment values 111

L

largest viewport (lv) 194

last-child selector 178

lch() function

LCH, using with 224-226

Lightness, Chroma, Hue (LCH)

using, with lch() function 224-226

linear background gradients

reference link 241

linear-gradient notation 239

color stops 240, 241

gradient direction, specifying 239

link tags

media queries 70

linting tools 439

list attribute 374-376

loading attribute 55, 56

Logical Properties and Values 193

reference link 193

M

mask-image 268-270

matches any selector 189

matrix 335

max() function 362

max number ranges

using 380

media queries 65

combining 71

example 72

for responsive web design 68

in CSS file 71

in link tags 70

inside SVGs 316, 317

on @import at-rule 70

shorthand syntax 72

syntax 68, 70

testing, capabilities 73, 74

using, to alter design 74-77

Media Queries Level 5 81

future possibilities 85

interaction media features 82

reference link 82

user preference media features 84

media query logic

inverting 71

meta viewport tag 66, 67

min() function 361, 362

min number ranges

using 380

mix-blend-mode 270

reference link 271

modern image formats

AVIF 275

month input type 389

multi-line truncation 423, 424

multiple background images 250

background position 251, 252

background shorthand 252

background size 251

high-resolution background images 253

reference link 252

multiple box shadow 237

multiple text shadow 235

N

namespace 291

negation (:not) selector 186, 187

nested elements

allowing, in Grid 159-161

next sibling selector 185

NonVisual Desktop Access (NVDA) 49

URL 49

nth-based selection

in responsive web designs 182, 184

nth-child selector 178

nth rules 179

breaking down 179-182

number input type 379, 380

max number ranges, using 380

min number ranges, using 380

step increments, modifying 381

O

object tag

using 295, 296

obsolete features

conforming 46

in HTML 46

non-conforming 46

reference link 46

OKLab 227

reference link 227

OKLch 227

reference link 227

P

pattern input attribute 385-387

picture element

art direction 282, 283

using, to progressively enhance images 278, 279

pixel

reference link 281

placeholder attribute 370

placeholder text

reference link 370

styling 370

pointer media feature 82

reference link 83

polar coordinates 225

polygon feature design

reference link 313

prefers-color-scheme media feature 84

reference link 84

prefers-reduced-motion feature 85

Profiler tool

reference link 442

progressive enhancement

embracing 434, 435

pseudo-classes 171

pseudo-elements 171

R

radial background gradient 241, 242

reference link 244

range input type 392, 393

red, green, and blue (RGB) color 214

registered axis 206, 207

regular expressions (regexes) 385

reference link 386

relative color syntax

relative colors, using with 231

render blocking asset 78

Render Blocking CSS

reference link 78

repeating gradient 247

reference link 248

required attribute 371, 372

required fields

indicating 396-399

responsive designs

testing, on emulators 77

testing, on simulators 77

responsive HTML5 video 53, 54

responsive images

inherent problem 279, 280

responsive web design

browser support 5, 6

defining 5

essentials 3

in nutshell 5

nth-based selection 182-184

performance 440

performance tools 440-443

software development tools 7, 8

text editors 7

responsive web design, example 8

amending, for larger screen 19-23

basic HTML file 8-14

images, taming 14-17

media queries, entering 18

shortcomings 24

width/max-width for images 17

root SVG element 290

root tag 29

rotate 334

S

Sass

reference link 414

scale 330

scrollbars

styling 427-429

scroll-snap-align property 431

options 431

scroll-snap-stop property 432

scroll-snap-type property 430, 431

search input type 385

sectioning elements 33

<nav> element 35

semantic elements, in HTML5 33

<address> element 43

<article> element 35

<aside> element 36

<blockquote> element 39

<details> element 40-43

<div> element 39

<figcaption> element 40

<figure> element 40

<footer> element 36, 37

<header> element 36

<main> element 34

<p> element 39

<section> element 34

<summary> element 40-43

HTML5 outline algorithm 37, 38

short block period 203

shorthand syntax 154

grid shorthand 155, 156

grid-template shorthand 154, 155

short swap period 203

simulators

responsive designs, testing on 77

single-line truncation 422, 423

sizes

alternate sizes, providing 283

using, for advanced switching 281

skew 334

smallest viewport 194

SMIL animations 306-308

reference link 306-308

source order

modifying 117-123

space-separated functional color notation 218, 219

space-separated syntax 218

Speed Matters, for Google Web Search

reference link 273

spread value 237

Squoosh

URL 275

srcset

using, for advanced switching 281

using, for simple resolution switching 280

structural pseudo-classes

reference link 187

subgrid value 161-165

reference link 162

subsequent sibling selector 186

SVG 285, 286

animating, with CSS 310, 311

animating, with GreenSock 312-314

animating, with JavaScript 311

capabilities and oddities 306

creating, with image editing packages 293

graphics 288, 289

history 287, 288

implementation tips 318, 319

inserting, as background image 296

inserting, into web pages 294

media queries, inside 316, 317

namespace 291

optimizing 317, 318

properties, within CSS 309

re-coloring, with CSS custom properties 302-304

reference link 288

styling, with external style sheet 308, 309

styling, with internal styles 309

using, as filters 314-316

values, within CSS 309

SVG coordinate system

reference link 291

svg-edit

reference link 293

SVG icon services 293, 294

SVG inline

inserting 298

SVG insertion method 305

capabilities 305

caveats consideration 306

SVG paths 292

SVG shapes 292

SVG-specific properties

reference link 309

symbols

graphical objects, reusing from 299, 300

system fonts 199

T

tel input type 383, 384

text-level semantics 33

text-overflow property

reference link 423

text-shadow property

reference link 235

text shadows 234, 235

multiple text shadow 235

time input type 391

timing functions 326-328

title tag 291

transform-origin property 336, 337

translate 331

using to center absolutely positioned elements 331

truncated text 422

multi-line truncation 423, 424

single-line truncation 422, 423

tweening 307

U

UI element state pseudo-classes

reference link 187

url input type 381-383

user preference media features, Media Queries Level 5

prefers-color-scheme media feature 84

prefers-reduced-motion feature 85

V

validators tools 439

variable font 200, 204, 205

custom axis 207

features 208, 209

font-face, modifying 205, 206

need for 206

registered axis 206, 207

variation axis 206

video tag

working 53

viewBox

reference link 291

viewport 290

viewport relative lengths 194, 195

reference link 194

viewport relative units 194

dynamic viewport 194

largest viewport 194

reference link 194

smallest viewport 194

Vite

reference link 418

W

W3C specifications

reference link 30

W3C validator

reference link 32

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 48

accessibility conformance 48

reference link 49

WebAssembly

reference link 444

web components 358

reference link 359

Web Content Accessibility Guidelines (WCAG) 48

accessibility conformance 48

reference link 48

web fonts

implementing, with @font-face 200, 202

Web Open Font Format (WOFF) 200

web pages

SVG, inserting into 294

web page test

URL 440

WebP image format 275

web typography 198

font-display 203

@font-face CSS rule 200

font load, optimizing with font-display 202

system fonts 199

web fonts, implementing with @font-face 200-202

week input type 390

X

XML namespace (xmlns) 291