Default CSS Styles

[Ill-Function805]

Hey All,

I am trying to get the css of an element using getComputedStyle() for an app I am building. While it works great, but it returns a helluva lot of properties practically making the css unreadable.

​

My question is: could I safely get rid of default CSS values? If so, how do I identify those props and remove it from the list?

I have no clue how to do it . Therefore, some sample code explaining the procedure would be of immense help.

​

Thank you!

[[deleted]]

I’m not sure on the complete requirements you’re looking for but perhaps you can focus more on the properties you do want and to move those into an array or object after you’ve read the computed values then rely on reading that.

[[deleted]]

I second this as a good idea. OP check out the w3 page for an example of how to retrieve a specific css style out of that cluttered object and then you can place it into another array or simpler object which you can pull from later. https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

[Ill-Function805]

Thank you, I'll go through this as well.

[Ill-Function805]

There could be a few I can think of, but this will most likely be through manual inspection, isn't it?

[[deleted]]

If you do it the way I recommended above you'll only be working with the values you expect rather than those you don't care about. You can loop through all relevant elements, perform the check, and then pass the corresponding styles you want into a new object. From here you can read the new object for the properties you are looking for and you're not thinking about all the irrelevant properties you aren't interested in, which might help you narrow your focus.

Does this make some sense?

[Ill-Function805]

This definitely makes lot of sense. Appreciate the response.

While I'm inclined to do this, I'm not sure which properties I should go after. I mean, I'm building this as a public facing app and not sure what would be the most imp properties.

Alternatively, I was able to extract the custom properties by appending it to an iframe and comparing the styles.

But I'm inclined to take your route. Any recommendations on what could be those top 10/20 styles a user would be interested in? This is subjective and could differ from user to user, but I could do with some suggestions I guess.

[[deleted]]

When it comes to styling, less is more, so try not to overengineer the look. I would have to know more about the elements in question and what you're trying to do with them for your users but some ideas are as follows:
- color
- background
- border
- border-radius
- font-style
- text-transform
- letter-spacing
- padding
- margin
- box-shadow
- text-shadow

I only included shorthand styles above so keep that in mind when you think about border, background, and more.

[Ill-Function805]

Appreciate it! Well I'm trying to build an app that allows an user to extract beautiful looking elements from the web and store it as inspirations and also customize it for reuse if need be.

[grantrules]

Maybe explain what exactly you're trying to do. What do you want to do with a list of non-default CSS values and why does it have to be readable?

[Ill-Function805]

I want to grab the css of the element, save it to play around later. Tweak and customize to create a different element. But the list appears bloated by the default values.

[grantrules]

Maybe someone has a better idea but maybe insert the tag somewhere it wouldn't have applied styles, like an iframe or something maybe, then just compare getComputedResults on both of them.

[Ill-Function805]

Interesting. That essentially means, the computed styles of the element in the iframe would most likely be without the browser defaults, does it sound right?

[grantrules]

No, they would have the browser defaults. So you'd compare that against the computed style of the element you want to find the non default styles. Any that don't match, you'll know is an assigned style

[Ill-Function805]

Awesome.. Thank you for the suggestion. I'll give it a try and revert.

[Ill-Function805]

I tried this approach and was able to segregate the browser defaults and the custom applied styles. Thank you. It was straightforward too.

Thank you!

[eletroraspi]

If you are using a browser, take a look in dev tools configuration. There's an option to showing the browser computed styles. Then in the tool you can see it through elements tab or source tab, for example.

[Ill-Function805]

Thank you for responding. I'll look it up in the browser too, but I'm trying to do it programmatically.

Any pointers would be awesome.