Tips, Tricks, and Techniques on using Cascading Style Sheets. CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people.


How Facebook Avoids Ad Blockers

Dylan Paulus: Facebook actually hides 'dummy' DOM nodes between the 'Sponsored' text. These values are entirely random characters, with a random number of DOM nodes between them. Invisible characters. At this point our CSS ad blocker is completely broken. There is no way for us to possibly code every possible value in CSS. We've covered this before when Mike Pan noted it. Looks like it's evolved a bit since then, getting even a little tricker. I just opened my … Read article The post How Facebook Avoids Ad Blockers appeared first on CSS-Tricks.

Music and Web Design

Brad has a long history in music outside of being a web designer, and draws some interesting parallels. One is that he had reached for more complex music in an effort to become a better musician — and developers can do the same thing. The other is that the composition of music can be seen from very large parts down to very tiny parts, just like atomic design. I have two go-to connections between music and web design … Read article The post Music and Web Design appeared first on CSS-Tricks.

A Handy Sass-Powered Tool for Making Balanced Color Palettes

For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, "borrowing" from favorite brands, or just sort of randomly picking from a color wheel until a palette "just feels right." Our goal is to better understand what makes a palette "feel right" by exploring key color attributes with Sass color functions. By the end, you will … Read article The post A Handy Sass-Powered Tool for Making Balanced Color Palettes appeared first on CSS-Tricks.

Motion Paths – Past, Present and Future

Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up/down/left/right, but whatever curvy/wiggly/weird path you want. It's an interesting subject because there are so many different technologies helping to do it over time. SMIL, JavaScript-powered animation libraries, native JavaScript APIs, and even CSS via offset-path and friends. I think offset-path is funny - it was changed to that name from motion-path as you don't technically have… Read article The post Motion Paths – Past, Present and Future appeared first on CSS-Tricks.

Case Study: lynnandtonic.com 2019 refresh

Lynn Fisher walks us step-by-step through the redesign process of her latest outstanding personal website. In this design, increasing the width of the browser window will cause the illustrations on the page crack to open and reveal more within them: This case study reminded me that Lynn also has an archive of every case study and project that she’s made over the years and that it's most certainly worth checking out. Direct Link to Article — Permalink… Read article The post Case Study: lynnandtonic.com 2019 refresh appeared first on CSS-Tricks.

Techniques for Rendering Text with WebGL

As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering… they are all damn hard to do well in WebGL. Isn’t that weird? WebGL doesn't have a built-in function for rendering text. Although text seems like the most basic of functionalities. When it comes down to actually rendering it, things get complicated. How do you account for the immense amount of glyphs for every … Read article The post Techniques for Rendering Text with WebGL appeared first on CSS-Tricks.

CSS Architecture for Modern JavaScript Applications

There is a lot to like from Mike Riethmuller here: The title. When you're building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn't otherwise choose. The personal experience and pragmatism. Drawing on five years of consulting, he's seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says "it's … Read article The post CSS Architecture for Modern JavaScript Applications appeared first on CSS-Tricks.

Weekly Platform News: Upgrading Navigations to HTTPS, Sale of .org Domains, New Browser Engine

In this week's roundup: DuckDuckGo gets smarter encryption, a fight over the sale of dot org domains, and a new browser engine is in the works. Let's get into the news! DuckDuckGo upgrades and open-sources its encryption DuckDuckGo has open-sourced its “Smarter Encryption” technology that enables upgrading from HTTP to HTTPS, and Pinterest (a popular social network) is already using it for outbound traffic — when people navigate from Pinterest to other websites — with great results: Their outbound … Read article

Auto Layout lands in Figma

Here’s a fresh update to my favorite design tool that is thoroughly exciting: Auto layout! That means we can make frames that resize based on the size of the content within it. That's particularly useful for buttons in a design system where you want to drop a button on the page and then keep its left and right padding equal. However! The other exciting part of this update is that content can now be nudged down based on the … Read article

The Rising Complexity of JAMstack Sites and How to Manage Them

When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content to static sites without stitching together multiple third-party services? For people in the development community static site generators are a popular choice over traditional content management systems (CMS) like WordPress. By comparison static sites are usually lightweight, highly configurable, fast, easy to use and can be … Read article

Firefox 71: First Out of the Gate With Subgrid

A great release from Firefox this week! See the whole roundup post from Chris Mills. I'm personally stoked to see clip-path: path(); go live, which we've been tracking as it's so clearly useful. We also get column-span: all; which is nice in case you're one of the few taking advantages of CSS columns. But there are two other things I think are a very big deal: If you have fluid images (most sites do) via flexible-width containers … Read article

Filtering Lists Dynamically With Vue on the Server Side is Easier Than You’d Think

I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency to rely on big JavaScript frameworks to handle the work — like React, Vue, and Angular — but that can be overkill in some cases. That is, negatively affecting site performance, and thus accessibility. At the same time, these frameworks can make development easier and more … Read article


There are loads of microsites and developer tools for looking at color accessibility, including tools built right into browser DevTools. They often show you if a color passes AA or AAA WCAG guidelines. But color contrast is more complicated than that because there is a wide variety of vision impairments. This site from Corey Ginnivan takes two colors and then shows you a simulation of different vision types (e.g. Tritanomaly, trouble distinguishing blues) and whether the colors still pass OK. … Read article

The New Klim Type Website is Impossibly Lovely

I’ve spent the last hour hunched over the new Klim Type foundry website with my arms outstretched as if it was a fire in a very dark cave. Klim Type makes and sells wondrous fonts — like Tiempos, and National 2 or Pitch — and this fresh redesign now showcases them in all their glory. Here’s an example of the type specimen from the Calibre typeface: There’s a shocking amount of beautiful design in this little website and I … Read article

Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode! <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: yellow; stroke: black; stroke-width: 3px; } @media (prefers-color-scheme: dark) { circle { fill: black; stroke: yellow; } } </style> <circle cx="50" cy="50" r="47"/> … Read article The post Dark Mode Favicons appeared first on CSS-Tricks.

State of JavaScript 2019 Survey

Well, hey, look at that — it's time for this year's State of JavaScript survey! You have taken this survey last year. Or in 2017. Or in 2016. It's been going on for a little while now and it always lends interesting insights into things like the features developers are using, the popularity of specific frameworks, and general trends. And, since the survey is going into its fourth year, we may start to get some real insights … Read article The post State of JavaScript 2019 Survey appeared first on CSS-Tricks.

Save Big on An Event Apart for a Limited Time!

(This is a sponsored post.) If you could get one gift from your boss this holiday season, what would you want it to be? You know, other than the usual mouse pad, picture frame or, my favorite, the ol' coffee mug and Starbucks card combo. What if you were to receive something, hmm, more substantial? Like something that keeps giving three days instead of one. Or something that levels up your front-end chops. Or something that lets you network … Read article The post Save Big on An Event Apart for a Limited Time! appeared first on CSS-Tricks.

Masking GIFs with other GIFs

The other day, Cassie Evans tweeted a really neat trick that I’ve never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful GIF and place it on top of a monochrome one:  See the Pen Masking gifs with other gifs... (svg masking is cool) by Cassie Evans (@cassie-codes) on CodePen. Considering I’ve never done anything with SVG masks before, I … Read article The post Masking GIFs with other GIFs appeared first on CSS-Tricks.

Having a Little Fun With Custom Focus Styles

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab … Read article The post Having a Little Fun With Custom Focus Styles appeared first on CSS-Tricks.

“Headless Mode”

A couple of months ago, we invited Marc Anton Dahmen to show off his database-less content management system (CMS) Automad. His post is an interesting inside look at templating engines, including how they work, how CMSs use them, and how they impact the way we write things, such as loops. Well, Automad just released version 1.3.0 and it introduces a "headless" mode that brings it more in line with where the CMS landscape seems to be headed (pun … Read article The post “Headless Mode” appeared first on CSS-Tricks.