Dirty little front-end tricks
summary
Concrete hacks and results: using the object tag to nest links and embed SVGs so inline links survive and SVGs stay styleable; applying ::before/::after on img to show custom broken-image UIs; a fluid-typography formula that maps 16px@400px to 24px@800px without media queries; a width/min/max arithmetic trick to fake Gmail breakpoints and even a live-updating image-as-sprite for email; pulling children out of fixed containers with negative VW margins; and converting images into tables of colored TDs when clients refuse to load assets.
AI-written summary · about
chapters (25)
- 0:00Intro
- 1:15About Vitaly
- 2:05Nested links
- 5:10Embedding SVG
- 6:15Broken images
- 7:40Fluid typography
- 8:45Setting font size
- 9:35Changing font size
- 10:20Font size formula
- 11:57Line height formula
- 14:03Multicolumn table
- 15:01Pseudo elements
- 17:05WhyResponsive emails
- 17:48Background coloring
- 19:27Table properties
- 21:18Columns in Gmail
- 25:28RealTime Wall
- 29:49Negative Margins
- 30:41Closing diff
- 32:58Metadata
- 35:06Vertical reading
- 36:51Cap height
- 37:30Margin
- 38:36Offset
- 40:23Summary
related talks
33mCutting-Edge Responsive Web Design
24mBreaking the norm with creative CSS
37mFront-End: Fun, Not Frustration
49mSmartWeb 2016 - Vitaly Friedman
01h 09mEven More CSS Secrets
42mBreaking the norm with creative CSS
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
17mBreaking the norm with creative CSS