Articles by CSS Tricks from February 2021

In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, s...

In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. Ill share these with you, but Im also curious what yall are adding to &#...

A wonderful post by Josh that both introduces CSS transitions and covers the nuances for using them effectively. I like the advice about transitioning the position of an element, leaving the original ...

Tobi Reif notes how the position of custom fonts set at very large font sizes can be super different, even in the same browser across operating systems. The solution? Well, you know how there are cert...

I recently started working on a Progressive Web App (PWA) for a client with my team. Were using React with client-side routing via React Router, and one of the first elements that we made was the main...

Sendbird is a service for helping you add social features to your app. Wanna add in-app chat? Sendbird does that. Wanna add in-app voice or video calls? Sendbird does that. Here’s how I always t...

It feels like a trend (and a smart one) for tech platforms to invest in really high-quality learning material for their platform. Let’s have a gander.Webflow UniversitySurely Webflow is thinking...

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but...

A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become. Random thing...

We’ve covered the idea of hiding things in CSS many times here, the most recent post being Marko Ilic’s “Comparing Various Ways to Hide Things in CSS” which did a nice job...

React component tests should be interesting, straightforward, and easy for a human to build and maintain.Yet, the current state of the testing library ecosystem is not sufficient to motivate developer...

Of all the reasons we love and use Jetpack for CSS-Tricksa poster child WordPress siteis that we can sleep easy at night knowing we have real-time backups running with Jetpack Backup. That way, no mat...

Lets talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich,...

One of the things I do when teaching beginning front-end development is ask students to describe what it’s like to read HTML. I give them pretty basic markup for a long-form article, and ask the...

On a default left-to-right web page, “hanging” an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal scrollbar that scrolls as far as ne...

Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background effects on the web.So, how are they made?...

Turns out you can use several different libraries to pass color information around components. Or, you could use custom properties, built right into CSS, have no decline in your own developer experien...

Ive been a manager for many years at companies of different scale. Through these experiences, Ive done my share of learning, and made some mistakes along that way that were important lessons for me. I...

Simeon Griggs with some nice UX ideas for a recipe website:No math. Swap between units and adjust servings on-the-fly.Offer alternative ingredients.Re-list the ingredient amounts when they’re re...

HTML has a built-in native audio player interface that we get simply using the <audio> element. Point it to a sound file and thats all there is to it. We even get to specify multiple files for...

Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I’d say, is what you’d expect, but things get weird when srcset gets involved. I poked my way...

I’ve been enjoying these little “You want…” style posts. Post titles like that are a little more… forceful for my normal taste, but I like the spirit of sharing a best pr...

Some nice coverage from Andy about CSS things that are truly new. If you haven’t looked at new things in CSS in, say, a year, I’d bet pretty much all of this will be new to you. A lot of &...

CSS is yet to have a switch rule or conditional if, aside from the specific nature of @media queries and some deep trickery with CSS custom properties. Lets have a look at why it would be useful if we...

I like Andy’s idea here: .wrapper { width: clamp(16rem, 90vw, 70rem); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem;}Normally I’d just set a max-w...

People really latched onto Brad’s framing. And for good reason. Front-end development has gotten so wide scoping that there are specialists inside of it. Two years ago, I cut it down the middle ...

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more s...

Malte Ubl’s list for:8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.Fluid width images in CSS, not ...

I love this piece from Remy Sharp where he argues that the web didnt get more complicated over the last 20 years, despite what we might think:Web development did not change. Web development grew. Ther...

High five to Netlify for the sponsorship. Netlify is a great place to host your static (or not-so-static!) website because of the great speed, DX, pricing, and feature set. I’ve thought of Netl...

The idea of an abortable fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() even multiple calls whenever we want.Heres a...

Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scr...

Asko Nmm reached a breaking point with front end:I want to have a personal life and not have to spend my nights reading up on some new flavour of *.js in fear that if I don’t I would soon …...

In this week’s roundup, WebKit’s prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay unt...

Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how elements respond to click, tap, hover, and acti...

Joy Heron bought a cool domain name and published an article there:Luckily, with modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software...

Components are great, arent they? They are these reusable sources of truth that you can use to build rock-solid front-ends without duplicating code.You know what else is super cool? Headless content m...

Nils Binder talks about a technique for spacing between two elements. Picture a header on a large screen with a logo in the upper left and nav in the upper right. Then a small screen, when they can no...

An interesting conversation came up at work the other day: Should we use the CSS float property now that we have CSS Grid and Flexbox?The short answer No! Well, mostly. Id only use it today for wrappi...

Maximiliano Firtman has a look at PWAs this year, including trying to get a bead on how widespread they are:At the end of 2020, approximately 1% of websites included a Service Worker, and 2.2% ha...

WordPress core is making the jump from jQuery 1.12.4 to jQuery 3.5.1! This is a big deal for lots of reasons like modern features, better DX, and security improvements to name a few. Right now, the p...

GraphQL is a query language and server-side runtime environment for building APIs. It can also  be considered as the syntax that you write in order to describe the kind of data you want from APIs...

What if an <iframe had within it another <iframe of the exact same source? Inception, as they say. Baptise Crespy does this all-important research in the name of art and science.Turns out brow...

Scott Jehl doesn’t mince words here:Removing media support from HTML video was a mistake. It means that for every video we embed in HTML, were stuck with the choice of serving source f...

Look at that! The :focus-visible pseudo-selector is now supported in Firefox, as of version 85 which shipped yesterday. I had to rush over to the MDN Docs just to confirm, and yep, the :focus-visible ...

I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements. Andrey Sitnik has done that here wi...

One of our readers checked out “Helping a Beginner Understand Getting a WebsiteLive” and had some follow up questions specifically about hosting providers. Here’s what they asked:Wha...

We’ve covered that individual <table> cells, <th> and <td> can be position: sticky. It’s pretty easy to make the header of a table stick to the top of the screen wh...

We don’t have “regular” nesting in CSS. Maybe this becomes a thing someday, or something like it. That would be cool, although that pre-spec doesn’t mention anything about medi...

As a web developer, I pay close attention to the design of video games. From the HUD in Overwatch to the catch screen in Pokemon Go to hunting in Oregon Trail, games often have interesting mechanics a...

Stefan Judis has a “Today I Learned” (TIL) post explaining how SVGs filters can be inlined in CSS. The idea is that CSS has the filter property which supports some built-in functions, like...

This little trick for gradient borders is super useful:.border-gradient { border: 5px solid; border-image-slice: 1; border-image-source: linear-gradient(to left, #743ad5, #d53a9d);}Here’s som...

React framework maturity, early container queries, WASM adoption, and monoliths. I’ll take all four, please. Not feeling like a particularly front-end-y? Jay says:Interestingly, the biggest deve...

The following article is co-authored by Uri Shaked and Michal Porag.Lets explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night...

Hey, we’re back with weekly updates about the browser landscape from ime Vidas.In this week’s update, the CSS :not pseudo class can accept complex selectors, how to disable smooth scrollin...

The React Hooks Announcement In Retrospect: 2 Years Later Ryan Carniato considers hooks to be the most significant turning point in front end in the past five years, but he also says hooks have muddi...

Font-size: An Unexpectedly Complex CSS Property From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at...

The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let...

Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of A...

Back/forward cache I always assumed browsers just do fancy stuff with the back/forward buttons and us developers had very little control. Philip Walton tells us it’s critical that we understand...

Heres a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol HTML a...

I poked at a tweet from Ken Kocienda over the weekend: Water not wet reports man standing in ocean. https://t.co/5oUUdWARTU— Chris Coyier (@chriscoyier) January 31, 2021I don’t know Ken, s...

One was the footer of an (older) U.S. Government website. The other was the navigation for AWS services from the AWS Console.The post I Saw Two Mega Menus Today… appeared first on CSS-Tricks.You...

A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vues template block. For instance, shifting a <div> element to a <span> elem...

Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that cat...

Robert Nyman:Open Web Docs was created to ensure the long-term health of web platform documentation on de facto standard resources like MDN Web Docs, independently of any single vendor or organiz...

Totally free course from Pablo Stanley. Can’t beat that.Figma is just blowing up, and for good reason. It’s good software aligned with what digital designers need. It’s fast. It̵...

My mind goes immediately to repeating-linear-gradient and hard-stop gradients when thinking of creating stripes in CSS. You make one stripe by using the same color between two color stops, and another...