Ngay cả với những chuyên gia thiết kế web giàu kinh nghiệm, vẫn có vô số thuộc tính CSS ít phổ biến mà bạn có thể chưa bao giờ sử dụng hoặc thậm chí chưa từng nghe đến. Với hàng trăm thuộc tính được hỗ trợ, CSS ẩn chứa nhiều khía cạnh mà chúng ta khó có thể khám phá hết. Tuy nhiên, một số trong số đó lại vô cùng mạnh mẽ và đáng để tìm hiểu, bất chấp tần suất sử dụng hiếm hoi. Bài viết này của xalocongnghe.com sẽ đưa bạn đi sâu vào thế giới của 7 thuộc tính CSS đặc biệt, ít dùng nhưng đầy tiềm năng, giúp bạn tối ưu hóa giao diện và nâng cao trải nghiệm người dùng trên website của mình.
Nhờ báo cáo Google’s Platform Status report, chúng ta có thể biết được những thuộc tính nào ít được sử dụng nhất, và từ đó khám phá ra những công cụ mới mẻ, mạnh mẽ. Mặc dù một số thuộc tính CSS có thể đang trong giai đoạn thử nghiệm, chỉ dành riêng cho trình duyệt nhất định hoặc chưa được triển khai rộng rãi, nhưng tất cả các thuộc tính được giới thiệu tại đây đều được hỗ trợ tốt bởi các trình duyệt hiện đại – chúng chỉ đơn thuần là ít khi được sử dụng mà thôi. Hãy cùng xalocongnghe.com khám phá và ứng dụng những “viên ngọc ẩn” này để tạo nên những thiết kế web độc đáo và tối ưu.
1. empty-cells: Ẩn Ô Trống Trong Bảng HTML
Thuộc tính empty-cells là công cụ chuyên biệt cho các bảng HTML, thường được sử dụng cùng với border-collapse: separate. Nó kiểm soát việc các ô không có nội dung hiển thị nền và đường viền hay không. Điều này đặc biệt hữu ích khi bạn muốn tinh chỉnh giao diện bảng, tránh sự lộn xộn từ các ô trống không cần thiết.
Hãy xem xét ví dụ một bảng đơn giản, có một ô trống và một ô khác kéo dài xuống ô bên dưới:
<table>
<tr>
<td>Apples</td>
<td>4</td>
</tr>
<tr>
<td>Grapes</td>
<td></td>
</tr>
<tr>
<td rowspan="2">Bananas</td>
<td>4</td>
</tr>
<tr>
<td>9</td>
</tr>
</table>Vì ô trống hoàn toàn không có nội dung, nó có thể được điều khiển bằng thuộc tính empty-cells:
td {
empty-cells: hide;
}Với thiết lập này, bất kỳ ô bảng nào không có nội dung hiển thị sẽ ngừng hiển thị màu nền hoặc đường viền của chúng.
Ví dụ ba bảng HTML, trong đó có một bảng sử dụng empty-cells: hide để ẩn ô trống không có đường viền và nền
Hiệu ứng này đặc biệt hữu ích với các bảng lớn, giúp dễ dàng nhận diện dữ liệu bị thiếu hoặc bất thường. Lưu ý rằng một bảng có border-collapse: collapse sẽ vẫn hiển thị cả đường viền và nền, ngay cả khi các ô trống được ẩn bằng thuộc tính này.
2. text-underline-position: Điều Chỉnh Vị Trí Gạch Chân Văn Bản
Hơn bốn trong năm website sử dụng thuộc tính text-decoration, thường là để kiểm soát cách các liên kết được gạch chân. Tuy nhiên, giá trị underline cho thuộc tính này có thể đi kèm với một thuộc tính ít được sử dụng hơn là text-underline-position:
a {
text-decoration: underline;
text-underline-position: under;
}Với giá trị “under”, đường gạch chân sẽ được đẩy xuống để không giao cắt với phần đuôi của các chữ cái như ‘j’ và ‘g’. Điều này có thể cải thiện đáng kể khả năng đọc, đặc biệt với các thiết lập line-height ngắn.
Bốn đoạn văn minh họa các liên kết với kiểu gạch chân khác nhau, bao gồm vị trí gạch chân dưới descender nhờ thuộc tính text-underline-position
Trước khi có thuộc tính này, một giải pháp phổ biến là mô phỏng đường gạch chân bằng cách sử dụng border-bottom. Tuy nhiên, cách tiếp cận đó có những tác dụng phụ không mong muốn và khó quản lý, vì vậy thật may mắn khi bạn không còn cần phải dùng đến nó nữa.
3. column-span: Tạo Phần Tử Tràn Cột Trong Bố Cục Nhiều Cột
Bố cục cột (columns) là một thuộc tính CSS khá ít được sử dụng, chỉ xuất hiện trên dưới 3% tổng số trang web. Từng bị mô phỏng bằng các giải pháp thay thế như display: float, các cột cũng gặp phải vấn đề về sự không nhất quán giữa các trình duyệt và thiếu sự hiểu biết rõ ràng; chúng không dành cho bố cục tổng thể thông thường!
Tuy nhiên, khi được sử dụng để tái tạo các cột theo kiểu báo chí truyền thống, thuộc tính này có thể tăng thêm sự hấp dẫn cho các thiết kế nặng văn bản và cải thiện khả năng đọc. Chúng đặc biệt hữu ích khi bạn muốn sử dụng toàn bộ chiều rộng của màn hình lớn, chẳng hạn như màn hình máy tính để bàn.
Thuộc tính column-span giải quyết nhu cầu thoát khỏi bố cục cột ở giữa một khối, khiến một phần tử trải rộng qua các cột, bỏ qua chúng một cách hiệu quả:
Ví dụ ba cột văn bản được ngắt bởi các tiêu đề ở giữa trang, sử dụng thuộc tính column-span: all để trải rộng qua tất cả các cột
Trong ví dụ này, việc trải rộng rất đơn giản:
h1, h2 { column-span: all }Thuộc tính này khá đơn giản, chỉ có hai giá trị quan trọng: none (mặc định) hoặc all. Giá trị all cho biết rằng một phần tử nên bỏ qua các cột và kéo dài qua tất cả các cột hiện có. Không giống như thuộc tính HTML colspan tương tự cho các ô bảng, không có hỗ trợ giá trị số để chỉ trải rộng một số cột; nó là tất cả hoặc không có gì.
Thật thú vị, thuộc tính column-gap được sử dụng bởi hơn 30% trang web, gấp mười lần số lượng trang sử dụng thuộc tính columns. Điều này là do column-gap đã được mở rộng để áp dụng cho các bố cục ngoài cột, như flexbox và grid.
4. grid: Sức Mạnh Của Shorthand Trong CSS Grid
Thuộc tính grid là một trường hợp thú vị. Bố cục Grid hiện nay rất phổ biến nói chung, bằng chứng là việc grid-template-columns được sử dụng trong 42% các trang web. Nhưng thuộc tính grid shorthand đơn giản lại cực kỳ ít phổ biến, chỉ được sử dụng bởi chưa đến nửa phần trăm các trang.
Có lẽ bởi vì grid là một shorthand quá phức tạp, kết hợp tất cả các thuộc tính grid trong một. Dưới đây là một số khai báo ví dụ mà thuộc tính này chấp nhận:
grid: "a" 100px "b" 1fr;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
grid: 30% / auto-flow dense;
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);Không có gì ngạc nhiên khi các nhà thiết kế ưa chuộng các thuộc tính riêng lẻ như grid-template-columns (42%), grid-column (23%) và grid-gap (19%). Tuy nhiên, giống như tất cả các thuộc tính shorthand, grid có thể tiết kiệm thời gian và giảm độ phức tạp, đồng thời làm cho CSS của bạn dễ bảo trì hơn. Hãy cẩn thận: việc lạm dụng có thể gây nhầm lẫn, vì vậy hãy cân nhắc sử dụng các thuộc tính dạng dài như grid-auto-flow để làm rõ, khi thích hợp.
5. initial-letter: Hiệu Ứng Chữ Cái Đầu Đoạn (Drop Cap)
Drop cap (chữ cái đầu đoạn lớn) đề cập đến một kiểu định dạng đặc biệt cho chữ cái đầu tiên của một đoạn văn hoặc khối văn bản. Bạn có thể thấy kiểu này trong sách hoặc tạp chí, nơi chữ cái đầu tiên lớn hơn nhiều, đậm hơn và thường đi kèm với trang trí hoa mỹ hoặc các kiểu cách khác.
Hiệu ứng này trước đây có thể thực hiện được, nhưng chỉ bằng cách sử dụng thuộc tính float với một số điều chỉnh cẩn thận cho các kiểu liên quan. Thuộc tính initial-letter đơn giản hóa điều này, với một giá trị đơn giản chỉ ra tỷ lệ kích thước của chữ cái đó:
p {
/* 3 dòng cao */
initial-letter: 3;
}Bạn cũng có thể cung cấp một giá trị thứ hai để xác định đường cơ sở của chữ cái drop-cap:
p {
/* 2 dòng cao, đường cơ sở chìm 1 dòng */
initial-letter: 2 1;
}Sử dụng các giá trị này, bạn có thể kiểm soát kích thước và vị trí dọc của các chữ cái drop-cap:
Hai đoạn văn mẫu với chữ cái đầu đoạn (drop cap) lớn và đậm, minh họa cách dùng thuộc tính initial-letter trong CSS
6. text-emphasis: Nhấn Mạnh Văn Bản Bằng Ký Tự Đặc Biệt
Thuộc tính text-emphasis không liên quan gì đến thẻ <em> (emphasis) hay giá trị italic cho font-style có thể được sử dụng để mô phỏng vẻ ngoài của văn bản được nhấn mạnh. Thay vào đó, nó là một cách đánh dấu văn bản để nhấn mạnh, giống như gạch chân. Sự khác biệt chính là text-emphasis vẽ một ký tự cụ thể lên trên hoặc xuống dưới các ký tự riêng lẻ.
p { text-emphasis: filled double-circle red;}
<p>.info { text-emphasis: "!";}</p>Bạn có thể sử dụng thuộc tính text-emphasis-position để hiển thị các dấu nhấn over (trên) hoặc under (dưới) văn bản trong chế độ viết ngang. Nhưng chính thuộc tính text-emphasis-style mới thực sự thú vị (text-emphasis là một shorthand cho cả hai). Bạn có thể sử dụng một giá trị như “triangle” hoặc “circle” để dùng một ký hiệu chung. Bạn cũng có thể sử dụng bất kỳ ký tự Unicode nào, trong dấu ngoặc kép, bao gồm cả biểu tượng cảm xúc:
Đoạn văn mẫu với ký hiệu lửa emoji được đặt phía trên mỗi ký tự, minh họa hiệu ứng của thuộc tính text-emphasis trong CSS
“Sesame” là một dấu hiệu chữ viết được sử dụng trong các ngôn ngữ Đông Á để nhấn mạnh. Vì text-emphasis hỗ trợ ký tự này, CSS của bạn giờ đây có thể hợp lệ bao gồm giá trị “open sesame”.
7. text-wrap-style: Tối Ưu Cách Xuống Dòng Của Văn Bản
Thuộc tính text-wrap-style là thuộc tính mới nhất trong danh sách này, với sự hỗ trợ trên các trình duyệt mới nhất được triển khai vào tháng 10 năm 2024. Khi văn bản bên trong một phần tử xuống dòng, thuộc tính này gợi ý cho trình duyệt đâu là ưu tiên của nó.
Hai giá trị quan trọng nhất là pretty và balance. Giá trị pretty đề xuất rằng trình duyệt nên tối ưu hóa bố cục hơn là tốc độ. Nó nên bao gồm các cải tiến như giữ số lượng phần tử “mồ côi” (orphan elements) ở mức tối thiểu. Trong khi đó, balance nên đảm bảo số lượng ký tự trên mỗi dòng gần như nhau nhất có thể.
Hai khối văn bản giống nhau với các điểm xuống dòng khác nhau, thể hiện sự khác biệt giữa text-wrap-style: pretty và text-wrap-style: balance
Vì đây là một thuộc tính mang tính hướng dẫn và sự hỗ trợ vẫn còn mới, bạn có thể không nhận thấy sự khác biệt lớn khi sử dụng nó. Cách tốt nhất để thử nghiệm là áp dụng trên các trang hiện có và xem các hiệu ứng khác nhau như thế nào. Dù bằng cách nào, nó hoàn toàn an toàn để sử dụng vì hiệu ứng tinh tế, với một mặc định hợp lý.
Kết luận
Thế giới CSS luôn rộng lớn và ẩn chứa nhiều bất ngờ. Việc khám phá và ứng dụng những thuộc tính ít phổ biến như empty-cells, text-underline-position, column-span, grid shorthand, initial-letter, text-emphasis và text-wrap-style không chỉ giúp bạn tạo ra những giao diện web độc đáo, tinh tế hơn mà còn thể hiện sự chuyên nghiệp và am hiểu sâu sắc về công nghệ. Những “viên ngọc ẩn” này có thể là chìa khóa để giải quyết các vấn đề thiết kế cụ thể, tối ưu hóa trải nghiệm người dùng và nâng tầm kỹ năng phát triển giao diện của bạn.
Hãy thử nghiệm và tích hợp các thuộc tính CSS này vào dự án của bạn để thấy được sự khác biệt. Chia sẻ những trải nghiệm và kết quả của bạn với xalocongnghe.com trong phần bình luận bên dưới, hoặc khám phá thêm các bài viết chuyên sâu khác về công nghệ và lập trình web của chúng tôi!
