home ~ projects ~ socials

DEPRECATED: CSS Encapsulation Prototype For The Neb RSS Reader

Head's Up

I got some feedback that the approach of using & outlined in this post won't work. (See this codepen for details.)

I'm leaving the post up for refernce, but will be looking at :scope and the Web Component/Shadow DOM as possible solutions.

Check out this page to get the most recent status:

DEPRECATED: Web Component CSS Encapsulation Test For The Neb RSS Reader

DEPRECATED: Introduction

I'm building a new social network1. The two biggest differences between it and other social networks are:

  1. It's built by connecting individual websites via RSS instead of relying on custom protocols or centralized sites/services.
  2. Posts can use HTML elements and CSS styles2.

This post is an initial prototype examining how to deal with the CSS3.

The Current Challenge

The primary interface to the network is an RSS reader. It combines posts into a single timeline that's output as an HTML page which is rendered in an embedded browser4.

This post is a prototype designed to examine two things:

  1. How to prevent CSS in one post from effecting other posts.
  2. How to prevent CSS in all posts from effecting the parent page.

The goal is to prove the basic approach works and present it for feedback.

DEPRECATED: The Idea

CSS provides nesting5. It was included in Baseline 20236 and is listed as having support in all major browsers7. The idea is to use it in the following way:

  1. Generate a UUID8 in the app using the CSS payload as a seed (e.g. neb-3d8a5-etc)8

  2. Nest the CSS payload inside a class selector made from the UUID. For example, if the source CSS payload is:

    h1 {
  color: goldenrod;
}

    It gets converted to:

    .neb-3d8a5-etc {
  h1: {
    color: goldenrod;
  }
}

  3. Wrap the content of the post inside a <div> with a class attribute set to the UUID. For example, if the HTML assembled from the RSS is:

    <h2>Hello, World</h2>

    It's converted to:

    <div class="neb-3d8a5-etc">
  <h2>Hello, World</h2>
</div>

The hypothesis is that those wrappings will prevent style conflicts.

A Quick Note On The Test Examples

Head's Up

The examples on this page are live. The HTML and CSS you see in the code blocks has been added to the page. The results show up in the Output portion of each test.

DEPRECATED Test 1: Basic Approach

Head's Up

I've learned that this approach won't work as laid out here. There are ways to use the & to escape the containment.

I'll be looking at :scope and the Shadow DOM as alternative. Staring here with the Shadow DOM:

DEPRECATED: Web Component CSS Encapsulation Test For The Neb RSS Reader

I'm leaving the content on this page here just as a reference.

This is an example of the basic idea. The HTML and CSS from individual posts is wrapped with the UUID.

CSS

.neb-91506a3f {
  .alfa {
    color: blue;
  }
}

.neb-e2cbd012 {
  .alfa {
    color: red;
  }
}

HTML

<div class="neb-91506a3f">
  <strong>Go now and come here later</strong>
  <p class="alfa">
    Slide the tray across the glass top.
    Greet the new guests and leave quickly.
  </p>
</div>

<div class="neb-e2cbd012">
  <strong>Hang tinsel from both branches</strong>
  <p class="alfa">
    Guess the results from the first scores.
    Hoist it up and take it away.
  </p>
</div>

Output

Go now and come here later

Slide the tray across the glass top. Greet the new guests and leave quickly.

Hang tinsel from both branches

Guess the results from the first scores. Hoist it up and take it away.

DEPRECATED: Test 2: Prevent Messing With The Page

This test is to verify that wrapping html, body, etc... styles in the UUID prevents them from altering the styles on the overall page.

CSS

.d601c08a {
  html {
    padding: 10rem;
  }
  body {
    color: red;
  }
}

Everything is okay if the page doesn't have extra padding and the text doesn't turn red.

DEPRECATED: Test 3: Asterisks Only Effect The Posts They Are Associated With

This test checks to make sure * selectors don't reach out to the overall page or other posts.

CSS

.neb-27ed285c {
  * {
    background-color: rebeccapurple;
    padding: 0.6rem;
  }
}

.neb-f1f14ae0 {
  * {
    background-color: crimson;
    padding: 0.6rem;
  }
}

HTML

<div class="neb-27ed285c">
  <div>
    <strong>Open your book</strong>
    <p>
      Paint the sockets in the wall dull green.
      Pick a card and slip it under the pack.
    </p>
  </div>
</div>

<div class="neb-f1f14ae0">
  <div>
    <strong>Turn on the lantern</strong>
    <p>
      Twist the valve and release hot steam.
      Use a pencil to write the first draft.
    </p>
  </div>
</div>

Output

Open your book

Paint the sockets in the wall dull green. Pick a card and slip it under the pack.

Turn on the lantern

Twist the valve and release hot steam. Use a pencil to write the first draft.

DEPRECATED: More To Come

The app uses the native browser on each platform. I also want to make sure the approach works on stand-alone browsers. So far, I've testing on:

  • macOS 15.4 - Chrome, Firefox, Safari
  • Window 10 - Chrome, Edge, Firefox
  • iPhone 16 Simulator (iOS 18.2) - Safari
  • Android Virtual Device Manger - Pixel 4 API 32 - Chrome

From what I'm seeing, everything passes the sniff test. There's still more to figure out (especially around security), but this is a good start.

My biggest question is if there's a way for the CSS from a post to break out of its UUID wrapper. My understanding is that there aren't any parent selectors that would allow it. But, I'm not a expert in CSS.

I'm All Ears

If you have feedback, please let me know. You can reach me on Mastodon and Bluesky.

- a

-- end of line --

Endnotes

  • Beyond the ability to use CSS in posts, the app provides override style sheets. They can be used to take control of the styles if you don't like what someone's doing with their feed.

    Post based CSS can also be turned off completely. That causes the app to fall back to a built-in or custom selected stylesheet theme.

Footnotes

1 ⤴

This is the post where I'm refining ideas for Neb. A new social network built by networking websites.

(The name Neb comes from portmanteau of "networked" and "websites").
2 ⤴

Opening up the available HTML and CSS provides an incredible increase in the posts that can be created. Each one will be like its own embedded web page.

Determining which elements and styles can be used securely is the topic of other posts.

It's worth mentioning here that raw JavaScript is not allowed. However, there's a mechanism for using web components that have been authorized by the person using the app.

Details on that are the topic of other posts.
3 ⤴

CSS for posts are delivered in a custom element in the RSS. Details on that (including security implications and handling) are topics for other posts. This one is just about how to handled the CSS once it has arrived.
4 ⤴

The app is built in Tauri which utilizes native browsers for display.
5 ⤴

Getting started examples of how to work with CSS Nesting.
6 ⤴

The collection of web platform features that was added to all major browsers in the 2023 cycle.
7 ⤴

Full support for CSS nesting is shown at 89.5% at the time I'm writing this. That number is less relevant since all major browsers list support. The app is written in Tauri which only uses those browsers.
8 ⤴

A long string of characters that's generated in a way that it's super unlikely that any two will be the same.

The approach I'm using starts their generation with the contents of a post's CSS payload. Doing that means each post that has exactly the same CSS will get the same UUID. Any changes at all (e.g. adding a single space) produce a different UUID.
9 ⤴

The UUID is prepended with neb- to provide a namespace and prevent UUIDs that start with numbers from causing an issue.

Using the CSS payload as a seed means the UUID will be the same for all posts that have the same exact styles. It helps with caching and reduces the overall number of styles that have to be applied to the page.