DEV Community

Sadick
Sadick

Posted on

Did you know CSS has over 400 unique properties

#showdev #javascript #css

I didn't know either until I did this.

var element = document.createElement("div"); var count = 0; for (var index in element.style) count++; console.log(count); // 413
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
mindplay profile image
Rasmus Schultz •

You would need to exclude non-CSS object properties to accurately count:

var element = document.createElement("div"); var count = 0; for (var index in element.style) { if (element.style.hasOwnProperty(index)) { count++; } else { console.log(index); // non-CSS object properties } } console.log(count);

My browser (Chrome) has 439 ;-)

Collapse
 
sadick profile image
Sadick •

Thanks, i completely overlooked the hasOwnProperty method. Nice catch 👍

Collapse
 
ghost profile image
Ghost •

Can do instead 

Object.keys(getComputedStyle(element)).length

know that some properties are only SVG related.

Collapse
 
martinmuzatko profile image
Martin Muzatko • • Edited

-100