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
 
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
 
ad0791 profile image
Alexandro Disla •

Thank YOu!!!!!!

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
 
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
 
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
 
kyds3k profile image
Adam Darby •

PROPS for the Papa Roach reference!!!

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.

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 :)