Trong thế giới rộng lớn của thiết kế web, CSS là ngôn ngữ không thể thiếu, mang đến khả năng kiểm soát gần như mọi khía cạnh của giao diện. Tuy nhiên, với hàng trăm thuộc tính được hỗ trợ, ngay cả những chuyên gia thiết kế web giàu kinh nghiệm cũng có thể bỏ qua vô số các thuộc tính CSS ít dùng nhưng lại sở hữu sức mạnh đáng kinh ngạc. Việc khám phá những “viên ngọc ẩn” này không chỉ giúp bạn mở rộng kiến thức mà còn cung cấp những công cụ đắc lực để tối ưu hóa giao diện người dùng, nâng cao tính chuyên nghiệp và sáng tạo trong các dự án của mình.
Dựa trên báo cáo về tình trạng nền tảng của Google (Google’s Platform Status report), chúng ta có thể nhận biết được những thuộc tính nào ít được sử dụng nhất. Mặc dù một số thuộc tính CSS có thể là thử nghiệm hoặc chỉ dành riêng cho trình duyệt nhất định, nhưng tất cả các thuộc tính được giới thiệu trong bài viết này đều được hỗ trợ tốt bởi các trình duyệt hiện đại, chúng chỉ đơn giản là ít khi được áp dụng. Hãy cùng thoibaocongnghe.net đi sâu vào 7 thuộc tính CSS độc đáo này, biến chúng thành bí quyết để nâng cấp kỹ năng thiết kế web của bạn.
1. empty-cells: Kiểm soát Hiển thị Ô Trống trong Bảng
Thuộc tính empty-cells đặc biệt dành cho các bảng HTML và thường được sử dụng cùng với border-collapse: separate. Nó cho phép bạn kiểm soát việc các ô không chứa nội dung hiển thị nền và đường viền của chúng hay không.
Hãy xem ví dụ một bảng đơn giản với 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 (nơi chứa “Grapes”) 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 khai báo 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:
Ba bảng HTML minh họa cách thuộc tính empty-cells: hide ẩn nền và viền của ô trống.
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 sẽ tiếp tục 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: Tùy chỉnh Vị trí Gạch chân Văn bản
Hơn 80% các trang web sử dụng thuộc tính text-decoration, thường để kiểm soát việc gạch chân các liên kết. 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 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 dưới để không cắt ngang các phần tử con của chữ cái (descenders) như ‘j’ và ‘g’. Điều này có thể cải thiện khả năng đọc, đặc biệt với các cài đặt line-height ngắn hơn.
Bốn đoạn văn bản hiển thị liên kết với các kiểu gạch chân khác nhau sử dụng 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 bottom border. 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ý. May mắn thay, giờ đây bạn không cần phải dùng đến cách này nữa.
3. column-span: Chia Cột và Vượt Khỏi Giới Hạn
Các cột 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 như display: float, các cột cũng gặp phải vấn đề 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 layout tổng thể!
Tuy nhiên, khi được sử dụng để tái tạo kiểu cột báo chí truyền thống, thuộc tính này có thể tăng thêm sự thú vị cho các thiết kế nặng về 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 tận dụng toàn bộ chiều rộng của màn hình lớn, chẳng hạn như trên 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 dài qua các cột, bỏ qua chúng một cách hiệu quả:
Văn bản được chia thành ba cột với các tiêu đề phụ ngắt dòng, minh họa hiệu ứng column-span: all.
Trong ví dụ này, việc kéo dài cột rất đơn giản:
h1, h2 { column-span: all }Thuộc tính này khá đơn giản, với chỉ 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ác với thuộc tính HTML tương tự cho ô bảng, colspan, không có hỗ trợ giá trị số để kéo dài chỉ một số cột nhất định; 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% các trang web, gấp mười lần số lượng 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: Thuộc tính Viết tắt Mạnh Mẽ nhưng Bị Lãng Quên
Thuộc tính grid là một trường hợp thú vị. Bố cục Grid hiện rất phổ biến nói chung, bằng chứng là grid-template-columns được sử dụng trong 42% các trang. Nhưng thuộc tính viết tắt grid đơn giản lại cực kỳ không phổ biến, chỉ được sử dụng bởi chưa đến nửa phần trăm các trang.
Có lẽ đó là do grid là một thuộc tính viết tắt rất 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%) hơn. Tuy nhiên, giống như tất cả các thuộc tính viết tắt, 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ũ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ài dòng như grid-auto-flow để làm rõ, khi thích hợp.
5. initial-letter: Tạo Chữ Cái Đầu Dòng Lớn (Drop Cap) Dễ Dàng
Chữ cái đầu dòng lớn (drop cap) đề cập đến một kiểu định dạng cụ thể 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 các trang trí công phu hoặc các nét phong cách khác.
Hiệu ứng này từng 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 cho biết tỷ lệ của chữ cái đó:
p {
/* Cao 3 dòng */
initial-letter: 3;
}Bạn cũng có thể cung cấp giá trị thứ hai để xác định đường cơ sở của chữ cái drop-cap:
p {
/* Cao 2 dòng, đườ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 bản mẫu với chữ cái đầu dòng lớn (drop cap), được định dạng bằng thuộc tính initial-letter.
6. text-emphasis: Đánh Dấu Nhấn Mạnh Khác Biệt
Thuộc tính text-emphasis không liên quan gì đến thẻ em (emphasis) hoặc giá trị italic cho font-style đượ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 nó. Sự khác biệt chính là text-emphasis vẽ một ký tự cụ thể ở phía trên hoặc phía dưới từng ký tự riêng lẻ.
p {
text-emphasis: filled double-circle red;
}
.info {
text-emphasis: "!";
}Bạn có thể sử dụng thuộc tính text-emphasis-position để hiển thị các dấu ở over (trên) hoặc under (dưới) văn bản trong chế độ viết ngang. Nhưng thuộc tính text-emphasis-style mới thực sự thú vị (text-emphasis là thuộc tính viết tắt cho cả hai). Bạn có thể sử dụng một giá trị như “triangle” (hình tam giác) hoặc “circle” (hình tròn) để sử dụng một biểu tượng 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 bản minh họa thuộc tính text-emphasis với biểu tượng cảm xúc ngọn lửa được thêm vào trên mỗi ký tự.
“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 pháp bao gồm giá trị “open sesame”.
7. text-wrap-style: Tùy chỉnh Phong cách Ngắt Dòng 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 ra mắt vào tháng 10 năm 2024. Khi văn bản bên trong một phần tử ngắt dòng, thuộc tính này gợi ý cho trình duyệt biết ưu tiên của nó là gì.
Hai giá trị quan trọng nhất là pretty và balance. pretty gợi ý 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 các phần tử “orphan” (từ đơn độc ở đầu dòng mới) ở 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ư bằng nhau nhất có thể.
Hai khối văn bản giống nhau với điểm ngắt dòng khác biệt, minh họa các giá trị pretty và balance của text-wrap-style.
Vì đây là một thuộc tính mới và sự hỗ trợ vẫn còn mới mẻ, bạn có thể chưa nhận thấy sự khác biệt lớn khi sử dụng thuộc tính này. 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ù sao đi nữa, nó hoàn toàn an toàn để sử dụng vì hiệu ứng tinh tế, với một giá trị mặc định hợp lý.
Việc khám phá và nắm vững các thuộc tính CSS ít dùng nhưng đầy tiềm năng này không chỉ là một cách để nâng cao kiến thức chuyên môn mà còn là chìa khóa để tạo ra những trải nghiệm người dùng độc đáo và hiệu quả hơn. Từ việc kiểm soát chi tiết các ô trống trong bảng, điều chỉnh vị trí gạch chân văn bản, đến việc tạo bố cục cột báo chí linh hoạt hay những kiểu chữ cái đầu dòng ấn tượng, mỗi thuộc tính đều mang lại giá trị riêng biệt.
Trên thoibaocongnghe.net, chúng tôi luôn nỗ lực mang đến những thông tin công nghệ mới nhất và hữu ích nhất. Hy vọng bài viết này đã giúp bạn có thêm cái nhìn sâu sắc về những “bí mật” trong CSS, từ đó ứng dụng vào các dự án thiết kế web của mình một cách sáng tạo hơn. Đừng ngần ngại thử nghiệm và chia sẻ những khám phá của bạn trong phần bình luận bên dưới!
