DEV Community

Cover image for 7 CSS properties I had no idea about
Tomasz Łakomy
Tomasz Łakomy

Posted on • Updated on

7 CSS properties I had no idea about

Before we start - I'm working on 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.


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

After a short while Tejas created a tool that allows you to list all CSS properties in your terminal (should you ever need to do that for some reason):

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
Source: MDN

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
Source: CSS tricks https://css-tricks.com/almanac/properties/b/bleed/

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
Once you notice it's blinking all the time you cannot unsee it

caret-color allows Web Developers to control its color

Syntax:

caret-color: auto;
caret-color: transparent;
caret-color: #123456;
Enter fullscreen mode Exit fullscreen mode

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

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 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;
}
Enter fullscreen mode Exit fullscreen mode

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

into this:

hyphens property applied, text stays in the container
Source: MDN

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;
Enter fullscreen mode Exit fullscreen mode

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> */
Enter fullscreen mode Exit fullscreen mode

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


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

Top comments (28)

Collapse
 
amykble profile image
Amy

It's crazy to me that CSS has these built in properties like the caret property, yet its not possible to change the style of an ul bullet point🤔 CSS is weird!

Great article!

Collapse
 
amykble profile image
Amy • Edited

Hey all, thanks for the tips! I actually already use pseudo elements in my CSS to style my lists!

I was instead just commenting about the qwerks of CSS, it's an interesting language to say the least.

Collapse
 
tlakomy profile image
Tomasz Łakomy • Edited

CSS is ... interesting

It tries to be a lot of things and is not particularly good at most of them

Collapse
 
antwon profile image
antwon

Don't forget about CSS Counters!

developer.mozilla.org/en-US/docs/W...

Collapse
 
tlakomy profile image
Tomasz Łakomy

A while ago I’ve learned about list-style, is this what you’re looking for? 🌟

css-tricks.com/almanac/properties/...

Collapse
 
joelbardsley profile image
Joel Bardsley

The color of the list marker will be whatever the computed color of the element is (set via the color property)

So there's no intuitive "list-style-color" property that would allow a different colored bullet to the font color, the common workaround has been to use spans inside list items and styling the spans with a different color value.

Mozilla have recently introduced a ::marker pseudo-element to allow this more easily, but support outside of Firefox isn't there yet. One to keep an eye on.

Collapse
 
cbloss profile image
cbloss

This made me laugh a little too hard because it's so true. Thanks for that!

Collapse
 
calebpitan profile image
Caleb Adepitan

You can still customize it using list images

Collapse
 
akainth015 profile image
Aanand Kainth

I believe it does, list-style-type does the trick if I remember correctly.

Collapse
 
rafibomb profile image
Rafi

You can apply bullet styles or images even: w3schools.com/cssref/pr_list-style...

Collapse
 
sebbdk profile image
Sebastian Vargr • Edited

I am proud to say i stopped using that flex article a while ago.

Instead i rely on auto-completion, and swapping the property names around frantically until i get them right... :D

Collapse
 
codemouse92 profile image
Jason C. McDonald • Edited

Frantic Autocomplete Guesswork. It's the only way to code.™

Collapse
 
iagobruno profile image
Iago Bruno

accurate

Collapse
 
kapouer profile image
Jérémy Lal • Edited

flex is actually quite easy... The trouble now is using grids. Way less easy.
I've just switched from isotope to flex + progressive enhancement to grid, using @media and @supports. See github.com/pageboard/client/blob/0...

Collapse
 
jwhester profile image
J.W. Hester

Grid template area is fun if you name everything similar like box1, box2, and so on. It feels like I'm drawing out the page this way.

Collapse
 
matschach profile image
Mátyás Tóth

Generally, a lot of things CSS was made for isn't working as supposed, while at the same time a lot of things can be made work with CSS that was never supposed.

Collapse
 
awanturaonic profile image
Marta Gajowczyk

backface-visibility prop. it makes me think of some really weird David Lynch movie

Collapse
 
jwhester profile image
J.W. Hester

I'm more shocked by your comment about flex. I use it all of the time! In my school they taught us float first, and then flex followed by grid. I swear flex felt like a god send after trying to use float to position images.

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

tomasz i only had no idea about 6 of these, i cant believe you'd mislead me like this

Collapse
 
ad0791 profile image
Alexandro Disla

Thank YOu!!!!!!

Collapse
 
demetriusb profile image
Demetrius Berkeley

This was an interesting read @ 4:30 am. Thanks for the extra insight in regards to CSS.

Collapse
 
umashankar profile image
umashankar

Thanks for sharing these awesome tags 👍👍👌

Collapse
 
emanuelgsouza profile image
Emanuel Gonçalves

Amazing post! Congratulations! I didn't know these CSS properties. Thanks for share this knowledge

Collapse
 
kyds3k profile image
Adam Darby

PROPS for the Papa Roach reference!!!

Collapse
 
mhasan profile image
Mahmudul Hasan

Where can i get full list of all css property?

Collapse
 
tlakomy profile image
Tomasz Łakomy

I've provided the command at the beginning of the article, you can run npx get-all-css-properties in order to get a complete list

Collapse
 
mhasan profile image
Mahmudul Hasan

Thanks :)

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him) • Edited

Well, seems like I wasn't a CSS programmer (I know it is not a programming language, just couldn't find another word), I was just assuming that I were.