[csswg-drafts] Proposal: CSS Abbreviation Mode (@abbrev) (#13109)

Abid-speedcuber has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: CSS Abbreviation Mode (@abbrev) ==
Summary
-------
This proposal introduces "CSS Abbreviation Mode", an optional stylesheet-wide mode that enables standardized abbreviated property names (e.g., "bg" → "background", "mr" → "margin-right"). This mode is activated via a single at-rule at the top of the stylesheet:

    @abbrev allow;

The goal is to provide an optional efficiency-oriented syntax layer for authors while maintaining full backward compatibility with existing CSS and browsers.

Motivation
----------
CSS property names can be verbose, and modern workflows (including prototyping, mobile coding, atomic utility classes, rapid UI iteration, and high-volume styling) benefit from reduced keystrokes. Many authors currently rely on preprocessors (SCSS, PostCSS) or custom utility systems to simulate this behavior.

However, these solutions create fragmentation and do not benefit from native browser-level optimization or standardization. Native support would provide a simple, consistent, optional mechanism for writing shorter CSS.

Objectives
----------
1. Provide standardized, predictable abbreviations for common CSS properties.
2. Keep the feature strictly opt-in.
3. Ensure full backward compatibility.
4. Avoid any impact on existing CSS semantics.
5. Introduce no risk of breakage to legacy browsers, tools, or preprocessors.

Design: Abbreviation Mode
-------------------------

Activation:

    @abbrev allow;

Deactivation (default):

    @abbrev disallow;

Abbreviation mode, once enabled, applies to the entire stylesheet where the rule appears. Only canonical abbreviations defined in the registry are recognized.

Example:

    @abbrev allow;

    .box {
        bg: #000;
        mr: 20px;
        d: flex;
        jc: center;
        ai: center;
        br: 8px;
    }

Equivalent canonical output:

    .box {
        background: #000;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }

Initial Abbreviation Registry
-----------------------------

This registry lists initial proposed abbreviations mapping directly to canonical CSS properties.

    bg  -> background
    bgi -> background-image
    bgc -> background-color
    bd  -> border
    br  -> border-radius
    d   -> display
    jc  -> justify-content
    ai  -> align-items
    fd  -> flex-direction
    gp  -> gap
    fs  -> font-size
    fw  -> font-weight
    mr  -> margin-right
    ml  -> margin-left
    mt  -> margin-top
    mb  -> margin-bottom
    p   -> padding
    pt  -> padding-top
    pos -> position
    t   -> top
    l   -> left
    r   -> right
    b   -> bottom

Parsing Rules
-------------

1. Abbreviation mode affects the entire stylesheet where the at-rule appears.
2. Unknown abbreviations are ignored exactly as unknown properties are ignored today.
3. Canonical property names always override abbreviations if both are present.
4. Abbreviations cannot conflict with custom properties, which always begin with "--".
5. If a browser does not support "@abbrev", it safely ignores the at-rule and all unknown abbreviated properties, preserving backward compatibility.

Backward Compatibility
----------------------

The proposal uses two existing CSS behaviors to guarantee safety:

1. Unknown at-rules are ignored.
2. Unknown properties are ignored.

Therefore, older browsers simply treat abbreviated declarations as invalid and skip them, without affecting the rest of the stylesheet.

This ensures no breakage, no changes to existing sites, and no compatibility risks.

Use Cases
---------

- High-volume stylesheet authoring.
- Utility-first or atomic design systems.
- Prototyping and rapid UI iteration.
- Mobile or constrained text-entry environments.
- Educational contexts.
- AI-assisted coding environments where brevity improves effectiveness.

Non-Goals
---------

- Not intended to replace canonical CSS syntax.
- Not intended to introduce minification or compression semantics.
- Not intended to change the CSS parsing model beyond recognizing new property aliases.

Security Considerations
-----------------------

None. This proposal introduces only syntactic aliases and does not affect layout, rendering, or runtime execution.

Request
-------

Feedback is requested on:

1. The viability of introducing an optional abbreviation mode.
2. Whether the activation mechanism (@abbrev) fits within CSS design principles.
3. Whether the abbreviation registry should be fixed or extensible in future levels.
4. Potential interactions with existing tooling or future properties.

If the concept aligns with WG principles, further detailed specification work can be drafted.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13109 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 15 November 2025 10:00:50 UTC