
If you've been working with SCSS, you know that **nesting** in CSS is possible
by using this **extension** of the language.

In SCSS, you could write something like this to style the children of a parent:

```scss
.parent {
  color: red;

  .child {
    color: blue;
  }
}
```

To achieve the same thing in CSS, you would have to write something like this:

```css
.parent {
  color: red;
}

.parent .child {
  color: blue;
}
```

This is not a big deal if you only have one child, but if you have multiple it
can get **messy and very repetitive**.

The W3C worked on a new module to finally **enable CSS nesting without the need
of a preprocessor**.

Their main reason for doing this was to increase the "modularity and
maintainability of CSS stylesheets." Furthermore, they explain their motivation
as follows:

> The CSS for even moderately complicated web pages often includes lots of
> duplication for the purpose of styling related content.

Here's how you can nest CSS without the need for SCSS:

```css
.parent {
  color: red;

  .child {
    color: blue;
  }
}
```

It's the same as in SCSS, so if you're used to that syntax, you don't have to
re-learn a lot!

It's also possible to use relative selectors when using nesting:

```css
.parent {
  color: red;

  &:hover {
    color: blue;
  }

  + .sibling {
    color: green;
  }
}
```

The only thing that's not valid is to use nesting selectors that start with an
**identifier**:

```css
.parent {
  color: red;

  input {
    color: blue;
  }
}
```

You can look at all the valid nestings in the
[specification](https://www.w3.org/TR/css-nesting-1/#nesting-rules). They also
provided an in-depth explanation of why there is a need for **restrictions** on
nested rule selectors.

I think that's a great addition to the language. If you want to try it out right
away, you can test it in the latest releases of Chrome, Edge, and Safari. You
can check out the browser support here:
[Can I use - CSS nesting](https://caniuse.com/css-nesting).

### Sources

- [CSS Nesting Module](https://www.w3.org/TR/css-nesting-1/)
- [CSS Nesting](https://developer.chrome.com/articles/css-nesting/)


CSS Nesting is finally built into the language. No need for a preprocessor anymore! In this post, I'll look at the spec and valid selectors.

CSS Nesting


If you're working on websites where the content is very flexible, where editors
can add text, for example, via a CMS, you often don't know "the final size, font
size or language of text".

It's hard, especially for headlines, to make two lines consistent in the number
of words per line.

Often it looks weird when a headline breaks on a specific breakpoint and just
one word gets wrapped in the following line.

We always had to use techniques that felt more like hacks to enforce a more
consistent wrap. Using `<br />` tags or `&nbsp;.` Counting the words with
JavaScript and adding `<span>` tags around them.

Very soon, we will have a new CSS property called `text-wrap: balance` that will
help us with this.

To use this CSS property, you will need to apply it like this:

```css
.my-headline {
  max-width: 20rem;
  text-wrap: balance;
}
```

This will ensure that the text is balanced over two lines and that the number of
words stays consistent. At the same time, it does not affect the element's width
and will only affect the words within the element.

Only using this property may not be enough because the text needs to wrap and
therefore needs a max width.

Here's a direct comparison of the same text with and without
`text-wrap: balance`:
![a screenshot showing two headlines, the first one does not wrap nicely, the second does.](/images/text-wrap-balance.webp)

Both have set the same max-width but only the second one has the new property
set. The first one has a weird break where it wraps only one word into the next
line while the second one is balanced over two lines.

Ahmad has a lot of great examples of where this new property could be useful:
[CSS Text balancing with text-wrap:balance](https://ishadeed.com/article/css-text-wrap-balance/)

[Adam Argyle argues](https://developer.chrome.com/blog/css-text-wrap-balance/)
that balancing headlines is the primary use case for `text-wrap: balance.`

It's currently only available in Chrome Canary and behind a flag. But it looks
promising that we will be able to use this property soon in all major browsers.

### Sources:

- [CSS Text balancing with text-wrap:balance](https://ishadeed.com/article/css-text-wrap-balance/)
- [CSS text-wrap: balance](https://developer.chrome.com/blog/css-text-wrap-balance/)


Text-wrap balance is a new way to specify with CSS how lines of text are balanced.

Text-wrap: balance


I never was a big fan of Sliders and Carousels. Also, creating them as a
front-end developer was always a pain. So whenever possible, I suggested using
**horizontal scrolling** as an alternative.

Combining it with the `CSS scroll-snap properties` allows us to create **smooth
and precise scrolling experiences**, which is super cool.

To get started, you have to look at the two properties, and how they play
together to make these scrolling experiences.

The first property is
[scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type).
It defines the type of scrolling behavior for the scroll container. It can be
set to `x, y, or both`. The default value is `none`.

for example if you set it to `x`, the scroll container will snap to snap
positions on its horizontal axis only.

The second property is
[scroll-snap-align](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align).
It defines the alignment of the snap position relative to the scroll container.
It can be set to `start, center, or end`.

If you set it to `start` for example, the snap position will be aligned to the
left of the scroll container. So every item you scroll by snaps until its left
edge is aligned with the left edge of the scroll container.

So far, the theory. Now let's look at some examples to showcase the different
possibilities for creating these scrolling experiences.

Here is a CodePen with examples of the different scroll snap types and
alignments:

<CodePen
  id="WNgWjaM"
  height="800"
  defaultTab="result"
/>

It's awesome see that we are able to create these scrolling experiences with CSS
only and without any JavaScript.


Today I learned about how you create a scroll snap effect in CSS with the scroll snap properties.

CSS Scroll Snap


A good friend of mine, [Tommy](https://github.com/ItsTommyGun), recently built
this cool **SVG drawing animation**. I was curious how he did it because I'd
never done something like this before, and he was kind enough to explain it to
me.

First and foremost, you need an SVG with a stroke because strokes can be dashed.
Here's the SVG we are going to animate like it's being drawn:

<svg
  width="165"
  height="47"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      stroke="#000"
      strokeWidth="2"
      d="m70.1895,4.65437c0,0 -2.48485,-0.39525 -6.58888,-0.67265c-4.99273,-0.33748 -8.23605,-0.67265 -10.70688,-0.67265c-4.11805,0 -8.18497,0.33517 -13.17771,0.67265c-2.46241,0.16644 -4.9458,-0.09537 -6.58885,0c-5.80915,0.33716 -8.2581,0.5181 -9.05968,0.67265c-3.58476,0.69114 -7.48447,2.55199 -11.53051,4.03588c-1.68001,0.61615 -2.62402,1.13847 -4.11802,2.01792c-1.88981,1.11244 -3.19367,3.40762 -4.11804,4.7085c-1.49051,2.09762 -2.05363,3.95418 -2.47082,6.0538c-0.39578,1.99189 0,4.03588 0,5.38117c0,0.67263 -0.47734,2.07563 0,3.36321c0.86053,2.3212 1.81754,3.2372 3.29443,4.7085c1.88267,1.87555 2.62402,3.15642 4.11804,4.03588c1.88978,1.11242 3.24017,2.78763 4.94163,3.36321c2.40622,0.814 6.48882,2.34985 9.05968,2.69058c1.62596,0.21549 6.596,0.23456 12.3541,0c8.26688,-0.33674 18.11936,-0.67265 25.53182,-0.67265c1.64722,0 2.47081,0.67265 9.05968,0.67265c13.17771,0 23.06097,0 28.82624,0c6.58885,0 14.83752,0.37197 23.061,0c7.44667,-0.33683 9.8939,-1.23755 10.70688,-1.34529c5.14167,-0.68144 10.79607,-1.92737 15.64853,-2.69058c4.35523,-0.68501 7.66779,-2.24494 9.88329,-3.36321c0.9908,-0.50011 1.5026,-0.73851 2.47081,-2.01794c0.43299,-0.57218 0.37788,-1.13908 0.82361,-2.01794c0.31518,-0.62143 0,-1.34527 0,-3.36321c0,-2.01794 -0.94246,-3.31891 -1.64722,-4.7085c-0.99668,-1.96517 -2.62752,-3.95618 -4.11802,-6.0538c-1.84875,-2.60179 -4.48905,-5.68417 -6.58885,-7.39909c-2.0998,-1.71492 -3.92127,-2.97033 -6.58885,-4.03586c-2.33965,-0.93454 -8.25684,-2.61075 -12.35412,-3.36323c-3.31308,-0.60845 -6.62075,-0.34941 -9.05966,-0.67265c-2.57086,-0.34073 -7.4325,-0.34125 -11.53051,-0.67265c-4.17915,-0.33796 -7.9421,1.13881 -12.8042,0.15254c-2.52765,-0.51275 -9.14435,0.40914 -14.06916,0.07626c-4.99273,-0.33748 -5.51904,-0.97084 -6.34265,-0.97084c-1.64722,0 -7.14913,-0.74891 -7.97274,-0.74891l-3.7274,0l-3.84628,0.45071"
      fill="none"
    />
  </g>
</svg>

And here's the HTML of it:

```html
<svg
  width="165"
  height="47"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      stroke="#000"
      strokeWidth="2"
      d="m70.1895,4.65437c0,0 -2.48485,-0.39525 -6.58888,-0.67265c-4.99273,-0.33748 -8.23605,-0.67265 -10.70688,-0.67265c-4.11805,0 -8.18497,0.33517 -13.17771,0.67265c-2.46241,0.16644 -4.9458,-0.09537 -6.58885,0c-5.80915,0.33716 -8.2581,0.5181 -9.05968,0.67265c-3.58476,0.69114 -7.48447,2.55199 -11.53051,4.03588c-1.68001,0.61615 -2.62402,1.13847 -4.11802,2.01792c-1.88981,1.11244 -3.19367,3.40762 -4.11804,4.7085c-1.49051,2.09762 -2.05363,3.95418 -2.47082,6.0538c-0.39578,1.99189 0,4.03588 0,5.38117c0,0.67263 -0.47734,2.07563 0,3.36321c0.86053,2.3212 1.81754,3.2372 3.29443,4.7085c1.88267,1.87555 2.62402,3.15642 4.11804,4.03588c1.88978,1.11242 3.24017,2.78763 4.94163,3.36321c2.40622,0.814 6.48882,2.34985 9.05968,2.69058c1.62596,0.21549 6.596,0.23456 12.3541,0c8.26688,-0.33674 18.11936,-0.67265 25.53182,-0.67265c1.64722,0 2.47081,0.67265 9.05968,0.67265c13.17771,0 23.06097,0 28.82624,0c6.58885,0 14.83752,0.37197 23.061,0c7.44667,-0.33683 9.8939,-1.23755 10.70688,-1.34529c5.14167,-0.68144 10.79607,-1.92737 15.64853,-2.69058c4.35523,-0.68501 7.66779,-2.24494 9.88329,-3.36321c0.9908,-0.50011 1.5026,-0.73851 2.47081,-2.01794c0.43299,-0.57218 0.37788,-1.13908 0.82361,-2.01794c0.31518,-0.62143 0,-1.34527 0,-3.36321c0,-2.01794 -0.94246,-3.31891 -1.64722,-4.7085c-0.99668,-1.96517 -2.62752,-3.95618 -4.11802,-6.0538c-1.84875,-2.60179 -4.48905,-5.68417 -6.58885,-7.39909c-2.0998,-1.71492 -3.92127,-2.97033 -6.58885,-4.03586c-2.33965,-0.93454 -8.25684,-2.61075 -12.35412,-3.36323c-3.31308,-0.60845 -6.62075,-0.34941 -9.05966,-0.67265c-2.57086,-0.34073 -7.4325,-0.34125 -11.53051,-0.67265c-4.17915,-0.33796 -7.9421,1.13881 -12.8042,0.15254c-2.52765,-0.51275 -9.14435,0.40914 -14.06916,0.07626c-4.99273,-0.33748 -5.51904,-0.97084 -6.34265,-0.97084c-1.64722,0 -7.14913,-0.74891 -7.97274,-0.74891l-3.7274,0l-3.84628,0.45071"
      fill="none"
    />
  </g>
</svg>
```

The key to the animation are the
[stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
and
[stroke-dashoffset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)
properties.

The `stroke-dasharray` property defines the **length** of the dashes, and the
`stroke-dashoffset` property defines the **offset** of the dashes.

```css
svg {
  stroke-dasharray: 372;
  stroke-dashoffset: 372;
  animation: draw 0.5s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
```

The `stroke-dasharray` property is set to 372, which means that the dashes are
372px long.

The `stroke-dashoffset` property is also set to 372, which means that the dashes
are offset by 372px, so the dashes are **not visible** at all.

The animation is set to 0.5 seconds, and the `stroke-dashoffset` property is
animated to 0, which makes the dashes **appear one after another**.

That's how we make our SVG look like it's being drawn!

The `stroke-dasharray` property can be set to any value. The higher the value,
the longer the dashes will be. The same goes for the `stroke-dashoffset`
property. The higher the value, the longer the dashes will be offset.

We set it to exactly the length of the path so that the dashes are the same as
the path, and there are no gaps.

Here's great article by CSS-Tricks that explains this technique in more detail:
[How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/).

And here is the result:

<CodePen
  id="PodJEge"
  title="SVG Drawing Animation"
/>

The only drawback is that you need to know the length of the path. That's it, a
simple SVG animation without any JavaScript at all!


Today I learned how to animate SVG drawings using CSS.

SVG Drawing Animation


I'm a bit annoyed by YouTube Shorts on my YouTube feed page. I'm there for for long-term format videos and Shorts just are not my kind of thing. 

Rach Smith recently shared this great post on <a href="https://rachsmith.com/remove-youtube-shorts/" target="_blank" rel="noopener">how to remove shorts from your YouTube Subscription feed with `:has()` &#8599;</a> and I was so happy when I stumbled over this post.

She uses it to set `display: none` on every on every item in the feed with child elements that are shorts. 

Here are the selectors she wrote, both for the grid and the list view:
```css
/* Grid View */
#items.ytd-grid-renderer>ytd-grid-video-renderer:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
  display: none;
}

/* List View */
ytd-item-section-renderer:not(:has(ytd-grid-renderer)):has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
  display: none; 
} 
```

You'd need to add that to a browser extension to apply these custom styles and then you're good to go. Bye bye Shorts!



Today I learned how you can remove YouTube Shorts from your subscription feed with CSS!

Removing YouTube Shorts with CSS


My wife is a UX designer and wanted to integrate text gradients into her
designs. I've never created something like this before and didn't know any
method to achieve this.

My wife is also pretty knowledgeable in web development (although she would
never admit that). She always makes sure that the elements she integrates into
her designs are possible to implement. She researched a bit and found a way to
do it with CSS.

This article explains in detail how it works:

<a
  href="https://cssgradient.io/blog/css-gradient-text/"
  target="_blank"
>
  CSS Gradient Text &#8599;
</a>

Here is the basic syntax for it:

```css
h2 {
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

And here you can check it out on Codepen:

<CodePen id="YzJEJzO" />

First, we create a linear-gradient on the background of the HTML element, in
this case, an h2. Then we use the background-clip property to clip the
background to the text. Finally, the text-fill-color property is used to make
the text transparent.

Combined, this enables the linear-gradient to be visible in the text. Awesome!
That's a great and easy way to create text gradients. And the best thing is,
it's also widely supported by all modern browsers.


Today I learned how to create beautiful text gradients with CSS

CSS Gradient Text


Today I learned about the **clamp css function**. A friend with whom I'm
currently working on a project,
[the aerosol alliance website](https://aerosolalliance.com) told me about it and
suggested using it for the project.

I'd never heard about or used it before, and was happy to learn something new.
The main idea behind using the CSS clamp function is that you no longer have to
define font sizes for every project.

Instead, using clamp gives you an easier way to define **fluid typography**.

The clamp function takes three values: **a minimum value, a preferred value, and
a maximum value**. The preferred value is the value that will be used if the
viewport size is in between the minimum and maximum values.

The minimum value will be used, if the viewport size is smaller than the minimum
value. Same logic is applied for the the maximum value.

The following example shows how to use the clamp function:

```css
font-size: clamp(1rem, 2vw, 2rem);
```

There is even a [generator](https://clamp.font-size.app/) available, which we've
used recently on the project mentioned above.

I'm really happy to have learned about this function, and I'm looking forward to
using it in the future.

Read more:

- [MDN Web Docs: clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)


Today I learned about the clamp CSS function which enables fluid typography based on the viewport size without the need for media queries

Clamp CSS function


In a recent newsletter I stumbled over the blog post by Josh Collins <a href="https://joshcollinsworth.com/blog/never-use-px-for-font-size" target="_blank">Why you should never use px to set font-size in CSS &#8599;</a>.

I've used them all so far in my web developer career, px, em and rem. In recent years it's always been rem. But I've never really grasped the idea behind using rem and avoiding px. So this time I decided to read up on it and I'm glad I did.

Josh states right at the beginning that using the wrong unit can lead to **risking overriding user's preferences, making it harder for them to use your website and potentially harming the design with unintented visual side effects**.

These are some serious issues you risk when using px and I've never thought about it that much before.

He explains in detail what px, em and rem are and shows their differences. The basic bottom line is, that em and rem scale in relation with font size, while px values will not. In other words: **em and rem work with the user's font size; px completely overrides it**.

It's one of the best articles I've read recently and I highly recommend it to anyone who's interested in understanding the differences between these units and what to use when.

Today I learned about the website TechPays which aims to remove the taboo on tech compensation in Europe

Never use px for font-size



Today I learned that there exists something like the <a href="https://worlds-highest-website.com/" target="_blank">&#8599; worlds highest website</a>.

It's exactly 18.94 kilometers high, wow! You can scroll it for ages. I'm not sure how long it takes to scroll to the bottom. 

The most interesting fact to me is, how fast you can get to the bottom by using a standard anchor tag with an id link to a div at the bottom. It happens in just a blink of an eye. 

The website consists of just one HTML container with pure CSS styling and has a height of 2840 em. What a great idea, I would have never thought of trying to build the highest website. 

It's also interesting to see that Firefox starts shrinking the main container as soon as the website gets higher than 18.939583 kilometers.

Today I learned about the worlds highest website

Worlds highest website


Today I learned that in the CSS Working Group Wiki exists an<a href="https://wiki.csswg.org/ideas/mistakes" target="_blank">incomplete list of mistakes in the design of CSS &#8599; </a>. If you check out that list you will notice a lot of things you maybe already thought about, why they were designed this way and it does not seem perfect.

The thing is: as the list says in the beginning, these "mistakes" can't be changed, because they would break the whole internet.

Imagine "correcting" one of these mistakes. It would be a breaking change. Some of these design desicions are VERY old, like they exist since the origin version of CSS, which was created in 1996. 

I can't even image how many websites would be affected by such a change.
 
So the only thing that is left for us to do here is look at this list, nod your head about the fact that `box-sizing` should indeed be `border-box` by default or `top` and `bottom` `margins` should never have been allowed to collapse and go on with our lifes.


There exists a list with mistakes made in the design of CSS, that can't be corrected because it would break the internet

Incomplete list of CSS mistakes


Having the ability to set the color of a whole section is a pretty common usecase in modern websites. If you're working with React there are two ways who come across your mind, when you think about developing this feature.

### Using the most basic approach in React: props

Imagine you have a bunch of components who are styled based on the theme color. We achieve that by using one of the most basic React features: props.

```jsx
...

// The component definition
const App = ({ themeColor }) => (
  <>
    <Header color={themeColor} />
    <Main color={themeColor} />
    <Footer color={themeColor} />
  </>
)

// Setting the theme color
<App themeColor='#9D3215' />
...
```

We just set the value of our themeColor on the root level, and this value is passed down to every child component. Than it's used to style the components.

### Using React.Context
Another well known approach is to use React.Context. You first define your context and wrapp your App component in a Context Provider.

```jsx
...

const ThemeContext = React.createContext('#9D3215')

const App = () => (
  <ThemeContext.Provider value='#9D3215'>
    <Header />
    <Main />
    <Footer />
  </ThemeContext.Provider>
)
```

Now every component is able to access this theme value by using the context hook.

```jsx
...

const Header = () => {
  const theme = useContext(ThemeContext)
  return <h1 style={{ color: theme }}>Logo</h1>
}

...
```

### Without any JavaScript

But wait! This is also possible without using any JavaScript. And with just plain CSS. The basic idea is to wrap your App with a section tag for example and set the color value on the section tag in specific css class.

Now every child component can check in their stylesheet, if the specific css class is present, and if it is, it can use the color value.
This is possible by setting the color value to currentColor! 

I created a working example on <a href="https://codepen.io/Mkuehb/pen/PoRXqrW" target="_blank">CodePen &#8599;</a>, check it out and let me know what you think.

And that's it! Setting the theme color for your whole app without any JavaScript! I think that's a pretty cool alternative approach. 


It's possible to set the theme color of your application without JavaScript. It just works with plain CSS.

Setting a theme color without JavaScript


I can't believe I'm actually writing this but CSS container queries are coming!
🥳 🎉

At some point I stopped counting the times when I was building a website layout
and came to a point where I needed to adapt an element **depending on the size
of it's container**.

This was just **impossible** to do with CSS.

The time has finally come where this will change!

[Check out the draft for it here](https://github.com/w3c/csswg-drafts/issues/5796).

It's still in a draft status but no matter what, this means css container
queries are coming and these are some exciting news!

I'm already looking forward to the time when we can use this in production!


CSS container queries


Today I learned that the `flex-gap` property is finally here! Putting space
between flex items was always annoying and now it gets super easy!

The browser support is still not the best but with landing in Chromium, the
first step is done: https://caniuse.com/?search=gap

You can read more about it here:
https://css-tricks.com/chromium-lands-flexbox-gap/


Flex-gap


Today I learned that **margin** can be considered harmful in some cases. Max
Stoiber tweeted about this and a lot of people, myself included, agree.

Many developers use margin to add space between components. This makes the
reusability of a component really hard. As Max puts it:

> "A well-built component should not affect anything outside itself."

I'm using Slot-Components whenever I want to add extra space between Components.

Learn more: https://mxstbr.com/thoughts/margin


Today I learned