DEV Community 👩‍💻👨‍💻

Sadick
Sadick

Posted on

Did you know CSS has over 400 unique properties

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 on

-100

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.