The Curious Engineer

All blogs / Frontend / CSS / browsers

Lea Verou’s blog

lea.verou.me

Web standards, Software Engineering, Product, Usability, and more

Frontend / CSS / browsersWeb developmentJavaScript / TypeScriptEngineering blogs

’10’15’20’25
Posts
263 from 10 Feb 2009 to 11 Oct 2026
Posting
monthly (7 in the last year)
Kind
personal blog
Feed
https://lea.verou.me/feed.xml

2026 7

  1. The best way to use icons in Web UIs
  2. 6 posts 2026
  3. The best dark mode toggle is probably none
  4. Dark mode toggles: two states are enough
  5. In defense of polyfills
  6. External import maps, today!
  7. Web dependencies are broken. Can we fix them?

2025 8

  1. In the economy of user effort, be a bargain
  2. 7 posts 2025
  3. State of HTML 2025 now open!
  4. Influence the State of HTML 2025 Survey!
  5. The Hovercar Framework for Deliberate Product Design
  6. Bluesky Likes Web Components
  7. Construction Lines
  8. Style-observer: JS to observe CSS property changes, for reals

2024 8

  1. Context Chips in Survey Design: “Okay, but how does it _feel_?”
  2. 7 posts 2024
  3. Web Components are not Framework Components — and That’s Okay
  4. Making the Web more Awesome — for everyone
  5. Forget “show, don’t tell”. Engage, don’t show!
  6. Inline conditionals in CSS, now?
  7. Inline conditionals in CSS?
  8. On automatically generating contrasting text colors with CSS

2023 13

  1. Eigensolutions: composability as the antidote to overfit
  2. 11 posts 2023
  3. Minimalist Affordances: Making the right tradeoffs
  4. State of HTML 2023 now open!
  5. Numbers or Brackets for numeric questions?
  6. Help Design the Inaugural State of HTML Survey!
  7. Going Lean
  8. Rethinking Categorization
  9. 11ty: Index ALL the things!
  10. Migrating Disqus from WP to 11ty
  11. JS private class fields considered harmful
  12. JS private class fields considered harmful
  13. Contrast Ratio has a new home — and this is great news!

2022 8

  1. Position Statement for the 2022 W3C TAG Election
  2. 7 posts 2022
  3. State of CSS 2022 now open!
  4. On ratings and meters
  5. Help design the State of CSS Survey 2022!
  6. What is the best way to mark up an exclusive button group?
  7. Introducing Rety: live coding, without the stress
  8. Releasing Color.js: A library that takes color seriously

2021 8

  1. On Yak Shaving and `<md-block>`, a new HTML element for Markdown
  2. 7 posts 2021
  3. Custom properties with defaults: 3+1 strategies
  4. Inherit ancestor font-size, for fun and profit
  5. Is the current tab active?
  6. 82% of developers get this 3 line CSS quiz wrong
  7. Dark mode in 5 minutes, with inverted lightness variables
  8. Mass function overloading: why and how?

2020 18

  1. Writable getters
  2. 17 posts 2020
  3. Position Statement for the 2020 W3C TAG Election
  4. The case for Weak Dependencies in JS
  5. Simple pie charts with fallback, today
  6. The -​-var: ; hack to toggle multiple values with one custom property
  7. The failed promise of Web Components
  8. Developer priorities throughout their career
  9. Parsel: A tiny, permissive CSS selector parser
  10. Introspecting CSS via the CSS OM: Get supported properties, shorthands, longhands
  11. Import non-ESM libraries in ES Modules, with client-side vanilla JS
  12. Releasing MaVoice: A free app to vote on repo issues
  13. The Cicada Principle, revisited with CSS variables
  14. Refactoring optional chaining into a large codebase: lessons learned
  15. Hybrid positioning with CSS variables and max()
  16. New decade, new theme
  17. Today's Javascript, from an outsider's perspective
  18. LCH colors in CSS: what, why, and how?

2019 3

  1. Issue closing stats for any repo
  2. 2 posts 2019
  3. Utility: Convert SVG path to all-relative or all-absolute commands

2018 8

  1. ReferenceError: x is not defined?
  2. 7 posts 2018
  3. Refresh CSS Bookmarklet v2
  4. Easy Dynamic Regular Expressions with Tagged Template Literals and Proxies
  5. Never forget type="button" on generated buttons!
  6. Responsive tables, revisited
  7. Quicker Storify export
  8. Free Intro to Web Development slides (with demos)

2017 5

  1. Different remote and local resource URLs, with Service Workers!
  2. 4 posts 2017
  3. Introducing Mavo: Create web apps entirely by writing HTML!
  4. HTML APIs: What they are and how to design a good one
  5. Duoload: Simplest website load comparison tool, ever

2016 6

  1. Resolve Promises externally with this one weird trick
  2. 5 posts 2016
  3. URL rewriting with Github Pages
  4. Autoprefixing, with CSS variables!
  5. Markapp: A list of HTML libraries
  6. Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders

2015 11

  1. My positive experience as a woman in tech
  2. 10 posts 2015
  3. Introducing Bliss: A 3KB library for happier Vanilla JS
  4. Copying object properties, the robust way
  5. On the blindness of blind reviews
  6. Stretchy: Form element autosizing, the way it should be
  7. Spot the unsubscribe (link)!
  8. Conical gradients, today!
  9. Idea: Extending native DOM prototypes without collisions
  10. jQuery considered harmful
  11. Awesomplete: 2KB autocomplete with zero dependencies

2014 8

  1. An easy notation for grayscale colors
  2. 7 posts 2014
  3. Image comparison slider with pure CSS
  4. Dynamically generated SVG through SASS + A 3D animated RGB cube!
  5. I’m going to MIT!!
  6. Introducing Whathecolor: A color game for web developers!
  7. Vote for me in the net awards 2014!
  8. Smooth state animations with animation-play-state

2013 16

  1. Simple script: Automatic talks list
  2. 15 posts 2013
  3. CSS is for developers
  4. Cleanest CSS spinner, ever
  5. Flexible Google-style loader with CSS
  6. Slanted tabs with CSS 3D transforms
  7. What makes speakers happy
  8. Leaving W3C
  9. Meet dpi.lv: More than you probably wanted to know about screen DPI
  10. Can we get rid of gradient prefixes?
  11. border-corner-shape is in danger, and you can help!
  12. Preview corner-shape, before implementations!
  13. Easily center text vertically, with SVG!
  14. Use MathML today, with CSS fallback!
  15. iOS 6 switch style checkboxes with pure CSS
  16. W3Conf in San Francisco, February 21-22

2012 29

  1. One year of pastries
  2. 28 posts 2012
  3. CSS Animations with only one keyframe
  4. Lots of improvements coming to dabblet
  5. Easy color contrast ratios
  6. Dive deep into CSS3 (and Bolognese!) in Bologna, Italy
  7. lea＠w3․org
  8. Introducing Prism: An awesome new syntax highlighter
  9. Important -prefix-free update
  10. So, you’ve been invited to speak
  11. Why I bought a high-end MacBook Air instead of the Retina MBP
  12. Hacking lookahead to mimic intersection, subtraction and negation
  13. Teaching: General case first or special cases first?
  14. Poll: ¿Is animation-direction a good idea?
  15. Text masking — The standards way
  16. How I got into web development — the long version
  17. Pure CSS scrolling shadows with background-attachment: local
  18. git commit -m "EVERYTHING"
  19. In defense of reinventing wheels
  20. Flexible multiline definition lists with 2 lines of CSS 2.1
  21. A List Apart article: Every time you call a proprietary feature "CSS3", a kitten dies
  22. Vendor prefixes, the CSS WG and me
  23. Moving an element along a circle
  24. Simpler CSS typing animation, with the ch unit
  25. Exactly how much CSS3 does your browser support?
  26. Why tabs are clearly superior
  27. My new year’s resolution
  28. What we still can’t do client-side
  29. Dabblet blog

2011 51

  1. On web apps and their keyboard shortcuts
  2. 50 posts 2011
  3. Introducing dabblet: An interactive CSS playground
  4. Vendor prefixes have failed, what’s next?
  5. Animatable: A CSS transitions gallery
  6. My experience from Fronteers, JSConf EU, Frontend and FromTheFront
  7. Optimizing long lists of yes/no values with JavaScript
  8. Easily keep gh-pages in sync with master
  9. PrefixFree: Break free from CSS prefix hell!
  10. My experience from Frontendconf Zurich
  11. Major update to Chainvas: modularity, a client side build script & more
  12. A better tool for cubic-bezier() easing
  13. Chainvas: Make APIs chainable, enhance the canvas API
  14. Help the community: report browser bugs
  15. Pure CSS3 typing animation with steps()
  16. CSS.coloratum: Convert and share CSS colors
  17. On URL readability
  18. To write good code, you sometimes have to write bad code
  19. Accessible star rating widget with pure CSS
  20. Why I love our industry
  21. Better “CSS3 ticket-like tags”
  22. twee+: Longer tweets, no strings attached
  23. CSS gradients are faster than SVG backgrounds
  24. CSS3 for developers: My Fronteers 2011 workshop
  25. My experience from the CSS Summit 2011
  26. Vote for me in The .net awards 2011!
  27. Detecting CSS selectors support + my JSConf EU talk
  28. A polyfill for HTML5 progress element, the obsessive perfectionist way
  29. CSS reflections for Firefox, with -moz-element() and SVG masks
  30. Pure CSS Tic Tac Toe
  31. jQuery Pure: Call for contributors
  32. My experience from Web Directions @media & Standards.next
  33. Get your hash — the bulletproof way
  34. My experience from Geek Meet
  35. Change URL hash without page jump
  36. StronglyTyped: A library for strongly typed properties & constants in JavaScript
  37. Rule filtering based on specific selector(s) support
  38. CSS3 patterns gallery and a new pattern
  39. Invert a whole webpage with CSS only
  40. Create complex RegExps more easily
  41. Convert standard gradient syntax to -webkit-gradient and others
  42. Beveled corners & negative border-radius with CSS3 gradients
  43. On CSS preprocessors
  44. WD @media talk subject change
  45. Custom &lt;select&gt; drop downs with CSS3
  46. Checkerboard pattern with CSS3
  47. Incrementable length values in text fields
  48. Convert PHP serialized data to Unicode
  49. Styling elements based on sibling count
  50. Yet another redesign
  51. I'm speaking at @media Web Directions ’11!

2010 17

  1. Checkerboard, striped & other background patterns with CSS3 gradients
  2. 16 posts 2010
  3. rgba.php v1.2: Improved URL syntax, now at Github
  4. Tag editing UIs
  5. The curious case of border-radius:50%
  6. My FT2010 slides and CSSS: My presentation framework
  7. On attr() and calc()
  8. Automatic login via notification emails?
  9. Lea Verou @ Front-Trends 2010
  10. Organizing a university course on modern Web development
  11. "Wow, Mona Lisa with pure CSS!"
  12. On CSS counters plus a CSS3 Reversi UI
  13. MySQL: Are you actually utilizing your indexes?
  14. CSS3 structural pseudo-class selector tester
  15. CSSNinja's custom forms revisited to work with CSS sprites
  16. iPhone keyboard with CSS3 -- no images
  17. Redesign

2009 39

  1. Quickly find the Gravatar that cor­res­ponds to a given email
  2. 38 posts 2009
  3. Reading cookies the regular expression way
  4. Yet another email hiding technique?
  5. Exploring browser-supported Unicode characters and a tweet shortening experiment
  6. A different approach to elastic textareas
  7. New version of rgba.php is out!
  8. A CSS3 learning(?) tool
  9. Exploring CSS3 text-shadow
  10. (byte)size matters
  11. Idea: The simplest registration form ever
  12. Bevels in CSS3
  13. On password masking and usability
  14. Tip: Multi-step form handling
  15. 9 reasons why I prefer MySQL to MS SQL Server
  16. Cross-browser imageless linear gradients v2
  17. Creating the perfect slider
  18. Java pretty dates
  19. Better usability in 5 minutes
  20. Help me: take the color survey
  21. Advocacy of JavaScript
  22. Extend Math.log to allow for bases != e
  23. 100% Cyan in CMYK is NOT rgb(0,255,255)!!
  24. Cross browser, imageless linear gradients
  25. Mockup viewer bookmarklet
  26. CSS3 colors, today (MediaCampAthens session)
  27. CMYK colors in CSS: Useful or useless?
  28. On native, single-input, multiple file uploads
  29. Check whether the browser supports RGBA (and other CSS3 values)
  30. "Appearances can be deceiving Mr. Anderson" - a.k.a. short code is not always fast code
  31. Quick & dirty way to run snippets of JavaScript anywhere
  32. 20 things you should know when not using a JS library
  33. Silent, automatic updates are the way to go
  34. Bulletproof, cross-browser RGBA backgrounds, today
  35. Find the vendor prefix of the current browser
  36. CSS3 border-radius, today
  37. Extend Math.round, Math.ceil and Math.floor to allow for precision
  38. JS library detector
  39. Check whether a CSS property is supported