Latest Articles

What Skills Should You Focus on as Junior Web Developer in 2024?

By Frontend Masters Staff on August 26, 2024

These are our recommendations for those of you early in your web developer journey. This is about tech and the real world stuff around it that you’ll need.

Clipboard JavaScript

Writing to the Clipboard in JavaScript

By Raymond Camden on August 23, 2024

The most basic use case, writing a bit of text to the user’s clipboard, is mercifully easy. But there is plenty more to know. Did you know writing image data to the clipboard ONLY works with PNG?

Anchor CSS Range Scroll-Driven Animations

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

By Temani Afif on August 21, 2024

We’ll make some extremely stylized range sliders with simple semantic HTML and some very fresh CSS. You might be surprised how custom these things can get these days.

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.

CSS iOS Typography

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.

After the big shakeup with masonry layout recently (Apple: Make it part of display: grid;! / Google: Make it display: masonry;! / Me: I’ve got questions and I’d rather see tabbing order issues fixed first), I was very keen to hear where it would go. It took 5 months, but we’ve got movement.

The CSS Working Group has combined the two CSS masonry proposals into one draft specification. The group hopes that this will make it easier to compare the two, and make a final decision. The Chrome team still believes that a separate masonry syntax would be the best way to proceed.

I admit I find it a bit brain-bending and mostly don’t care which way it goes. Both Geoff and Miriam have fantastic overviews and also both stop short of a strong opinion either way. To keep it spicy, I have a slight preference for keeping it in grid, as adding four new properties for this relatively niche layout need feels like a bit much, even if it does complicate grid by existing. Rachels feels strongly the other way.

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.

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

RSS

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.

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.

Wanna write?

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

Latest Articles

What Skills Should You Focus on as Junior Web Developer in 2024?

Writing to the Clipboard in JavaScript

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

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

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

What Skills Should You Focus on as Junior Web Developer in 2024?

Writing to the Clipboard in JavaScript

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

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

The Beat

Masonry Feedback, Round 2

Interop 2025

Opt-In Styleable Selects

Arrival of Animate to Auto