Vibes

Better 'safe' than sorry

Did you know that one of the goals with CSS is to prevent data loss? The goal of CSS is to keep content and elements visible to the user and does this by design, most of the time.

Read vibe

Higher than high

Imagine you’ve designed your web and have gone through it all in your favorite browser. Everything looks really good and you’re done. Then someone tests the same things on a real mobile device and the browsers toolbox is covering some of your content. Doh!

We all know we need to take into account the size of the screen and probably you’re using vh/vw for this. The problem with this is that the browser’s toolbar height is not taken into account on mobile devices. But luckily we have a nice solution with some other units.

body {
  /*Small viewport, 
  takes the address bar and the toolbar into consideration*/
  height: 100svh;
  widht: 100svw;
}
body {
  /*Large viewport, 
  doesn’t take the address bar and the toolbar into consideration*/
  height: 100lvh;
  widht: 100lvw;
}
body {
  /*Dynamic viewport, 
  adapts its value when the toolbars are visible or/and when they are not.*/
  height: 100dvh;
  widht: 100dvw;
}

They are all supported by the major browers, but one thing to know is that these don’t take the scrollbar into account. So you might want to use one unit value over the other. Go for it!

More attributes is fun!

Sometimes CSS is more competent than you might have thought about. One of those insight is that we have a lot of CSS functions and don’t always need to depend on javascript to do cool stuff. Just look at this one.

<p class="counter" data-value="1">big elefant</p>
.counter::before {
  content: attr(data-value);
  color: hotpink;
}

What does it really do? The ‘attr’ function gets the data value from the selected element and uses it in the stylesheet to show it and make it lovely pink. Works really well in both ‘::before’ and ‘::after’ pseudo elements for ‘content’. Support for other properties then ‘content’ is still experimental, but I bet you can come up with fun stuff with this one.

Avoid parent scrolling

Okay, time for a useful scrolling tool to have in the toolbox, especially if you have a smaller area on your page with elements that should be scrolled independently from the rest of the page. However, you might have encountered a frustrating issue where the scroll interaction passes to the parent element once it runs out of elements. But we have this one to the rescue:

article {
  overscroll-behavior: contain;
}

With ‘overscroll-behavior: contain’ scrolling is isolated to the contained element, preventing it from traveling to the parent. This is a nice trick especially for scrollable sidebars on longer pages. But I bet you can come up with more cases where it can come in handy.

Ever copy-paste?

You know how we often find ourselves double or triple clicking, and then clicking again because we didn’t get it right, just to highlight a piece of text for copy-pasting? Do you also know we can help our users to do this? This little trick can make it so much easier.

p {
  user-select: all;
}

This single line of code makes all the text within the ‘p’ element highlight with just one click, allowing to copy right away. ‘user-select’ can be applied to different elements such as ‘p’ or ‘span’, or even to a parent if it makes sense to easily select a longer piece of information for copying.

Neat, right!?

The superpower every developer needs

In every job advertisement in the market, there's a superset of skills we aim to match. A whole bunch of tech references and frameworks. So, which one of them is the most important to have as a superpower? None, if you ask me.

Read vibe

Pretty words

Sometimes, the magic lies in the tiny details. In an earlier beat , I showed ‘text-wrap: balance’ as a great way to manage headings. But have you heard about its ‘pretty’ counterpart?

The ‘pretty’ option can be applied to entire blocks of text, although its effect is noticeable primarily on the last four lines. Its main purpose is to prevent orphans—a single word—appearing alone on a line at the end of the text.

p {
  text-wrap: pretty;
}

This subtle change provides a solution to avoid hacky ways to handle those words that looks visually out of place.

Right now it only has support in Chomium but it won’t negatively affect the experience if someone is not in a supported browser. So use it! It will add some visual balance to the page for those in a browser where supported.

Combinding different media

Okay, we have taked about media queries before but here is another one. Media Queries Level 4 introduces ways to combine media queries with ‘and’, ‘not’ and ‘or’. The first exemples below can be read like device with no hover capability and the second one is device with no hover or on a device were the viewport is in landscape mode.

@media (not(hover)) {
  .element {
  }
}
@media (not(hover)) or(orientation: landscape) {
  .element {
  }
}

So fun with all the new stuff coming!

New ways with math functions

Meet the friends min(), max(), and clamp(). Three less used properties that can make your coding life easier.

Read vibe

Media syntax rage, oh sorry range

You know media queries? Same old, same old… or not? Media Queries Level 4 spec includes some new stuff including syntax improvements with a range type. This is suppose to make media queries less verbose when using it with propeties like width or height.

It used to look like this.

@media (min-width: 600px) {
  .element {
  }
}
@media (min-width: 600px) and (max-width: 1000px) {
  .element {
  }
}

And now we have this, which is readable in a way we are more used to.

@media (width >= 600px) {
  .element {
  }
}
@media (600px <= width <= 1000px) {
  .element {
  }
}

A new way of thinking about it. Stay tuned for more media query stuff!

Ever felt inert?

Lacking the ability or strength to move, is what ‘inert’ means according to a google search. Notably, in the frontend world, its meaning isn’t that far off. ‘inert’ is a boolean expression that can be used on a HTML element like this:

<dialog inert>...</dialog>

When used it tells the browser to ignore it. It also makes the browser ignore input events like click or focus. Used on a section it will ignore all the children in the section and elements like links or buttons can’t be reached. One useful usecase is when added to elements that are visually hidden or offscreen, like when collapsed or paginated. When ‘inert’ is added it gets removed from both the tab order and the accessibility tree.

This attribute is most effective when used on groups of elements. Otherwise, we also have the ‘disabled’ state in HTML and ‘:disabled’ in CSS to consider.

Nice right!?

Balance those beautiful words

Have you ever received a design from your UX/UI-designer where every word ends and aligns perfectly with the elements around it? But when you put it into code, it looks nothing like the original design?

As developers, we often lack information about the final size, font size, or language of a headline. All the necessary variables for effectively and aesthetically treating text wrapping are in the browser. However, now we have a solution to help balance text.

h1,
h2,
h3,
h4,
h5,
blockquote {
  text-wrap: balance;
}

‘text-wrap’ is used to control how text wraps within its container, and ‘balance’ enables automatic balancing of text lines across multiple columns, resulting in a visually appealing and balanced layout. It’s a small detail with a nice visual impact.

I absolutely love this feature!

All those children

You’re familiar with the nth-child selector, right? But did you also know about the more advanced nth-child selection with the keyword ‘of’?

As you probably know, the regular nth-child works like this: If you use :nth-child(2) on the ‘.super’ class, the browser selects the element that has the class ‘.super’ applied to it and is also the second child. However, using ‘of’ works slightly differently. The :nth-child(2 of .super) first filters all elements with the class ‘.super’ and then selects the second one from that list.

.super:nth-child(2) {
  /* Select the element with the class .super that is also the 2nd child */
  background-color: hot-pink;
}

:nth-child(2 of .super) {
  /* Select the 2nd child element that has the class .super applied to it */
  background-color: gold;
}

A pretty nice addition to our nth-child toolbox if you ask me!

Old but new margins

Margins are not new in CSS. We have been using them for a long time, often with ‘margin’ as a shorthand for ‘margin-top’, ‘margin-bottom’, ‘margin-left’, or ‘margin-right’. However, do you also use ‘margin-block’ and ‘margin-inline’? As you might imagine ‘margin-block’ is equivalent to ‘margin-top’ and ‘margin-bottom’ while ‘margin-inline’ is the same as ‘margin-left’ and 'margin-right.

margin-block: 10px 20px;
margin-inline: 2em, 4em;

Okay, is it just another words for the same thing then? Not really, because both ‘margin-block’ and ‘margin-inline’ adjust to the element’s writing mode, directionality, and text orientation. Take a look at this.

<div>Good vibes only</div>
<div class="vertically">Good vibes only</div>
div {
  margin-inline: auto;
}

.vertically {
  writing-mode: vertical-rl;
}

In the ‘div’ the text will be horizontally centered, and in the ‘vertically’ it will magically be centered vertically. This is just one example to give you an idea of the possibilities, can you see more?

Aspects of that ratio

What if I tell you that there is a property that adjusts the dimension of an element even if the parent container or the viewport changes? It’s called ‘aspect-ratio’. You can explicitly set the width or height of an element, and ‘aspect-ratio’ will use the dimension set to auto to maintain the specified width-to-height ratio.

.aspect-ratio-box {
  aspect-ratio: 3 / 2;
}

.aspect-ratio-box {
  aspect-ratio: 1.5;
}

If you set both width and height to specific measurements, that will override the aspect ratio, which is both intentional and useful.

Just a couple of tips: first, when used together with flexbox and grid, it works best without the default value, ‘align-items: stretch.’ And lastly, used with images together with ‘object-fit,’ it can work wonders.

A negative one

Did you know that you can use negative line numbers to position grid items with CSS Grid? It’s actually quite handy. As you probably know, you can place items along starting lines, counting from the left and spanning over a specified number of lines or columns. But what if you want to place items from the right? How can you do this in an easy way? You could count your items and place them according to the column in the grid, but that sounds like too much fuss. Instead, look at this.

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}
.grid-item {
  grid-column: span 6 / -1;
}

This means that the child in the grid will always start at the last line of the grid, covering the last 6 columns.

Pretty nice, isn’t it?

Inset this one

If I say top, left, right, and bottom, I imagine that you’re thinking about absolutely positioned elements. But what if I say ‘inset’? This is what we usually do.

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

But we have a shorthand! ‘Inset’ is a shorthand for the four inset properties: top, right, bottom, and left all in one declaration. It works exactly the same way as margin and padding, and you can use it in the same way as well.

.container {
  position: absolute;
  inset: 0;
}

inset: 2em 4em 8em 0; /* top right bottom left */
inset: 20% 10% 30%; /* top left/right bottom */
inset: 0 10px; /* top/bottom left/right */
inset: 24px; /* all edges = 20px */

Easy and clean!

The quickest centering?

Okay, how many times have you tried to find the easiest way to center a child element within its parent? We have multiple methods for achieving this, including margins, flexbox, text alignment, vertical align, tables, and so on. But have you ever tried CSS grid? It is a one-liner worth trying.

.parent {
  display: grid;
  place-items: center;
}

You simply create a grid with one cell and center your child element(s) in it. Done!

A few days following the path of past ideas

You ever get that feeling when a brilliant idea strikes and you're riding high on creativity? You feel like nothing can stop you in that inspirational bubble. You're all in, promising yourself you'll take action. But then...

Read vibe

Do you know - all?

Imagine that you’re about to style a button or a checkbox. Yes, I know, they are not pretty in default. You have cover up a lot of styling with new css. But what if I told you there is a simpler way?

all: unset;

This is the easiest way to, yes unset all properties of an element to it’s initial value. Or to it’s inherited values if they inherit by default. If you for example put it on a button it will look like plain text.

A clean canvas to start working on!

CSS Day 2023

Reflections from an inspired CSS girl.

Read vibe

What is new in CSS? (Part 2)

Some of the new CSS Features the latest years has given us and some upcoming ones.

Read vibe

What is new in CSS? (Part 1)

Some of the new CSS Features the latest years has given us and some upcoming ones.

Read vibe

A guide I wish I had

A terminal guide I wish I had when I first started.

Read vibe

Dare to jump?

First months as a freelance frontend developer.

Read vibe

Shape-outside - or a square?

Have you seen all those squares of text that we use around images? No matter the shape of the image. It's really not that inspiring if you ask me. So what can we do?

Read vibe

Bauhaus goes web

CSS-grid inspired by the design of a poster

Read vibe

Duger jag verkligen?

Impostor syndrome - Om duglighetsspöket som lurar bakom gardinerna i mångas sinnen.

Read vibe

Blend-mode typography

A play with text and colors

Read vibe