Tương lai của CSS: 10 tính năng có thể thay đổi cách chúng ta xây dựng web trong năm 2027

Trong nhiều năm qua, các ông lớn trình duyệt gồm Google, Apple, Microsoft và Mozilla (cùng với Igalia và Bocoup) đã bắt tay vào dự án Interop nhằm cải thiện khả năng hỗ trợ đồng nhất các công nghệ web. Thành công của dự án này rất đáng nể: khi một nhóm tính năng được đưa vào Interop, chỉ trong khoảng một năm, tỷ lệ hỗ trợ thường đạt gần 100% trên tất cả trình duyệt lớn.

Ví dụ điển hình là CSS Subgrid — một phần mở rộng mạnh mẽ của CSS Grid cho phép tạo ra những bố cục hoàn toàn mới. Subgrid xuất hiện trên Firefox từ năm 2019 nhưng suốt nhiều năm không có tiến triển ở các trình duyệt khác. Đến khi được đưa vào Interop 2023, chỉ cuối năm đó nó đã có mặt rộng rãi trên mọi trình duyệt hiện đại.

Biểu đồ tỷ lệ hỗ trợ Subgrid qua các trình duyệt

Khi bước vào cuối năm 2026, Interop 2027 đang trong giai đoạn lên kế hoạch. Nhóm Mozilla đã tạo một hệ thống xếp hạng để cộng đồng bình chọn những tính năng mong muốn nhất. Dữ liệu này sẽ được dùng để quyết định nội dung của Interop năm sau. Dưới đây là 10 tính năng CSS nổi bật nhất mà tác giả Josh Comeau đã bình chọn — một bản xem trước về diện mạo CSS trong thời gian tới.

1. CSS functions — hàm tự định nghĩa trong CSS

Một trong những ý tưởng thú vị nhất là đề xuất thêm hàm (function) vào CSS. Cú pháp quen thuộc với lập trình viên JavaScript:

@function --gradient-to-transparent(--color, --direction: bottom) {
  result: linear-gradient(
    to var(--direction),
    var(--color),
    transparent
  );
}

.elem {
  background: --gradient-to-transparent(red);
}

Ta định nghĩa hàm bằng @function và trả về giá trị với result. Ứng dụng đáng chú ý nhất là khả năng chuyển đổi giữa tọa độ cực và tọa độ Descartes — một phép toán được dùng đi dùng lại trong các hiệu ứng chuyển động:

@function --translate-polar(--angle, --distance) {
  result: translate(
    calc(cos(var(--angle)) * var(--distance)),
    calc(sin(var(--angle)) * var(--distance))
  );
}

.particle {
  transform: --translate-polar(45deg, 100px);
}

Nghe có vẻ "khoa học viễn tưởng", nhưng tính năng này đã được triển khai trên các trình duyệt Chromium. Nếu lọt vào Interop 2027, khả năng cao nó sẽ sớm được hỗ trợ rộng rãi.

2. Bevel và squircle với corner-shape

Thuộc tính border-radius quen thuộc tạo ra các hình chữ nhật bo tròn bằng cách thêm một phần tư đường tròn vào mỗi góc. Còn corner-shape là cách khám phá các hình thức kết nối góc khác:

• squircle: dùng superellipse tạo góc bo mượt mà hơn — cách Apple đã áp dụng nhiều năm
• bevel: góc vát cạnh, rất hợp với giao diện game hoặc phong cách sci-fi
• notch: góc khuyết
• scoop: góc lõm

Điểm khác biệt lớn so với clip-path hay mask là corner-shape thay đổi hình dạng thực của border-box, nên border, outline và box-shadow sẽ tự động bám theo hình dạng mới. Đây là ứng dụng hoàn hảo cho kỹ thuật progressive enhancement — có thể dùng ngay hôm nay mà không lo trình duyệt cũ.

Biểu tượng các trình duyệt phổ biến

3. Vô vàn khả năng với border-shape

Bên cạnh corner-shape, còn có đề xuất riêng cho border-shape — phiên bản cấp thấp hơn cho phép tự vẽ đường viền bằng đường thẳng, cung tròn và đường cong Bézier.

Tác giả đã dùng tính năng này để vẽ một tấm card với phần khoét tròn lớn ở phía trên, sau đó thêm viền trắng và outline đen để tạo hiệu ứng. Giống như corner-shape, thuộc tính này thay đổi border-box thực tế nên viền, outline và bóng đổ đều bám đúng hình dạng. Thậm chí có thể tạo hiệu ứng chuyển động giữa các hình dạng viền khác nhau.

4. Anchored Container Queries

Anchor Positioning là một trong những tính năng CSS hiện đại thú vị nhất, đã được ưu tiên trong Interop 2026 và hiện đã có mặt rộng rãi. API này cho phép gắn một phần tử vào một phần tử khác — ví dụ gắn tooltip nổi vào nút kích hoạt, để dù nút nằm ở đâu trên trang, tooltip vẫn luôn gắn liền với nó.

Phiên bản "Level 2" của API bổ sung một loại container query mới, cho phép kiểm tra xem phần tử đích đang dùng vị trí mặc định hay vị trí dự phòng. Điều này giải quyết bài toán khó: khi tooltip bị đảo xuống dưới do không đủ chỗ phía trên, ta cần biết để xoay mũi nhọn chỉ về phía nút.

5. Hàm inherit() trong CSS

Từ khóa inherit cho phép kế thừa giá trị từ phần tử cha, kể cả với thuộc tính thường không được kế thừa. Nhưng nó có hạn chế: với bo góc lồng nhau, ta không thể dùng nguyên giá trị kế thừa mà cần giảm bớt để hiển thị đúng.

Đề xuất hàm inherit() sẽ lấy giá trị kế thừa và cho phép chỉnh sửa bằng calc():

p {
  border-radius: calc(inherit() - 4px);
}

Đây là tính năng còn rất sơ khai, khó có mặt trong Interop 2027, nhưng hứa hẹn sẽ cực kỳ hữu ích trong tương lai.

6. Scroll-triggered animations

Scroll-driven animations (đã có trong Interop 2026 và được hỗ trợ rộng rãi) cho phép tua một chuỗi keyframe theo thao tác cuộn. Còn scroll-triggered animations là đề xuất riêng: kích hoạt một animation khi người dùng cuộn đến một điểm cụ thể — giống như cảm biến tiệm cận kích hoạt, sau đó animation chạy bình thường trong khoảng thời gian định sẵn.

Hiện tại ta có thể làm điều này bằng IntersectionObserver trong JavaScript, nhưng khá vất vả. Khi làm được hoàn toàn bằng CSS, trải nghiệm phát triển sẽ dễ chịu hơn nhiều.

7. reading-flow và reading-order

Với bố cục lưới đáp ứng (responsive grid), thứ tự hiển thị trên desktop và mobile có thể hoàn toàn khác nhau. Nhưng thứ tự tab luôn dựa trên thứ tự DOM, không phải thứ tự thị giác — gây bất lợi cho người dùng công nghệ hỗ trợ như trình đọc màn hình.

Thuộc tính reading-flow giải quyết vấn đề này:

.grid {
  display: grid;
  reading-flow: grid-rows;
}

Có các giá trị cho cả CSS Grid lẫn Flexbox. Nếu cần kiểm soát chi tiết hơn, thuộc tính reading-order cho phép tạo thứ tự tùy chỉnh, tương tự tabIndex trong HTML. Tính năng này được vận động bởi Rachel Andrew — một trong những chuyên gia CSS nổi tiếng.

8. Animation kích thước với interpolate-size và calc-size()

Một nỗi đau lâu năm trên web là không thể tạo animation giữa các giá trị từ khóa như auto. Thuộc tính interpolate-size khắc phục điều này, cùng với hàm calc-size() liên quan.

Ứng dụng phổ biến nhất là tạo animation giữa height: 0 và height: auto cho các giao diện accordion có thể thu gọn:

html {
  interpolate-size: allow-keywords;
}

Tính năng này đã có trên Chrome từ năm 2024 và có thể dùng ngay hôm nay như progressive enhancement — chỉ cần bọc trong @supports để tránh làm chậm trình duyệt chưa hỗ trợ.

Biểu tượng trình duyệt Firefox và Safari

9. Gap decorations — đường kẻ trong lưới

CSS Grid có một nhược điểm: không dễ thêm đường viền giữa các ô lưới, vì ô trống không có phần tử nào để gắn border. Đề xuất gap decorations giới thiệu bộ thuộc tính mới cho phép dùng cú pháp giống border trực tiếp trên lưới:

.grid {
  display: grid;
  gap: 1px;
  border: 1px solid red;
  rule: 1px solid red;
}

Giống border, thuộc tính rule là shorthand cho phép chỉ định độ dày, màu sắc và kiểu đường (nét đứt, chấm, liền). Có thể dùng row-rule và column-rule nếu chỉ muốn kẻ giữa các hàng hoặc các cột.

10. Scroll state container queries

Khi dùng position: sticky, bạn có bao giờ ước có cách biết phần tử đã "dính" vào đầu trang hay chưa? Đề xuất scroll state container queries đưa ra một loại container query mới, khớp khi phần tử sticky chuyển từ vị trí trong luồng sang neo vào viewport:

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .header-content {
    background: var(--gray-300);
    border-bottom: 1px solid var(--gray-500);
  }
}

API này không chỉ dành cho sticky — ta còn có thể kiểm tra container cuộn đã ở đầu hay cuối chưa, rất hữu ích để hiện dải gradient gợi ý có thể cuộn tiếp.

Biểu tượng trình duyệt Edge và Safari

Kết luận: Kiến thức CSS chuyên sâu càng quan trọng trong kỷ nguyên AI

Bước sang năm thứ 7, Interop đã là một thành công vang dội cho nền tảng web. Tác giả thừa nhận đây là giai đoạn kỳ lạ với lập trình viên web khi nhiều người tự hỏi liệu có còn cần quan tâm tới CSS hiện đại khi đã giao phó công việc cho các mô hình ngôn ngữ lớn (LLM).

Câu trả lời là cần hơn bao giờ hết. Không thể kỳ vọng LLM sử dụng các tính năng CSS hiện đại khi phần lớn dữ liệu huấn luyện của chúng đã vài năm tuổi.

Hầu hết các tính năng trong bài đều có thể dùng ngay hôm nay như progressive enhancement, và theo quy luật lịch sử, nhiều tính năng sẽ sớm được hỗ trợ rộng rãi. Để tạo trải nghiệm người dùng tốt nhất, lập trình viên cần hướng dẫn các AI agent tận dụng tính năng web hiện đại — đồng nghĩa với việc chính chúng ta phải hiểu chúng.

Với lập trình viên Việt Nam, đây là thời điểm tốt để bắt đầu thử nghiệm những tính năng này trong các dự án thực tế. Các đề xuất đều có tài liệu công khai và hệ thống bình chọn mở, nên cộng đồng có thể trực tiếp đóng góp vào hướng phát triển của CSS trong năm tới.