Skip to main content

Tính năng CSS mới trong Firefox 68 dành cho nhà phát triển

firefox-new-css-features

Xin chào, mình là JUNO_OKYO đây! Firefox 68 được tung ra trong tháng này với một loạt các bổ sung và thay đổi về CSS. Trong bài viết này, chúng ta sẽ cùng xem xét một số điều bạn có thể đang mong đợi nhé.

CSS Scroll Snapping

Tính năng CSS nổi bật nhất trong lần cập nhật này chính là CSS Scroll Snapping. Nếu bạn chưa biết, thì tính năng này giúp bạn có thể kiểm soát sự kiện cuộn của người dùng, mang lại hiệu ứng cuộn đặc biệt trong trải nghiệm người dùng. Khi người dùng cuộn tới một phần của phần tử, Scroll Snapping sẽ khiến người dùng tự động cuộn vào toàn bộ phần tử, đưa vùng hiển thị mong muốn vào đúng khung hình (viewport).

Xem demo:

See the Pen Mozilla Hacks Blog: Scroll Snap 1 by rachelandrew (@rachelandrew) on CodePen.

Firefox đã có hẳn một bài viết chi tiết về tính năng này tại đây.

Định dạng đánh dấu trong danh sách

Phần tử giả ::marker cho phép bạn chọn hộp đánh dấu của một mục danh sách. Thường sẽ là chấm tròn hoặc một số.

Ví dụ đoạn code sau sẽ biến chấm tròn thành màu hồng và làm cho số trên một mục danh sách theo thứ tự trở nên lớn hơn và có màu xanh.

ul ::marker {
  color: hotpink;
}

ol ::marker {
  color: blue;
  font-size: 200%;
}

firefox-marker-css


Chỉ có một vài thuộc tính CSS có thể được sử dụng trên ::marker. Bao gồm tất cả thuộc tính phông chữ.

Công cụ cho nhà phát triển

Ngoài các thay đổi với việc triển khai CSS trong Firefox, phiên bản 68 còn mang đến cho bạn một số bổ sung tuyệt vời trong Công cụ dành cho nhà phát triển để giúp bạn làm việc với CSS.

Trong bảng quy tắc, hãy chú ý vào nút Print Styles mới xuất hiện. Nút này cho phép bạn chuyển đổi các kiểu in cho tài liệu của bạn. Giúp kiểm tra kiểu in mà bạn đang làm việc dễ dàng hơn.

firefox-print-styles-dev-tools

Vẫn ở trong bảng quy tắc, Firefox 68 cũng hiển thị một biểu tượng bên cạnh mọi CSS không hợp lệ. Nếu bạn đã từng dành nhiều thời gian đau đầu về lý do tại sao code của mình không chạy và rồi nhận ra bạn đã gặp lỗi đánh máy khi gõ tên thuộc tính chẳng hạn, thì tính năng mới này sẽ thực sự hữu ích với bạn đó!

firefox-detect-invalid-css

Bảng điều khiển (Console) giờ đây cũng hiển thị thêm thông tin về các lỗi và cảnh báo CSS. Điều này bao gồm một danh sách node của những nơi mà thuộc tính đó được sử dụng. Bạn chỉ cần nhấp vào CSS trong thanh bộ lọc để bật tính năng này.

firefox-detect-invalid-css-devtools


Share