The Curious Engineer

All blogs / Frontend / CSS / browsers

Sara Soueidan

sarasoueidan.com/blog

– The personal website of Sara Soueidan, inclusive Web UI engineer

Frontend / CSS / browsers

’15’20’25
Posts
81 from 26 Apr 2013 to 11 Oct 2026
Posting
now and then (1 in the last year)
Kind
personal blog
Feed
https://www.sarasoueidan.com/blog/index.xml

2026 1

  1. My top picks for Interop 2027

2025 5

  1. CSS to speech: alternative text for CSS-generated content
  2. 🎥 New (Video) Podcast: "Navigating the World of Web Accessibility with Sara Soueidan", with Kevin Powell
  3. CSS-only scrollspy effect using scroll-marker-group and :target-current
  4. Are 'CSS Carousels' accessible?
  5. Tag, You're It

2024 2

  1. Accessible notifications with ARIA Live Regions (Part 2)
  2. Accessible notifications with ARIA Live Regions (Part 1)

2022 1

  1. Setting up a screen reader testing environment on your computer

2021 9

  1. The CSS prefers-color-scheme user query and order of preference
  2. In Quest of Search
  3. A guide to designing accessible, WCAG-conformant focus indicators
  4. A couple of ways to highlight code syntax in Apple Keynote slides
  5. Design for reading: tips for optimizing content for Reader modes and reading apps
  6. Component-level art direction with CSS Container Queries
  7. Not Your Typical Horizontal Rules
  8. Accessible Text Labels For All
  9. How I set up Glyphhanger on macOS for optimizing and converting font files for the Web

2020 3

  1. Inclusively Hiding & Styling Checkboxes and Radio Buttons
  2. Optimizing keyboard navigation using tabindex and ARIA
  3. Global and Component Style Settings with CSS Variables

2019 5

  1. What a Year of Learning and Teaching Accessibility Taught Me
  2. Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report
  3. Accessible Icon Buttons
  4. The SVG Filters Series
  5. The Refactoring UI Book

2018 9

  1. Nested Links Without Nesting Links
  2. How do you mark up an accordion?
  3. Just write.
  4. On Switching from HEX & RGB to HSL
  5. SVG Filters: The Crash Course
  6. On Designing and Building Toggle Switches
  7. Going Offline
  8. Case Study: Optimizing SVG Text & Image Delivery with Inline SVG
  9. Cropping & Scaling Images Using SVG Documents

2017 2

  1. Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
  2. Migrating from Jekyll+Github Pages to Hugo+Netlify

2016 3

  1. Mimic Relative Positioning Inside an SVG with Nested SVGs
  2. Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG
  3. SVG Style Inheritance and the ‘Flash Of Unstyled SVG’

2015 18

  1. Animated SVG vs GIF [CAGEMATCH]
  2. Tips for Creating and Exporting Better SVGs for the Web
  3. CSS vs. SVG: The Final Round(up)
  4. CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
  5. CSS vs SVG: Styling Checkboxes and Radio Buttons
  6. Building A Circular Navigation with CSS Clip Paths
  7. CSS vs. SVG: Graphical Text Effects
  8. Styling the Contents of SVG<use> with CSS
  9. Art-Directing an SVG Embedded Using the HTML object element
  10. The State of SVG Animation
  11. Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS
  12. An Introduction To Graphical Effects in CSS
  13. A Primer To Background Positioning In CSS
  14. Building a Circular Navigation with SVG
  15. Extending the Color Cascade with the CSS currentColor Variable
  16. Better SVG Fallback and Art Direction With The picture Element
  17. Compositing And Blending In CSS
  18. Useful SVGO[ptimization] Tools

2014 15

  1. Tips For Optimizing SVG Delivery For The Web
  2. An Overview Of SVG Sprite Creation Techniques
  3. Styling and Animating SVGs with CSS
  4. A Guide to SVG Animations (SMIL)
  5. Making SVGs Responsive With CSS
  6. Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports
  7. Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute
  8. Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
  9. Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
  10. Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements
  11. Everything You Need To Know About The CSS will-change Property
  12. Moving Forward With CSS Shapes
  13. CSS Shapes 101
  14. CSS Regions Matter
  15. Animating CSS Shapes with CSS Animations and Transitions

2013 8

  1. Using CSS Regions With CSS Shapes For A Better Reading Experience
  2. Techniques For Creating Textured Text
  3. Techniques For Responsive Typography
  4. CSS Overlay Techniques
  5. Creating Non-Rectangular Layouts With CSS Shapes
  6. Navicon Transformicons: Animated Navigation Icons with CSS Transforms
  7. Building A Circular Navigation With CSS Transforms
  8. Lessons from the “Seductive Interaction Design” Book