Lâu rồi không gặp! Video về tính năng mới trong Chrome đã quay trở lại với thông tin về:
- Hộp văn bản CSS cho phép bạn kiểm soát khoảng cách theo chiều dọc một cách chính xác bằng cách sử dụng các chỉ số phông chữ.
- API truy cập hệ thống tệp hiện được hỗ trợ trên Android và chế độ xem web.
- Cách duy trì trạng thái để di chuyển phần tử DOM bằng
moveBefore. - Light dismiss (Tắt nhẹ) sẽ xuất hiện trong phần tử
<dialog>. - Ngoài ra, còn có nhiều nội dung cập nhật trong Baseline và các tính năng khác!
Tôi là Mariko. Hãy cùng tìm hiểu những điểm mới trong Chrome trong 3 bản phát hành gần đây.
Hộp văn bản CSS
Thuộc tính text-box CSS cho phép bạn kiểm soát khoảng cách dọc một cách chính xác bằng cách sử dụng các chỉ số phông chữ.
Mỗi phông chữ tạo ra một khoảng trống khác nhau ở phía trên và phía dưới các ký tự, giúp xác định kích thước của phần tử.
Cho đến nay, chúng tôi không thể kiểm soát kích thước của các không gian này.
Thuộc tính text-box-trim mới chỉ định các cạnh cần cắt bớt, ở trên hoặc ở dưới, còn thuộc tính text-box-edge chỉ định cách cắt bớt.
Ví dụ: cắt ở chiều cao chữ in hoa, tức là đầu các ký tự viết hoa.
Bạn cũng có thể viết mã này bằng cách sử dụng thuộc tính viết tắt text-box.
Tìm hiểu thêm về cách sử dụng các thuộc tính mới này trong bài viết text-box-trim CSS.
API truy cập hệ thống tệp
Thêm vào Chrome 133, Node.prototype.moveBefore gốc DOM cho phép bạn di chuyển các phần tử xung quanh cây DOM mà không cần đặt lại trạng thái của phần tử.
Khi bạn xoá rồi chèn lại một phần tử để di chuyển một phần tử DOM, thao tác này sẽ đặt lại trạng thái của phần tử đó. Khi sử dụng loại dữ liệu gốc mới này, trạng thái của nút sẽ được giữ nguyên.
Vì vậy, các iframe vẫn được tải, các phần tử đang hoạt động vẫn nằm trong tiêu điểm, các thành phần như cửa sổ bật lên và hộp thoại vẫn mở, cũng như các hiệu ứng chuyển đổi hoặc ảnh động CSS vẫn tiếp tục.
Cách bảo tồn trạng thái để di chuyển một phần tử DOM
API Truy cập hệ thống tệp đã có trên Chrome dành cho máy tính được một thời gian. API này cho phép các ứng dụng web tương tác với các tệp trên hệ thống tệp cục bộ của người dùng. Kể từ Chrome 132, API này cũng có trên Android và trong WebView.
Để đọc tệp, hãy gọi showOpenFilePicker(). Phương thức này hiển thị một bộ chọn tệp, sau đó trả về một handle tệp mà bạn có thể dùng để đọc tệp.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Để lưu tệp vào ổ đĩa, bạn có thể sử dụng cùng một handle tệp mà bạn đã nhận được trước đó hoặc gọi showSaveFilePicker() để nhận handle tệp mới.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Thao tác đóng nhẹ sẽ áp dụng cho phần tử <dialog>
Nếu đã sử dụng Popover API để tạo một cửa sổ bật lên, bạn sẽ biết rằng một trong những tính năng thú vị của Popover API là hành vi đóng nhẹ. Người dùng có thể nhấp vào nền và phần tử cửa sổ bật lên sẽ đóng mà không cần nhấn vào nút đóng.
Giờ đây, tính năng đóng nhẹ này cũng được hỗ trợ trong phần tử <dialog>!
Khi bạn đặt thuộc tính closedby thành any, bạn có thể đóng hộp thoại bằng cách nhấp vào bên ngoài hộp thoại hoặc nhấn phím thoát.
<dialog closedby="any">...</dialog>
Cách làm này tương tự như khi bạn đặt một cửa sổ bật lên thành tự động.
Nội dung cập nhật trong Baseline
Và sau đây là tin tức về Baseline
Đường cơ sở Mới có
Trước tiên, Baseline mới có sẵn, đây là những tính năng được cung cấp trong cả 4 trình duyệt chính gần đây.
scrollbar-gutter và scrollbar-width
Với thuộc tính CSS scrollbar-gutter, bạn có thể đặt trước không gian cho thanh cuộn để tránh các thay đổi không mong muốn về bố cục khi thanh cuộn xuất hiện hoặc biến mất. Với scrollbar-width, bạn có thể tạo một thanh cuộn hẹp hơn hoặc thậm chí ẩn hoàn toàn thanh cuộn mà không ảnh hưởng đến khả năng cuộn.
ruby-align
Với thuộc tính CSS ruby-align, bạn có thể chỉ định căn chỉnh văn bản cơ sở ruby và văn bản chú thích ruby.
Promise.try
Promise.try là một phương thức thuận tiện để xử lý lỗi cho các yêu cầu đồng bộ. Bằng cách sử dụng phương thức này, bạn có thể loại bỏ các hàm gọi lại khi cố gắng yêu cầu bằng Promise.resolve.
Thu gom rác Wasm và tối ưu hoá lệnh gọi đuôi
WebAssembly hiện hỗ trợ tính năng Thu gom rác và tối ưu hoá lệnh gọi đuôi.
Cơ sở Có sẵn rộng rãi
Mảng findLast() và findLastIndex()
Phương thức findLast() và findLastIndex() của mảng rất thuận tiện để lấy các mục từ cuối mảng. Tất cả các trình duyệt chính đều hỗ trợ tính năng này trong 30 tháng, nghĩa là tính năng này hiện đã được cung cấp rộng rãi trên Baseline.
Các thuộc tính biến đổi riêng lẻ
Các thuộc tính biến đổi riêng lẻ giúp bạn kiểm soát chi tiết hơn các phép biến đổi CSS hiện cũng có sẵn trong Đường cơ sở rộng rãi .
Tìm hiểu thêm về Đường cơ sở
Nếu bạn muốn tìm hiểu thêm về Đường cơ sở và sự khác biệt giữa chế độ Mới và Phổ biến, hãy xem video ngắn mà tôi đã tạo.
Bạn cũng có thể tìm hiểu thêm về trạng thái cơ sở của một tính năng trên trang tổng quan về Trạng thái nền tảng web!
Dự án Interop trở lại vào năm 2025
Cuối cùng, dự án Interop sẽ trở lại vào năm 2025 với danh sách các lĩnh vực trọng tâm bao gồm chuyển đổi chế độ xem, định vị neo CSS và API Điều hướng. Đừng quên xem thông báo về dự án!
Đăng ký
Để luôn nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. 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à Mariko Kosaka. Tôi sẽ quay lại sau 3 tháng để chia sẻ thêm với bạn về các tính năng mới trong Chrome!