DEV Community

Cover image for 7 CSS properties I had no idea about

7 CSS properties I had no idea about

Tomasz Łakomy on January 03, 2020

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 b...
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.