Vibes

Meet our friends cqw and cqh

You know those companies that have abbreviations for everything that you can hardly spell or pronounce? Well, guess what? We have the same in CSS! Allow me to introduce you to the siblings ‘cqw’ and ‘cqh’. ‘cqw’ stands for a percentage of the width of the container query and ‘cqh’ naturally represents a percentage of the container’s height. Take a look at this CSS.

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

.child {
  padding: 3cqw;
  font-size: 3cqw;
  border-radius: 0.5rem;
}

This means that we have a container with a child in it, and both the padding and the font-size will be 3% of the container’s width. This opens up for a very versatile responsive layout where we can place the child in a wide main section where it stands out distinctly, or in a small sidebar where the font and padding will adjust themselves to align well with the surroundings.

We have the possibilities to make stuff really responsive. We just have to learn the tools!

Have vmin and vmax up your sleeve?

When we’re delving into units, I have to tell you about the pair ‘vmin’ and ‘vmax’. The ‘vmin’ represents the smallest in percentage between the viewport width and height, while ‘vmax’ represents the largest between the two. This can come in handy when transitioning between portrait and landscape orientations. Imagine you have a grid, and with ‘vmax’ you can automatically adjust gap sizes to fit narrow viewport widths.

.grid {
  --grid-min: 40ch;
  --grid-gap: 2vmax;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min), 100%), 1fr)
  );
  gap: var(--grid-gap);
}

Let’s throw in the unit ‘ch’ as well, which approximately equals 40 characters in width. It’s equal to the width of the character ‘0’.

Play around with it, and I’m sure you find more use cases!

A new kind of cap?

Loads has changed in the world of CSS and one area that’s developed is CSS Units. One of the newcomers is a relative font unit called ‘cap’. Let’s dig deeper! It’s all about measuring the distance from the baseline to the top of capital or uppercase letters, typically the height of letters with flat tops. A neat use case for this one? Say you want to align an icon next to your text and make sure they’re both the same height and size.

Look at this:

<p>
  Good Vibes Only
  <svg>SVG icon in here</svg>
</p>

p {
  font-size: 2rem;
}
svg {
  height: 1cap;
  width: auto;
}

What height will the icon have? It’ll match the height of the font exactly, and the icon will always automatically align with the baseline of the font. No matter if the font grows or gets smaller due to new CSS or browser settings.

Kind of nice!

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!?

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!

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!

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!