The Curious Engineer

All blogs / Frontend / CSS / browsers

Manuel Matuzović

matuzo.at

On my blog I focus on HTML, CSS, and web accessibility!

Frontend / CSS / browsers

’16’17’18’19’20’21’22’23’24’25’26
Posts
244 from 12 Oct 2016 to 17 Aug 2026
Posting
monthly (21 in the last year)
Kind
personal blog
Feed
https://www.matuzo.at/feed.xml

2026 19

  1. My HTML boilerplate in 2026
  2. Progressively enhancing Grid Lanes
  3. Your Grid Lanes will likely fail WCAG 2.4.3
  4. Setting the width of selects to the width of the selected option
  5. Zen, Zed, and Zits
  6. Context-aware headings in HTML
  7. Don't put aria-label on generic elements like divs
  8. box-shadow is no alternative to outline
  9. The geolocation element is odd
  10. Your skip link targets may not need tabindex=-1 to work properly
  11. role=presentation is no alternative for aria-hidden=true
  12. Put aria-hidden=true on decorative SVGs
  13. aria-haspopup might not do what you think it does
  14. A new meta tag for respecting text scaling on mobile
  15. Introduction to the new HTML element <geolocation>
  16. Lowering the specificity of multiple rules at once
  17. My favourite front-end and web development conferences
  18. Better defaults for popovers
  19. Workshop: Deep Dive on Accessibility Testing

2025 16

  1. I’m speaking at Web Day Out 2026
  2. Dealbreaker bugs in native popovers
  3. What's an interactive element?
  4. A workaround for using custom properties in media queries
  5. Never lose a z-index battle again
  6. Breaking up with my X
  7. Close requests, close watchers, and the dialog element
  8. How to make LibreWolf your default browser on macOS
  9. Maybe don't use custom properties in shorthand properties
  10. #unplugtrump
  11. Is the button focusable?
  12. NVDA bug: anchor links broken if they point to a parent element
  13. Building a progress-indicating scroll-to-top button in HTML and CSS
  14. Debugging a Craft CMS installation on macOS
  15. A year in review: 2024
  16. A year in review: 2023

2024 11

  1. Website accessibility reaction videos (in German)
  2. TYPO3Camp Vienna: Talk and Workshop
  3. Workshop: Deep Dive on Accessibility Testing
  4. Day 109: the animation-composition property
  5. Day 110: animating properties
  6. Day 108: the of S syntax in :nth-child()
  7. Day 107: the light-dark() color function
  8. beyond tellerrand: One of my favourite web development and design conferences
  9. My CSS wish list 2024
  10. Workshop: Deep Dive on Accessibility Testing
  11. Not all automated testing tools support Shadow DOM in web components

2023 62

  1. Day 106: the scripting media feature
  2. Day 105: defining multiple syntax components
  3. Removing list styles without affecting semantics.
  4. Totally remdom, or How browsers zoom text
  5. Day 104: animation with registered custom properties
  6. Day 103: the prefers-reduced-transparency media feature
  7. Skip links on ikea.com
  8. Mark all as read
  9. Web Components Accessibility FAQ
  10. New workshop: Advanced Modern CSS Masterclass
  11. Day 102: selecting the scoping root
  12. Pros and cons of using Shadow DOM and style encapsulation
  13. aria-haspopup and screen readers
  14. Visually hidden links with 0 dimensions
  15. O dialog focus, where art thou?
  16. the article element and screen readers
  17. the details element and in-page search
  18. form and search landmarks
  19. Cascade Layers are useless*
  20. Day 101: scoping
  21. Syntax podcast episode 623: “Nothing in CSS” errata
  22. CSS! CSS! CSS!
  23. Deleted files in a freshly cloned git repo
  24. Workshop: Deep Dive on Accessibility Testing
  25. details/summary inconsistencies
  26. Invalid at computed-value time
  27. It's very likely that…
  28. 50.1% empty links
  29. My CSS wish list
  30. Why I'm not the biggest fan of Single Page Applications
  31. Day 100: it's over, or is it!?
  32. Day 99: native nesting
  33. Day 98: oklab() and oklch()
  34. Day 97: animating grids
  35. Day 96: the margin-trim property
  36. Day 95: the color-mix() function
  37. Day 94: the accent-color property
  38. Day 93: the lch() color function
  39. Day 92: relative color syntax
  40. Day 91: a previous sibling selector with :has()
  41. Day 90: scoped styles in container queries
  42. Day 89: higher-order custom properties
  43. Day 88: CSS Motion Path
  44. Day 87: mask properties
  45. Day 86: the initial-letter property
  46. Day 85: typed custom properties in container style queries
  47. Day 84: the @property at-rule
  48. Day 83: computed values in container style queries
  49. Day 82: value processing
  50. Day 81: the order of individual transform properties
  51. Day 80: container style queries
  52. CSS color functions and custom properties
  53. Day 79: font-tech() and font-format()
  54. Day 78: container query units
  55. Day 77: block-size, inline-size, vi, and vb
  56. Day 76: overwriting colors in font palettes
  57. Day 75: font palettes
  58. Day 74: using !important in cascade layers
  59. Day 73: size container features
  60. A year in review: 2022
  61. Day 72: the masonry-auto-flow property
  62. Day 71: the masonry keyword

2022 87

  1. Day 70: the defined pseudo-class
  2. Day 69: width in container queries
  3. Day 68: cascade layers and browser support
  4. Day 67: counting children
  5. Day 66: individual transform properties
  6. Day 65: using the em unit in container queries
  7. Day 64: the revert-layer keyword
  8. Day 63: explicit defaulting with inherit, initial, unset, and revert
  9. Day 62: the container shorthand
  10. Day 61: color-scheme
  11. Day 60: the ::part() pseudo-element
  12. Day 59: naming containers
  13. Restart
  14. Day 58: ordering nested layers
  15. Day 57: media queries: range syntax
  16. Day 56: container queries
  17. Day 55: anonymous layers
  18. Day 54: testing for the support of a selector
  19. Day 53: disabling pull-to-refresh
  20. Day 52: declaring multiple layer lists
  21. Day 51: aspect-ratio and replaced elements
  22. Day 50: :has(:not()) vs. :not(:has())
  23. Day 49: layering entire style sheets
  24. Day 48: inset 0
  25. Day 47: the overscroll-behavior property
  26. Day 46: ordering layers
  27. Day 45: the specificity of ::slotted() content
  28. Day 44: logical floating and clearing
  29. Day 43: grouping layers
  30. Day 42: aspect-ratio
  31. Day 41: custom properties and url()s
  32. Day 40: unlayered styles
  33. Day 39: comma-separated functional color notations
  34. Day 38: vh, svh, lvh, and dvh
  35. Day 37: cascade layers
  36. Day 36: :has() and pseudo-elements
  37. Day 35: forgiving selectors
  38. Day 34: :is() or :where()
  39. Day 33: Mathematical expressions in min(), max(), clamp()
  40. Workshop: Deep Dive on Accessibility Testing
  41. Day 32: the clamp() function
  42. Day 31: logical border properties
  43. Day 30: the hwb() color function
  44. Day 29: !important custom properties
  45. Day 28: custom properties and web components
  46. Your account is permanently suspended
  47. Day 27: the font-variation-settings property
  48. Day 26: using combinators in :has()
  49. Day 25: scrollbar gutters in body and html
  50. Day 24: the backdrop-filter property
  51. Day 23: the lab() color function
  52. I broke the rules.
  53. Day 22: the ::backdrop pseudo-element
  54. Day 21: conic gradients
  55. Day 20: the scrollbar-gutter property
  56. Day 19: the placeholder-shown pseudo-class
  57. Day 18: inheritable styles and web components
  58. Day 17: the :picture-in-picture pseudo-class
  59. Day 16: the specificity of :has()
  60. Day 15: the :modal pseudo-class
  61. Day 14: the difference between :is() and :where()
  62. Day 13: the :where() and :is() pseudo-classes
  63. Day 12: max() trickery
  64. Day 11: space-separated functional color notations
  65. Day 10: global styles and web components
  66. Day 9: the inset shorthand property
  67. Day 8: nesting :has()
  68. Day 7: subgrids
  69. Day 6: the :has() pseudo-class
  70. Day 5: the max() function
  71. Day 4: the min() function
  72. Day 3: logical property shorthands
  73. Day 2: logical properties
  74. Day 1: custom properties and fallbacks
  75. 100 Days Of More Or Less Modern CSS
  76. Buttons and the Baader–Meinhof phenomenon
  77. Parents counting children in CSS
  78. outline is your friend
  79. Analyzing pages in a particular state with Lighthouse
  80. Divs are bad!
  81. Please, stop disabling zoom
  82. Bonn Meetup 7: Introduction to web accessibility and deceitful Lighthouse scores
  83. Web Security Basics: XSS
  84. Cascade Layers: First Contact
  85. CSS Specificity Demo
  86. Here’s what I didn’t know about :where()
  87. A year in review: 2021

2021 8

  1. Workshop: Deep Dive on Accessibility Testing
  2. Element diversity
  3. Browser support: focus pseudo classes
  4. My current HTML boilerplate
  5. Highlighting columns in HTML tables
  6. Dev Tools: Debugging DOM Tree modifications
  7. More or less burger-less navigation
  8. Ordering CSS properties

2020 21

  1. Slow Movement
  2. The lang attribute: browsers telling lies, telling sweet little lies
  3. Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
  4. Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement
  5. Accessible to some
  6. Reverse ordered lists
  7. Here’s what I didn’t know about “content”
  8. The beauty of progressive enhancement
  9. Here’s what I didn’t know about “color”
  10. Blogging is one of the best ways of learning
  11. How many browsers do you know?
  12. Why 543 KB keep me up at night
  13. One of my favourite accessibility testing tools: The Tab Key.
  14. Eines meiner Lieblingswerkzeuge für Barrierefreiheit-Checks: Die Tabulator-Taste.
  15. Reading recommendations: Animation on the web and vestibular disorders
  16. Here’s what I didn’t know about list-style-type
  17. Here’s what I didn’t know about…
  18. CSS pro tip for mac users: always show scroll bars in macOS.
  19. matuzo.at from scratch #1 - Designing and finding inspiration
  20. Bad accessibility equals bad quality
  21. matuzo.at from scratch #0 - introduction

2019 9

  1. Beyond automatic accessibility testing: 6 things I check on every website I build
  2. Please write and talk more about CSS
  3. Don't be afraid to share
  4. Building the most inaccessible site possible with a perfect Lighthouse score
  5. The Dark Side of the Grid (Part 2)
  6. 12 Tips for More Accessible React Apps (Slides, React Finland 2019)
  7. Improving the keyboard accessibility of Embedded CodePens
  8. The Dark Side of the Grid (Part 1)
  9. Hello World!

2018 3

  1. I Threw Away my Mouse
  2. Another Collection of Interesting Facts about CSS Grid Layout
  3. My Accessibility Journey: What I’ve Learned So Far

2017 5

  1. Writing CSS with Accessibility in Mind
  2. The Difference Between Explicit and Implicit Grids
  3. Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid
  4. A Collection of Interesting Facts about CSS Grid Layout
  5. Writing JavaScript with accessibility in mind

2016 3

  1. Writing HTML with accessibility in mind
  2. I totally forgot about print style sheets
  3. Getting started with CSS Font Loading