Bạn có từng cảm thấy nhàm chán với giao diện trang Web hiện tại? Bạn muốn thay đổi diện mạo cho trang Web của mình nhưng lại e ngại về việc phải sửa đổi code phức tạp? Vậy thì bài viết này chính là dành cho bạn!

Trong bài viết này, hãy cùng VietnamWorks inTECH khám phá cách chỉ một dòng mã CSS có thể biến đổi một trang web từ bình thường thành ấn tượng, và những ứng dụng thực tiễn của kỹ thuật này trong việc cải thiện trải nghiệm người dùng và nâng cao giá trị thẩm mỹ của trang web.

1. Giới hạn chiều rộng nội dung trong Viewport (khung nhìn)

body {
  max-width: clamp(320px, 90%, 1000px);
  /* additional recommendation */
  margin: auto;
}

Việc thêm dòng lệnh này sẽ giảm kích thước nội dung xuống còn 90% diện tích khung nhìn, giới hạn chiều rộng của nội dung trong khoảng từ 320 đến 1000 pixel (bạn có thể chỉnh sửa giá trị tối thiểu và tối đa).

Thay đổi này sẽ tự động làm cho nội dung của bạn trông đẹp hơn nhiều. Nó sẽ không còn là một khối văn bản chằn chịt nữa mà sẽ trông có cấu trúc và tổ chức hơn. Ngoài ra, nếu bạn thêm margin: auto; vào body, thì nội dung sẽ được căn giữa trang. 

Side-by-side comparison of change. Left side (before): a big block of text. Right side (after): text with padding on the sides. Still big but with more spaces.

2. Tăng kích thước văn bản

body {
  font-size: 1.25rem;
}

kích thước phông chữ mặc định của trình duyệt là 16px, nếu bạn muốn tăng kích thước phông chữ trong phần thân trang thì bạn có thể sử dụng đoạn code trên. Điều này sẽ làm cho tất cả văn bản trong trang web tự động tăng kích thước theo tỷ lệ đã định sẵn.

side by side comparison. Left (before): column with text. Right (after): column with text at a larger size.

3. Tăng khoảng cách giữa các dòng

body {
  line-height: 1.5;
}

Một tùy chọn khác để cải thiện khả năng đọc và phá vỡ các văn bản dày đặc chữ là tăng khoảng cách giữa các dòng trong đoạn văn và nội dung. Chúng ta có thể dễ dàng thực hiện điều này bằng thuộc tính line-height.

Lựa chọn này (cùng với hai lựa chọn trước) sẽ làm tăng đáng kể kích thước theo chiều dọc của trang, đảm bảo rằng văn bản sẽ dễ đọc hơn và thân thiện hơn với mọi người dùng.

side by side comparison. Left (before): column with text. Right (after): column with text (more spaced).

4. Giới hạn kích thước hình ảnh

img {
  max-width: 100%;
}

Hình ảnh nên có kích thước tương đương với không gian mà chúng sẽ chiếm, nhưng đôi khi, chúng ta gặp phải những hình ảnh quá dài làm cho nội dung bị lệch và tạo ra cuộn ngang.

Một cách để tránh điều này là đặt chiều rộng tối đa là 100%. Mặc dù đây không phải là giải pháp hoàn hảo (các margins và paddings có thể ảnh hưởng đến chiều rộng), nhưng nó sẽ hiệu quả trong hầu hết các trường hợp.

side by side comparison. Left (before): an image overflows the content size causing scrollbars to appear. Right (after): the image adjust to the content size.

5. Điều chỉnh các tiêu đề theo cách cân bằng hơn

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

Tiêu đề là một phần quan trọng của cấu trúc web, nhưng do kích thước lớn hơn và nội dung ngắn hơn, chúng có thể trông khó nhìn, đặc biệt khi chúng chiếm nhiều hơn một dòng. Một giải pháp giúp cân bằng tiêu đề là sử dụng text-wrap.

Mặc dù balance dường như là giá trị phổ biến nhất cho text-wrap, nhưng nó không phải là giá trị duy nhất. Chúng ta cũng có thể sử dụng pretty, giá trị này sẽ di chuyển một từ thêm vào hàng cuối nếu cần thay vì cân bằng toàn bộ nội dung. Đáng tiếc là pretty vẫn chưa được hỗ trợ rộng rãi.

side by side comparison. Left (before): a heading occupies two rows, the second one has only 1 word. Right (after): the heading occupies two rows of similar width.

Việc này có thể cải thiện khả năng hiển thị và khả năng đọc cho người dùng rất nhiều.

6. Các hàng bảng dễ theo dõi

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* or #fff1 for dark themes */
}

Chúng ta phải sử dụng bảng (<table>) để hiển thị dữ liệu, chứ không phải để bố cục trang web. Tuy nhiên, bảng mặc định thường trông không đẹp mắt. Vì thế, một cách đặc biệt hữu ích để sắp xếp dữ liệu và làm cho nó dễ đọc hơn là sử dụng bảng zebra, nghĩa là các hàng sẽ xen kẽ màu tối và sáng.

side by side comparison. Left (before): all table rows are white. Right (after): even table rows are slightly darker.

7. Khoảng cách giữa các ô trong bảng và tiêu đề

td, th {
  padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}

Một thay đổi để làm cho các bảng dễ tiếp cận và dễ đọc hơn là tạo khoảng cách nhỏ giữa các nội dung bằng cách thêm padding vào các ô và tiêu đề của bảng. Mặc định, hầu hết các trình duyệt không có bất kỳ padding nào, và văn bản của các ô khác nhau sẽ sát nhau, khiến cho khó phân biệt được nơi một ô bắt đầu và nơi ô khác kết thúc.

Chúng ta có thể thay đổi giá trị padding để điều chỉnh kích thước ưa thích của mình. Tuy nhiên, hãy điều chỉnh kích thước sao cho phù hợp tránh việc có quá nhiều khoảng cách.

side by side comparison. Left (before): table cells text content is altogether. Right (after): table cells content is clearly separated from other table cells.

Lời kết

Chỉ với một dòng CSS, bạn có thể tạo nên sự khác biệt lớn cho trang web của mình. Hãy thử ngay và cảm nhận sự thay đổi! Nếu bạn thấy bài viết hữu ích, hãy chia sẻ để mọi người cùng biết đến nhé!

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K