Mọi thứ bạn cần biết về Gap After List Marker

lúc đó tôi đang đọc sách “Tạo kiểu danh sách sáng tạo” trên blog web.dev của Google và nhận thấy điều gì đó kỳ lạ ở một trong các ví dụ về mã trong ::marker phần của bài báo. Các điểm đánh dấu danh sách tích hợp sẵn là dấu đầu dòng, số thứ tự và chữ cái. Các ::marker phần tử giả cho phép chúng tôi tạo kiểu cho các điểm đánh dấu này hoặc thay thế chúng bằng một ký tự hoặc hình ảnh tùy chỉnh.

::marker { content: url('/marker.svg') ' ';
}

Ví dụ thu hút sự chú ý của tôi sử dụng biểu tượng SVG làm điểm đánh dấu tùy chỉnh cho các mục trong danh sách. Nhưng cũng có một ký tự khoảng trắng (" ") trong giá trị CSS bên cạnh url() chức năng. Mục đích của khoảng trống này dường như là để chèn một khoảng trống sau điểm đánh dấu tùy chỉnh.

Khi tôi nhìn thấy mã này, tôi ngay lập tức tự hỏi liệu có cách nào tốt hơn để tạo khoảng cách không. Thêm một không gian để content cảm thấy giống như một cách giải quyết hơn là giải pháp tối ưu. CSS cung cấp margin và padding và các cách tiêu chuẩn khác để loại bỏ các thành phần trên trang. Không có thuộc tính nào trong số này có thể được sử dụng trong tình huống này không?

Đầu tiên, tôi đã cố gắng thay thế ký tự khoảng trắng bằng một lề thích hợp:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

Điều này đã không làm việc. Hóa ra, ::marker chỉ hỗ trợ một tập hợp nhỏ các thuộc tính CSS chủ yếu liên quan đến văn bản. Ví dụ, bạn có thể thay đổi font-size và color của điểm đánh dấu và xác định điểm đánh dấu tùy chỉnh bằng cách đặt content thành một chuỗi hoặc URL, như được hiển thị ở trên. Nhưng margin và padding tài sản là không được hỗ trợ, vì vậy việc đặt chúng không có hiệu lực. Thật là một sự thất vọng.

Thực sự có thể nào ký tự khoảng trắng là cách duy nhất để chèn khoảng trống sau điểm đánh dấu tùy chỉnh không? Tôi cần phải tìm hiểu. Khi tôi nghiên cứu chủ đề này, tôi đã thực hiện một vài khám phá thú vị mà tôi muốn chia sẻ trong bài viết này.

Thêm phần đệm và lề

Đầu tiên, hãy xác nhận những gì margin và padding làm trên <ul> và <li> phần tử. Tôi đã tạo một trang thử nghiệm cho mục đích này. Kéo các thanh trượt có liên quan và quan sát hiệu ứng trên khoảng cách ở mỗi bên của điểm đánh dấu danh sách. Mẹo: Sử dụng tùy ý nút Đặt lại để đặt lại tất cả các điều khiển về giá trị ban đầu của chúng.

Lưu ý: Trình duyệt áp dụng mặc định padding-inline-left of 40px đến <ol> và <ul> phần tử. logic padding-inline-left tài sản tương đương với vật chất padding-left thuộc tính trong các hệ thống chữ viết với hướng nội tuyến từ trái sang phải. Trong bài viết này, tôi sẽ sử dụng các tính chất vật lý vì mục đích đơn giản.

Như bạn có thể thấy, padding-left on <li> tăng khoảng cách sau dấu danh sách. Ba thuộc tính khác kiểm soát khoảng cách ở bên trái của điểm đánh dấu, nói cách khác, thụt lề của mục danh sách.

Lưu ý rằng ngay cả khi mục danh sách padding-left is 0px, vẫn còn một khoảng cách tối thiểu sau điểm đánh dấu. Khoảng cách này không thể được giảm với margin or padding. Độ dài chính xác của khoảng cách tối thiểu phụ thuộc vào trình duyệt.

Tóm lại, nội dung của mục danh sách được định vị ở khoảng cách tối thiểu dành riêng cho trình duyệt từ điểm đánh dấu và khoảng cách này có thể được tăng thêm bằng cách thêm một padding-left đến <li>.

Tiếp theo, hãy xem điều gì xảy ra khi chúng ta định vị điểm đánh dấu trong mục danh sách.

Di chuyển điểm đánh dấu bên trong mục danh sách

Sản phẩm list-style-position tài sản chấp nhận hai từ khóa: outside, đó là mặc định, và inside, sẽ di chuyển điểm đánh dấu bên trong mục danh sách. Cái sau rất hữu ích để tạo các thiết kế với các mục danh sách có chiều rộng đầy đủ.

Nếu điểm đánh dấu là bây giờ trong mục danh sách, điều này có nghĩa là padding-left on <li> không còn tăng khoảng cách sau điểm đánh dấu? Hãy cùng tìm hiểu. Trên trang thử nghiệm của tôi, hãy bật list-style-position: inside thông qua hộp kiểm. Bốn người thế nào? padding và margin tài sản bị ảnh hưởng bởi sự thay đổi này?

Như bạn có thể thấy, padding-left on <li> bây giờ tăng khoảng cách đến trái của điểm đánh dấu. Điều này có nghĩa là chúng tôi đã mất khả năng gia tăng khoảng cách sau điểm đánh dấu. Trong tình huống này, sẽ rất hữu ích nếu có thể thêm margin-right đến ::marker nhưng điều đó không hiệu quả, như chúng tôi đã thiết lập ở trên.

Ngoài ra, có một lỗi trong Chromium gây ra khoảng cách sau điểm đánh dấu ba sau khi chuyển sang inside định vị. Theo mặc định, độ dài của khoảng trống bằng khoảng một phần ba kích thước văn bản. Vì vậy, ở một mặc định font-size of 16px, khoảng cách là khoảng 5.5px. Sau khi chuyển sang inside, khoảng cách tăng lên đầy đủ 16px trong Chrome. Lỗi này ảnh hưởng đến disc, circlevà square đánh dấu, nhưng không đánh dấu số thứ tự.

Hình ảnh sau đây hiển thị kết xuất mặc định của các điểm đánh dấu danh sách được định vị bên ngoài và bên trong trên ba trình duyệt chính trên macOS. Để thuận tiện cho bạn, tôi đã căn chỉnh theo chiều ngang tất cả các mục trong danh sách trên điểm đánh dấu của chúng để dễ dàng so sánh sự khác biệt về kích thước khoảng cách.

Tóm lại, chuyển sang list-style-position: inside giới thiệu hai vấn đề. Chúng tôi không còn có thể tăng khoảng cách thông qua padding-left on <li>và kích thước khoảng trống không nhất quán giữa các trình duyệt.

Cuối cùng, hãy xem điều gì sẽ xảy ra khi chúng ta thay thế điểm đánh dấu danh sách mặc định bằng điểm đánh dấu tùy chỉnh.

Chuyển sang điểm đánh dấu tùy chỉnh

Có hai cách để xác định một điểm đánh dấu tùy chỉnh:

• list-style-type và list-style-image tài sản
• content tài sản trên ::marker phần tử giả

Sản phẩm content tài sản mạnh hơn. Ví dụ, nó cho phép chúng ta sử dụng counter() để truy cập vào số thứ tự của mục danh sách (các ngầm list-item chống lại) và trang trí nó bằng các chuỗi tùy chỉnh.

Thật không may, Safari không hỗ trợ content tài sản trên ::marker nhưng (Lỗi WebKit). Vì lý do này, tôi sẽ sử dụng list-style-type thuộc tính để xác định điểm đánh dấu tùy chỉnh. Bạn vẫn có thể sử dụng ::marker bộ chọn để tạo kiểu cho điểm đánh dấu tùy chỉnh được khai báo qua list-style-type. khía cạnh đó của ::marker được hỗ trợ trong Safari.

Bất kỳ ký tự Unicode nào cũng có khả năng đóng vai trò là điểm đánh dấu danh sách tùy chỉnh, nhưng chỉ một nhóm ký tự nhỏ thực sự có “Dấu đầu dòng” trong tên chính thức của chúng, vì vậy tôi nghĩ mình nên biên dịch chúng ở đây để tham khảo.

Nhân vật	Họ tên	điểm mã	từ khóa CSS
•	Đạn	U+2022	disc
‣	viên đạn tam giác	U+2023
⁃	dấu gạch nối	U+2043
⁌	Đạn trái màu đen	U+204C
⁍	Đạn đen sang phải	U+204D
◘	Đạn nghịch đảo	U+25D8
◦	Bullet trắng	U+25E6	circle
☙	Viên đạn trái tim hoa đã đảo ngược	U+2619
❥	Viên đạn trái tim màu đen nặng xoay	U+2765
❧	Đạn trái tim hoa xoay	U+2767
⦾	Viên đạn trắng khoanh tròn	U+29BE
⦿	Dấu đầu dòng được khoanh tròn	U+29BF

Lưu ý: CSS square từ khóa không có ký tự “Dấu đầu dòng” tương ứng trong Unicode. Ký tự gần nhất là biểu tượng cảm xúc Hình vuông nhỏ màu đen (▪️) (U+25AA).

Bây giờ hãy xem điều gì sẽ xảy ra khi chúng ta thay thế điểm đánh dấu danh sách mặc định bằng list-style-type: "•" (U+2022 Đạn). Đây là ký tự giống như dấu đầu dòng mặc định, vì vậy sẽ không có bất kỳ sự khác biệt lớn nào về kết xuất. Trên trang thử nghiệm của tôi, bật list-style-type tùy chọn và quan sát bất kỳ thay đổi nào đối với điểm đánh dấu.

Như bạn có thể thấy, có hai thay đổi quan trọng:

1. Không còn khoảng cách tối thiểu sau điểm đánh dấu.
2. Viên đạn đã trở nên nhỏ hơn, như thể nó được vẽ ở kích thước nhỏ hơn font-size.

Theo Kiểu bộ đếm CSS cấp 3, điểm đánh dấu danh sách mặc định (disc) nên “tương tự như • U+2022 ĐẠN". Có vẻ như các trình duyệt tăng kích thước của dấu đầu dòng mặc định để dễ đọc hơn. Firefox thậm chí còn sử dụng một phông chữ đặc biệt, -moz-bullet-font, cho điểm đánh dấu.

Vấn đề kích thước nhỏ có thể được khắc phục bằng CSS không? Trên trang thử nghiệm của tôi, hãy bật kiểu đánh dấu và quan sát điều gì sẽ xảy ra khi bạn thay đổi font-size, line-heightvà font-family của điểm đánh dấu.

Như bạn có thể thấy, việc tăng font-size làm cho điểm đánh dấu tùy chỉnh bị lệch theo chiều dọc và không thể sửa lỗi này bằng cách giảm line-height. Các vertical-align thuộc tính, có thể dễ dàng khắc phục sự cố này, không được hỗ trợ trên ::marker.

Nhưng bạn có để ý rằng việc thay đổi font-family có thể làm cho điểm đánh dấu trở nên lớn hơn? Hãy thử đặt nó thành Tahoma. Đây có thể là một giải pháp đủ tốt cho vấn đề kích thước nhỏ, mặc dù tôi chưa kiểm tra phông chữ nào hoạt động tốt nhất trên các trình duyệt và hệ điều hành chính.

Bạn cũng có thể nhận thấy rằng lỗi Chromium không còn xảy ra nữa khi bạn định vị điểm đánh dấu bên trong mục danh sách. Điều này có nghĩa là điểm đánh dấu tùy chỉnh có thể dùng làm giải pháp thay thế cho lỗi này. Và điều này dẫn tôi đến vấn đề chính, và lý do tại sao tôi bắt đầu nghiên cứu chủ đề này. Nếu bạn xác định một điểm đánh dấu tùy chỉnh và định vị nó bên trong mục danh sách, thì sẽ không có khoảng trống sau điểm đánh dấu và không có cách nào để chèn một khoảng trống bằng các phương tiện tiêu chuẩn.

1. Không có khoảng cách tối thiểu sau các điểm đánh dấu tùy chỉnh.
2. ::marker không hỗ trợ padding or margin.
3. padding-left on <li> không làm tăng khoảng cách, vì điểm đánh dấu được định vị inside.

Tổng kết

Dưới đây là tóm tắt tất cả các sự kiện chính mà tôi đã đề cập trong bài viết:

1. Trình duyệt áp dụng mặc định padding-inline-start of 40px đến <ul> và <ol> yếu tố.
2. Có một khoảng cách tối thiểu sau các điểm đánh dấu danh sách tích hợp (disc, decimal, vân vân.). Không có khoảng cách tối thiểu sau các điểm đánh dấu tùy chỉnh (chuỗi hoặc URL).
3. Chiều dài của khoảng cách có thể được tăng lên bằng cách thêm một padding-left đến <ul>, nhưng chỉ khi điểm đánh dấu được định vị bên ngoài mục danh sách (chế độ mặc định).
4. Điểm đánh dấu chuỗi tùy chỉnh có kích thước mặc định nhỏ hơn so với điểm đánh dấu tích hợp sẵn. thay đổi font-family on ::marker có thể tăng kích thước của chúng.

Kết luận

Nhìn lại ví dụ mã từ đầu bài viết, tôi nghĩ bây giờ tôi đã hiểu tại sao lại có ký tự khoảng trắng trong content giá trị. Không có cách nào tốt hơn để chèn một khoảng trống sau điểm đánh dấu SVG. Đó là một cách giải quyết cần thiết vì không có số lượng margin và padding có thể tạo khoảng trống sau điểm đánh dấu tùy chỉnh được định vị bên trong mục danh sách. MỘT margin-right on ::marker có thể dễ dàng làm điều đó, nhưng điều đó không được hỗ trợ.

Cho đến khi ::marker thêm hỗ trợ cho nhiều thuộc tính hơn, các nhà phát triển web thường sẽ không có lựa chọn nào khác ngoài việc ẩn điểm đánh dấu và mô phỏng nó bằng một ::before phần tử giả. Tôi đã phải tự làm điều đó gần đây vì tôi không thể thay đổi điểm đánh dấu background-color. Hy vọng rằng chúng ta sẽ không phải đợi quá lâu để có một phiên bản mạnh mẽ hơn ::marker phần tử giả.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/