From IndieWeb

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



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"

<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


See Also