The Curious Engineer

All blogs / Frontend / CSS / browsers

CSS In Real Life

css-irl.info

A blog about CSS, front-end development, the web, and beyond.

Frontend / CSS / browsers

’16’17’18’19’20’21’22’23’24’25’26
Posts
273 from 17 Apr 2016 to 28 Sep 2025
Posting
now and then
Kind
personal blog
Feed
https://css-irl.info/rss.xml

2025 10

  1. Clutter
  2. Quick tips (7)
  3. Notes (25)
  4. Reflections From Green IO 2025
  5. Articles (229)
  6. Creating CSS Theme Variables from a JS file
  7. Wholegrain Digital’s Response to the BBC’s Web Sustainability Report
  8. Debating the Merits of LLMs
  9. What I learned from migrating a Vue project from Vuex to Pinia
  10. Creating Static SVGs from GeoJSON

2024 35

  1. Sustainable Hardware Choices
  2. Education Needs Teachers, Not More Technology
  3. CSS Masonry Layout Syntax
  4. AI Environmental Impact Report
  5. A Versatile Markdown Shortcode for Eleventy
  6. I’ve Been Doing Blockquotes Wrong
  7. Notes From Green IO Conference
  8. Limitation Breeds Creativity: A Study in Composition with Custom Properties
  9. Demos (7)
  10. Logical Properties in Size Queries
  11. The Problem With Surveys (and Why You Should Take This One)
  12. Styling Tables the Modern CSS Way
  13. Everybody’s Free (to Write Websites)
  14. Feedback
  15. Modern CSS Layout is Awesome: Talking and Thinking About CSS Layout
  16. Another Anchor Positioning Demo: Multiple Anchors
  17. Progressively Enhanced Popover Toggletips
  18. Perspective
  19. Anchor Positioning and the Popover API for a JS-Free Site Menu
  20. RSS is Good, Isn’t It?!
  21. Manifesto for a Humane Web
  22. Shades of Grey with color-mix()
  23. The Perfect Site Doesn’t Exist
  24. Time to Ditch Analytics? Tracking Scripts and Web Sustainability
  25. Talking About Web Sustainability on ShopTalk Show
  26. Creating Color Palettes with the CSS color-mix() Function
  27. February 2024 Bookmarks
  28. Design Patterns that Encourage Junk Data
  29. How I Solved My Font Rendering Problem
  30. New and Improved Green Web Hosting Directory from the Green Web Foundation
  31. Eleventy Starter Project Updates
  32. Wrapping Up 2023
  33. Video: Building a Greener Web (Smashing Meets Goes Green)
  34. Where Do We Go From Here?
  35. Workshop Review: Data Visualisation Fundamentals with Andy Kirk

2023 64

  1. How Do You Vertically Centre an Element in CSS? (Even More) Easily!
  2. Interview: Beyond the Spotlight
  3. Greenhouse Gas Emissions From Streaming Digital Content
  4. Reporting on Website Carbon Emissions
  5. Testing the Performance of Social Media Embeds
  6. Wrapping Up National Blog Posting Month 2023
  7. Hide and Debug Empty Elements with CSS
  8. Oh No, Overflow!
  9. Kicking the Excessive JavaScript Habit
  10. You Have Something to Say That’s Worth Hearing
  11. Preventing Scroll “Bounce” with CSS
  12. Why You Should Hold Onto Your Devices For Longer
  13. What to Blog About When You Don’t Know What to Blog About
  14. Choosing a Green Web Host
  15. Scroll Timeline Parallax Effect
  16. Reality Check: A Series for Building Real Layouts
  17. A Fun CSS Text Effect
  18. Drawing Raindrops with CSS Gradients and Masks
  19. Thoughts on UX Engineering
  20. Using Flow Diagrams to Manage State in Complex Applications
  21. Getting Started with Container Queries
  22. The Joy of Lists
  23. Radial Gradients and CSS Trigonometric Functions
  24. Better Vue Application State Management with Vuex Modules
  25. Programming as a Craft
  26. Stop Using AI-Generated Images
  27. CSS Nesting is Here
  28. NaN or Not a Number?
  29. Handling Null, Undefined and Zero Values in JavaScript
  30. (Don’t) Mind the Gap
  31. Leaving Twitter Behind
  32. Owning Your Web
  33. Code Gardening
  34. Messing About with CSS Gradients
  35. Update on the COP28 Website
  36. National Blog Posting Month
  37. Finding Meaning in Our Work
  38. Introduction to Web Sustainability
  39. Styling External Links with Attribute Selectors
  40. Greenwashing and the COP28 Website
  41. Introducing the Web Sustainability Guidelines
  42. Reactivity in Vanilla Javascript
  43. Cool Tools
  44. Creating custom easing effects in CSS animations using the linear() function
  45. Video: Building a Greener Web
  46. Scroll Progress Animations in CSS
  47. Video: Modern CSS Layout is Awesome
  48. Thoughts From CSS Day
  49. Reducing Complexity in Front End Development
  50. Carbon Capture: A New Way to Measure Your Website’s Carbon Emissions
  51. Useful Resources for Improving Your Site’s Performance (and Reducing Carbon Emissions)
  52. Exploring :has() Again
  53. Creating VS Code Snippets to Speed Up Workflow
  54. A Native “Visually Hidden” in CSS? Yes Please!
  55. Setting Up a New(ish) MacBook
  56. Resizing with CSS
  57. Working with Colour Scales for Data Visualisation in D3
  58. Testing Colour Accessibility with Dev Tools
  59. Interop 2023
  60. Scheduling Netlify Deployments with Github Actions
  61. A Quick Website Redesign
  62. A Useful VS Code Extension for Environment Switching
  63. Disentangling Frameworks
  64. 2022 in Review

2022 36

  1. Correcting With Kindness
  2. Logical Border Radius
  3. Optimizing a Vue App
  4. Find Me On Mastodon
  5. Web Sustainability Resources
  6. Handy Tools For Mocking API Requests
  7. Sustainable Web Development Strategies Within an Organization
  8. CSS Halftone Patterns
  9. Web Sustainability and the Ethical Dilemma
  10. Detecting CSS Selector Support
  11. Creative CSS Layout (and the Flexible Web)
  12. Creative List Styling
  13. A Handy Use For Cascade Layers
  14. Quick Tip: Negative Animation Delay
  15. Tech Workers and Climate Action
  16. Logical Properties for Useful Shorthands
  17. Masonry? In CSS?!
  18. Breaking Out of a Central Wrapper
  19. CSS Day 2022
  20. Writing Useful Alt Text
  21. Quick Tip: You Might Not Need Calc()
  22. My Browser Support Strategy
  23. Animated Grid Tracks with :has()
  24. Exciting Times for Browsers (and CSS)
  25. Building an Interactive Sparkline Graph with D3
  26. The Web Doesn’t Have Version Numbers
  27. A Reason to Self-Host Fonts
  28. New CSS Features In 2022
  29. Are My Third Parties Green?
  30. A Blog Post About Blogging
  31. In Commission to No Emmissions: Videos from Toronto Web Performance Meetup
  32. I Finally Installed an Ad Blocker
  33. Aspect Ratio is Great
  34. Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds
  35. Not an NFT artist
  36. Building a Scrollable and Draggable Timeline with GSAP

2021 37

  1. 2021 in Review
  2. :has() Has Landed in Safari
  3. Building a Greener Web
  4. Reduce Your Website’s Environmental Impact With a Carbon Budget
  5. Don’t Forget the “lang” Attribute
  6. A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH
  7. IT Career Energizer Podcast
  8. Favourite Web Development Courses
  9. Accessible Toggles
  10. Respecting Users’ Motion Preferences
  11. The State of CSS 2021
  12. Evaluating Clever CSS Solutions
  13. Creating 3D Characters in Three.js
  14. Simplifying Form Styles With accent-color
  15. Simpler Block Spacing in WordPress with :is() and :where()
  16. Developer Decisions For Building Flexible Components
  17. Learning in the Open
  18. New Length Debugging Tool in Chrome Canary
  19. Masking One Element With Another
  20. Is it Time to Ditch the Design Grid?
  21. Building A Dynamic Header With Intersection Observer
  22. Inspecting Sizes
  23. Detecting Hover-Capable Devices
  24. Video: Dev Roulette Live
  25. Trigonometry in CSS and JS: A Series
  26. Creating Generative SVG Characters
  27. Toggling CSS Custom Properties with Radio Buttons
  28. Dynamic CSS Masks with Custom Properties and GSAP
  29. Development Budgets
  30. Paper Snowflakes: Combining Clipping and Masking in CSS
  31. Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties
  32. Animating Underlines
  33. Debugging Media Queries: A Dev Tools Wish List
  34. Favourite Things 2: New CSS Features, JS Libraries and More
  35. Finding an Element’s Nearest Relative Positioned Ancestor
  36. My Typical Day
  37. On a break

2020 32

  1. Goodbye, 2020
  2. Video: Using Tailwind with Wordpress
  3. A Utility Class for Covering Elements
  4. Troubleshooting Caching
  5. Color Theming with CSS Custom Properties and Tailwind
  6. Launching the New and Improved CSS { In Real Life }
  7. Tailwind Thoughts
  8. Making Work Experience a Positive Experience
  9. Quick Command Line Tip: Create Mutliple Files With the Same Extension
  10. Learning About CSS 3D Transforms and Perspective
  11. Why I Don’t Have Time For Your Coding Challenge
  12. Favourite Things 1: GSAP ScrollTrigger, Eleventy, and more
  13. Building the Zig-Zag Gradient Lab
  14. Accessibly Hiding Focus Outlines
  15. Drop-Shadow: The Underrated CSS Filter
  16. From Gatsby to Eleventy: Choosing a Static Site Generator for a Personal Site
  17. Irregular-shaped Links with Subgrid
  18. Mentoring
  19. CSS-only Slide-up Caption Hover Effect
  20. All the CSS Colours
  21. Exciting Things on the Horizon For CSS Layout
  22. Video: 90 Seconds on CSS Custom Properties
  23. Tips for Writing for the Web
  24. Different Approaches to Responsive CSS Motion Path
  25. Building an Interactive Timetable
  26. Positioning Text Along a Path with CSS
  27. In Search of Simplicity
  28. Do We Need CSS4?
  29. Quick and Easy Dark Mode with CSS Custom Properties
  30. Optimising SVGs for the Web
  31. Fun with CSS Motion Path
  32. Imperfect

2019 36

  1. 2019 in Review
  2. 7 Uses for CSS Custom Properties
  3. Beautiful Scrolling Experiences – Without Libraries
  4. Re-creating the ‘His Dark Materials’ Logo in CSS
  5. A Layout Trick for Building a Contact List
  6. Part 3: Building Our Sass Architecture
  7. Part 2: Module Bundling with Parcel
  8. Part 1: Building a Project Starter with NPM Scripts
  9. State of the Art CSS
  10. Building a Scrapbook Layout with CSS Grid
  11. Thoughts on the State of the Web
  12. Get ready for the CSS Grid Revolution
  13. How to Accessibly Split Text
  14. Variable Font Animation with CSS and Splitting JS
  15. Heatwave: An Animated CSS Sun Illustration
  16. Part 3: Auto-flow, Order and Item Placement
  17. How to Enable Experimental Web Platform Features in Chrome and Firefox
  18. Video: Building Complex Layouts at Future Sync 2019
  19. Pixel Pioneers 2019 Roundup
  20. Video: Super-powered Layouts at State of the Browser 2018
  21. Top Tips for Hiring Diverse Teams
  22. Subgrid is here
  23. How Git Stash Can Help You Juggle Multiple Branches
  24. Part 2: What the Fr(action)?
  25. Part 1: Understanding Implicit Tracks
  26. Controlling Leftover Grid Items with Pseudo-selectors
  27. Amending Your Past Commits with Git
  28. How to Create Better Themes with CSS Variables
  29. Building a Dependency-free Site in 2019
  30. How to Convince Your Team to Adopt CSS Grid
  31. Becoming a Tech Speaker
  32. To Grid or to Flex?
  33. My CSS Grid Wishlist
  34. A Year of Utility Classes
  35. Animating CSS Grid
  36. Solving a Tricky Layout Problem with CSS Grid

2018 21

  1. Wrapping Up 2018
  2. Reversing an Easing Curve
  3. Into the Matrix with SVG Filters
  4. Mentoring Junior Developers
  5. Negative Grid Lines
  6. 20 Inspiring Women in Tech
  7. Relative Grid Items with CSS Variables
  8. Notes from State of the Browser
  9. Super-powered Grid Components with CSS Custom Properties
  10. Experimental Layouts with CSS Shapes and Clip-path
  11. Building a Progressive Web App with Gatsby
  12. Speaking at Bristol JS on Super-powered Layouts
  13. Progressive Web Apps: An Introduction
  14. In Defence of Bad Code
  15. Great Front End Writers to Follow
  16. Practical Tips for Working with CSS Variables
  17. Introduction to Gatsby
  18. Aspect Ratio Cells with CSS Grid Layout
  19. CSS Grid: More Flexibility with Minmax()
  20. Using Pseudo-elements with CSS Grid
  21. Super-powered layouts with CSS Variables + CSS Grid

2016 1

  1. How to be a Good Co-worker

Undated 1

  1. Guest posts