7 CSS properties I had no idea about
Tags: css, development
Published: 2020-01-03 12:39:10

---
title: 7 CSS properties I had no idea about
published: true
description: Number 7 will SHOCK you
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xdtfebm0ui38bsfy9z9e.jpg
tags: css, development
---

Before we start - I'm working on [https://cloudash.dev](https://cloudash.dev), a brand new way of monitoring serverless apps 🚀. Check it our if you're tired of switching between 50 CloudWatch tabs when debugging a production incident.

<hr/>

Last decade, I've tweeted this "free interview question":

{% twitter 1211695059055316994 %}

After a short while [Tejas](https://twitter.com/TejasKumar_) created a tool that allows you to list all CSS properties in your terminal (should you ever need to do that for some reason):

{% twitter 1211709321400205321 %}

Apparently there are some CSS properties out there that I had **absolutely no idea** about, let's go through some interesting examples:

### 1. `azimuth`

`azimuth` property allows (or rather, allowed, since it's deprecated now) for different audio sources to be positioned spatially for aural presentation.

Wait, audio sources in CSS? 

That's correct, apparently you can use `azimuth` and `elevation` to control where the audio comes from when users have audio equipment that can handle it. If anyone reading this actually did an experiment like this, **please** let me know in the comments - I'd love to hear more!

Syntax:

`<angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards`

![Different values of azimuth property, visualized around a circle](https://developer.mozilla.org/@api/deki/files/37/=Azimuth.png)
<textcaption>Source: MDN</textcaption>

### 2. `bleed`

What is this, Twilight?

Not really, `bleed` is an experimental technology which specifies the extent of _page bleed_ area outside of the page box when printing a document.

Not that useful for Web Design, but may come in handy when your users end up printing documents on a physical paper (invoices, bills etc.)

![An explanation of what bleed property looks like when applied during printing on physical paper](https://thepracticaldev.s3.amazonaws.com/i/aa0gdj1gkwo87hm1o55o.jpg)
<textcaption>Source: CSS tricks https://css-tricks.com/almanac/properties/b/bleed/</textcaption>

### 3. `caret-color`

This one is actually kinda useful.

A _caret_ is what smart people call the blinking cursor when appears when you try to type something in an input (for instance, when writing a blog post)

![Caret visible when writing a post on a blog](https://thepracticaldev.s3.amazonaws.com/i/bx8mfblut4x86n64w0t9.png)
<textcaption>Once you notice it's blinking all the time you cannot unsee it</textcaption>

`caret-color` allows Web Developers to control its color

Syntax:


```
caret-color: auto;
caret-color: transparent;
caret-color: #123456;
```

I'm not an accessibility expert, but `transparent` doesn't seem like a good idea so maybe don't use it.

Magenta looks pretty neat though:

![A result of changing the caret color to magenta](https://thepracticaldev.s3.amazonaws.com/i/wuwl1yzaop95pn1i2vbm.png)

### 4. `::cue`

It's possible to add `track` tags to `video` elements on a page, which is useful when you'd like to add subtitles to your video for folks who either don't speak language the video is recorded in very well or have some sort of hearing impediment.

If you'd like to style those captions, this is where the `cue` pseudoelement comes in. Quoting MDN:

> The ::cue CSS pseudo-element matches [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

Syntax:

```
::cue {
  color: yellow;
  font-weight: bold;
}
```

### 5. `hyphens`

This one is for my German friends.

If your text has extraordinary verbose words and phrases sometimes the content may end up overflowing the container which looks... suboptimal.

A `hyphens` property allows you to turn this:

![No hyphens applied, text overflowing the container](https://thepracticaldev.s3.amazonaws.com/i/dc3nx4infdyqxqreyp5g.png)

into this:

![hyphens property applied, text stays in the container](https://thepracticaldev.s3.amazonaws.com/i/of4sjccr3szv49ggu3e9.png)
<textcaption>Source: MDN</textcaption>

The `-` thingy is called a _hyphen_ and the rules when it can be applied are language specific (you'd split the words differently in English and Hungarian for example). 

Huge shout-out for Firefox team because currently they seem to be the only ones to support **ALL** dictionaries available on the Web.

Syntax:

```
hyphens: none;
hyphens: manual;
hyphens: auto;
```

### 6. `will-change`

The vast majority of CSS properties are for users, to enhance their experience on the Web so everything is not black text on white background etc.

`will-change` is different - this property is actually for the **browser**.

The idea is that `will-change` is meant to tell the browser how an element is expected to change. For instance you can inform Chrome that the opacity of the element will change at some point and as a result the browser can set up optimizations before an element is actually changed.

Bear in mind that this should be used as a **last resort** (_Papa Roach would be proud_), browsers are already doing what they can to optimize everything and by overusing this property you may cause your site to actually be slower.

Syntax:

```
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Example of <custom-ident> */
will-change: opacity;          /* Example of <custom-ident> */
will-change: left, top;        /* Example of two <animateable-feature> */
```

### 7. `flex`

Oh come on, no one is able to use `flex` in a meaningful way without opening this (excellent, by the way) [CSS Tricks article](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

<hr>

Whew, I've learned a lot writing this! Are there any interesting, unique properties I've missed? Feel free to reach out to me on [Twitter](https://twitter.com/tlakomy)