Looking for CSS attributes and Values resource (data)

Folks,

Using TiddlyWiki to automate design or support learning CSS

I have often felt if I had access to a list or data of CSS properties matched with their property values it would be possible to make a predictive css text tool to assist in designing tiddlywikis, writing CSS, and html.

The same idea could be applied to many cases where there are a discrete set of terms and related terms or subterms.

To start this experiment I have being looking for a comprehensive list of CSS properties, their shorthand and the possible values for each ,for example see this on the CSS background. Notice how it would be time consuming to extract this otherwise public information?

  • That is it is difficult to find this information in a format that it can easily be imported to tiddlywiki and capture the relationships between properties and property values.

Do you know a source that may lend itself for extraction and import, such as a csv or other format?

Or feel free to Join this discussion on using TiddlyWiki to
automate design or support learning css deeply.

Imagine if, as you went to design a stylesheet or add css in html you could start typing a property and the match ones were listed, you could then select that property then see a list of possible “property values” for that “property” and insert the ones you need. This will support using CSS before you are fluent in CSS, but “with use” help you become fluent.

This addon bring CSS autocompletion to tiddlywiki : GitHub - Gk0Wk/TW5-CodeMirror-Enhanced: An enhanced for CodeMirror framework in TiddlyWiki, including TW5 highlight, WikiLink auto-completion, expandable hint, snippets, etc.

I know that it’s not what you asked for but I think this can help ! Also, maybe it’s possible to extract the data from this plugin ?

1 Like

I don’t understand that you want.

You have this Full property table for your list.

@Alvaro i found that table as well and its close but its says it is out of date and pre css2.

Then the solution is to wait for the new table or create your something similar.

The pages in MDN are created from a markdown files with frontmater format (you can see them in their github), maybe you can use it for extract the info.

Thanks @Alvaro I may just do that. I would like to find a resource that is closer to what I need if possible, as I can’t currently put too much time into it. Personally when I see three or more platforms or languages/markup that I do not already know in the path to a desired outcome, I see a long journey ahead.

To be honest I expected such info to already be arranged in a “database normal form” somewhere, otherwise it suggests those who have published the details or built into their tables/browsers or educational material, have being doing this in a manual way. I find that hard to believe.

@telumire thanks for that lead, it may “bare fruit” however there is only minimal information available especially to my skills and experience with Github and the codemirror framework. I have not seen any mention of CSS attributes and values specifically, however I will raise the idea there to forearm the project team.

No sure if this is good or bad…

https://dofactory.com/css/properties#list

This is the horse’s mouth:

https://www.w3.org/TR/css-2021/#properties

1 Like

Thanks @CodaCoder these examples illustrate the problem, its easy to get lists of properties, but then the values are usually listed in separate table in a different page eg; border-right-color

I would like to find a single list of properties with 0-N possible values on each line (ideally csv)

This would allow me to import into tiddlywiki with the JSON mangler to create a plugin of all properties and all the values for each property.

Ok I think I found what you were looking for @TW_Tones : data/properties.json at main · mdn/data · GitHub

This is the underlying data used in the MDN doc.
More info here : data/properties.md at main · mdn/data · GitHub

See also
https://www.w3.org/Style/CSS/all-properties.en.html

1 Like

@telumire “Almost perfect”, thank you. Yes I came across the last one, and I was not sure how easy it would be to extract and normalise the data (achievable but fiddly) but the JSON is possibly the best yet, it appears to contain the properties/and possible “values”.

I will need to have a go in JSON mangler to see, but failing that I think can make my own “parser” to extract the info.

Perhaps the best way is to import each property as a tiddler, all info, including some fields containing multiple values - one of which is “syntax” that seems to contain the “property values”, and perhaps making groups into tags (or not).

Unless there is another rout like import JSON to excel and export as CSV?

Thanks Heaps.

Post script, I seem well on my way using JSON To CSV Converter

1 Like

They use a macro system (KumaScript) to generate the css syntax in the doc from the json file, maybe you could do something similar ?

css_selector_page_template

1 Like