Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 8)

3121

Người viết: Hà Hữu Tín

Tham khảo các phần trước tại đây:

  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 1)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 2)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 3)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 4)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 5)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 6)
  Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 7)

Tốn mấy phút đọc: khoảng 20 phút thôi!

Level CSS sau khi đọc xong: tăng thêm 5%

Image from Internet

 

1. Cắt text (text…) thành nhiều dòng mà không tốn chút mồ hôi nào! [Not Cross-Browsers]

Truncate text 1 dòng thì quá dễ rồi, hầu hết các dev không chuyên Frontend cũng đều biết, chỉ cần vài dòng CSS đơn giản thôi, không cần phải đụng tới JS đếm ký tự rồi cắt chuỗi làm gì cho phức tạp

Cộng với thuộc tính width mà mọi người muốn set, tới độ rộng bao nhiêu thì sẽ cắt text và thay vào dấu ... (ba chấm)

Tuy nhiên, giờ có trường hợp muốn hiển thị nhiều hơn 1 dòng rồi mới cắt text, thế thì phải làm sao nhỉ. Thật là may mắn khi CSS3 giới thiệu 1 thuộc tính giúp chúng ta làm việc đó chính là line-clamp

Mọi chuyện sẽ tốt đẹp, code sẽ work tốt, đoạn text của bạn sẽ được cắt với số dòng như ước muốn, nếu bạn đảm bảo được 3 điều kiện dưới đây:

  1. Đây là thuộc tính mới của CSS3 và nó chưa được support tốt ở các Browser nằm trong phạm vi gọi là phổ biến mà các project ta đang làm. Cụ thể bạn xem ở trang CanIUse này. Sơ sơ thấy là Firefox với IE là không hỗ trợ rồi đó (yaoming), cho nên dự án của bạn mà đang cần support các browsers này, thì không dùng line-clamp được rồi (ahuhu).
  2. Disable Autoprefixer vì thuộc tính -webkit-box-orient: vertical vi phạm rule của Autoprefixer, nên bản CSS được build ra cuối cùng bị mất luôn thuộc tính này, debug trên browser không thấy chúng đâu hoặc thấy code đó, nhưng thực sự browser không đọc được, dẫn đến không thấy dấu ba chấm đâu 😃
  3. Disable luôn Stylelint vì thuộc tính display: -webkit-box vi phạm rule property-no-vendor-prefix của Stylelint, nếu bạn có bật tính năng này lên.

Cuối cùng thì đoạn code sẽ trở thành như sau:

Vì đây là tip mình tập trung vào việc chia sẻ cách mà line-clamp giúp mình truncate text nhiều dòng dễ dàng, nên nếu không áp dụng được cho dự án của bạn vì lý do Cross Browsers, thì vẫn còn những cách khác, các bạn có thể tham khảo:

References:

Có thể bạn cần xem

CSS Framework có thật sự cần thiết như chúng ta nghĩ?

2. Viết CSS Variables nhanh hơn với SASS

Nếu bạn đã nghe và tìm hiểu về CSS Variables trước đó, cũng như là mình cũng đã có viết 1 bài về CSS Variables trước đây, thì thấy rõ ràng là cú pháp nó khá là dài khi cần gọi 1 biến ra sử dụng

Và nếu bạn là dev Frontend thì chắc chắn bạn cũng khó dứt bỏ được SASS, vì trong SASS vẫn còn nhiều tính năng mà CSS Variables chưa thay thế được và có lẽ bạn đang sử dụng kết hợp cả SASS và CSS Variables, thế thì tại sao không giản lược cú pháp gọi var(--) của CSS Variables thành ngắn gọn hơn bởi viết 1 function của SASS nhỉ?

P/S: Tips này mình lượm được trên cộng đồng dev.to đấy, đây cũng là 1 nguồn học tập hữu ích cho developer không chỉ giới hạn là Frontend, những bài post chia sẻ trên này thường ngắn, dễ đọc và hiểu ngay, không bị dài dòng như article trong Medium ^^

References:

3. Nên dùng font-weight: 700 hơn là font-weight: bold

Hãy định nghĩa 1 chút về những value của thuộc tính font-weight:

  • Value bằng chữ thì có:
    • normal
    • bold
    • bolder
    • lighter
  • Value bằng số thì có:
    • 100
    • 200
    • 300
    • 400
    • 500
    • 600
    • 700
    • 800
    • 900

Và mình có các cặp value có giá trị như nhau đó là normal – 400 và bold – 700, nhưng trong rất nhiều thiết kế, designer họ có thể chọn 2 loại font-weight là 300 và 600 làm chuẩn, do đó value bằng chữ kia lại không thể hiện đúng chuẩn như bản design được.

Chính vì lý do sử dụng value bằng số đảm bảo chính xác yêu cầu của bản design hơn, nên nó luôn được recommend trong nhiều bộ styleguide về CSS.

References:

Tổng kết

Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.

Techtalk via Viblo

CHIA SẺ