Tạo kiểu hộp kiểm nâng cao với CSS Grid
Các Mô-đun bố trí lưới CSS không chỉ có thể giải quyết một con voi ma mút của một vấn đề bố trí mà còn một số vấn đề mulish cũ tốt chúng ta đã đối phó trong một thời gian dài, nhu la tạo kiểu nhãn hộp kiểm.
Mặc dù có một phương pháp tương đối đơn giản để tạo kiểu cho nhãn khi nó xuất hiện sau hộp kiểm, nó không dễ dàng khi nhãn xuất hiện trước nó.
Kiểu hộp kiểm không có CSS Grid
Tạo kiểu nhãn sau một hộp kiểm là thứ mà các nhà phát triển của chúng tôi đã và đang làm kể từ khi chúng tôi đọc về nó ở đâu đó. Kỹ thuật này là một trong những ví dụ điển hình và cũ về động lực mạnh mẽ mà CSS có thể sở hữu.
Đây là mã mà bạn có thể đã quen thuộc, đó là tạo kiểu nhãn sau một hộp kiểm tra:
đầu vào: đã chọn + nhãn / * kiểu tôi * /
Một nhãn hiệu sau một hộp kiểm có thể trông như thế này (tuy nhiên, bạn cũng có thể sử dụng các quy tắc kiểu khác):
Mã CSS ở trên sử dụng tổ hợp anh chị em liền kề được đánh dấu bởi + Chìa khóa. Khi một hộp kiểm nằm trong :đã kiểm tra tiểu bang, một yếu tố sau nó (thường là nhãn) có thể được tạo kiểu bằng phương pháp này.
Thật là một kỹ thuật đơn giản và hiệu quả! Những gì có thể có thể đi sai với nó? Không có gì - cho đến khi bạn muốn hiển thị nhãn trước hộp kiểm.
Tổ hợp anh chị em liền kề chọn phần tử tiếp theo; điều này có nghĩa là nhãn phải đến sau hộp kiểm trong mã nguồn HTML.
Vì vậy, để làm cho một nhãn xuất hiện trước hộp kiểm thuộc trên màn hình, chúng ta không thể di chuyển nó trước hộp kiểm trong mã nguồn, như một bộ chọn anh chị trước đó không tồn tại trong CSS.
Mà chỉ để lại một lựa chọn: định vị lại hộp kiểm và nhãn sử dụng biến đổi hoặc là Chức vụ hoặc là lề hoặc một thuộc tính CSS khác có sức mạnh telekinetic nào đó, để nhãn xuất hiện ở bên trái hộp kiểm trên màn hình.
Vấn đề với phương pháp truyền thống
Không có gì chủ yếu sai với kỹ thuật nói trên nhưng nó có thể không hiệu quả trong một số trường hợp. Ý tôi là các trường hợp trong đó các vị trí được sắp xếp lại của hộp kiểm và nhãn không hoạt động nữa.
Suy nghĩ nhanh nhạy, ví dụ. Bạn có thể phải thay đổi kích thước hoặc định vị lại hộp kiểm theo thiết bị được hiển thị trên đó. Khi điều đó xảy ra, bạn sẽ cũng cần định vị lại nhãn, vì sẽ không có sự sắp xếp lại tự động được thực hiện cho nhãn để đáp ứng với việc định vị lại / thay đổi kích thước của hộp kiểm.
Chúng ta có thể loại bỏ nhược điểm này nếu chúng ta có thể cung cấp một số bố cục vững chắc cho hộp kiểm và nhãn, thay vì đại khái định vị chúng trên trang.
Nhưng, hầu như tất cả các hệ thống bố trí, chẳng hạn như bảng hoặc cột, yêu cầu bạn phải thêm nhãn trước hộp kiểm trong mã nguồn để làm cho nó xuất hiện theo cùng một cách trên màn hình. Đó là điều chúng tôi không muốn làm vì bộ chọn thành phần tiếp theo trên nhãn sẽ ngừng hoạt động.
CSS Grid, mặt khác, là một hệ thống bố trí không phải phụ thuộc vào vị trí / thứ tự của các phần tử trong mã nguồn.
Khả năng sắp xếp lại của bố trí lưới cố ý ảnh hưởng chỉ hiển thị trực quan, để lại thứ tự lời nói và điều hướng dựa trên thứ tự nguồn. Điều này cho phép các tác giả thao tác trình bày trực quan trong khi vẫn giữ nguyên thứ tự nguồn - Mô-đun bố cục lưới CSS Cấp 1, W3C
Do đó, lưới CSS là một giải pháp lý tưởng để phong cách nhãn xuất hiện trước hộp kiểm.
Tạo kiểu hộp kiểm với CSS Grid
Hãy bắt đầu với mã HTML. Thứ tự của hộp kiểm và nhãn sẽ giữ nguyên như trước. Chúng tôi chỉ cần thêm cả hai vào một lưới.
CSS đi kèm như sau:
#cbgrid hiển thị: lưới; lưới-mẫu-khu vực: "trái phải"; chiều rộng: 150px; đầu vào [loại = hộp kiểm] lưới-khu vực: phải; nhãn khu vực lưới: bên trái;
Tôi sẽ không đi sâu vào cách thức hoạt động của lưới CSS, như tôi đã viết bài viết chi tiết về chủ đề này, mà bạn có thể đọc ở đây. Một số điều cơ bản, tuy nhiên: hiển thị: lưới thuộc tính biến một phần tử thành một thùng chứa lưới, khu vực lưới xác định vùng lưới một phần tử thuộc về và khu vực lưới-mẫu hình thành một bố cục lưới, bao gồm các khu vực lưới khác nhau.
Trong đoạn mã trên, có hai khu vực lưới: "trái" và "đúng". Họ trang điểm hai cột của một hàng lưới. Hộp kiểm thuộc về "đúng" khu vực và nhãn cho "trái". Đây là họ trông như thế nào trên màn hình:
Vì chúng tôi không thay đổi vị trí tương đối của hộp kiểm và nhãn trong mã nguồn, chúng tôi có thể vẫn sử dụng kết hợp anh chị em liền kề:
đầu vào: đã chọn + nhãn / * kiểu tôi * /
Lưu ý rằng một mục lưới là luôn bị phong tỏa; nó xuất hiện với một hộp xung quanh được gọi là hộp cấp lưới. Nếu bạn không muốn điều đó, ví dụ cho một nhãn, đặt một cái bọc trên vật phẩm đó (bọc nó trong một yếu tố khác) và biến lớp bọc đó thành vùng lưới.
Đó là nó, thưa các bạn. Lưới CSS hy vọng sẽ giúp bạn tìm ra bố cục của các hộp kiểm táo bạo đó.
