Thinking About Power Usage and Websites

Does good performance map to lower energy usage?

The Widening Responsibility for Front-End Developers

The checklist of things to do grows and grows.

Coding Fonts

A microsite that shows off fonts designed for writing code.

Design v18

The making of a fresh design for CSS Tricks.

Custom properties as state

A fun way to create a ‘living’ theme for your web site.

Fixing smooth scrolling with find-on-page

A hack to solve an issue with “scroll-behavior: smooth”.

Exploring color-contrast() for the first time

New CSS function gets the best color for a given contrast.

A complete guide to custom properties

Everything to know about CSS variables at a glance.

Auto-generated social media images

Pros and cons of different approaches and solutions.

target=blank

The astonishing difference between target=“_blank” and target=“blank”.

Zero-Width Space

Trick a system into thinking an URL isn’t a link or a single word is two words.

A look at building with Astro

A JavaScript framework that outputs zero-JavaScript static sites.

Early days for CSS scoping

There is a working draft spec for CSS scoping now.

Proposal for CSS @when

The next level of CSS Conditionals: when/else rules.

“Maybe a lot of the anti-CSS sentiment that people feel is rooted in the fact that CSS had gotten so good that more people are bothering to make it part of their responsibility.”

“Littttttle funny how ‘zero runtime’ has become an exotic way to mean ‘CSS’.”

Comparing HTML preprocessor features

A closer look at the features of more than a dozen HTML preprocessors.

CSS is going gosh-darned hog wild, I tell ya what

Get ready for “one of the hottest moments of innovation in CSS history.”

An interview with Elad Shechter on “the new CSS reset”.

First question: why do we need a new CSS reset?

Open Props (and custom properties as a system)

A smart technique to building a design system.

Top pens of 2021

100 amazing design and front-end creations.

Using the CSS Me Not bookmarklet to see (and disable) CSS files

A tiny tool helps to diagnose unnecessary CSS files.

CSS-Tricks is joining DigitalOcean

The popular site for front-end developers will continue to be open to anyone.

RSS

How we can simulate a social network with personal sites.

What does it look like for the web to lose?

It would suck, so let’s not have that happen.

Hex colors aren’t great at anything except being popular

An overview of color formats and their support in different design tools.

GPT-4 demo turns a crude sketch into a functional website

What cutting-edge artificial intelligence is capable of in web design.

Modern CSS in real life

New CSS things that really matter to real-world development.

CSS ‘margin-trim’ as a best practice?

What to expect from the upcoming CSS layout feature.

“If you make software that always works reliably, you’ve got a leg up.”

Web Components don’t need you

Chris Coyier’s take on the usefulness of Web Components.

Style scoped

What you can expect from the CSS @scope at-rule.

The ‘hanging-punctuation property’ in CSS

How to build a blockquote that starts with a curly-quote.

Quantity queries are very easy with CSS :has()

Ways to style an element related to its child count.

The popular vote of Interop 2024

Top wanted features for better browser compatibility.

What happened with the Web Monetization API?

We still need a simple way to send money to a website operator.

Heads up on custom scrollbars

Review your CSS, as Chrome now follows the standard.

Basic HTML ‘dialog’ usage

There are some cool gotchas to watch for.

Scroll-locked dialogs

CSS-driven scroll locking during overlay displays.

Where I’m at on the whole CSS-Tricks thing

The current state of the well-known front-end guide.

DOM to PNG directly in the browser

Take screenshots of webpages without backend service.

What you need to know about modern CSS

The incredible new additions to CSS at a glance.

Popover API is here

What you can expect from the new web API.

Footnotes progressively enhanced to popovers

An excellent UX upgrade for your footnotes.

Popovers also work as slide-out drawers

Perfect for mobile and effective on larger screens.

Browser support tests in JavaScript

Code snippets to check web feature availability.

YouTube embeds are bananas heavy

Lighter ways to add YouTube videos on your website.

What if you used Container Units for… everything?

“Surprise, surprise, that it’s not that easy.”

Relative color syntax: basic use cases

“It’s an extremely powerful way to manipulate colors in CSS.”

HTML dialog element vs. popovers

A look at their similarities, differences, and use cases.

View transitions staggering

A neat way to bring life to a menu expansion.

Sharing a variable across HTML, CSS, and JS

How to make use of a variable in three languages.

The web needs anchored popovers

An ideal choice for almost every ‘menu’ and ‘tooltip’.

The moment you need a database

When static sites need dynamic solutions.

Not good for the web

“The web will suffer should Google be forced to sell Chrome.”

PerformanCSS

“How CSS relates to web performance is a funny dance.”

Newfangled browser alternatives

A look at niche browsers with distinctive traits.