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

codemee profile image

HTML meta 標籤中 viewport 的設定

codemee -

thinkthroo profile image

Manage your versioning and changelogs using Changesets

thinkThroo -

devops_den profile image

5 Best Reasons You Should Choose Microservices Architecture for Your Project

Devops Den -

herezone profile image

How to build online Video Editor with pure JavaScript - Video Effects

bing -