7 Lesser‑Known CSS Properties That Can Wow Your UI

As front‑end development evolves, new CSS properties are continuously added to the specification. This article lists seven lesser‑known but highly useful CSS properties and demonstrates how they can simplify common UI scenarios.

1. position:sticky

Sticky positioning lets an element stay fixed to the top of its container while scrolling, useful for table headers, navigation bars, or alphabetic section titles. Previously developers combined JavaScript with CSS, but the position: sticky value now handles this natively.

.container {
    background-color: oldlace;
    height: 200px;
    width: 140px;
    overflow: auto;
}
.container div {
    height: 20px;
    background-color: aqua;
    border: 1px solid;
}
.container .header {
    position: sticky;
    top: 0;
    background-color: rgb(187,153,153);
}

Note: developers should check browser compatibility before using this property.

2. :empty selector

The :empty pseudo‑class matches elements with no child nodes, allowing CSS to display a placeholder when a container has no content, eliminating the need for JavaScript checks.

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

3. gap

The gap property, originally for CSS Grid, also works with Flexbox and multi‑column layouts, providing a simple way to distribute space between items without manual calculations.

display: flex | grid;
gap: 20px;

4. background-clip:text

Using background-clip: text lets developers create text with a background image or color, achieving effects that might otherwise require graphic tools.

5. user-select

The user-select property can disable text selection on web pages, making the UI behave more like native mobile apps. It is especially useful in WebView‑based desktop applications such as those built with Electron.

6. :invalid pseudo‑class

The :invalid pseudo‑class matches form controls that fail validation. By styling input:invalid and input:valid, developers can provide visual feedback without JavaScript.

input:invalid { background-color: #ffdddd; }
form:invalid { border: 5px solid #ffdddd; }
input:valid { background-color: #ddffdd; }
form:valid { border: 5px solid #ddffdd; }
input:required { border-color: #800000; border-width: 3px; }
input:required:invalid { border-color: #C00000; }

7. :focus-within pseudo‑class

The :focus-within selector matches an element when it or any of its descendants receive focus, enabling parent‑level styling based on child focus state.

form {
    border: 1px solid;
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form:focus-within {
    box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    background-color: beige;
}

8. mix-blend-mode:difference

The mix-blend-mode: difference property defines how an element’s content blends with its background, allowing complex visual effects with minimal code.

.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: difference;
}
.dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode: difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}

These examples illustrate how modern CSS can replace JavaScript for many UI patterns, improve maintainability, and create striking visual effects while keeping the markup lightweight.

Hope this collection inspires you to explore and adopt these powerful CSS features in your projects.