Introduction
The <details> tag provides a convenient way to create collapsible content, improving the readability of posts. However, in practice, it has several limitations, especially within Hive posts.
Background & Basics
The <details> element is an HTML tag that allows content to be displayed only when needed.
Common use cases include spoilers, additional explanations, or optional information.
Markdown does not natively support this element, so it often does not render correctly in pure Markdown editors.
Identified Limitations
1. Lack of Markdown Support
- Many Hive editors rely on Markdown, which leads to
<details>tags not being interpreted correctly.
2. Rendering Issues in Different Frontends
- On PeakD, the
<details>tag functions correctly. - On Hive.blog, the
<details>tag is supported, but the selection box is misaligned to the right, creating a visual issue. - On Ecency, the text within
<details>is displayed directly instead of being hidden, making it ineffective as a collapsible section. - On mobile displays, some Hive apps do not render
<details>properly, leading to inconsistent behavior.
3. Limited Styling Options
The styling of <summary> and <details> cannot be easily modified using Markdown or CSS.
Icons or images inside <summary> are sometimes displayed incorrectly.
4. No Dynamic Text Change
The <summary> element remains static; switching between "Show details" and "Hide details" does not work without JavaScript.
JavaScript is not supported in Hive posts.
Possible Workarounds
Using Pure Markdown: Instead of <details>, manual spoiler or collapsible text formatting can be used.
External Links: If the content is too extensive, an external link to a fully functional page can be provided.
Testing Hive Frontends: If <details> must be used, it should be tested on different frontends beforehand.
Relevance to Hive & Web3
A consistent display of <details> tags across all Hive frontends would be desirable.
Web3 applications require standardized methods for rendering interactive content without JavaScript.
Conclusion
The <details> tag is a useful feature for structuring content, but it has some limitations when used in Hive posts. Users should be aware that not all frontends support it correctly and should consider alternative solutions.