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

msm8 profile image

Why Code Reuse is Important in the Age of AI

John Brooks -

nikdyankov profile image

State of JS 2024

Nik Dyankov -

guillaumesere profile image

Sortie de TypeScript 5.7 RC, nouvelle alternative à npm, avenir des frameworks JavaScript - Cette semaine en JS

Guillaume Sere -

zirkelc profile image

Buffer Logs and Flush Automatically on Error with Powertools for Lambda

Chris Cook -