HTML/CSS Customization options for Profiles

[ioletsgo]

Online, I find that a way to express oneself has become extremely limited over time, and I feel like Atproto & Bluesky is something that could benefit from a varying degree of user profile customization, from partial & user friendly, to refined & for power users.

I think Bluesky, if given the capability to store small HTML/CSS changes, could help introduce some intriguing usage from developers and users.

I think the upmost priority in regards to this idea would be security. XSS vulnerabilities are naturally very common with this type of customization, which is why I would recommend a 3-tiered system in terms of how profiles are customized and/or viewed.

Tier 1 - None: As the title implies, this allows for a completely uniform Bluesky/app browsing experience. Absolutely nothing is changed from page to page.

Tier 2 - Partial: This allows for a curated list of personalization settings to be displayed to a user. Think user friendly interface stuff like background color, foreground color, font color, background image (should be subject to content moderation and content flagging, and should be tied to an image on a PDS.), border color, and a pre-selected list of fonts. The main philosophy is that this tier exists under a very limited whitelist that allows for creative expression.

Tier 3 - Advanced: I think the potentially scariest one (and most vulnerable sector to something like XSS) would be one that allows for deeper controls under the assumption they're edited by users more experienced in making or editing websites. You can give them a lot more flexibility with stuff that can't necessarily fit in a user friendly list of options. Stuff like Gradients, Image Rendering, scrollbar properties, advanced border properties (like border images), those types of things.

I feel like the tiered method has multiple benefits overall; first and foremost is moderation, quality assurance, and ensuring a pleasant user experience. I feel like people might be brought to Bluesky due to an increased flexibility in user expression, making it a sort of mixture of the best parts of Tumblr and what was Twitter.

The second tier might exist as a much less curated but still standardized. Foreground-Background-Font colors under Tier 2 could (and probably should) be automatically tested to make sure they follow the WGA 2.2 Accessibility guidelines, as issued by the W3C in December of 2024, which states that the presentation of text should have a contrast ratio of at least 7:1, (with large text, 4.5:1)

The standardized procedure used by the W3C to calculate color ratios can be found here.

An assumption that can exist is that Tier 3 would be able to bypass such restrictions. For this and other reasons, I imagine warnings should be in place in order to inform a user of a potentially degraded browsing experience on some pages.

In my head, this is something that should or could be opt-in and out, similarly to how Content Filters are handled. I think a warning system to prevent "flashbangs" (bright or light colors for users who use dark themes) would probably be greatly appreciated as a quality of life feature.

Thank you for reading this, I hope you have an excellent rest of your day.