Articles by CSS Tricks from November 2018

This is such an interesting conversation thread that keeps popping up year after year. The idea is that there could (and perhaps should) be in-browser tooling that helps web designers do their job. Th...

You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport. There are a plethora of JavaScript-based lazy ...

Harry Roberts writes about working on a project with a rather nasty design flaw. The website was entirely dependent on images loading before rendering any of the content. He digs into why this bad for...

Web performance is a huge complicated topic. There are metrics like total requests, page weight, time to glass, time to interactive, first input delay, etc. There are things to think about like asynch...

HTML and CSS are often seen as a burden.This is a feeling Ive noticed from engineers and designers Ive worked with in the past, and its a sentiment thats a lot more transparent with the broader web co...

Jon Sneyers:One of the main motivations for FUIF is to have an image format that is responsive by design, which means its no longer necessary to produce many variants of the same image: low-quality pl...

Autoprefixer is now up to version 9.3.1 and there have been a lot of updates since I wrote the original three-part CSS Grid in IE series — the most important update of which is the new grid-area...

Ire Aderinokun has written a nifty piece using loops and when we might consider replacing it with another method, say .map() and .filter(). I particularly like what she has to say here:As I mentioned ...

If you need to style your scrollbars right now, one option is to use a collection of ::webkit prefixed CSS properties. See the Pen CSS-Tricks Almanac: Scrollbars by Chris Coyier (@chriscoyier) on Cod...

Heres a great talk by Das Surma where he looks into what Houdini is and how much of it is implemented in browsers. If youre unfamiliar with that, Houdini is a series of technologies and APIs that give...

(This is a sponsored post.)When you need to add icons to your interface, the whole process can really suck. Should I use all these default bootstrap icons? Maybe Ill just use the same Google Material ...

I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: "Wordguru") was to create a card game that anyone can play with their f...

Exclusions (which are currently in a "working draft" spec as I write) are kinda like float in that they allow inline content to wrap around an element. But not exactly a float. Chen Hui Jing has an ex...

Aww, what a cute blog post title, right?Prettier is an "opinionated code formatter." I highly suggest using it. They have a document going deeper into the reasons, but their three marketing bullet poi...

Sometimes the seesaw of web tech is fascinating. Service workers have arrived, and beyond offline networking (read Jeremy's book) which is possibly their best feature, they can enable push notificatio...

Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another name for atomic CSS or using helper or utilit...

I find GraphQL extremely fun and empowering tech to work with, even as a novice just getting started. You've probably heard the elevator pitch before: it allows you to ask for exactly the data you nee...

An Overview of Render Props in ReactUsing render props in React is a technique for efficiently re-using code. According to the React documentation, "a component with a render prop takes a function tha...

We don't generally think of CSS animations or transitions inside of email, or really any movement at all outside of an awkward occasional GIF. But there is really no reason you can't use them inside H...

The subject of scaling CSS came up a lot in a recent ShopTalk Show with Ben Frain. Ben has put a lot of thought into the subject, even writing a complete book on it, Enduring CSS, which is centered ar...

This platform is perfect for teams sized at 2-to-200 — and gives every employee the same level of transparency.Every project management tool seeks to do the same instrumental thing: keep teams c...

Like Eric Bailey says, if it's interactive, it needs a focus style. Perhaps your best bet? Don't remove the dang outlines that focusable elements have by default. If you're going to rock a button { ou...

With the introduction of dark mode in macOS, Safari Technology Preview 68 has released a new feature called prefers-color-scheme which lets us detect whether the user has dark mode enabled with a medi...

JavaScript and images tend to get the bulk of the blame for slow websites, but Harry explains very clearly why CSS is equally to blame and harder to deal with:A browser cant render a page until it has...

Following up from Geoffs intro article on The Second "S" in CSS, lets now move the spotlight to the "C" in CSS — what we call the Cascade. Its where things start to get messy, and even confusing...

A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them.const b...

Say you have a stylesheet linked up like this:<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">But as the page loads, you're on a desktop browser where the screen...

This resonated with me:Its ironic to me that the numeronym a11y lacks accessibility: its not immediately decipherable by humans who arent in the club; and, in some fonts, its visually indistinguishabl...

In the grand tradition of every single poll question I've ever posted, the poll below has a has a fundamental flaw. In this case, there is no option between "In the last month" and "Never" but, alas, ...

One thing JavaScript template literals are great at is little blocks of HTML. Like:// Probably from some API or whateverconst data = { title: "Title", content: "Content"};const some_html = ` <d...

(This is a sponsored post.)Hey! I made a little page to explain all the ways in which this very site uses the Jetpack WordPress plugin. Here's the gist of it:Our Jetpack subscription gives us VaultPre...

I had to build a UI recently and (for the first time in a long while) I didn't have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in br...

There is no doubt that "functional CSS" resonates strongly with some people. If that term is new to you, I belive it's come to mean the same thing as "Atomic CSS" as defined by John Polacek here. Harr...

I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all scr...

The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling sm...

Both a sobering and interesting read from Stacey Tay on how the team at Carousell gathered the metrics to define a performance budget and, in turn, developed a better experience for their customers: O...

Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We're not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that eve...

Rachel hooks us up with what the CSS Working Group is talking about:Styling scrollbars. This would come with properties like scrollbar-width and scrollbar-color. The best we have right now is propriet...

I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuiti...

Heres a great post by Aditya Agarwal on the difference between render props and higher-order components in React. I particularly like the demo he chose to explain the two. But, to summarize:Higher-ord...

You know how you open a "project" in a local code editor? I guess different editors have different terminology for it, but essentially what you are doing is opening a folder/directory and it shows you...

(This is a sponsored post.)monday.com is a centralized platform for teams to manage every detail of their work, from high-level roadmap planning to the specifics of day-to-day tasks, while building a ...

Youre putting the finishing touches on your new million-dollar-idea your copy is perfect, your color scheme is dazzling, and youve found a glorious font pairing (who knew Baskerville and Raleway look...