CSS tùy chỉnh

Cập nhật. Bộ chọn giả

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 hiện được hỗ trợ tốt trong các trình duyệt hiện đại. Mặc dù hướng dẫn này bao gồm các mẹo CSS hữu ích cho các mục được liệt kê ở trên, nhưng bạn có thể muốn chuyển sang giải pháp

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4

Liệt kê HTML

#

Trước tiên, chúng tôi sẽ thiết lập HTML của bạn, với một ________ 06 và một _____ 07. Tôi đã thêm một dấu đầu dòng dài hơn để hỗ trợ kiểm tra căn chỉnh, giãn cách và chiều cao dòng

<ul role="list">
  <li>Unordered list itemli>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli>
  <li>Unordered list itemli>
ul>

<ol role="list">
  <li>Ordered list itemli>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli>
  <li>Ordered list itemli>
ol>

Lưu ý việc sử dụng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

8. Lúc đầu, nó có vẻ thừa, nhưng chúng tôi sẽ xóa kiểu danh sách vốn có bằng CSS. Mặc dù CSS thường không ảnh hưởng đến giá trị ngữ nghĩa của các phần tử, nhưng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

9 có thể xóa ngữ nghĩa danh sách đối với một số trình đọc màn hình. Cách khắc phục đơn giản nhất là xác định thuộc tính

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

0 để khôi phục các ngữ nghĩa đó. Bạn có thể tìm hiểu thêm từ bài viết này từ Scott O'Hara

CSS danh sách cơ sở

#

Trước tiên, chúng tôi thêm thiết lập lại các kiểu danh sách ngoài việc xác định chúng dưới dạng lưới có khoảng cách

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

Lợi ích của

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

1 là thêm khoảng trống giữa

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7, thay thế cho một phương pháp cũ hơn, chẳng hạn như

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

3

Tiếp theo, chúng tôi sẽ chuẩn bị các mục danh sách

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

Chúng tôi cũng đã thiết lập các mục danh sách để sử dụng lưới. Và chúng tôi đã nâng cấp một "hack" cũ hơn bằng cách sử dụng

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

4 để chừa khoảng trống cho phần tử pseduo được định vị tuyệt đối với sự kết hợp của cột đầu tiên có chiều rộng

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

5 và

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

1. Chúng ta sẽ xem nó hoạt động như thế nào trong giây lát. Sau đó, chúng tôi sử dụng

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

7 thay vì mặc định của

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

8 và áp dụng một số kiểu dáng

UL. Thuộc tính dữ liệu cho dấu đầu dòng biểu tượng cảm xúc

#

Bây giờ, đây có thể không chính xác là một giải pháp có thể mở rộng, nhưng để giải trí, chúng tôi sẽ thêm một thuộc tính dữ liệu tùy chỉnh sẽ xác định biểu tượng cảm xúc để sử dụng làm dấu đầu dòng cho từng mục danh sách

Đầu tiên, hãy cập nhật

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6 HTML

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

9

Và để áp dụng biểu tượng cảm xúc dưới dạng gạch đầu dòng, chúng tôi sử dụng một kỹ thuật khá kỳ diệu trong đó các thuộc tính dữ liệu có thể được sử dụng làm giá trị của thuộc tính

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

90 cho các phần tử giả

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

1

Đây là kết quả, với phần tử

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

91 được kiểm tra để giúp minh họa cách hoạt động của lưới

Biểu tượng cảm xúc vẫn được phép chiếm chiều rộng để hiển thị, nhưng thực sự nằm trong khoảng trống. Bạn có thể thử nghiệm đặt cột lưới

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 đầu tiên thành

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

93, điều này sẽ khiến khoảng cách được áp dụng đầy đủ giữa cột biểu tượng cảm xúc và cột văn bản danh sách

CV. Bộ đếm CSS và biến tùy chỉnh CSS

#

Bộ đếm CSS đã là một giải pháp khả thi kể từ IE8, nhưng chúng tôi sẽ bổ sung thêm tính năng sử dụng các biến tùy chỉnh CSS để thay đổi màu nền của từng số.

Trước tiên, chúng tôi sẽ áp dụng các kiểu bộ đếm CSS, đặt tên cho bộ đếm của chúng tôi là

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

94

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6

Điều này đạt được những điều sau đây, trông không khác nhiều so với kiểu dáng mặc định của

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

95

Tiếp theo, chúng ta có thể áp dụng một số kiểu dáng cơ bản cho các số đếm

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

8

Đầu tiên, chúng tôi áp dụng một phông chữ Google và mở rộng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

96. ________ 197 là một nửa của _______ 197 được áp dụng của

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 (ít nhất đó là những gì hiệu quả với phông chữ này, nó có thể là một con số kỳ diệu). Nó căn chỉnh số mà chúng tôi muốn liên quan đến nội dung văn bản chính của

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7

Tham gia bản tin của tôi để cập nhật bài viết, mẹo CSS và tài nguyên giao diện người dùng

Đừng điền vào đây nếu bạn là con người.

E-mail

Đăng ký

Sau đó, chúng ta cần chỉ định chiều rộng rõ ràng. Nếu không, nền sẽ không xuất hiện mặc dù văn bản sẽ

Phần đệm được thêm vào để sửa căn chỉnh của văn bản so với nền

Bây giờ chúng ta có cái này

Điều đó chắc chắn mang lại cảm giác tùy chỉnh hơn, nhưng chúng tôi sẽ thúc đẩy nó nhiều hơn một chút bằng cách hoán đổi biến

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

11 thành một biến tùy chỉnh CSS, như vậy

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

5

Nó sẽ xuất hiện giống như vậy cho đến khi chúng ta thêm các kiểu nội tuyến vào

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 thứ hai và thứ ba để cập nhật giá trị biến

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7

Và đây là kết quả cuối cùng của

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6 và

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

95

Bởi Stephanie Eckles (@5t3ph)

Nâng cấp thuật toán của bạn. Danh sách nhiều cột

#

Ví dụ của chúng tôi chỉ có 3 mục danh sách ngắn, nhưng đừng quên chúng tôi đã áp dụng lưới cho cơ sở

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

95 và

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6

Trong khi ở kiếp trước, tôi đã làm những điều thú vị với mô đun trong PHP để chia nhỏ danh sách và áp dụng các lớp bổ sung để đạt được danh sách nhiều cột được chia đều

Với lưới CSS, giờ đây bạn có thể áp dụng nó trong ba dòng với khả năng phản hồi vốn có, các cột bằng nhau và phù hợp với độ dài dòng nội dung

<ul role="list">
  <li>Unordered list itemli>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli>
  <li>Unordered list itemli>
ul>

<ol role="list">
  <li>Ordered list itemli>
  <li>Cake ice cream sweet sesame snaps dragée cupcake wafer cookieli>
  <li>Ordered list itemli>
ol>

2

Áp dụng cho ví dụ hiện tại của chúng tôi (hãy chắc chắn loại bỏ

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

17 trên

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 trước) mang lại

Bạn có thể chuyển chế độ xem này bằng cách cập nhật biến

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

19 trong Codepen thành

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

60

Gotcha. Hơn cả văn bản thuần túy như nội dung ol,ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem;}7

#

Nếu bạn có nhiều hơn văn bản thuần túy bên trong

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 - bao gồm cả nội dung nào đó chẳng hạn như

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

63 vô tội - mẫu lưới của chúng tôi sẽ bị hỏng

Tuy nhiên, đó là một giải pháp rất dễ dàng - bọc nội dung

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 trong một

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

65. Mẫu lưới của chúng tôi không quan tâm các phần tử là gì, nhưng nó chỉ mong đợi hai phần tử, trong đó phần tử giả được tính là phần tử đầu tiên

Nâng cấp lên CSS Marker

#

Trong những tháng sau khi bài viết này được đăng lần đầu, hỗ trợ cho

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 đã trở nên tốt hơn nhiều trên tất cả các trình duyệt hiện đại

Bộ chọn giả

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 cho phép thay đổi trực tiếp và tạo kiểu cho dấu đầu dòng/số danh sách

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

95 hoặc

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6

Chúng tôi hoàn toàn có thể thay thế giải pháp cho dấu đầu dòng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

6 bằng cách sử dụng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 nhưng chúng tôi phải hạ cấp giải pháp

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

95 của mình vì chỉ có một số thuộc tính được phép cho

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  84

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  85

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  90

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  87

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  88

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  89

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  50

• ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
  }

  51

Kiểu danh sách không có thứ tự với ol,ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem;}4

#

Vì

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

90 vẫn là thuộc tính được phép, nên chúng tôi có thể giữ giải pháp

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

54 của mình để cho phép đánh dấu biểu tượng cảm xúc tùy chỉnh 🎉

Chúng ta chỉ cần tráo đổi

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

91 thành

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

0

Sau đó, xóa các thuộc tính lưới không còn cần thiết khỏi

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 và thêm lại một số

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

58 để thay thế

li {
  display: grid;
  grid-template-columns: 0 1fr;
  gap: 1.75em;
  align-items: start;
  font-size: 1.5rem;
  line-height: 1.25;
}

1 đã xóa

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

1

Cuối cùng, trước đây chúng tôi đã xóa

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

70 nhưng chúng tôi cần thêm lại vào một số lề trái để đảm bảo không gian cho

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 để tránh bị cắt do tràn

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

2

Và kết quả trực quan giống hệt với giải pháp trước đây của chúng tôi, như bạn có thể thấy trong bản demo

Kiểu danh sách đã đặt hàng với ol,ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem;}4

#

Đối với danh sách theo thứ tự của chúng tôi, giờ đây chúng tôi có thể chuyển đổi và tận dụng bộ đếm tích hợp

Chúng tôi cũng phải loại bỏ

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

11 và

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

74 vì vậy chúng tôi sẽ chuyển sang sử dụng thuộc tính tùy chỉnh của mình cho giá trị

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

85. Và chúng tôi sẽ thay đổi tên thuộc tính tùy chỉnh của mình thành

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

76 cho rõ ràng

Vì vậy, phong cách giảm của chúng tôi như sau

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

3

Đừng quên cập nhật tên thuộc tính tùy chỉnh CSS trong HTML nữa

Xem ra cho gotcha này. Thay đổi thuộc tính

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

77 cho

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

7 sẽ xóa phần tử giả

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4. Vì vậy, nếu bạn cần một kiểu hiển thị khác cho nội dung danh sách, bạn sẽ cần áp dụng nó bằng cách lồng một phần tử bao bọc bổ sung

ol,ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem;}4 Trình diễn

#

Đây là kiểu danh sách tùy chỉnh được cập nhật của chúng tôi hiện sử dụng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4

Đảm bảo kiểm tra hỗ trợ trình duyệt hiện tại để quyết định sử dụng giải pháp kiểu danh sách tùy chỉnh nào dựa trên đối tượng duy nhất của bạn. Bạn có thể muốn chọn sử dụng

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

4 như một cải tiến lũy tiến từ một trong những giải pháp đã được chứng minh trước đó