CSS3 14 – Chia cột trong CSS3

0
94

Xin chào các bạn, trong bài hôm nay, mình sẽ giới thiệu cho các bạn 1 tính năng trong CSS3 đó là Multi Column, đây là tính năng trong CSS3 hỗ trợ các bạn sắp xếp văn bản dưới dạng cấu trúc 1 bài báo, chia nội dung thành phần thành nhiều cột khác nhau mà không cần phải sử dụng thuộc tính float trong css.

Với 1 văn bản dài, điển hình như các bài báo, bạn muốn chia thành nhiều cột, thì trước đây CSS có khá nhiều cách để xây dựng nên 1 hiển thị dạng bảng mà không dùng đến thẻ <table>, tuy nhiên công việc này cũng sẽ mất khá nhiều dòng lệnh HTML & CSS. Với sự đa dạng của kích cỡ màn hình ngày càng tăng thì việc thiết kế một khối duy nhất chiếm độ rộng toàn bộ màn hình không còn là hợp lý. Các giải pháp truyền thống cho việc này là chia nhỏ các khối trong cột bằng tay, một việc tốn khá nhiều thời gian hoặc chia nhỏ khối div bằng các dòng lệnh js hoặc jQuery. Vậy chúng ta có cách nào sử dụng CSS trong trường hợp này mà không cần sử dụng hệ thống GridView kết hợp với thuộc tính float truyền thống? Đó là CSS3, việc này trở nên dễ dàng hơn nhiều với Multiple Columns.

Trình duyệt hỗ trợ

Tất cả các trình duyệt hiện tại đều hỗ trợ đa cột Multi Column trong CSS3 – thậm chí có IE10.

Bạn cần sử dụng webkit (-webkit-) và mozilla (-moz-) cho Google Chrome và Mozilla Firefox nhưng không cần -ms- hoặc -o- cho Opera.

Thuộc tính

Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3:

Giá trịMiêu tả
column-countĐược sử dụng để đếm số cột mà phần tử nên được phân chia thành
column-fillĐược sử dụng để xác định cách fill dữ liệu vào cột
column-gapĐược sử dụng để xác định khoảng trống giữa các cột
column-ruleĐược sử dụng để xác định một số qui tắc
column-rule-colorĐược sử dụng để xác định qui tắc màu cho cột
column-rule-styleĐược sử dụng để xác định qui tắc style cho cột
column-rule-widthĐược sử dụng để xác định độ rộng
column-column-spanĐược sử dụng để xác định span giữa các cột

Ví dụ

Ví dụ sau minh họa cách sắp xếp văn bản như dưới dạng cấu trúc một tờ báo:

Cho 1 khối div chứa nội dung 1 đoạn văn như sau:

Chúng ta sẽ sử dụng Multi Column chia cột theo định dạng bài báo như sau:

Ở ví dụ trên, chia bài viết thành 4 cột với thuộc tính column-count, khoảng trống giữa các cột là 40px với thuộc tính column-gap, và định dạng viền ngăn các cột là column-rule-style dạng nét liền.

Kết quả như sau:

Nếu bạn muốn giữa các cột không có các đường ngăn cách, bạn có thể xóa thuộc tính rule-style trong ví dụ trên.

Kết luận

Áp dụng CSS3 Multiple Columns trong việc hiển thị văn bản theo cột mang lại hiệu quả đáng kinh ngạc trong thiết kế Responsive & Onepage hiện nay. Chúng ta không phải HTML & CSS quá nhiều và khả năng load nội dung được tối ưu sẽ làm cho website và ứng dụng của bạn được mượt mà hơn. CSS3 Multiple Columns vẫn còn 1 số thuộc tính khác nhưng chưa được hỗ trợ ở tất cả trình duyệt nên mình chưa đề cập đến. Hy vọng bài này sẽ giúp ích cho các bạn trong trường hợp cần thiết.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây