CSS mới giúp thiết kế web thoát khỏi những chiếc hộp vuông vức

Sau ba thập kỷ gắn bó với bố cục hình chữ nhật, thế giới web đang bước vào một kỷ nguyên thiết kế mới nhờ bộ tính năng CSS tiên tiến. Hàm shape() cùng các thuộc tính border-shape và corner-shape cho phép nhà thiết kế và cả các trợ lý AI tạo ra bố cục uyển chuyển, không còn bị gò bó trong những chiếc hộp vuông vức.

Hành trình từ trang giấy đến màn hình

Khi tổ chức W3C công bố chuẩn bố cục trang web đầu tiên vào năm 1996, các trang web mô phỏng bố cục dạng lưới của báo in, tạp chí và bài báo khoa học. Vào thời điểm đó, trình điều khiển đồ họa lẫn công cụ hiển thị của trình duyệt đều còn rất sơ khai. Việc chảy văn bản trong một không gian xác định trở nên dễ dàng hơn nhiều khi tọa độ hình học của không gian đó được giữ đơn giản nhất có thể.

Ngày nay, báo in gần như không còn giữ vai trò chủ đạo, nhà phát triển web đã am hiểu hơn (và nếu chưa, AI sẵn sàng hỗ trợ), còn sức mạnh của GPU thì khỏi phải bàn. Vậy nên chẳng có lý do gì để một trang web vẫn phải cứng nhắc trong những ô vuông.

Trong tác phẩm khoa học viễn tưởng kinh điển Flatland: A Romance of Many Dimensions của Edwin A. Abbott (1884), nhân vật chính sống trong không gian hai chiều phẳng lì bỗng choáng ngợp khi được tiếp xúc với thế giới ba chiều. Nhà phát triển web có lẽ cũng sẽ trải qua cảm giác tương tự khi lần đầu sử dụng những cấu trúc CSS mới này.

Từ đường thẳng đến những đường cong mềm mại

Ở dạng nguyên thủy, HTML và CSS chỉ có thể vẽ đường hoặc viền ngang, dọc trên trang web. Muốn bố cục cầu kỳ hơn thì phải nhờ đến các trình cắm độc quyền như Java Applet, Macromedia/Adobe Flash, hoặc những thủ thuật JavaScript phiền phức.

SVG là công cụ đầu tiên phá vỡ sự vuông vức của web, cho phép tạo đường cong, đường ngoằn ngoèo, logo hay bất kỳ hình dạng kỳ quái nào bằng chuỗi tọa độ số. Tuy nhiên, SVG chỉ giới hạn trong một khung vẽ đặt trên trang, còn CSS mới là thứ chi phối bố cục của chính trang web.

Nỗ lực đầu tiên để kết nối hai thế giới này là hàm path(), cho phép nhúng SVG trực tiếp vào CSS. Nhưng path() có nhiều hạn chế: nó không phản hồi theo kích thước trang thay đổi, không hiểu biến hay đơn vị đo lường của CSS. Nhà phát triển buộc phải định nghĩa mọi thứ bằng pixel.

shape() và border-shape: Cuộc cách mạng thực sự

Hàm shape() đã đưa web đến gần hơn với thiết kế phong phú. Đây là tập hợp tọa độ hình học của một hình dạng hoặc quỹ đạo mong muốn. Khác với path() phụ thuộc vào SVG, shape() được xây dựng trên cú pháp CSS có khả năng phản hồi. Khi kết hợp với thuộc tính clip-path sẵn có, shape() đã được dùng để tạo vé xé, bong bóng chat và vô số chi tiết trang trí khác.

Thuộc tính CSS mới nhất là border-shape hoàn thiện bức tranh bằng cách áp dụng tọa độ gốc CSS được định nghĩa trong shape() vào chính đường viền trang web. Chỉ cần định nghĩa tọa độ bằng shape(), nhúng vào thuộc tính border-shape, thế là ranh giới được thiết lập ngay trên trang. Ranh giới này được bố trí sớm trong quá trình hiển thị, thay vì bị cắt gọt ở gần cuối.

"Nói cách khác, việc tạo đường viền trên các hình dạng CSS sẽ trở thành trò trẻ con!" — Temani Afif, chuyên gia CSS, nhận xét trong một bài hướng dẫn trên CSS-Tricks.

Thuộc tính mới này mở ra hàng loạt khả năng thiết kế mà trước đây quá phức tạp để có thể nghĩ tới trong một tuần làm việc 40 giờ của lập trình viên web.

Những gì có thể làm được

Temani Afif đã đưa ra nhiều minh họa trong các bài hướng dẫn của mình:

• Có thể chia cắt trang web theo bất kỳ cách nào bạn muốn, thậm chí đặt đường viền lồng trong đường viền
• Tô kín khoảng trống giữa hình dạng bên ngoài và bên trong để tạo hình khoét rỗng
• Tạo hình trái tim để ngỏ bên trong một chiếc hộp vuông chỉ bằng CSS thuần
• Cả viền ngoài lẫn hình dạng bên trong đều có thể tạo hiệu ứng động, cho phép viền ngoài đổi hình khi rê chuột qua, hoặc viền trong được lấp đầy bằng hình ảnh hay thiết kế khác
• Hình dạng có thể phóng to hoặc thu nhỏ khi rê chuột, hay văn bản được làm nổi bật bằng những đường ngoằn ngoèo nhỏ

Nếu không muốn tự tay tạo nội dung cho shape(), một thuộc tính đồng hành tên là corner-shape cung cấp nhiều mẫu viền trang trí dựng sẵn. Phần lớn là các biến thể của chiếc hộp tiêu chuẩn, gồm hộp có cạnh bo tròn, cạnh vát, khía, khoét lõm và cả một kiểu gọi là "squircle".

Tình hình hỗ trợ trên trình duyệt

Theo trang caniuse.com, tất cả trình duyệt lớn hiện đã hỗ trợ shape(), trong khi border-shape và corner-shape vẫn đang được triển khai và được coi là thử nghiệm. Tuy vậy, các phiên bản hiện tại của Chrome, Edge và Opera đã hỗ trợ chuẩn này.

Với độc giả Việt Nam — đặc biệt là các bạn làm front-end hoặc đang học lập trình web — đây là thời điểm tốt để thử nghiệm những tính năng này trong các dự án cá nhân. Việc nắm bắt sớm các kỹ thuật CSS mới sẽ tạo lợi thế rõ rệt khi các trình duyệt phổ biến tại Việt Nam như Chrome, Cốc Cốc và Edge cập nhật hỗ trợ đầy đủ.

Giờ đây, trách nhiệm xây dựng một web uyển chuyển hơn nằm trong tay các nhà phát triển. Kỷ nguyên thống trị của những chiếc hộp vuông vức cuối cùng đã đến hồi kết thúc.