A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years.
A cross-browser feature as of the release of Firefox 128 in July 2024 is a new at-rule - @property - which allows defining types as well as inheritance and an initial value for your custom properties. We'll learn when and why traditional fallback values can fail, and how @property features allow us to write safer, more resilient CSS custom property definitions. Standard Use of Custom Properties #…
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience. Properties are explored for the following categories: Stable Upgrades : fix a hack or issue by replacing older techniques Stable Enhancements :…
Custom properties - aka “CSS variables” - seem fairly straightforward. However, there are some behaviors to be aware of regarding how the browser computes the final values. A misunderstanding of this process may lead to an unexpected or missing value and difficulty troubleshooting and resolving the issue. To help you use custom properties confidently and troubleshoot efficiently, we’ll review: how…
The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will explore modern project architecture, emphasizing theming, responsive layouts, and component design.…
The pace of the CSS language can be challenging to keep up with! Browsers release features and fixes monthly, and the CSS Working Group is constantly working on specifications. So, how do you know using a new feature is "safe" to use? And what are the considerations around making that choice? Let's review how to: find information on new features test for support determine when to use a feature…
Fluid typography is the term for designing font-size rules that responsively adapt the size based on the amount of available inline space. Before the availability of container query units, techniques usually relied on the viewport width - vw - unit. The viewport method is excellent for main page type, such as article headlines. However, viewport-based fluid typography doesn't quite work for…
The user's browsing environment is not predictable. Tell other developers, and for goodness sakes, tell your designers. Let's learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques. In 2018, Jen Simmons introduced the term "Intrinsic Web Design" in her talk " Everything You Know About Web Design Just Changed ." She also shared the principles of intrinsic…
There are currently four well-supported math functions in CSS . I've found each of them to be extremely useful in my daily work. These CSS functions can be used in perhaps unexpected ways, such as within gradients and color functions and in combination with CSS custom properties. We'll learn the syntax for each, view basic demos of their functionality, and explore practical use cases. calc() #…
Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device. This post will cover a range of topics: Focus Visibility Focus vs. Source Order Desktop Zoom and Reflow Sizing Interactive Targets Respecting Color and…
How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let's explore how things can break and how modern CSS provides solutions. This episode will cover handling for: variable content length and overflow unpredictable media sizes internationalization accessibility-related user settings We'll explore creating a robust comment thread component.…
Continuing from part one , this episode will focus on the advanced CSS selectors categorized as pseudo classes and pseudo elements and practical applications for each. We'll especially try to make sense of the syntax for nth-child . Part Two (this article): # Pseudo classes - ex: :checked / :focus Pseudo elements - ex: ::before / ::after Additional resources Part One: # CSS Specificity and the…
Whether you choose to completely write your own CSS, or use a framework, or be required to build within a design system - understanding selectors, the cascade, and specificity are critical to developing CSS and modifying existing style rules. You're probably quite familiar with creating CSS selectors based on IDs, classes, and element types. And you've likely often used the humble space character…
When it comes to CSS, sometimes a border is not really a border . In this episode, we'll cover the differences between: border outline box-shadow We'll also discuss when you might use one over the other. Refresher on the CSS Box Model # A key difference between our three border methods is where they are placed on an element and how they affect its dimensions. This behavior is controlled by the CSS…
Modern CSS - and modern browser support - provides us three excellent methods to create pure, basic CSS shapes. In this tutorial, we will examine how to create CSS triangles using: borders linear gradients clip-path Method 1: Borders # This is the first trick I learned to create CSS triangles, and it's still a solid standby. Given a zero width and zero height element, any values provided border…
We're going to create custom form input and textarea styles that have a near-identical appearance across the top browsers. We'll specifically style the input types of text , date , and file , and style the readonly and disabled states. Read on to learn how to: reset input styles use hsl for theming of input states ensure all states meet contrast requirements retain a perceivable :focus state for…
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance for single, multiple, and disabled select elements across the top browsers. A few properties and techniques our solution will use: clip-path to create the custom dropdown arrow CSS grid layout to align the native select and arrow custom CSS variables for flexible styling em units…
We'll create custom, cross-browser, theme-able, scalable checkboxes in pure CSS with the following: currentColor and CSS custom properties for theme-ability em units for relative sizing use of pseudo elements for the :checked indicator CSS grid layout to align the input and label Many of the concepts here overlap with our custom styled radio buttons from episode 18, with the addition of styling…
Using a combination of the following properties, we can create custom, accessible, cross-browser, theme-able, scalable radio buttons in pure CSS: currentColor for theme-ability em units for relative sizing appearance: none for full restyling access CSS grid layout to align the input and label Head's up : A lot of these styles overlap with the episode on custom checkbox styles which you might be…
Dear CSS community: I invite you to participate in a new project where you have the opportunity to challenge both your CSS and web design skills while learning in public. About Style Stage # StyleStage.dev is not just an informational landing page about the project - it is the foundational HTML which is intended to be restyled by contributors - like you! Style Stage started as a wild idea to…
This episode explores creating website heroes - aka "headers" - with one of my favorite ways to use CSS grid layout: by turning it into a canvas. Support notice : The essential properties used in these techniques - grid-template-areas and object-fit - are not supported below IE 16. Good news - that still means they are about 96% supported! Inspired by my years in marketing, here are the three…
CSS grid layout can feel daunting. In fact, I avoided it for several years and was a diehard flexbox fan. Then I found the following 3 powerful properties/techniques in grid that completely changed my tune. Spoiler, here's a tweet with all of them. Keep reading to learn a bit more! View tweet 1: Switch the Grid Flow Axis # I first desired this behavior when I wanted X-axis alignment of variable…
This episode will explore expanded usage of box-shadow and border-radius and conclude with a landing page demo using these properties to enhance the image presentation. You will learn: the expanded syntax of border-radius , and when to use which type of units to set values how to create multiple box-shadow layers about the box-shadow value inset how to "hack" box-shadow with inset to apply popular…
True container queries are a much asked for CSS feature that would be a complement to media queries but be placed on container elements instead of the viewport. Experimental CSS container queries are here! Here's Miriam Suzanne's container queries proposal explainer which has an experimental prototype in Chrome Canary. After you download Canary, visit chrome://flags to search for and enable…
Let's take the mystery out of sizing type. Typography is both foundational to any stylesheet and the quickest way to elevate an otherwise minimal layout from drab to fab. If you're looking for type design theory or how to select a font, that's outside the scope of this article. The goal for today is to give you a foundation for developing essential type styles in CSS, and terms to use if you wish…
How could I write a series called "Modern CSS Solutions to old CSS problems " without covering the classic question: "How do I center a div?" Well, this new resource has you covered! We'll look at 3 categories: Vertically and Horizontally (XY) Vertical (Y) Horizontal (X) Each category shows solutions that explore using grid, flexbox, and block element layout. Check out the full guide or jump to…
This guide will build on the previous episode "CSS Button Styling Guide" to explore the use case of icon buttons. We'll cover icon + text as well as icon-only buttons. Note : With SVG now having excellent support, the preferred practice is to use it for icon systems vs. icon fonts. We will not dive into SVGs specifically, but we will assume SVG icons are in use. Icon + Text Button # First, let's…
This guide will explore the ins and outs of styling an accessible, extensible button appearance for both link and button elements. Topics covered include: reset styles for a and button display, visual, size, and text styles accessible styling considerations extended styles for common scenarios Oh, the button (or is it a link?). I've battled the button since the days of hover delay from waiting for…
Let's create simplified responsive grid systems using both CSS grid and flexbox and ditch the bulk of 12-column grid systems from heavy frameworks. If you haven't really looked into grid, or rely on frameworks to think about flexbox for you, this will help you level up your understanding 🚀 Looking across the web, you will often see content laid out in a few select flavors: fullwidth of its…
This technique explores using: Animation with CSS transition and transform Using the :focus-within pseudo-class CSS grid for positioning dynamic centering technique Accessibility considerations for dropdown menus If you've ever pulled your hair out dealing with the concept of "hover intent", then this upgrade is for you! Before we get too far, while our technique 100% uses only CSS, there is a…
Responsively resizing images is a common need, and modern CSS provides tools for ensuring a consistent aspect-ratio while not distorting the images. And grid gives us flexibility for a gallery layout as well as positioning multiple elements in a shared space. This responsive gallery technique explores using: object-fit for responsive image scaling aspect-ratio for consistent image sizes A CSS Grid…
This tutorial will show how to use CSS grid layout for easy custom list styling in addition to: Data attributes as the content of pseudo elements CSS counters for styling ordered lists CSS custom variables for per-list item styling Responsive multi-column lists Update : The ::marker pseudo selector is now well supported in modern browsers. While this tutorial includes handy CSS tips for the items…
"Back to top" links may not be in use often these days, but there are two modern CSS features that the technique demonstrates well: position: sticky scroll-behavior: smooth I first fell in love with "back to top" links - and then learned how to do them with jQuery - on one of the most gorgeous sites of 2011: Web Designer Wall . The idea is to provide the user with a "jump link" to scroll back to…
In the not to distant past when jQuery was King of the Mountain and CSS3 was still worth being designated as such, the most popular tool for responsive background images was the Backstretch jQuery plugin . I used this plugin on ~30 sites prior to the following property becoming more supported (aka IE < 9 dropping in total market share): background-size : cover ; According to caniuse.com , this…
Once upon a time (approximately 2013), I wrote a jQuery plugin to calculate equal height columns. It ensured that the very specific scenario of a row with three columns would keep the content boxes equal height no matter the length of the content they contained. The dominant layout method at the time - floats - did not handle this problem. Flexbox Solution # When flexbox arrived on the scene, this…
For many years, I constantly referred to this article by Matthew James Taylor for a method to keep a webpage footer at the bottom of the page regardless of the main content length. This method relied on setting an explicit footer height, which is not scalable but a very good solution BF (Before Flexbox). If you mostly deal with SPA development, you may be confused about why this problem is still…