Hướng dẫn how do you customize underline in css? - làm thế nào để bạn tùy chỉnh gạch dưới trong css?

Kiểu dáng các nền tảng ngồi bên dưới các liên kết có thể là một công việc khó khăn và tôi liên tục quên đi những gì cách tiếp cận tốt nhất tùy thuộc vào tình huống. Tuy nhiên, rất may, John Jameson giúp chúng tôi tăng tốc trong bài đăng của khách này.

Có một loạt các cách khác nhau để phong cách gạch chân. Có thể bạn nhớ bài viết Crafting liên kết gạch chân trên trung bình. Medium đã cố gắng làm bất cứ điều gì điên rồ; Họ chỉ muốn tạo ra một dòng trông khá bình thường bên dưới văn bản của họ.

Nó có một gạch chân khá cơ bản, nhưng nó có kích thước tốt và nó cũng bỏ qua những hậu duệ. Chắc chắn đẹp hơn hầu hết các trình duyệt mặc định. Chà, hóa ra Medium đã phải trải qua rất nhiều rắc rối để có được phong cách đó trên web. Hai năm sau, nó vẫn còn khó để tạo kiểu cho một gạch chân đẹp.

Bàn thắng

Điều gì sai khi chỉ sử dụng text-decoration: underline? Nếu chúng tôi nói về kịch bản lý tưởng, một gạch chân sẽ có thể làm như sau:

• Vị trí bên dưới đường cơ sở
• Bỏ qua hậu duệ
• Thay đổi màu sắc, độ dày và kiểu
• Lặp lại văn bản được gói
• Làm việc trên bất kỳ nền tảng nào

Tôi nghĩ rằng đây là tất cả những điều khá hợp lý để yêu cầu, nhưng theo như tôi biết, không có cách nào trực quan để đạt được tất cả chúng trong CSS.

Cách tiếp cận

Vậy tất cả các cách khác nhau chúng ta có thể nhấn mạnh văn bản trên web là gì?

Đây là những người tôi có thể nghĩ đến:

• text-decoration
• border-bottom
• box-shadow
• background-image
• Bộ lọc SVG
• Underline.js (Canvas)
• text-decoration-*

Hãy cùng đi vào danh sách từng người một và nói về những phần tốt và xấu của mỗi cách tiếp cận.

text-decoration

text-decoration là cách đơn giản nhất để nhấn mạnh văn bản. Bạn áp dụng một tài sản duy nhất và tất cả những gì có cho nó. Ở kích thước nhỏ hơn, nó có thể trông khá đẹp, nhưng tăng kích thước phông chữ và cùng một dòng bắt đầu cảm thấy vụng về.

Xem bản demo.

Vấn đề lớn nhất với text-decoration là sự thiếu tùy chỉnh của nó. Nó sử dụng kích thước màu sắc và phông chữ của bất kỳ văn bản nào được áp dụng và ở đó, không có cách trình duyệt chéo nào để thay đổi kiểu. Nhiều hơn về điều đó sau.

Tốt

• Dễ sử dụng
• Vị trí bên dưới đường cơ sở
• Bỏ qua hậu duệ theo mặc định trong Safari và iOS
• Bao bọc trên các dòng
• Hoạt động trên bất kỳ nền tảng nào

Xấu

• Có thể bỏ qua hậu duệ trong các trình duyệt khác
• Có thể thay đổi màu sắc, độ dày hoặc phong cách

border-bottom

border-bottom cung cấp một sự cân bằng tốt giữa việc nhanh chóng và có thể tùy chỉnh. Cách tiếp cận này sử dụng đường viền CSS đã thử và đúng, có nghĩa là bạn có thể thay đổi màu sắc, độ dày và kiểu dáng một cách dễ dàng.

Đây là những gì border-bottom trông giống như trên các yếu tố text-decoration0:

Xem bản demo.

Vấn đề lớn nhất với text-decoration là sự thiếu tùy chỉnh của nó. Nó sử dụng kích thước màu sắc và phông chữ của bất kỳ văn bản nào được áp dụng và ở đó, không có cách trình duyệt chéo nào để thay đổi kiểu. Nhiều hơn về điều đó sau.

Xem bản demo.

Vấn đề lớn nhất với text-decoration là sự thiếu tùy chỉnh của nó. Nó sử dụng kích thước màu sắc và phông chữ của bất kỳ văn bản nào được áp dụng và ở đó, không có cách trình duyệt chéo nào để thay đổi kiểu. Nhiều hơn về điều đó sau.

Xem bản demo.

Vấn đề lớn nhất với text-decoration là sự thiếu tùy chỉnh của nó. Nó sử dụng kích thước màu sắc và phông chữ của bất kỳ văn bản nào được áp dụng và ở đó, không có cách trình duyệt chéo nào để thay đổi kiểu. Nhiều hơn về điều đó sau.

Tốt

• Dễ sử dụng
• Vị trí bên dưới đường cơ sở
• Bỏ qua hậu duệ theo mặc định trong Safari và iOS
• Bao bọc trên các dòng
• Hoạt động trên bất kỳ nền tảng nào

Xấu

• Có thể bỏ qua hậu duệ trong các trình duyệt khác
• Có thể thay đổi màu sắc, độ dày hoặc phong cách
• border-bottom cung cấp một sự cân bằng tốt giữa việc nhanh chóng và có thể tùy chỉnh. Cách tiếp cận này sử dụng đường viền CSS đã thử và đúng, có nghĩa là bạn có thể thay đổi màu sắc, độ dày và kiểu dáng một cách dễ dàng.

box-shadow

Đây là những gì border-bottom trông giống như trên các yếu tố text-decoration0:

Big gotcha là cách gạch chân cách văn bản bao xa - nó hoàn toàn ở dưới hậu duệ. Bạn có thể giải quyết điều đó bằng cách tạo các yếu tố text-decoration1 và giảm text-decoration2, nhưng sau đó bạn mất khả năng bọc văn bản. Tốt cho các dòng đơn, nhưng không nhiều.

Ngoài ra, bạn có thể sử dụng text-decoration3 để che đi các phần của dòng gần hậu duệ, nhưng bạn phải giả mạo nó bằng cách sử dụng cùng màu với bất kỳ nền nào mà nó trên. Điều đó có nghĩa là nó chỉ hoạt động cho nền màu rắn và không gradient hoặc hình ảnh.

Tốt

• Dễ sử dụng
• Dễ sử dụng
• Vị trí bên dưới đường cơ sở
• Bao bọc trên các dòng

Xấu

• Có thể bỏ qua hậu duệ trong các trình duyệt khác
• Có thể thay đổi màu sắc, độ dày hoặc phong cách

background-image

border-bottom cung cấp một sự cân bằng tốt giữa việc nhanh chóng và có thể tùy chỉnh. Cách tiếp cận này sử dụng đường viền CSS đã thử và đúng, có nghĩa là bạn có thể thay đổi màu sắc, độ dày và kiểu dáng một cách dễ dàng.

Đây là những gì border-bottom trông giống như trên các yếu tố text-decoration0:

Xem bản demo.

Vấn đề lớn nhất với text-decoration là sự thiếu tùy chỉnh của nó. Nó sử dụng kích thước màu sắc và phông chữ của bất kỳ văn bản nào được áp dụng và ở đó, không có cách trình duyệt chéo nào để thay đổi kiểu. Nhiều hơn về điều đó sau.

Xem bản demo.

Tốt

• Có thể được định vị bên dưới đường cơ sở
• Có thể bỏ qua hậu duệ bằng cách sử dụng text-decoration3
• Có thể thay đổi màu sắc, độ dày (cho phép một nửa pixel) và phong cách
• Hoạt động với hình ảnh tùy chỉnh
• Bao bọc trên các dòng
• Hoạt động trên bất kỳ nền nào trừ khi sử dụng text-decoration3

Xấu

• Hình ảnh có thể thay đổi kích thước khác nhau giữa các độ phân giải, trình duyệt và mức thu phóng

Bộ lọc SVG

Ở đây, một cách tiếp cận mà tôi đã chơi đùa xung quanh với: các bộ lọc SVG. Bạn có thể tạo một phần tử SVG box-shadow0 nội tuyến vẽ một dòng và sau đó mở rộng văn bản để che dấu các phần của dòng chúng ta muốn trong suốt. Sau đó, bạn có thể cung cấp cho box-shadow0 một box-shadow2 và tham chiếu nó trong CSS với một cái gì đó như box-shadow3.

Ưu điểm ở đây là bộ lọc thêm độ trong suốt mà không cần dựa vào text-decoration3. Điều đó có nghĩa là bạn có thể bỏ qua hậu duệ trên bất kỳ nền nào, bao gồm độ dốc và hình ảnh nền! Cái này chỉ hoạt động trên một dòng văn bản duy nhất, vì vậy hãy đứng đầu về điều đó.

Xem bản demo.

Ở đây, những gì nó trông giống như ở Chrome và Firefox:

Hỗ trợ trình duyệt trong IE, Edge và Safari là vấn đề. Thật khó để kiểm tra hỗ trợ bộ lọc SVG trong CSS. Bạn có thể sử dụng box-shadow5 với box-shadow0, nhưng chỉ kiểm tra xem tham chiếu có hoạt động hay không - không phải là bộ lọc được áp dụng. Cách tiếp cận của tôi cuối cùng thực hiện một số trình duyệt khá thô thiển, vì vậy cũng tăng gấp đôi về điều đó.

Ưu điểm

• Vị trí bên dưới đường cơ sở
• Bỏ qua hậu duệ
• Có thể thay đổi màu sắc, độ dày và phong cách
• Hoạt động trên bất kỳ nền tảng nào

Nhược điểm

• Doesn quấn trên các dòng
• Không làm việc trong IE, Edge hoặc Safari, nhưng bạn có thể quay trở lại text-decoration. Safari sườn gạch chân trông có vẻ tốt.

Underline.js (Canvas)

Underline.js là hấp dẫn. Tôi nghĩ rằng nó siêu ấn tượng những gì GoDing Zhang đã có thể làm với JavaScript và một số sự chú ý đến từng chi tiết. Nếu bạn đã thấy bản demo công nghệ gạch chân trước đây, chắc chắn sẽ ngừng đọc trong một phút và kiểm tra nó. Có một cuộc nói chuyện dài chín phút hấp dẫn về cách thức hoạt động của nó, nhưng tôi sẽ cung cấp cho bạn phiên bản ngắn: nó rút ra gạch chân với các yếu tố box-shadow8. Nó là một cách tiếp cận mới lạ hoạt động tốt một cách đáng ngạc nhiên.

Mặc dù tên hấp dẫn, Underline.js chỉ là một bản demo công nghệ. Điều đó có nghĩa là bạn đã giành chiến thắng có thể bỏ nó vào bất kỳ dự án nào mà không cần sửa đổi cả một bó.tech demo only. That means you won’t be able to drop it into any projects without modifying it a whole bunch first.

Nó có giá trị đưa nó lên đây như một bằng chứng của khái niệm. box-shadow8 có khả năng tạo ra các nền tảng tương tác đẹp, nhưng bạn sẽ phải viết một số JavaScript tùy chỉnh để chúng hoạt động.

trang trí văn bản-* thuộc tính

Bạn có nhớ nhiều hơn về phần sau đó không? Vâng, chúng tôi ở đây.

text-decoration tự hoạt động tốt, nhưng bạn có thể thêm một vài thuộc tính thử nghiệm để tùy chỉnh theo cách của nó:

• background-image1
• background-image2
• background-image3

Chỉ cần don nhận được quá phấn khích. Bạn biết đấy, hỗ trợ trình duyệt.

text-decoration-color

background-image1 cho phép bạn thay đổi màu gạch chân tách biệt với màu văn bản của nó. Khách sạn thậm chí còn có hỗ trợ trình duyệt tốt hơn dự kiến-nó hoạt động trong Firefox và có tiền tố trong Safari. Ở đây, việc bắt được: Nếu bạn không xóa được hậu duệ, Safari đặt dòng trên đầu văn bản. 🙃

Firefox:

Safari:

text-decoration-skip

background-image2 Tắt các hậu duệ bỏ qua văn bản được gạch chân.

Tài sản này không chuẩn và chỉ hoạt động ở Safari ngay bây giờ, vì vậy bạn cần tiền tố background-image6 để sử dụng nó. Safari cho phép thuộc tính này theo mặc định, đó là lý do tại sao nhấn mạnh bỏ qua hậu duệ ngay cả trên các trang web không chỉ định nó.

Nếu bạn sử dụng bình thường hóa, hãy biết rằng các phiên bản gần đây đã vô hiệu hóa tài sản để giữ mọi thứ phù hợp giữa các trình duyệt. Bạn cần phải lật lại nếu bạn muốn những nền tảng mơ mộng đó.

text-decoration-style

background-image3 cung cấp các loại dòng tương tự mà bạn mong đợi từ background-image8, nhưng cũng thêm vào các dòng background-image9.

Dưới đây là các giá trị khác nhau bạn có thể sử dụng:

• text-decoration-*0
• text-decoration-*1
• text-decoration-*2
• text-decoration-*3
• background-image9

Ngay bây giờ, background-image3 chỉ hoạt động trong Firefox, vì vậy, đây là một ảnh chụp màn hình:

Một loại của phong cách gạch chân màu rắn

Nhìn quen thuộc?

Cái gì còn thiếu?

Các thuộc tính text-decoration-* trực quan hơn nhiều so với việc sử dụng các thuộc tính CSS khác để tạo khuôn mẫu. Nhưng nếu chúng ta có cái nhìn khác về các yêu cầu trước đó của chúng ta, các thuộc tính này không cung cấp một cách để chỉ định độ dày hoặc vị trí của dòng.

Sau khi thực hiện một nghiên cứu nhỏ, tôi đã bắt gặp hai thuộc tính này:

• text-decoration-*7
• text-decoration-*8

Có vẻ như họ đã được đưa ra trong các bản nháp CSS trước đó, nhưng không bao giờ được thực hiện do thiếu sự quan tâm. Này, đừng đổ lỗi cho tôi.

Takeaways

Vì vậy, những gì cách tốt nhất để nhấn mạnh văn bản?

Nó phụ thuộc.

Đối với văn bản nhỏ, tôi khuyên bạn nên sử dụng text-decoration và sau đó áp dụng một cách lạc quan background-image2 lên trên. Trông có vẻ hơi nhạt nhẽo trong hầu hết các trình duyệt, nhưng gạch chân đã trông như vậy mãi mãi và mọi người dường như không có tâm trí. Thêm vào đó, luôn luôn có cơ hội nếu bạn kiên nhẫn đủ, tất cả các nền tảng của bạn sẽ trông tuyệt vời sau này mà không cần phải thay đổi điều gì.

Đối với văn bản cơ thể, có thể sử dụng phương pháp background-image. Nó hoạt động, nó trông tuyệt vời, và có các bản phối hợp cho nó. Bạn có thể có thể bỏ qua text-decoration3 nó nếu gạch chân mỏng hoặc có màu khác so với văn bản.

Đối với các dòng văn bản duy nhất, hãy sử dụng border-bottom và bất kỳ thuộc tính nào khác bạn muốn đi với nó.

Và để bỏ qua hậu duệ trên đầu của hình ảnh gradient hoặc nền, hãy thử sử dụng các bộ lọc SVG. Hoặc chỉ tránh sử dụng một lớp gạch chân hoàn toàn.

Trong tương lai khi hỗ trợ trình duyệt tốt hơn, câu trả lời là text-decoration-* tất cả các cách.

Cũng thấy Benjamin Woodruff, bài viết CSS nhấn mạnh, trong đó tình cờ bước đi trên mặt đất này theo cách tương tự.

Làm cách nào để chỉnh sửa gạch chân trong CSS?

Làm thế nào để bạn gạch chân CSS trong HTML?