DEV Community: Karsten Biedermann

Get **** done. I hate what Trello has become

Karsten Biedermann — Wed, 11 Feb 2026 15:32:12 +0000

I hate productivity tools. Not in a cute, ironic way. I mean I genuinely hate how they look, how they feel, and what they've turned into.

They're bloated.
They're ugly.
And they're built for reporting, not for work.

Before Atlassian bought Trello, it wasn't pretty - but it was reduced. It did one thing. And it didn't pretend to be enterprise-ready. Since then, everything seems optimized for big organizations that confuse visibility with progress. More workflows. More dashboards. More pricing tiers. Less clarity.

At some point, I wasn't moving projects forward anymore.
I was managing software. That's when I stopped looking for a better tool - and started building one.

Productivity doesn't need frameworks. It needs space.
It needs restraint. Most tools fail at that because they're afraid to say no. I didn't build this for enterprises. I didn't build it for managers. And I definitely didn't build it to scale pricing per seat.

I built it for people who actually do the work -
designers, developers, small teams - who want a calm place to think and move things forward.

What you won't find here

No onboarding tours
No feature checklists.
No "power user" fantasies.
No upsells hiding behind simplicity

Just a board. ✅ f-rello.com

Reduced to what matters. Why it's free? Because focus isn't a luxury.
Because simplicity doesn't need monetization gymnastics.

And because collaboration shouldn't get more expensive the moment it starts working. If you're happy managing tools, this isn't for you.
If you miss software that gets out of the way - welcome.

Get **** done

The Best CSS One-Liner to Improve Performance in 2025

Karsten Biedermann — Wed, 16 Apr 2025 11:54:49 +0000

As CSS continues to evolve in 2025, there’s a powerful one-liner that can dramatically improve layout performance: contain-intrinsic-size. This property, when paired with contain, offers a simple but effective way to optimize rendering performance, particularly for dynamic content and complex layouts. In this article, we'll explore how contain-intrinsic-size works, its practical applications, and how it can be a game-changer for experienced developers.

Want to see more and explore in-depth examples? Check out my project, CSSToday: csstoday.dev

What is contain-intrinsic-size?

The contain-intrinsic-size property in CSS is used in conjunction with the contain property to define the intrinsic size of an element before it is fully rendered. This is particularly useful when you need to control the size of an element that will later be dynamically sized based on its content. It helps prevent unnecessary layout recalculations (reflows) and repaints, making it a crucial tool for performance optimization.

Basic syntax

element {
  contain: layout;
  contain-intrinsic-size: 200px; /* Set a temporary size */
}

In this example, the element is initially given a size of 200px while it waits for its final content to be rendered. Once the content is available, the size will be adjusted accordingly.

How contain-intrinsic-size works

1. Temporary placeholder size

The primary use case of contain-intrinsic-size is to provide a temporary placeholder size for elements that will later be resized based on their content or dynamic calculations. This placeholder helps the browser handle layout changes efficiently without triggering unnecessary reflows.

© Karsten Biedermann

Example:

.container {
  contain: layout;
  contain-intrinsic-size: 300px;
}

In this example, .container will initially be displayed with a size of 300px, even if its content eventually has a different size. This is particularly helpful when the size of the container needs to be calculated dynamically, and a predefined size helps stabilize the layout.

2. Preventing layout shifts

One common issue in web design is layout shifting , where the size and position of elements change during the page load. By using contain-intrinsic-size, you can prevent the browser from recalculating the layout unnecessarily, leading to a more stable layout, especially when loading content asynchronously, images, or dynamically generated components.

Example:

.card {
  contain: layout;
  contain-intrinsic-size: 250px;
}

This ensures that the .card component initially appears with a predefined size and only adjusts once the actual content is available. This technique is particularly valuable for lazy loading or asynchronous content loading , as it maintains a stable layout before the final data is fully rendered.

3. Responsive design flexibility

In modern responsive designs, it’s essential to have containers that adjust to different screen sizes. contain-intrinsic-size can be effectively used to define the size of a container relative to the layout of the parent element or the viewport.

Example:

.responsive-container {
  contain: layout;
  contain-intrinsic-size: 50vw;
}

In this case, the .responsive-container takes up 50% of the viewport width. This technique can be used to create fluid layouts that work well with dynamic content or images that need to adjust to the container's size.

Performance benefits of contain-intrinsic-size

The main benefits of using contain-intrinsic-size lie in performance optimization and the prevention of layout recalculations. In large, complex layouts or on resource-constrained devices, this technique can significantly reduce rendering costs and page load times.

© Karsten Biedermann

Avoiding reflow and repaint

By using contain, an element is treated in its own isolated layout environment , meaning that changes to this element won’t affect adjacent layouts. This is crucial for performance because the browser only needs to recalculate the layout when changes are made to the contents inside the element.

Real-world use cases

Example 1: Optimizing a gallery component

Suppose you have a gallery component that contains images, and the size of the images is not known upfront. Using contain-intrinsic-size ensures that the container always has a predefined size even before the images are fully loaded:

.gallery-item {
  contain: layout;
  contain-intrinsic-size: 300px;
  /* Additional styling for the image */
}

Example 2: Lazy loading images

In a lazy-loaded application, you can use contain-intrinsic-size to define the size of the container before the image is fully loaded:

.lazy-image-container {
  contain: layout;
  contain-intrinsic-size: 400px;
}

Example 3: Grid layout usage

In a grid layout where the size of cells depends on their content, contain-intrinsic-size ensures a consistent layout even before the content is available:

.grid-item {
  contain: layout;
  contain-intrinsic-size: 100px;
  /* Further layout options */
}

Conclusion

contain-intrinsic-size is a powerful and simple tool for developers who want to optimize the performance of their web applications. By providing a temporary size for elements before their final content is rendered, this property helps avoid unnecessary reflows and repaints, leading to a more stable and efficient layout. It’s particularly valuable for dynamic content, lazy loading, and responsive design, making it an essential part of modern CSS development.

This one-liner can drastically improve the user experience on your site, ensuring fast and smooth page loads without sacrificing performance or layout stability. Embrace this property in 2025, and take your CSS to the next level!

Want to see more and explore in-depth examples? Check out my project, CSSToday: csstoday.dev

The Best CSS One-Liner 90% of Developers Aren’t Using in 2025

Karsten Biedermann — Wed, 02 Apr 2025 11:33:09 +0000

Do you want more? Let’s check out my project, CSSToday: csstoday.dev/

A fix for a problem most developers gave up on

If you’ve been building websites for a while, you’ve run into this:

A headline wraps onto two lines — and the second line just looks… wrong.

Build better products with

CSS

The break feels random. The layout is technically “fine,” but visually unbalanced.

You see it on marketing pages, in CMS-driven layouts, in blog teasers, everywhere.

And for years, we’ve worked around it:

Inserting tags manually
Tweaking max-width endlessly
Writing JavaScript to measure and reflow text
Or just accepting it and moving on

Then came: text-wrap: balance

A single line of CSS that quietly fixes a layout problem you’ve probably dealt with for years.

h1 { text-wrap: balance; }

That’s it. One line.

And suddenly, the browser tries to balance the line breaks — distributing the words in a way that feels more even.

Instead of:

Design that works

everywhere

You get:

Design that

works everywhere

Same content.

Same layout.

But better rhythm, better readability — and zero effort.

Why it’s impressive

Because it solves a real, long-standing problem — without hacks, scripts, or extra markup.

Because it makes line breaking declarative.

Because we finally don’t need to fight it.

No trial-and-error
No JavaScript
No “Can we rewrite the headline?” conversations

Browser support

As of 2025 (caniuse):

✅ Chrome
✅ Safari
✅ Firefox
✅ Edge
✅ All major Chromium-based browsers

No fallbacks required.

If the browser supports it, it improves your layout.

If not, it does nothing — and that’s fine.

You can ship it today.

Do you want more? Let’s check out my project, CSSToday: csstoday.dev/

A practical migration handbook from Sass/SCSS to modern native CSS

Karsten Biedermann — Mon, 31 Mar 2025 11:59:32 +0000

Modern CSS has rapidly evolved, integrating many features that were once exclusive to Sass/SCSS. Features like CSS variables, native nesting, color functions, and cascade layers are now built into the language — eliminating the need for a preprocessor in most cases.

This article provides a practical guide for developers looking to migrate their codebases from SCSS/Sass to modern native CSS. We’ll walk through the essential steps, offer side-by-side comparisons, and suggest strategies to take full advantage of today’s CSS capabilities.

Migration checklist

Audit Sass usage: Identify all Sass-specific features used (variables, nesting, mixins, functions, @extend, loops).
Check browser support: Most modern CSS features have >90% support (Nesting, Custom Properties, Container Queries, etc.).
Start with variables: Replace $variable with --custom-property and use var(--name).
Convert mixins/functions: Use utility classes, CSS functions (calc, clamp, etc.), or restructure.
Eliminate @extend/loops: Refactor where needed — custom properties and utility patterns help.
Reorganize imports: Use native CSS imports or combine with build tools.
Test thoroughly: Ensure styles render correctly post-migration.

1. Variables

// Sass Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$border-radius: 4px;

.button {
  background-color: $primary-color;
  border-radius: $border-radius;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

/* CSS Custom Properties */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

.button:hover {
  background-color: hsl(from var(--primary-color) h s calc(l - 10%));
}

2. Nesting

// Sass Nesting
.card {
  padding: 1rem;

  .card-header {
    font-weight: bold;

    h2 {
      margin: 0;
    }
  }

  .card-body {
    margin-top: 1rem;
  }
}

/* CSS Nesting */
.card {
  padding: 1rem;

  & .card-header {
    font-weight: bold;

    & h2 {
      margin: 0;
    }
  }

  & .card-body {
    margin-top: 1rem;
  }
}

3. Color functions

// Sass Color Functions
$base-color: #3498db;

.primary {
  color: $base-color;
}

.primary-light {
  color: lighten($base-color, 15%);
}

.primary-dark {
  color: darken($base-color, 15%);
}

/* CSS Color Functions */
:root {
  --base-color: #3498db;
  --base-color-hsl: 204 70% 53%;
}

.primary {
  color: var(--base-color);
}

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 15%));
}

.primary-dark {
  color: hsl(from var(--base-color-hsl) h s calc(l - 15%));
}

/* Alternative using color-mix() */
.primary-light-alt {
  color: color-mix(in srgb, var(--base-color) 85%, white);
}

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

4. Functions

// Sass Functions
@function calculate-width($columns, $total: 12) {
  @return percentage($columns / $total);
}

.column-4 {
  width: calculate-width(4); // 33.33333%
}

.column-6 {
  width: calculate-width(6); // 50%
}

/* CSS Calc + Custom Properties */
:root {
  --grid-columns: 12;
}

.column-4 {
  width: calc(4 / var(--grid-columns) * 100%); /* 33.33333% */
}

.column-6 {
  width: calc(6 / var(--grid-columns) * 100%); /* 50% */
}

5. Mixins

// Sass Mixin
@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 0.5em 1em;
  border-radius: 4px;

  &:hover {
    background-color: darken($color, 10%);
  }
}

.primary-button {
  @include button-style(blue);
}

.secondary-button {
  @include button-style(green);
}

/* CSS Custom Properties + Classes */
.button {
  color: white;
  padding: 0.5em 1em;
  border-radius: 4px;
  background-color: var(--button-color);
}

.button:hover {
  background-color: var(--button-hover-color);
}

.primary-button {
  --button-color: blue;
  --button-hover-color: darkblue;
}

.secondary-button {
  --button-color: green;
  --button-hover-color: darkgreen;
}

6. Media queries

// Sass Nested Media Queries
.sidebar {
  width: 300px;

  @media (max-width: 768px) {
    width: 100%;
  }

  .sidebar-item {
    padding: 1rem;

    @media (max-width: 768px) {
      padding: 0.5rem;
    }
  }
}

/* CSS Container Queries */
.sidebar {
  width: 300px;
  container-type: inline-size;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.sidebar .sidebar-item {
  padding: 1rem;
}

@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

If you’re looking for practical tools to support your migration journey, check out csstoday.dev/ — it features an interactive SCSS-to-CSS converter (including color functions), deeper insights into native CSS features, and a small course with hands-on challenges.

Sass was a game-changer — but CSS has caught up. With the power of native features like variables, nesting, color manipulation, and responsive logic, there’s never been a better time to migrate. This guide helps you modernize your codebase and simplify your tooling. Happy migrating!

Ready to go all-in on modern CSS? Start with one component and build momentum. You’ll be surprised how much Sass you don’t actually need anymore.

Do you want more? Let’s check out my project, CSSToday: csstoday.dev/

From ferris wheels to web animations: trigonometry made simple 😏

Karsten Biedermann — Fri, 28 Mar 2025 07:53:40 +0000

Remember those sine, cosine, and tangent functions from math class? The ones associated with right triangles and scary formulas? If they made your head spin (pun intended), you’re not alone. But despite their intimidating reputation, these functions are surprisingly everywhere — in the music you listen to, the way things move in games and animations, even in how your browser can style a bouncing ball. In this Medium-style tour, we’ll demystify sine, cosine, and tangent (and even their inverses) in plain English. No deep math background needed — just your curiosity. By the end, you’ll see how these “trig” functions form the language of circles and waves that powers much of our digital world.

Sine, cosine, and tangent — In plain english

Let’s start with the basics: sine , cosine , and tangent are three functions that relate angles to ratios. That sounds abstract, so imagine a simple scenario: take a right triangle (one angle 90°). Pick one of the other angles and call it θ (theta). Now, sine and cosine are basically telling you how “tilted” that angle is in terms of vertical and horizontal components. In fact, sin(θ) is defined as the ratio of the triangle’s height to its slanted side (opposite/hypotenuse), and cos(θ) is the ratio of the base to the slanted side (adjacent/hypotenuse). If those definitions don’t stick, it’s okay – just picture a circle:

Sine of an angle gives the vertical component (how far up or down you are on a circle).
Cosine of an angle gives the horizontal component (how far right or left you are on a circle).
Tangent of an angle is a bit different — it’s essentially sine divided by cosine (vertical divided by horizontal). It tells you the slope or steepness corresponding to that angle.

What’s cool is that no matter the size of the triangle or circle, these ratios come out the same for the same angle. Spin around a circle and watch the sine and cosine values: they will always oscillate between -1 and 1. At 0° (facing right on the circle), cos is 1 and sin is 0. At 90° (facing up), sin is 1 and cos is 0. At 180° (left), cos = -1, sin = 0. At 270° (down), sin = -1, cos = 0. By 360° you’re back where you started, and the cycle repeats.

Figure: A comparison of the sine function (purple curve) and cosine function (orange dashed curve) over one full cycle (0° to 360°). Notice how cosine is just a shifted version of sine — at 0° cosine is 1 while sine is 0, and by 90° they’ve swapped. Both functions smoothly oscillate between -1 (minimum) and 1 (maximum). Sine starts at 0 and rises to 1 by 90°, whereas cosine starts at 1 and dips to 0 by 90°.

You can see from the figure that sine and cosine are like twin waves — cosine is essentially the same wave as sine, just shifted 90° in phase. Both are nice smooth curves. In contrast, tangent is a bit of a wild one: since it’s sin(θ)/cos(θ), whenever cos(θ) gets close to 0 (like near 90° or 270°), the tangent shoots off to very large values (or negative large) – in math speak, it has asymptotes (it blows up to infinity). Tangent is 0 at 0° (because sin(0)/cos(0) = 0/1 = 0), and by 45° tan = 1 (sin and cos are equal there). If you graph tangent it looks different – it doesn’t oscillate up and down like sine/cos; instead it goes up, down, up, down, repeating every 180° with those infinite spikes in between. But don’t worry: in everyday applications we rarely need the crazy parts of tangent, mostly we use it (or its inverse) to get angles or slopes , as we’ll see.

Key takeaway: Sine and cosine handle the smooth wave-like motion (bounded between -1 and 1), and tangent relates to slope (and can grow unbounded). Next, we’ll explore why these are super useful outside of geometry class.

What about the inverses (arcsin, arccos, arctan)?

Sometimes you have the result of a trig function and want to find the angle that produced it. That’s where inverse trig functions come in. The inverse of sine is arcsine (often written asin or sin⁻¹), the inverse of cosine is arccosine (acos), and the inverse of tangent is arctangent (atan). Inverse here means they “undo” the original function. For example, if sin(30°) = 0.5, then arcsin(0.5) = 30° (in general, arcsin 0.5 could also give 150°, but by convention arcsin returns the angle in the range –90° to +90°). These inverse functions output an angle.

Arctan (also called atan2 when taking two coordinates) is particularly handy in computing and graphics: if you know the horizontal and vertical components of a direction (say a joystick’s x and y or a point’s coordinates), arctan tells you the angle of that direction. In other words, if tan(θ) = opposite/adjacent, then θ = arctan(opposite/adjacent). This is how, for instance, your phone might compute the tilt angle from accelerometer readings, or how a game figures out that your character should turn 75° to face the target at (x,y). We won’t focus too much on the inverses, but it’s good to know they’re there whenever you need to go from a ratio back to an angle.

Waves everywhere: Sine in sound and nature

One of the most fascinating things about the sine function is that it appears everywhere in nature and technology as a fundamental wave shape. A sine wave is the purest form of a repeating oscillation. If you pluck a guitar string or play a single note on a keyboard, the sound you hear can be approximated by a sine wave of a certain frequency. The air molecules vibrate back and forth smoothly — if you graphed the air pressure changes over time, it’d trace out that familiar wavy sine curve. In fact, sine waves occur often in physics — from ocean waves to sound waves and even light waves. A pure tone (like a tuning fork’s note) is essentially a sine wave of air pressure.

Your speakers work by moving in and out in a sinusoidal pattern for each pure tone frequency. Why sine? Because it’s a naturally smooth oscillation. Sine is the epitome of a smooth, natural sway. Springs bouncing, pendulums swinging, and atoms vibrating — they all follow (approximately) sinusoidal motion. If you’ve ever seen a graph of a calm heartbeat or a smooth periodic signal, chances are it’s a sine-like shape. Nature loves sine waves because they’re stable and clean; any complicated vibration can actually be broken down into a bunch of sine waves added together (this is called Fourier analysis, which is beyond our scope, but it’s amazing!). So next time you hear a pure musical note or see gentle waves on a pond, you’re experiencing sine (and cosine) in action.

Smooth animations: Using sine in web design

So far, we’ve talked about how trig functions describe movements and waves in the real world. Now let’s look at how they’re used in the digital world — specifically in web development and animations. If you’re a web developer or just a visually inclined tech user, you’ve likely seen or created animations that move things around on the screen. Ever notice how good animations don’t move at a constant, robotic speed? Instead, objects often ease in and out of motion — starting slowly, speeding up, then slowing down smoothly to a stop. Guess what underlies many of those smooth motions? Yep, sine (and cosine) curves! A sine wave’s shape — slow at the top, fast through the middle, slow at the bottom — is perfect for creating natural-feeling movement. In fact, an “ease-in-out” timing in CSS or JavaScript animations often mimics a half-sine wave for the speed curve. The object moves fastest at mid-cycle and pauses momentarily at the turn-around points, much like a pendulum. This is far more realistic than a linear start-stop. Many animation libraries use sinusoidal easing functions under the hood to achieve this fluid effect. One author describes it well: linear motion feels constant and abrupt, whereas sine motion eases naturally, like a dance — speeding up, then slowing down gracefully, consider making a ball bob up and down on a webpage. We can use CSS animations to achieve this with a sine-like smoothness. Here’s a quick snippet:

.ball {
  width: 50px;
  height: 50px;
  background: tomato;
  border-radius: 50%;
  /* Animate the ball with a bobbing motion */
  animation: bob 2s infinite ease-in-out;
}
@keyframes bob {
  0% { transform: translateY(0); } /* start at original position */
  50% { transform: translateY(-50px); } /* move up by 50px at halfway */
  100% { transform: translateY(0); } /* back to start */
}

This CSS animation named bob moves an element (like a div with class "ball") up and then back down. The ease-in-out timing makes the movement slow down at the top and bottom, approximating that smooth sine-wave vibe. The result is a gentle up-and-down bobbing, as if the ball is attached to an invisible spring. If it were linear (animation-timing-function: linear), the ball would abruptly switch direction at the top, looking mechanical. With the easing (which is essentially using part of a sine curve), it pauses for a split second at the peak before descending.

Modern web tech even takes this a step further: CSS has gained built-in trigonometric functions! You can now directly use sin(), cos(), tan() and their inverses in CSS calculations. This means you could, for instance, position elements in a circle or create oscillating motions without any JavaScript, purely with CSS math. For example, you might see something like:

.element {
  --angle: 45deg;
  left: calc(50% + 100px * cos(var(--angle)));
  top: calc(50% - 100px * sin(var(--angle)));
}

In this snippet, --angle is a CSS variable (here 45°). The element’s left and top positions are calculated using cosine and sine of that angle, effectively placing the element on a circle of radius 100px around the center (50%,50% of the parent). If you then animate --angle from 0° to 360° (CSS can do this via custom property animation), the element would move in a perfect circle. How cool is that? 🎉 In the past, you’d have needed JavaScript to update the position each frame; now the browser can do it natively with CSS. This kind of capability is cutting-edge (part of the CSS Values and Units Level 4 spec), but it’s already available in modern browsers and showcases how important trig functions are even in styling web pages.

You can find another example on my project csstoday.dev

Even without writing CSS from scratch, if you use any no-code or low-code animation tools, when you choose a “circular motion” or a “pendulum swing” preset, you’re indirectly using sine and cosine. If you use a library like GSAP or anime.js and pick a sine easing, you’re literally saying “use a sine function to interpolate this motion.”

Conclusion

Trigonometric functions might have started as the study of triangles and circles, but they’ve grown into fundamental tools for describing the world — both physical and digital. Sine, cosine, and tangent are the math behind the music we hear, the waves we see, and the smooth animations we enjoy on our screens. They allow us to move from angles to coordinates and back again, making them indispensable for game developers, animators, engineers, and even hobbyist tinkerers.

Hopefully, this friendly overview shed some light on these functions without giving you a math headache. The next time you see a bouncing icon, a rotating graphic, or hear a clear musical tone, you’ll know that trig functions are quietly at work behind the scenes. Trigonometry is truly the hidden pattern in so many things around us. So here’s to sine, cosine, and tangent — the unsung heroes that make our digital (and natural) worlds go round (and round)! Happy observing, and happy coding if you’re inspired to put these functions to use in your own creative projects.

CSS 2025: More power for modern styling – beyond Sass

Karsten Biedermann — Wed, 26 Mar 2025 08:51:13 +0000

In my previous article (“Goodbye Sass, Welcome Back Native CSS”), I demonstrated how the CSS landscape has evolved so quickly that many features formerly exclusive to Sass are now natively available. While that article covered container queries and selectors like :is() and :has(), there’s much more to discover in 2025. Below, we’ll explore several fresh CSS features—from scroll-driven animations to customizable form elements and trigonometric functions.

Scroll-driven animations: Dynamic effects while scrolling

Scroll-driven animations let you smoothly bring content into view, highlight specific sections, or gradually transform layouts as the user scrolls. Modern browsers are experimenting with APIs that combine CSS and JavaScript functionality, allowing elements to animate automatically based on scroll position.

A simple example might be a heading that starts out transparent and fades in as you scroll. Previously, this required complex JavaScript or dedicated scroll libraries. Nowadays, native CSS techniques (in combination with the Intersection Observer or experimental scroll-linked animations) handle the job with fewer performance bottlenecks. Browser vendors continue to push toward an even simpler, more declarative approach.

@scroll-timeline slide-timeline {
  scroll-source: auto;
  orientation: block;
  scroll-offsets: 0%, 100%;
}

.box {
  scroll-timeline: slide-timeline;
  animation: slide-in 1s linear 1 forwards;
}

@keyframes slide-in {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

accent-color: Unified Appearance of Native Form Controls

Another standout feature is accent-color. It lets you adapt native checkboxes, radio buttons, or progress bars to match your color scheme without completely rebuilding custom controls:

input[type="checkbox"] {
  accent-color: #ff7a00;
}

In supported browsers, this property applies a unified accent color to elements like checkboxes. Instead of using hacks or extensive resets, you can retain the inherent accessibility of native widgets while aligning them with your brand design. Chrome, Edge, Safari, and newer Firefox releases already offer solid support for accent-color.

Trigonometric functions in css: sin(), cos(), tan()

For advanced layout and animation scenarios, the trigonometric functions sin(), cos(), and tan() open up exciting possibilities. These functions let you calculate values dynamically—particularly useful for spacing, rotations, or wave-like transitions:

.element {
  transform: translateX(calc(50px * sin(45deg)));
}

This approach delivers a flexible movement—no extra JavaScript required. More complex layout effects are also possible. Currently, trig functions are part of CSS Values and Units Level 4, with implementation progressing in all modern browsers.

@scope: local style scoping

While the above features provide new styling and animation options, @scope addresses style encapsulation. This rule applies CSS only to specific areas of the DOM:

@scope (.widget) {
  h2 {
    font-size: 1.2rem;
  }
}

Such selective targeting avoids unintended side effects in other parts of the page. Though some browsers have yet to finalize their implementations, @scope hints at how beneficial it could be for larger codebases needing more modular styles.

New color formats: OKLCH for precise colors

Anyone looking for vibrant hues and wide-gamut design should pay attention to OKLCH. Unlike HSL or RGB, OKLCH is a perceptually uniform color model:

.element {
  color: oklch(65% 0.25 120);
}

This yields smoother transitions and consistent contrast. Modern browsers now support Lab, LCH, and OKLCH quite broadly. For older versions, consider adding a fallback color value in hex or RGB.

View Transitions API: fluid transitions with minimal JS

::view-transition-old {
  opacity: 1;
}
::view-transition-new {
  opacity: 0;
  transition: opacity 0.3s;
}

It’s already functional in Chrome and Edge, while Safari and Firefox are still catching up. With a suitable fallback, you can begin experimenting in production environments.

Check out csstoday.dev for regular posts about modern CSS tips and advanced features. Staying informed will help you adopt new techniques as soon as they become widely available.

Conclusion

By 2025, CSS provides a powerful toolkit: scroll-driven animations, customizable form controls, trigonometric calculations, local scoping, and new color models all streamline modern front-end projects. With widespread browser support, many of these features can already be used today. The future belongs to native CSS—so keep an eye on emerging standards and best practices to stay ahead of the curve.

AI is changing everything in software development: Top 3 🔥 AI coding assistants

Karsten Biedermann — Mon, 14 Oct 2024 06:43:04 +0000

Artificial Intelligence (AI) will change everything in software development. I came to this conclusion at the end of 2023, after over 17 years of traditional programming. It was not easy for me to accept that the times are over when you had to check code line by line during bug fixing, and the nth attempt to deploy a project failed because of a simple error that you had overlooked countless times. Because it was also fun! Or in conversations, only those who understand why one might argue about whether semicolons or single quotes are better could follow along.

A generational shift is taking place, and in ten years, no one will talk about the great projects we implemented without AI. The next generation of developers will rather wonder why projects were executed so inefficiently. The field of prompt engineering will play a central role in the future and may possibly replace the classic title of "Developer."

In recent months, I have used several tools that feel like a glimpse into the future when using them. In all of them, I wrote prompts in natural language and focused on code generation using AI. I know that there are many other tools out there; however, some of them simply did not convince me in comparison, which is why I won't even bother recommending them to you. It is important to note that when you use one of these tools, the output may initially be more quantitative than qualitative. This is because the LLMs need to be trained first before they output exactly what you personally want.

ChatGPT (GPT-4.0, GPT-4.1 Preview)

For me, code generation using ChatGPT is currently indispensable and the best way to exploit the full potential of AI-assisted programming. The suggested code is now so good, except for a few exceptions, that I even delegate simple tasks directly to ChatGPT. It was also interesting for me that it is now possible to generate initial code for a project and output it as a ZIP file. ChatGPT now also remembers your preferences when you use a specific platform or technology and can adjust the output in the context of these specifications. At OpenAI, this is called "Memory." You can imagine that the biggest disadvantage when working with ChatGPT is the endless copy-paste processes, which in my opinion are acceptable because the quality is simply excellent.

Try it out: http://chatgpt.com

Cursor

Cursor is what I envision for the future when I implement software projects using AI. It allows you to ask questions and solve problems directly in your editor, with context from your entire codebase. The editor strongly resembles Visual Studio Code, which is because Cursor is an AI-powered VSCode fork. With Cursor, you can directly highlight existing code components and have the AI make changes via a prompt panel, which you can accept or reject section by section. Cursor can view your entire code in the context of your prompts, which is a huge advantage compared to the direct use of ChatGPT. In contrast to ChatGPT and Copilot, Cursor is context-sensitive. In addition to GPT models, other models such as Claude can also be used.

Try it out: https://www.cursor.com/

GitHub Copilot

GitHub Copilot was one of the first tools to enable the use of GitHub Copilot was one of the first tools to enable the use of prompts within an editor. In contrast to Cursor, however, the use of the AI assistant seems more cumbersome and less intuitive. Questions concerning your entire code file structure are answered by GitHub Copilot with the note that it cannot search data in your project or recommends the search function. Here, the lack of context sensitivity compared to Cursor is clearly noticeable. While you can reference the workspace using [@workspace/], this seems less intuitive in my eyes. More on this in the GitHub documentation: Chat participants.
However, within an open file and in the chat panel, Copilot works really well and suggests sensible and valid changes in the code based on your prompts. Interesting are also the slash commands like [@tests/], which can be entered in the chat panel and can, for example, automatically create unit tests.

Try it out: https://github.com/features/copilot

Switching between Tools)

In my opinion, switching between different tools is problematic. For example, if an LLM within your ChatGPT account is already well-trained, it seems very tedious to switch to another service or editor, as you basically start from scratch there and have to work with the new tool for a while before achieving a similar quality in code output. Have you had similar experiences in this regard?

Challenges

I believe there will be a transition phase where it will be difficult for non-programmers to find prompt engineers who have extensive programming experience and can apply this experience in AI-assisted programming. Traditional CVs will also lose more importance in the future because AI can offer efficient automations that effectively assess a developer’s hard and soft skills. For this reason, I founded devpilot. With devpilot, we want to provide both developers and companies with an optimal process to facilitate collaboration. On devpilot.dev, you will also find exclusively developers who generate code with AI. You can find more information here:
https://devpilot.dev/

The Future

If you have already written code line by line without AI for many years, ask yourself what will really change with AI. In the future, AI will write almost all the code you need for your projects. But of course, there will still be a need for architects. A better comparison is this: similar to pilots whom we trust because strict processes ensure that only those with the necessary knowledge and experience are allowed into the cockpit. This principle also applies to AI in software development: only those with the right skills and understanding can truly use these powerful tools to achieve the best results.

Goodbye SASS 👋, welcome back native CSS

Karsten Biedermann — Wed, 20 Mar 2024 10:39:53 +0000

Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my projects for over a decade. It enabled me to efficiently organize scalable and stable CSS packages. Even today, I still consider Sass to be an extraordinarily powerful tool. Yet, as we step into the year 2024, it's undeniable that CSS has undergone rapid development. Features that were once unique to Sass are now natively integrated into CSS, including variables and the latest highlight: CSS Nesting.

Variables

Defining variables was long seen as a unique strength of SCSS, allowing for the centralized management of many properties, a feature sorely missed in CSS for a long time. Today, however, variables can also be defined in CSS in a manner similar to Sass. A significant difference, however, is that Sass variables exist exclusively within the preprocessor context, while CSS variables can be used in the browser and even dynamically overwritten via JavaScript.

:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

CSS Nesting

The ability to define the style rules of one element within another significantly simplifies writing CSS. Instead of repeatedly using the same selector for subordinate elements or pseudo-selectors, nesting allows grouping these within a parent selector. This technique leads to a clear, hierarchically structured, and thus more efficient codebase.

With browser support of over 84% for CSS Nesting and 86% for the Nesting Selector, this technique is becoming increasingly accessible.

.blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

    .blog-item {
      border: 1px solid var(--neutral-200);

      & span {
        font-size: 1rem;
      }
  }
}

The :is Pseudo-Class

The :is pseudo-class revolutionizes the selector concept by accepting a list of selectors and styling all elements that match any of these selectors. This greatly facilitates the selection and styling of elements in the DOM.

:is(selector1, selector2, selector3) {
  /* styles */
}

Instead of long selector lists, you can use :is() to improve readability while avoiding a long selector.

The : has() pseudo-class

The CSS pseudo-class :has() provides a powerful way to select an element based on its descendants, similar to the application of conditional styles.

.hero:has(.hero-button) {
  background-color: var(--accent-50);
}

Container queries

Container Queries are considered the most significant innovation in web design since CSS3. They expand the concept of Responsive Design by allowing elements to adjust based on the size of their containers. This technology enables the design of an element to dynamically change depending on the context, leading to a more flexible and adaptive design.

.component {
  --theme: dark;
  container-name: fancy;
}

@container fancy style(--theme: dark) {
  .fancy {
    /* dark styles. */
  }
}

.parent-container {
  container-type: inline-size;

  .headline {
    font-size: 2rem;
  }

  @container (width >= 720px) {
    .headline {
      font-size: 2.5rem;
    }
  }
}

If the container fancy have the variable --theme: dark, add the following CSS.

Cascade layers

With cascade layers, we can avoid the nesting of classes, IDs, etc. for higher specificity by assigning our own layer (layer). Using the @layer at-rule and layered @imports, we can build our own layers of the cascade - from low-priority styles like resets and defaults, through themes, frameworks, and design systems, to the highest priority styles like components, utilities, and overrides. Cascade layers provide more control.

@layer utilities {
  .button {
    padding: 0.5rem;
  }

  .button--lg {
    padding: 0.8rem;
  }
}

Future of SASS

Does this mean Sass has become obsolete? Not at all. Mixins and functions, such as the conversion of pixels to rem, remain irreplaceable advantages of Sass. Nevertheless, I have decided to forego Sass for most of my projects. Instead, I use predefined code blocks and packages in my Sublime Editor, which has significantly improved my workflow.

Goodbye SASS?

I truly believe that in 2024, the benefits of Sass, including installation, usage, and compilation issues, no longer justify its use. The scalability and user-friendliness of modern CSS make it possible to do without additional tools.

Do you want more? Let’s check out my project, CSSToday: csstoday.dev/

With the advancement of CSS, I look forward to implementing small and large projects directly and straightforwardly.

Goodbye Sass, and thank you!

The power of CSS Variables 💪: A flexible solution for spacing utilities

Karsten Biedermann — Fri, 15 Mar 2024 07:57:45 +0000

In modern web development, flexibility and adaptability are key aspects that determine the effectiveness and aesthetics of a webpage. CSS variables offer just this flexibility, allowing developers to define values centrally and then reuse and adjust them across the project as needed. A particularly practical application for CSS variables is the control of spacing. This article highlights how CSS variables provide a higher degree of flexibility compared to traditional methods such as modified classes.

For my Themex project, I've employed spacing utilities in the form of CSS variables. If you want to learn more about the Themex project, please visit here: https://app.themexproject.com

Spacing with CSS Variables

Using spacing variables in web projects allows for flexible adjustment of spacings at different places on a webpage, such as the top or bottom margin of an element. This can significantly speed up and simplify development, as changes to spacing sizes can be easily made globally.

A key advantage: Fewer CSS classes

A significant advantage of using CSS variables for spacing is the reduction in the need to write numerous specific CSS classes. Traditionally, developers had to create separate classes for different spacings, leading to a bloated stylesheet and increased complexity. With CSS variables, you can instead define uniform variables for spacings and apply them, simplifying the codebase and easing maintenance.

Adding vertical spacing

To add spacing variables to an element, use the element's style attribute and define the desired variables as follows:

HTML

<div style="--space-top: 30px; --space-bottom: 100px;"></div>

CSS

@media (min-width: 992px) {
  [style*='--space-bottom'] {
    margin-bottom: var(--space-bottom);
  }
  [style*='--space-top'] {
    margin-top: var(--space-top);
  }
}

In this example, the element is given a top spacing (space-top) of 30px and a bottom spacing (space-bottom) of 100px.

Default behavior for mobile devices

By default, the spacing variables are configured so that the defined spacings are automatically halved for screen widths below 992px. This ensures optimized display on mobile devices without the need for additional adjustments.

[style*='--space-top'] {
  margin-top: calc(var(--space-top) / 2);
}

[style*='--space-bottom'] {
  margin-bottom: calc(var(--space-bottom) / 2);
}

Overriding values for mobile devices

If specific spacings for mobile devices are desired that do not follow the automatic halving, they can be explicitly overridden. This is done by using variables with the suffix -[device]:

HTML

<div style="--space-top-sm: 80px; --space-bottom-sm: 80px;"></div>

CSS

/* small devices */
[style*='--space-top-sm'] {
  margin-top: var(--space-top-sm);
}

[style*='--space-bottom-sm'] {
  margin-bottom: var(--space-bottom-sm);
}

/* medium devices */
@media (min-width: 768px) {
  [style*='--space-top-md'] {
    margin-top: var(--space-top-md);
  }

  [style*='--space-bottom-md'] {
    margin-bottom: var(--space-bottom-md);
  }
}

Why inside a style element and not directly in CSS?

For example, to allow components to be reusable, it is important not to hard-code spacing specifications within the component itself. Of course, it's possible to define default behaviours, but experience shows that this doesn't add value. In 80% of cases, spacing properties are overridden.

Here is an example of how it can work in practice (build with Themex): https://example.themexproject.com/

Themex's next update includes free and ready-to-use components.

Karsten Biedermann — Wed, 21 Feb 2024 17:41:01 +0000

Today, I'm excited to share a quick update on the recent advancements in Themex. Over the past few days, I've dedicated considerable effort to implementing a default design ready for immediate deployment, catering to the high expectations for a quality website UI. I've come to appreciate the critical role of an appealing initial presentation, a pragmatic approach that resonates with me. By now, we've developed a nearly complete starter kit for a website, with the exception of the footer.

New components added 🚀:

Feature
Team section
Content section
Testimonial
Pricing section
Navbar

Here are some visuals of our progress:

Explore the updates here: https://app.themexproject.com

What do you think about the new components? As always, I'm looking forward to your feedback 😊!

A new way to build websites! Introducing the next version of Themex

Karsten Biedermann — Thu, 08 Feb 2024 16:40:28 +0000

Hello everyone! 👋

First, I want to extend my deepest gratitude to all of you. Here on dev.to and other platforms, I've had the privilege of connecting with some incredible individuals. Every comment on my last article, piece of advice, or even a simple “like” has fuelled my drive to utilize the past days and nights to elevate Themex to the next level. Rather than developing something in isolation, my goal from the start was to collaborate with you to create a razor-sharp tool that could lay a stable foundation for web projects of all kinds. Thanks to your invaluable feedback, the new version of Themex has been significantly shaped by your suggestions. With your support, we've transitioned to an official pilot stage.

Visit the pilot of Themex

In the past few days, I've focused on improving the application's stability and refining the UI to enhance clarity and usability. I've also added more documentation. While it's still a work in progress and by no means final, I hope it's a step in the right direction. There are no new components in this release. However, I have enhanced the existing ones with additional attributes you want and divided the Button and Form categories to make customizing the appearance much easier. Also the export of the CSS variables has been made clearer.

The most significant change and most requested feature was usable snippets for React and Vue.js. The entire markup area now changes dynamically in real time depending on the changed property. This allows variables to be copied directly without having to generate the theme. In addition to React and Vue.js, I am considering developing or integrating snippets for Svelte and Angular. I am also exploring ways to refine the theme generation process. This would include the ability to export theme-specific components in your preferred format, whether it be as raw HTML or as components for React or Vue.js

The next steps on the roadmap 🚀

Designing the theme for both Light and Dark modes (a feature many of you have frequently requested)
Introducing new components and new variants of components soon. At this point, it might be interesting to share how I prefer which components to implement next: I try to focus on those that create the broadest intersection. This is also the reason why there are currently no specific Header or Footer components, as they can be highly individualized. However, this does not mean that Header and Footer components are excluded from future development.
Demonstrating practical use cases
Expanding the options for theme generation, including the ability to pre-select the output format—be it plain HTML, React, Vue.js, etc.

That's it from me for now. Now I'm looking forward to your feedback.  😊

Please feel invited to share your thoughts with me also on Discord: https://discord.gg/whVtcJrz

A new way to build websites? Feedback is needed for my application themex.

Karsten Biedermann — Mon, 29 Jan 2024 09:02:46 +0000

Hello everyone! 👋

I'm excited to invite you all to explore my newest project: Themex. As a frontend developer, I have often worked with various CSS frameworks such as Bootstrap and Tailwind. However, I noticed a challenge: revisiting a project after a long time and deciphering the work done can be quite daunting.

This observation led me to develop Themex. My main goal with Themex is to provide a solution that not only prioritizes reproducibility but also ensures clarity and intuitiveness across various website projects. Built with vanilla JavaScript, CSS, and HTML, Themex includes the core web technologies we all care about. The aim is to provide a foundation that can be built in minutes and relevant CSS properties have been included. This is compiled in the browser and then continued later in the IDE.

I believe Themex could be a practical solution. To get an idea of what Themex offers and how it can transform your workflow, visit http://themexproject.com/ 🚀. I'm excited to hear your feedback and look forward to seeing how I can develop further with your insights!