Using Block Quotes for Social Embeds

Back at it again, Chris and Dave on the Shoptalk Show (ep. 590) mouth-blogged the idea of having custom block-quote styles based on the location of the source of the quote.

Chris already wrote about the concept of using a block quote in place of an actual social media embed, but he simply matched the design of the blockquote to his site.

I thought it would be a fun excercise to take their idea through to completion and allow for “custom themes” based on the source of the quoted material.

The basic setup is pretty simple. We start with a blockquote with a cite child element.

<blockquote>
  <p>"Make the common configurable and the uncommon composable"</p>
  <cite>
    — Adam Sedwick (<a href="link.to.author">@AdamSedwick</a>) —
    <a href="link.to.post">Nov 16, 2022</a>
  </cite>
</blockquote>

Which results in:

“Make the common configurable and the uncommon composable”
— Adam Sedwick (@AdamSedwick) — Nov 16, 2022

It’s a bog-standard blockquote!

Now lets add some magic:

blockquote {
  background: var(--blockquote-background-color);
  border-inline-start: 5px solid var(--blockquote-border-color);
  color: var(--blockquote-text-color);

  a {
    color: var(--blockquote-link-color);
  }

  &:has(cite a[href*="twitter"]) {
    --blockquote-background-color: #000000;
    --blockquote-border-color: rgb(29, 155, 240);
    --blockquote-text-color: #ffffff;
    --blockquote-link-color: rgb(29, 155, 240);
  }
}

And the result:

“Make the common configurable and the uncommon composable”
— Adam Sedwick (@AdamSedwick) —
Nov 16, 2022

Blockquote styled with twitter theming — At the time of publishing `:has()` is still behind a flag in firefox. Here is an image of the blockquote with `:has()` enabled.

Leveraging the same :has() selector we could create a theme to match any social network. Here’s the same post thing as if from a mastodon instance:

&:has(cite a[href*="mastodon.social"]) {
  --blockquote-background-color: #282c37;
  --blockquote-border-color: #6364ff;
  --blockquote-text-color: #ffffff;
  --blockquote-link-color: #6364ff;
}

“Make the common configurable and the uncommon composable”
— Adam Sedwick ( @AdamSedwick) — Nov 16, 2022

Blockquote styled with mastodon theming — At the time of publishing `:has()` is still behind a flag in firefox. Here is an image of the blockquote with `:has()` enabled.

Sure, you could load up react, vue, or some other component-based system that accepts or sets a prop based on a passed value, but that’s all additional overhead and ultimately more data sent over the wire.

I think it’s pretty powerful that we can combine something like :has() with the attribute selector to be able to create custom styles based on the contents of an element in native web tech without any additional libraries.