Re: CSS styling of Microdata, RDFa, Microformats

I have made use of RDFa properties as a hook both for CSS styling and for general CSS paths used in jQuery selectors, for example.

An advantage for Microdata here is the use of full URLs for @itemtype, where RDFa's greater flexibility makes selecting on particular attribute values difficult. This can, of course, be mitigated as the author of the HTML+RDFa has a certain amount of control over the values used, and can take this into consideration when creating CSS selectors.

For example, in the development of the Connected Media Experience, I would generate HTML using a vocabulary which allowed the use of simple tokens for classes and properties; for example,

<div class="release" vocab="http://cme-spec.org/profile" about="" typeof="Album">
  <h1 property="title">Album name</h1>
  <ol property="audioCollection" typeof="AudioCollection" inlist>
    <li rel="expression" typeof="Audio">
      <h2 property="titile">Track name</h2>
      <a property="displayArtist" href="http://dbpedia.org/resource/ArtistName">Artist Name</a>
      <audio property="encoding" typeof="Encoding" src="http://path-to-encoding"/>
    </li>
  </ol>
</div>

Knowing the classes and properties used allows me to perform styling such as the following:

[property='audioCollection'] audio[property='encoding'] { display:block; ... }

Microdata has a bit of an advantage for people writing CSS selectors for content they don't control, at least for @itemtype matching. @itemprop is more complicated as either full URIs or tokens may be used.

Gregg

On Nov 14, 2011, at 3:00 AM, Dan Brickley wrote:

> This is a topic that is historically closest to the Microformats
> community, via their use of the 'class' attribute (and via Tantek's
> long-term CSSitude). My CSS knowledge is fairly stuck in the 90s
> alongside my music tastes; hopefully Tantek, Hixie and others can
> offer some perspective here.
> 
> Has anyone looked in detail at the CSS styling aspect of choosing
> between HTML data notations. If I want to style mentions of a
> <http://schema.org/Volcano/> or a price or whatever, minimising
> redundant markup, how does this affect my choice of HTML data syntax?
> Is the CSS in super-modern browsers any more capable of hooking onto
> Microdata patterns, RDFa (Lite/Full), or other idioms? How modern is
> modern? What pragmatic tricks are needed / useful in practice, e.g.
> hardcoding or coordinating namespace prefixes in site-wide CSS? How
> does the notion of graceful degradation apply here? How does the
> notion of namespace in
> http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#attribute-selectors
> fit in? How far does [property=~"http://example.com/] go towards
> working with RDFa?
> 
> cheers,
> 
> Dan
>

Received on Monday, 14 November 2011 18:49:49 UTC