- Tính năng hỗ trợ
ResizeObserverssẽ thông báo cho bạn khi hình chữ nhật nội dung của một phần tử thay đổi kích thước. - Giờ đây, các mô-đun có thể truy cập vào siêu dữ liệu cụ thể của máy chủ lưu trữ bằng import.meta.
- Trình chặn cửa sổ bật lên trở nên mạnh mẽ.
window.alert()không còn thay đổi tiêu điểm.
Tôi là Pete LePage. Hãy cùng tìm hiểu kỹ hơn và xem có gì mới cho nhà phát triển trong Chrome 64!
Bạn muốn xem danh sách đầy đủ các thay đổi? Hãy xem danh sách thay đổi kho lưu trữ nguồn Chromium.
ResizeObserver
Việc theo dõi thời điểm thay đổi kích thước của một phần tử có thể khiến bạn phiền lòng. Nhiều khả năng nhất là bạn sẽ đính kèm một trình nghe vào sự kiện resize của tài liệu, sau đó gọi getBoundingClientRect hoặc getComputedStyle. Tuy nhiên, cả hai cách đều có thể gây ra tình trạng đơ bố cục.
Và nếu cửa sổ trình duyệt không thay đổi kích thước nhưng một phần tử mới được thêm vào tài liệu thì sao? Hoặc bạn đã thêm display: none vào một phần tử? Cả hai thành phần này đều có thể thay đổi kích thước của các thành phần khác trong trang.
ResizeObserver thông báo cho bạn mỗi khi kích thước của một phần tử thay đổi, đồng thời cung cấp chiều cao và chiều rộng mới của phần tử đó để giảm nguy cơ bị đơ bố cục.
Giống như các Trình quan sát khác, cách sử dụng khá đơn giản, hãy tạo đối tượng ResizeObserver và truyền lệnh gọi lại đến hàm khởi tạo. Lệnh gọi lại sẽ được cung cấp một mảng ResizeOberverEntries – một mục nhập cho mỗi phần tử được quan sát – chứa các kích thước mới cho phần tử đó.
const ro = new ResizeObserver( entries => {
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px × ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// Observe one or multiple elements
ro.observe(someElement);
Hãy xem ResizeObserver: Tương tự như document.onresize cho Phần tử để biết thêm thông tin chi tiết và ví dụ thực tế.
Cải tiến Trình chặn cửa sổ bật lên
Tôi ghét tab-dưới. Như bạn đã biết, đó là khi một trang mở cửa sổ bật lên đến một số đích đến VÀ di chuyển trên trang. Thường thì một trong số đó là quảng cáo hoặc nội dung bạn không muốn.
Kể từ Chrome 64, những loại điều hướng này sẽ bị chặn và Chrome sẽ hiển thị một số giao diện người dùng gốc cho người dùng để cho phép họ đi theo lệnh chuyển hướng nếu muốn.
import.meta
Khi viết mô-đun JavaScript, bạn thường muốn truy cập vào siêu dữ liệu dành riêng cho máy chủ lưu trữ về mô-đun hiện tại. Chrome 64 hiện hỗ trợ thuộc tính import.meta
trong các mô-đun và hiển thị URL cho mô-đun dưới dạng
import.meta.url.
Điều này thực sự hữu ích khi bạn muốn phân giải các tài nguyên liên quan đến tệp mô-đun thay vì tài liệu HTML hiện tại.
Và nhiều kiến thức khác!
Đây chỉ là một vài thay đổi trong Chrome 64 dành cho nhà phát triển. Tất nhiên, còn có nhiều thay đổi khác dành cho nhà phát triển.
- Chrome hiện hỗ trợ ảnh chụp có tên và các ký tự thoát thuộc tính Unicode trong biểu thức chính quy.
- Giá trị
preloadmặc định cho các phần tử<audio>và<video>hiện làmetadata. Điều này giúp Chrome tương đồng với các trình duyệt khác và giúp giảm mức sử dụng băng thông và tài nguyên bằng cách chỉ tải siêu dữ liệu chứ không tải chính nội dung nghe nhìn. - Giờ đây, bạn có thể sử dụng
Request.prototype.cacheđể xem chế độ bộ nhớ đệm củaRequestvà xác định xem một yêu cầu có phải là yêu cầu tải lại hay không. - Khi sử dụng API Quản lý tiêu điểm, giờ đây, bạn có thể lấy tiêu điểm một phần tử mà không cần cuộn đến phần tử đó bằng thuộc tính
preventScroll.
window.alert()
Và thêm một thiết bị nữa! Mặc dù đây không thực sự là một "tính năng dành cho nhà phát triển", nhưng điều này làm tôi cảm thấy hài lòng. window.alert() không còn hiển thị thẻ nền ở nền trước nữa! Thay vào đó, cảnh báo sẽ hiển thị khi người dùng quay lại thẻ đó.
Không còn phải chuyển đổi thẻ ngẫu nhiên nữa vì có tính năng đã kích hoạt window.alert trên tôi.
Tôi đang xem Lịch Google cũ của bạn.
Hãy nhớ đăng ký kênh YouTube của chúng tôi. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.
Tôi là Pete LePage và ngay sau khi Chrome 65 được phát hành, tôi sẽ có mặt ngay để cho bạn biết -- Chrome có tính năng gì mới!