Accessibly Hiding Focus Outlines
Explains the importance of focus outlines for accessibility and provides methods to style or conditionally hide them using CSS and JavaScript.
Michelle Barker is a front-end developer and writer behind CSS { In Real Life }, a blog dedicated to modern CSS and real-world web development. She shares honest, practical insights on evolving CSS features, front-end techniques, and the web community.
227 articles from this blog
Explains the importance of focus outlines for accessibility and provides methods to style or conditionally hide them using CSS and JavaScript.
Explains the CSS drop-shadow filter, its advantages over box-shadow for non-rectangular shapes, clipped elements, and grouped components.
A developer compares Gatsby and Eleventy static site generators for a personal website redesign, discussing pros, cons, and the whimsical web trend.
A CSS tutorial on creating hover effects for irregular-shaped links in grid layouts using subgrid and accessibility considerations.
A tech professional offers free mentoring for underrepresented individuals starting careers in front-end development and tech.
A tutorial on creating a CSS-only hover effect where a caption slides up over an image, handling variable content height.
A developer shares a plain text list of all 148 CSS named colors, created for easy reuse in projects.
Overview of upcoming CSS layout features: Chrome's new Grid inspector, flexbox gap support, and experimental masonry layouts in Firefox.
A 90-second video and transcript explaining CSS Custom Properties (CSS variables), including syntax, scoping, defaults, and dynamic usage.
Practical advice for writing technical blog posts and web content, focusing on clarity, structure, and engaging readers effectively.
Explores two methods for making CSS Motion Path animations responsive, addressing the challenge of scaling fixed-size paths for different viewports.
A developer shares how they built an interactive web-based timetable using HTML tables, CSS, and JavaScript to manage family activities during lockdown.
Explains how to use CSS Motion Path (offset-path) to position text along a curved or circular path, making it selectable unlike transform-based methods.
A developer discusses building a simple, pragmatic front-end framework for team efficiency, balancing ease of use with flexibility and modularity.
Discusses the proposal to officially define CSS4 as a marketing and awareness tool for developers, summarizing arguments for and against.
A tutorial on implementing dark mode for websites using CSS custom properties and the prefers-color-scheme media query.
A guide to optimizing SVG files for web use, covering manual cleanup and automated tools like SVGOMG to reduce file size.
Explores CSS Motion Path for animating elements along SVG paths using only CSS, with examples and techniques.
A personal year-in-review blog post reflecting on the blog's growth, content goals, and technical decisions like ads, analytics, and a potential platform migration.
A technical tutorial on recreating the 'His Dark Materials' TV show logo using advanced CSS techniques like pseudo-elements and custom properties.