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

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. Here's our starting point - an exact mimic of the layout you received from design, good job! CSS for "Initial Comment Thread" .comment-list {list-style: none;padding: 0.5rem;margin: 0;display: grid;gr ..read more

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 Cascade Universal selector - * Attribute selector - [attribute] Child combinator - > General sibling combinator - ~ Adjacent sibling combinator - + Pseudo Classes# This is the largest category, and al ..read more

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 to select descendants. In this two-part mini-series, we'll explore some of the more advanced CSS selectors, and examples of when to use them. Part One (this article):# CSS Specificity and the Cascade ..read more

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 box model. the border is precisely the boundary of the element, sitting between its padding and margin, and it's width will impact the computed element dimensions the outline is next to but outside ..read more

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 directly intersect and are the only visible indication of an element. This intersection is what we can take advantage of to create a triangle shape. To illustrate how this works, we'll supply a differe ..read more

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 Windows High Contrast mode Now available: my egghead video course Accessible Cross-Browser CSS Form Styling. You'll learn to take the techniques described in this tutorial to the next level by creating ..read more