Whether you’ve been writing CSS for a year, or for two decades, it seems we always need more from what browsers provide. A lot of great solutions to long-standing problems are landing in 2022.

Come hear about many of the most requested additions to CSS — including parent selectors, better viewport units, tools for dealing with !important battles, subgrid, wide gamut color, color font palettes and the #1 most requested, Container Queries

Read More

When you start creating a new website or web application, even before writing a single style, the browser applies styles to it — its default styles. Have you ever asked yourself who decides what those basic default styles will be?

In this talk, I want to teach you the different CSS levels in browsers, how they work, and how we can control and manipulate them.

Read More

When people say CSS is hard, they often mean that writing good CSS selectors is hard. As a developer, you need to make a lot of trade-offs: a more precise selector also comes with increased specificity, making it hard to overwrite style elsewhere. Targeting two sets of elements often means duplicating the selector and after twentyfive years of CSS, you still can't style based on child elements.

...except CSS now has solutions for all these problems, and more. In this talk we'll explore the impact the new :is, :where and :has pseudo-classes will have on the way you write CSS, how to use some of these features ahead of browser support and the amazing CSS they enable.

Read More

From hands, to chisels, quills, the printing press, and now the web, a written record of our existence has been a constant throughout history. Languages, and how they are depicted, have evolved alongside the tools we use to render them. Often overlooked in design, text content is an integral part of the visual aspect of an application and CSS allows us to control and manipulate its look and feel.

In this talk we will cover a little bit about the history of typography leading up to where we are today, how to make decisions about fonts and their usage in our application, and the CSS properties that allow us to manipulate our type for a polished beautiful design.

Read More

CSS refactoring is not an easy task. It requires a detailed analysis and audit to discover weaknesses and issues in the codebase. Choosing an effective refactoring strategy is also a challenge - The scope of changes can range widely per task, and the substantial changes can introduce bugs and regressions in the legacy codebase. In this talk, we’ll cover these topics and more - we’ll learn what makes the CSS codebase unhealthy and how we can combat regressions and catch them early in the development process.

Read More

When writing CSS, we have to carefully think about how we write and structure our code. Without any proper “plan of attack” the Cascade can suddenly work against us, and we might end up with pieces of code overwriting each other, selectors getting heavier and heavier, a few !important modifiers here and there, … — Uhoh!

To regain control over the Cascade in those situations there’s a new CSS language feature to help us: Cascade Layers (CSS @layer).

Let’s take a look at what these Layers are, how we can use them, where they fit in, and what benefits they bring.

Read More

:focus-visible is the CSS selector of your accessible focus management dreams! It targets elements that receive focus only when the user appears to be using an input modality that would benefit from a visual. This talk will cover the history of bad :focus behavior, how :focus-visible fixes things, and general tips for focus visualizations and management in your CSS and HTML.

Read More

In this talk, we demystify the browser’s rendering pipeline and explore the different ways you can enhance the user experience by improving your CSS rendering performance. We will get to the core of browser rendering optimization, uncover what’s hidden under the hood there, and identify the opportunities for improvement that one can seize with a few lines of CSS only and RenderingNG architecture on hand. During this session, we will take a look at how the web page is rendered in a browser, go over the basic Chrome DevTools’ workflow for analyzing runtime performance and see how to benefit from these metrics by introducing only small changes in the CSS. All of the covered implementations will be demoed for you to see their real-world application.

Read More

Container queries are on the horizon, and a polyfill means they are available now as a progressive enhancement. See how you can improve your responsive layouts by learning how container queries work through exploring practical use cases.

Read More

CSS has evolved considerably over the years, and some of the most exciting recent changes are coming from the color specification. Long gone are the days of just using RGB or HSL. Instead, there are new color formats, a new notation, new functions, and so much more.

We'll dive into the most recent CSS Color Module Level: review what's coming, show examples of the latest function definitions and explore the relative colors and how they can revolutionize white-labeling.

Read More

Thankfully, CSS has come a long way since the days when device-based breakpoints were the norm, but a lot of us got used to just throwing in a media query (or twelve) to make things responsive, and never quite broke the habit. Now that we have modern CSS features like grid, flexbox, calc, clamp, aspect-ratio, and more – in 2022, it’s finally time to ditch the media queries in your responsive code. Today, we’re going to start at the top and work our way down: from the big-picture display formatting all the way to the smallest CSS units. And as for your old stylesheets, don’t worry too much…we can refactor. We have the technology

Read More

A few years ago we decided CSS custom properties were the future for our UI library, and we've been reducing the focus on SCSS ever since.

Custom props have added a useful new facet to our design system's API; and given us the power of runtime variables across a platform-agnostic environment.

But CSS Custom Properties changed our CSS more fundamentally than we expected. We needed to break free of old habits to allow their strength to come to the fore.

Read More

We were all pretty excited when CSS grid layout subgrid landed in Firefox, but in the long wait for it to make it to Chrome, it's a value that has had little attention in the past year. However, it is on the way, and in this talk, I'll show you some interesting patterns that it enables, so you'll be ready to take advantage of these new layout possibilities.

Read More

CSS pre-processors have been one of the most useful tools in our web development toolbox for decades. But with the advent of CSS "variables", native nesting, and other great new specs, many of their use-cases seem to have been taken over by the language itself.

In this talk we will dive into the similarities and differences between the features introduced by CSS pre-processors and those of the newer CSS specs, when to use each, and how they can get along

Read More