I’m attempting to put together a text editor that uses buttons(many buttons) for inputting code and was looking to filter these buttons based on each’s properties. For example, which are compatible with all/some browsers, experimental, deprecated, obsolete, and so forth. I’ve been using the MDN site for sometime and was wondering if there is a Javascript object(or some kind of library) that contains all of the HTML, CSS, and Javascript properties/values listed.
Hi @gretagremlin! This is what the BCD project does; see https://github.com/mdn/browser-compat-data
You can get the data as an NPM package too: https://www.npmjs.com/package/mdn-browser-compat-data
Thank you @chrisdavidmills! This is immensely useful. Out of curiousity, would you know of any other projects like this. For example in this table for background-color, I was hoping to find this type of information organized like the BCD project.
@gretagremlin Yes; we have this kind of data organized in the MND data repo: https://github.com/mdn/data
See https://github.com/mdn/data/blob/master/css/properties.json
And the NPM version: https://www.npmjs.com/package/mdn-data
Although this repo is not quite as often/well-maintained as browser-compat-data. We use it to generate the info boxes and formal syntax boxes on our CSS reference pages, but not many people seem to find them useful as they do the compat tables.
@chrisdavidmills Wonderful! Would there be more data categorized like it was in the browser-compat-data here? Or would the data repo be limited to css, api, and svg as of now? Mainly was wondering where the content for the html and javascript pages (among others) was coming from.
Also when digging through the CSS references, I was looking for a way to navigate the site by category. Would there be a way to place a listing of these categories (like groups used in the side nav) on its own page? Similarily to what the HTML pages have here and here.
Also, in the sidenav groups, some of the categorization seemed different, such as background and borders. I browsed through the W3C module categories here and here. Curious as to why they changed it. Background and Colors made more sense as well as borders being part of the Box Model. If another page was made, didn’t know if using a different categorization would interfere with what is shown in side nav. I have some ideas for easily navigable categories I’d be happy to contribute along with some images.
@gretagremlin let’s go through these Qs one by one:
Would there be more data categorized like it was in the browser-compat-data here?
Not really, in the case of the data repo/. It is only really complete for the CSS data really. The sidebars for the other sections are largely generated from various macros we have, and the other content is largely static.
As a note, future iterations of MDN will based much more on structured data sets (see our stumptown experiment), for exactly these kinds of use cases.
Would there be a way to place a listing of these categories (like groups used in the side nav) on its own page?
There are a number of ways we could do this. The CSS data repo has the groups field that is used to generate the appropriate links in the CSS sidebars. We could make a page that would use a macro to generate a link for each group, which links to that group’s landing page (there should be a landing page for each group, not sure if there actually is in 100% of cases).
Also, in the sidenav groups, some of the categorization seemed different, such as background and borders
Yeah, this is probably because we decided on some of the groupings a while ago, and some more recently, when the associated specs were in different states.
I’d be interested in hearing about your ideas; it is unlikely that we’d make any changes to this implementation any time soon, but probably when we start to move towards our new implementation in the future.
@chrisdavidmills Sounds good, I’ll start a new topic with a list of suggestions/proposals, once ready.