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 # Custom properties - aka "CSS variables" - are useful because they allow creating references to values similar to variables in other programming languages. Consider the following scenario which creates ..read more

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: provide an improved experience with well-supported modern properties Progressive Enhancements: provide an upgraded experience when these properties are supported without causing harm in unsupporting br ..read more

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 browser determines values for any property the impact of “computed value time” pitfalls around using custom properties with cutting-edge CSS why inheritance should inform your custom property ar ..read more

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. We'll learn about features to improve code organization and dig into layout techniques such as grid and container queries. Finally, we'll review real-world examples of context-aware components t ..read more

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 decide whether a fallback is needed use build tools and polyfills Finding Out About New CSS Features # Here is a list of ways you can find out about new and upcoming CSS features: following the develo ..read more

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 narrower spaces that flex independently of the viewport, such as a grid of cards. We'll explore three ways to create dynamic fluid typography rules by leveraging container query units and CSS custom propert ..read more

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 web design that we'll use as guidance: Contracting & Expanding - the way we consider how our design will adapt to a change in available space Flexibility - using primarily flexbox and grid in combin ..read more

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 trick to replace absolute positioning CSS transforms for animated effects handling for touch devices respecting reduced motion Gallery HTML # Here is our initial HTML, which is an ul where each li ..read more

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. Skip to: calc() clamp() min() max() calc()# Practical purpose of calc(): performing basic math operations, with the ability to interpolate between unit types (ex. rem to vw). This math function has the longest ..read more

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 Contrast Settings Accessibility Learning Resources What Does "Accessible" Mean?# Accessible websites are ones that are created without barriers for users of various abilities to access content or perfo ..read more