Split Container Element / Property

[t-wy]

Introduction / Existing Alternate Approaches

Since the frameset tag was deprecated long ago, an element that comes with a splitter does not seem to exist, not to mention frameset is supposed to work with multiple web pages.

Many implementations and alternatives exist in the browser. Without scripting, the most similar CSS property should be resize, which creates a resize handle at the bottom right to allow resizing, but this does not fully provide the convenience of having a splitter. With scripts involved, many implementations, and modules exist. However, inconsistent behaviors from mouse cursor (default, move, resize, etc.), touchscreen support, to even bugs (overflowing by dragging out of the container) exist among different popular implementations. Due to the wide use of such items, and the increasing importance of responsive design, an element with basic functionalities and customizable properties should have existed without the need to load a large bundle of extra codes.

As frameset is still supported in many browsers, a similar interface and implementation already exists in many browser engines, which does infer that expected behaviors of splitters can stick with how frameset works. Also, the Developer Tool when not undocked also works like a split container in existence. Furthermore, controls like a Split Container are also commonly seen in Native Forms even in OS's file explorers, which strongly indicates that panel-splitting should be a basic feature.

Use Cases / Examples

• WYSIWYG Editors (like Splitting among Source / Output / Terminal panels, etc.)
• Splitter between Iframes
• Resizable table entries
• File browser with a side panel
• Before / After Image Comparing Slider

Goals

A frameset-like container-splitting feature can be implemented without scripting.

Proposed Solution

• A separate split container element like frameset following similar syntaxes may be introduced.
• A CSS property that allows manual drag-based resizing like resize may be introduced.
• A CSS property like flex or allows flex boxes to have splitters may be introduced.
• A CSS property that allows table (thead / tbody / tfoot) / tr to have vertical / horizontal splitters may be introduced.
• The splitter position may be a property that can be set by scripts (like scroll offsets).
• The splitter itself may be a pseudo-element that allows customization (like scrollbar).

Privacy & Security Considerations

If a dimension-unspecified container's initial size is relative to its elements, webpages with customizable stylesheets may allow users to leak information by checking whether contents overflow.

No considerable privacy or security concerns are expected, but we welcome community feedback.

Let’s Discuss

• Whether resizable controls of elements with two related dimensions like Table / Datagrid (Spreadsheets) should be independently considered.
    - If so, should dragging the interaction of the horizontal and vertical splitters adjust both dimensions at the same time.
• Before / After Comparing may seem like an overflow and align hack in the terminology of split containers. Perhaps the implementation does not need to have this in mind in the first place.
• This may be related to another solution that allows a container to "take all remaining spaces", as some may just use flex property or table elements to avoid the troubles.
• Whether there should be a default behavior when a user simply clicks or double-clicks the splitter without dragging.
• Whether minimum / maximum split position should be a thing
    - If so, how the default values should be determined.
• Should any resize event fires during the time the splitter is moved, or only after the splitter is released.