Một số thuộc tính CSS có thể bạn chưa biết!

Tram Ho

Có 1 số thuộc tính CSS rất hay nhưng lại bị ẩn giấu khá kỹ trong kho tàng CSS đồ sộ, hoặc nói đúng hơn là nó ít được sử dụng vì lý do nào đó, có thể là do chưa được nhiều trình duyệt hỗ trợ hoặc dev nghĩ là để xử lý UI đặc biệt nào đó thì chỉ có JS mới làm được. Hãy cùng điểm qua một số thuộc tính CSS có thể bạn chưa biết (hoặc biết rồi) thú vị dưới đây nhé .

1. Tab size

Hầu hết các Editor hiện tại đều có setting (có thể kết hợp thêm với plugin EditorConfig) cho phép developer chỉ định chiều rộng tab được thực hiện bằng phím Tab. Nhưng gần đây, chúng ta cũng có thể tùy chỉnh tab size được nhúng trên các trang web.

Lưu ý rằng mỗi browsers có thể có cách hiểu riêng về đơn vị chiều rộng của tab nên dài bao nhiêu. Vì vậy, chúng ta có thể thấy một số khác biệt giữa các browsers khác nhau. Về mặt hỗ trợ browsers, tab-size chỉ mới hỗ trợ trên Chrome, Opera, Firefox và Safari theo CanIUse.

2. Scroll behavior

Trước đây, khi làm một số hiệu ứng scroll từ 1 block A đến block B trong cùng 1 trang sẽ cần phải can thiệp một chút JS để handle thêm animation cùng với duration time để giúp cho hiệu ứng scroll trở nên mượt mà. Nhưng hiện tại, thuộc tính scroll-behavior của CSS3 đã hỗ trợ rất tốt cho developers công việc này, chỉ cần 1 đoạn CSS:

Demo:

 

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo