DEV Community

Sadick
Sadick

Posted on

Did you know CSS has over 400 unique properties

#css #showdev #javascript

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

Read next

thinkthroo profile image

Node.js util module usage in Changesets

thinkThroo -

seatunnel profile image

Conquering SeaTunnel Challenges: Your Go-To Solutions Revealed

Apache SeaTunnel -

gladiatorsbattle profile image

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography

Gladiators Battle -

patrick_61cbc6392b72286f6 profile image

Axios vs Fetch: Which is Best for HTTP Requests?

Patrick -