2018/Berlin/microformatssanscss
Microformats Sans CSS was a session at IndieWebCamp Berlin 2018.
Notes archived from: https://etherpad.indieweb.org/microformatssanscss
IndieWebCamp Berlin 2018
Session: Microformats Sans CSS
When: 2018-11-03 14:10
Participants
- Charlie Owen (sonniesedge.co.uk)
- Tiara Miller (tiaramiller.com)
- Jan
Aaron Parecki
Martijn van der Ven
Tantek Çelik- Mike (madebymike.com.au)
- Ana Rogrigues (ohhelloana.blog)
- David Rosson (rosson.com.au)
- Dion
- Amber
Marty McGuire
Sebastiaan Andeweg
Notes
Note: Use "HTML class name": http://tantek.com/2012/353/b1/why-html-classes-css-class-selectors
Charlie likes how adding HTML classnames makes the data on the page computer-readable
- the problem she has at her company: it clashes with the existing CSS naming conventions
- is wondering: what alternatives are there?
Some additional issues that have come up in the past
- some developers remove the microformats classes because they appear to be "unused" since no CSS is being applied to them
- when looking at HTML source, developers (especially new developers) have no indication that a particular HTML class is used for microformats, unless they are already familiar with the microformats class prefixes
Schema.org different ways to publish onto a page but when rendered the output is the same
- adjecent object to represent the page
- there has been a recent discussion about a rel="alternate" to point at parsed Mf2 JSON
- the html-classes for mf2 is also a problem for Wordpress and themes
There are two ways of solving this:
- a different way to put the data in the page itself
- a way of linking to the same data in a different format
The data-attribute seems like a nice place to put it
- but: Data attribute was specified in HTML5 to be page-specific *ONLY* and *not* for external consumptions / formats
meta tag is not practical because it duplicates content already in the page
The problem with putting meta-information about your prefixes in the header of the page, is that people tend to copy+paste. And they only copy paste things that are in the visible body.
Another clash:
- the u-* prefix is used by some CSS frameworks as utilities (p-* also, sometimes, for padding)
You could add a new attribute: microformats="x"
- if that's true, parsers do not have to change a lot, only where to look for it
- w3c-validator says no to microformats="x"
- other attributes to highjack?
- property="x" - https://www.w3.org/TR/html52/dom.html#state-and-property-attributes
- I believe this is referring to ARIA attributes, e.g.
aria-labeledBy="id". I think the RDFa spec is the intended reference: https://www.w3.org/2010/02/rdfa/sources/rdfa-lite/#vocab-typeof-and-property.
gRegor Morrill 12:27, 4 November 2018 (PST)
- I believe this is referring to ARIA attributes, e.g.
- property="x" - https://www.w3.org/TR/html52/dom.html#state-and-property-attributes
<meta property="og:url" content="https://example.com/" /> <div class="h-entry"></div> <div property="h-entry"></div> <div property="mf:h-entry"></div>
discussion on wether to prefix the microformats in the property attribute. "mf:h-card"?
- no: if we don't add any prefix, we can never clash with OG, but if we do, we might