Skip to content

Commit 9a0f45f

Browse files
committed
update
1 parent 8ce58d6 commit 9a0f45f

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
title: Modern CSS Features: Moving Beyond Preprocessors
3+
date: 2025-09-13 00:28:20 +0800
4+
categories: [front-end, css]
5+
tags: [css, new-feature] # TAG names should always be lowercase
6+
---
7+
8+
Frontend technologies continue to evolve rapidly, and CSS is no exception. Over the past few years, CSS has been working hard to eliminate the need for preprocessors and become more developer-friendly. Many features that we once relied on preprocessors or hacky workarounds to achieve are now becoming standardized. Browser compatibility is also steadily improving, with even Safari making efforts to catch up.
9+
10+
Let's explore some of the most significant modern CSS features that are changing how we write styles.
11+
12+
## CSS Native Nesting
13+
14+
You can now write nested CSS directly without needing Sass or Less:
15+
16+
```css
17+
.card {
18+
padding: 20px;
19+
20+
& .title {
21+
font-size: 24px;
22+
color: #333;
23+
24+
&:hover {
25+
color: #666;
26+
}
27+
}
28+
29+
& .content {
30+
margin-top: 10px;
31+
}
32+
}
33+
```
34+
35+
This native nesting syntax brings the organizational benefits of preprocessors directly to CSS, making stylesheets more readable and maintainable.
36+
37+
## CSS Conditional Features
38+
39+
While we don't have an `@if` function yet, CSS has gained many powerful conditional capabilities:
40+
41+
```css
42+
/* Container Queries */
43+
@container (min-width: 300px) {
44+
.card {
45+
display: grid;
46+
grid-template-columns: 1fr 1fr;
47+
}
48+
}
49+
50+
/* Style Queries */
51+
@container style(--theme: dark) {
52+
.button {
53+
background: #333;
54+
}
55+
}
56+
```
57+
58+
These conditional features allow for more dynamic and context-aware styling.
59+
60+
## Anchor Positioning
61+
62+
This feature makes positioning incredibly powerful and flexible:
63+
64+
```css
65+
.tooltip {
66+
position: absolute;
67+
position-anchor: --my-anchor;
68+
top: anchor(bottom);
69+
left: anchor(center);
70+
}
71+
72+
.button {
73+
anchor-name: --my-anchor;
74+
}
75+
```
76+
77+
Anchor positioning simplifies the creation of tooltips, dropdowns, and other positioned elements that need to maintain relationships with their reference elements.
78+
79+
## Container Queries
80+
81+
Apply styles based on container size rather than viewport size:
82+
83+
```css
84+
.sidebar {
85+
container-type: inline-size;
86+
}
87+
88+
@container (min-width: 250px) {
89+
.widget {
90+
display: flex;
91+
}
92+
}
93+
```
94+
95+
Container queries enable truly component-based responsive design, where components adapt based on their available space rather than the overall screen size.
96+
97+
## Enhanced CSS Mathematical Functions
98+
99+
CSS now supports more sophisticated mathematical operations:
100+
101+
```css
102+
/* Trigonometric functions for circular layouts */
103+
.circle-item:nth-child(1) {
104+
transform: translate(calc(cos(0deg) * 100px), calc(sin(0deg) * 100px));
105+
}
106+
.circle-item:nth-child(2) {
107+
transform: translate(calc(cos(60deg) * 100px), calc(sin(60deg) * 100px));
108+
}
109+
.circle-item:nth-child(3) {
110+
transform: translate(calc(cos(120deg) * 100px), calc(sin(120deg) * 100px));
111+
}
112+
113+
/* More powerful clamp, min, max */
114+
.responsive-text {
115+
font-size: clamp(1rem, 4vw, 2rem);
116+
}
117+
```
118+
119+
These mathematical functions open up new possibilities for creating dynamic, mathematically-driven designs like circular layouts and complex animations.

0 commit comments

Comments
 (0)