Interesting CSS Topics

Last updated on May 2022

This page lists some CSS features that I thought were interesting and don't come up often during normal day-to-day work.

This page is a WIP, I will update it every so often. It isn't going to be super in depth in any topic, its just a list of things I think are interesting.

Mix blend mode

You can use the mix-blend-mode property in CSS to set how an element should beldn with its background and its parent.

There are a few values you can set, including:

.normal {
    mix-blend-mode: normal;
}
.multiply {
    mix-blend-mode: multiply;
}
.hard {
    mix-blend-mode: hard-light;
}
.difference {
    mix-blend-mode: difference;
}

Here is a demo. The first half shows an image with different blend modes. Its always the same .jpg image used. The second half shows black/white text on a black/white background.

This demo shows all available blend mode options:

.child-element {mix-blend-mode: normal;}

Example inner content

Background: white

Example inner content

Background: red

Example inner content

Background: yellow

This can lead to some cool effects, such as this text effect (only works on 'difference').

As you scroll the text colour changes to be the opposite of what the background colour is (in this case from white to black as you scroll down)

.child-element {mix-blend-mode: difference;}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac iaculis enim. Fusce posuere eu ligula ut fermentum. Vestibulum sit amet magna in tortor convallis dignissim mattis sit amet ligula. Aliquam pretium neque velit, non dictum urna dapibus vitae. Integer condimentum tincidunt ante, sed posuere turpis tempor ac. Quisque ultricies massa in diam rutrum semper. Ut pretium sagittis sodales. Suspendisse metus urna, scelerisque ac vestibulum eu, tristique et est. In hac habitasse platea dictumst. Pellentesque mollis dui eu porta fermentum. Duis suscipit metus ut quam semper, ac iaculis justo pretium. Donec sem erat, placerat sed justo vitae, interdum molestie lacus. Maecenas vitae elementum dolor, nec lobortis ex.

The above effect is done by having a parent element with a black/white background (see here), and then the text in the child element with the blend mode set to difference.

(View the source, all the relevant CSS is inline in the style)

There are more CSS length units than I knew...

I think we all know about some common size/length units such as px, em, and vh.

But there were some I found out about recently (and this is after 15+ years doing web applications...) that I am sure I do not even recall seeing. After doing research on them I can see how they could be useful, but quite rare in the apps I've built in the last few years.

Here are some of the more uncommon ones (according to me - maybe these are used and I haven't worked with them).

Q - quarter-millimeters... 1Q = 1/40th of 1cm. Not supported in Safari.
cap - cap height (the nominal height of capital letters) of the element’s font. This is experimental (works in FF).
vb - percentage of the size of the initial containing block, in the direction of the root element's block axis. There are also small/large/dynamic viewport-percentage units: svb, lvb, and dvb
ic - the 'advance measure' of the "水" glyph (CJK water ideograph, U+6C34). Find out about the advance measure here
pt - One point. I remember this from years ago, but never remembered what it represents. 1pt = 1/72nd of 1in (1 inch).
pc - One pica. Another I recall from years ago. 1pc = 12pt = 1/6th of 1in.

Here is a little toy you can play with to see what sort of sizes they show up as:

Amount Unit

font-size: 2em;

Example heading set to font-size: 2em

width: 2em;
height: 2em;

Example box

I won't write up about all the lengths, but you can read about it here or check out the specs.

user-select: none to prevent users from selecting text

Sometimes you don't want a user to be able to select text in an element.

Here is a demo - with a mouse, try selecting the text - the bold section will not be selectable (or copyable)

This is a normal paragraph but this has user-select: none but again you can select this

(try using your mouse to select the previous paragraph!)

<p>
    This is a normal paragraph
    <b style="user-select: none;">but this has user-select: none</b>
    but again you can select this
</p>

This is useful when you have some onClick interaction, and when users interact with your element they end up selecting text.