Latest Articles

contain CSS

The CSS contain property

By Preethi Sam on August 19, 2024

CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.

Letting iOS “Text Size” Setting Affect Font Size on the Web

By Chris Coyier on August 16, 2024

On iOS, there is a setting for Text Size. I’ll do a video here for the current version of iOS (17.5.1) to be clear: As far as I ever knew, that controlled the text size on the OS itself and native apps. It didn’t effect websites. I think that’s largely true, but I just learned […]

JavaScript Reactivity Svelte

Fine-Grained Reactivity in Svelte 5

By Adam Rackis on August 14, 2024

Svelte is already quite lightweight and fast, but Svelte 5 still overs big improvements in fine-grained reactivity, meaning re-rendering as absolutely little as possible.

Color CSS Relative Color Syntax

Relative Color Syntax — Basic Use Cases

By Chris Coyier on August 12, 2024

Support for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.

Decorators JavaScript

Exploring the Possibilities of Native JavaScript Decorators

By Alex MacArthur on August 9, 2024

Native support for decorators is inevitable! It simplifies augmenting class methods, which can help with things like logging, memoization, debouncing, and dependency injection.

Svelte

Snippets in Svelte 5

By Adam Rackis on August 7, 2024

Out with slots, in with snippets.

Color Design Figma Typography

Figma Typography Variables

By Steve Kinney on August 5, 2024

Figma has support for variables, and they work with the various typography features you may want to set. For instance, you could create a variable called “Header Font” with a value of “Ideal Sans” and use it in many places.

I love the Interop project. We’re a couple of years into it, and each year it worked just like it was supposed to: features are chosen, those features are implemented (or fixed up) across all browsers. Choosing the features is somewhat democratic, and submissions are open for 2025. Remember last year I measured the positive sentiment of the open issues and compared it to what was ultimately chosen. It wasn’t terribly correlated but we did get some “popular” stuff still. There are already quite a few submissions. I’ve got some favorites already but I need to think a bit more to pick my favorites.

We just looked at how “animate to auto” (e.g. transition from a fixed value to a keyword like auto, max-content, etc.) is “opt-in” in a sense. You have to use interpolate-size: allow-keywords; to make it work or use a function like calc-size(), neither of which you accidentally do. This is because research showed that it would break things just enough to be annoying and the web don’t play like that.

In the same vein, there has been work done on making a “styleable” <select> element (as in, CSS control over what it looks like when you open it, which has never really been possible). This is another thing that needs to be opt-in, lest break websites (imagine CSS applied to a select menu accidentally that will all the sudden start working and cause who knows what all chaos). At first, it was going to be a new element <selectmenu>, which is maybe OK but quite hard to progressive enhance toward. Now things are pointing toward this opt-in:

select,
::picker(select) {
  appearance: base-select;
}Code language: CSS (css)

Una has the whole story. The demos are compelling, and can even be animated.

Little boosts of front-end development news, information, and advice — right to your feed reader of choice.

RSS

I’m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open.

html {
  /* This allows auto to be interpolated to, 
  along with min-content, max-content, and fit-content.
  It cascades as needed. */
  interpolate-size: allow-keywords;
}
.el {
  inline-size: 80px;
  overflow-x: clip;
  transition: inline-size 0.35s ease;
  &:hover,
  &:focus-visible {
    /* Requires interpolate-size: allow-keywords; */
    inline-size: max-content;
    /* Works without, and allows for calc() stuff */
    inline-size: calc-size(max-content, size);
  }
}Code language: CSS (css)

I’m using inline-size and max-content there, but it could be height and auto or block-size and min-content or whatever. There are some nice demos in the post with practical stuff like arbitrary list items entering and leaving the page, and accordions opening and closing. I imagine menus will be a big use case as well.

An open letter with a bunch of big names attached to it asking Oracle to give up the copyright on “JavaScript”.

It is therefore time to take active steps in order to bring the JavaScript trademark into the public domain, where it belongs.

It’s kinda weird, and only for historical acquisition reasons that they have it all. I don’t think it’s really doing Oracle any favors to hold on to it.

We could all just start saying “ECMAScript” instead, since that’s what mean for the most part anyway, but that would be quite the lift.

Wanna write?

Here's our page on guest writing. It's a win-win-win!

Latest Articles

The CSS contain property

Letting iOS “Text Size” Setting Affect Font Size on the Web

Fine-Grained Reactivity in Svelte 5

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

Figma Typography Variables

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

The CSS contain property

Letting iOS “Text Size” Setting Affect Font Size on the Web

Fine-Grained Reactivity in Svelte 5

Relative Color Syntax — Basic Use Cases

Exploring the Possibilities of Native JavaScript Decorators

Snippets in Svelte 5

Figma Typography Variables

The Beat

Interop 2025

Opt-In Styleable Selects

Arrival of Animate to Auto

Oracle, it’s time to free JavaScript.