Details
-
Suggestion
-
Resolution: Won't Do
-
None
-
None
Description
Problem
You can hide elements from anonymous users via JavaScript, but this usually introduces some flicker on the screen, since the code has to wait for AJS to initialize. That is, the elements you're hiding will be visible for a fraction of a second (or longer) before the JavaScript code kicks in and removes the elements from view. Hiding elements via custom CSS in a global or space-specific stylesheet does not seem to introduce any flicker, but you cannot target only anonymous users with CSS.
Note! The use case here is, of course, broader than just hiding elements from anonymous users. This applies to any case where you need to provide different content to anonymous and logged-in users, and want to avoid flicker.
Solution
Make it possible to use a CSS selector to target users depending on whether they are anonymous or logged-in. I think it would basically be enough to add a dedicated class or attribute to the <body> element of a Confluence page to track the user's login state. You could then use a class or attribute selector to check the login state.
Open issues
- Is it technically possible to add the class or attribute early enough in the page loading process to avoid flicker, that is, before the custom CSS is processed?
- Is the CSS attribute selector sufficiently supported across different browsers and browser versions? Would a class actually be the better option?
- Are there security issues related to exposing the login state in the page HTML code?
- Does the proposed solution break the logic or philosophy of CSS? Do we care?