Tạo các chú giải công cụ tối thiểu trong CSS thuần với Wenk
Với một cái tên lạ lùng như vậy, bạn sẽ không mong đợi nhiều từ Ôn Châu, miễn phí Thư viện chú giải công cụ CSS. Nhưng nó một trong những thư viện nhỏ nhất bạn có thể đo dưới 1KB khi được nén.
Sử dụng CSS thuần với dữ liệu-* thuộc tính để tạo ra chú giải công cụ sống rằng bạn có thể restyle và vị trí theo ý thích của bạn. Trên hết, đó là một thư viện hoàn toàn miễn phí với mã nguồn có sẵn trên GitHub.
Những chú giải công cụ nhẹ này siêu đơn giản để thêm vào trang web của bạn. Bạn chỉ cần Wenk.css tập tin được thêm vào tiêu đề trang của bạn, mà bạn có thể tải xuống từ repo GitHub.
Hoặc, bạn thậm chí có thể thêm tệp CDN được lưu trữ trên CDN của GitHub. Đây là mã cho điều đó:
Hoặc, nếu bạn là người hâm mộ npm / bower, bạn có thể cài đặt gói này từ thiết bị đầu cuối.
Các thẻ chú giải công cụ mặc định không có nhiều dữ liệu tùy chỉnh. Họ để bạn chọn vị trí và chiều rộng, nhưng bạn phải thay đổi thủ công CSS nếu bạn muốn chúng được tạo kiểu khác nhau.
Ví dụ: bạn có thể muốn một mũi tên CSS được thêm vào tooltip xuất hiện phía trên phần tử tooltip. Điều này khá đơn giản để tạo nhưng bạn sẽ cần quét biểu định kiểu Wenk để tìm lớp CSS chính xác để mở rộng.
Đây là mẫu của một số mã mặc định cho chú giải công cụ Wenk:
Ôn bên phải! Trang đích chính của Wenk bao gồm bản demo sống mà bạn có thể kiểm tra bằng cách di chuột. đó là các chú giải công cụ cơ bản nhất bạn sẽ nhận được nhưng chúng hoàn hảo cho một thư viện nặng dưới một kilobyte.
Một điều quan trọng cần xem xét là hỗ trợ trình duyệt. Tất cả các phiên bản Chrome và Firefox nên làm việc tốt. Tương tự với Opera 12+ và Opera Mini v8 +. Nhưng IE8 và IE10 dường như có rắc rối kết xuất các chú giải công cụ này. Rất may, thị phần của họ đang giảm nhanh nhưng đó là điều cần xem xét trước khi sử dụng.
Tôi vẫn ngạc nhiên về số tiền bạn có thể làm với rất ít KB. Thư viện Wenk là một minh chứng cho sự phát triển frontend hiện đại và nó cho thấy rằng một chút có thể đi một chặng đường dài.
Bạn có thể đào qua toàn bộ nguồn trên GitHub, cùng với bản demo sống và đoạn mã để thiết lập và tạo các chú giải công cụ này cho trang web của riêng bạn.
