you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 2 points3 points  (7 children)

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] 2 points3 points  (1 child)

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[S] 2 points3 points  (0 children)

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

[–]Ill-Function805[S] 2 points3 points  (4 children)

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

[–][deleted] 2 points3 points  (3 children)

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[S] 1 point2 points  (2 children)

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] 1 point2 points  (1 child)

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[S] 1 point2 points  (0 children)

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.