[ad_1]
Năm nay, phiên bản mùa xuân của Safari 13.1 dành cho macOS Catalina, iPadOS, iOS và watchOS mang đến một số lượng lớn các cải tiến WebKit cho web trên các nền tảng của Apple. Tất cả điều này với nhiều cập nhật hơn để cải thiện quyền riêng tư, hiệu suất và một loạt các công cụ mới cho các nhà phát triển web.
Ở đây, một cái nhìn nhanh về các cải tiến WebKit mới có sẵn với các bản phát hành này.
Sự kiện con trỏ và chuột trên iPadOS
iPadOS 13.4 mới nhất mang đến sự hỗ trợ sự kiện chuột và con trỏ lớp máy tính để bàn cho Safari và WebKit. Để đảm bảo trải nghiệm tốt nhất, các nhà phát triển web có thể sử dụng tính năng phát hiện và áp dụng Sự kiện Con trỏ. Vì chuột hoặc trackpad đã giành được các sự kiện cảm ứng, nên nội dung web không nên phụ thuộc vào các sự kiện chạm. Sự kiện con trỏ sẽ chỉ định liệu chuột / bàn di chuột hoặc cảm ứng đã tạo ra sự kiện đó.
API hoạt hình web
Các bản phát hành này có hỗ trợ API Web Animations, một tiêu chuẩn web cung cấp cho các nhà phát triển API JavaScript để tạo, truy vấn và kiểm soát hoạt ảnh, bao gồm kiểm soát trực tiếp CSS Animations và CSS Transitions. Nó cung cấp một mô hình thống nhất thuận tiện cho các hoạt hình lập trình, Ảnh động và chuyển tiếp CSS. Bây giờ tất cả họ có thể được kiểm soát trực tiếp để tạm dừng, tiếp tục, tìm kiếm hoặc thay đổi tốc độ và hướng, với tính toán thủ công ít hơn. Ngoài ra, Web Inspector đã được cập nhật để hiển thị các mục cho chúng trong dòng thời gian Truyền thông và Ảnh động.
"quá tốt là đúng" . thayTất cả ( "" "-" );
Tìm hiểu thêm từ Đề xuất String.prototype.replace ALL.
Toán tử kết hợp nullish ( ?? ) là toán tử mới chỉ đánh giá và trả về biểu thức ở bên phải của ?? nếu kết quả của biểu thức bên trái của ?? là null hoặc không xác định .
const nullValue = null ;
const resultWithNull = nullValue ? ? ];
const nonNullValue = 0 ;
const resultWithNonNull = nonNullValue ? ];
Để biết thêm chi tiết, hãy xem Nullish Coalescing cho đề xuất JavaScript.
ResizeObserver
Việc bổ sung ResizeObserver trong WebKit cho phép các nhà phát triển thiết kế các thành phần đáp ứng với bộ chứa thay vì chỉ chế độ xem. Điều này cho phép các thiết kế đáp ứng linh hoạt hơn, trong đó các container có thể phản ứng với thay đổi kích thước cửa sổ, thay đổi hướng và bổ sung các yếu tố mới vào bố cục. API JavaScript tránh các phụ thuộc vòng tròn khi cố gắng sử dụng các truy vấn phương tiện cho các kích thước phần tử trong CSS. ResizeObserver giải quyết vấn đề bằng cách cung cấp một phương tiện để quan sát các thay đổi về kích thước bố cục của các phần tử.
Để đọc thêm về ResizeObserver trong WebKit.
Thuộc tính enterkeyhint HTML
Trên iOS, WebKit hỗ trợ thuộc tính enterkeyhint cho phép tác giả nội dung cung cấp nhãn cho phím enter trên bàn phím ảo với các giá trị cho: nhập đi tiếp theo trước tìm kiếm và gửi .
Xem Tiêu chuẩn HTML để biết thêm thông tin.
Các bộ phận bóng CSS
Hỗ trợ mới cho CSS Shadow Parts cho phép các tác giả web định kiểu các phần của các thành phần web mà không cần phải hiểu cách chúng được xây dựng. Điều này cung cấp một cơ chế để xác định các phần kiểu do tác giả xác định gần giống với phần tử đầu vào Các phần tử giả giả trong WebKit.
Xem thông số kỹ thuật Phần bóng CSS để biết thêm thông tin.
Thêm CSS bổ sung
Có một số bổ sung CSS mới trong WebKit. Các từ khóa phông chữ mới có sẵn để sử dụng các phông chữ dành riêng cho nền tảng bao gồm ui-serif ui-sans-serif ui-monospace, và ui- làm tròn . WebKit cũng hỗ trợ giá trị ngắt dòng : bất cứ nơi nào có thêm cơ hội bọc mềm xung quanh mỗi đơn vị ký tự, bao gồm xung quanh bất kỳ dấu chấm câu hoặc khoảng trắng được bảo tồn nào, ở giữa các từ, thậm chí bỏ qua các giới hạn đối với ngắt dòng. Cuối cùng, WebKit bao gồm hỗ trợ cho truy vấn phương tiện phạm vi động cho phép các tác giả tạo kiểu cụ thể cho khả năng hiển thị.
@media ( dải động : tiêu chuẩn ) {
. ví dụ {
màu : rgb ( 255 0 0 );
}
}
@media ( dải động : cao ) {
. ví dụ {
màu : màu ( display-p3 1 0 0 );
}
}
API phương tiện
Safari là người đầu tiên cung cấp tính năng hình ảnh và từ lâu đã hỗ trợ khả năng chỉ định mục tiêu phát lại cho AirPlay. Safari cho iOS và macOS hiện hỗ trợ tiêu chuẩn hóa các tính năng này với API Ảnh trong ảnh và API phát lại từ xa. Ngoài ra còn có hỗ trợ mới cho siêu dữ liệu phạm vi ngày của HLS trong DataCue.
Phụ đề và chú thích
WebKit đang giới thiệu các cải tiến cho TextTrackCue để trình bày phụ đề và phụ đề theo chương trình. Điều này cho phép các nhà xuất bản video tiếp tục lưu trữ chú thích ở các định dạng cũ hoặc tùy chỉnh và cung cấp cho họ lập trình và vẫn duy trì khả năng cho người dùng kiểm soát sự hiện diện và kiểu chú thích với cài đặt trợ năng của hệ thống.
Để biết thêm chi tiết, hãy xem Trình giải thích văn bản WebKit.
Hỗ trợ Proxy và Âm thanh Di sản WebRTC
Hỗ trợ WebRTC trong WebKit đã được cập nhật để có thể hoạt động ở nhiều nơi hơn, với nhiều hệ thống hơn. Hỗ trợ cho DTMF cho phép WebKit tương tác với các dịch vụ âm thanh cũ. Hỗ trợ Proxy WebRTC cho phép WebRTC hoạt động trong các mạng doanh nghiệp nơi tường lửa có thể cấm UDP và yêu cầu TCP phải thông qua proxy chuyên dụng.
Cải tiến hiệu suất
WebKit tiếp tục mang lại hiệu suất tăng điểm chuẩn trong các bản phát hành này đồng thời tối ưu hóa việc sử dụng bộ nhớ. Bản phát hành này bao gồm cải thiện 8-10% trên điểm chuẩn Jetstream 2. JavaScript Promise nói riêng đã cho thấy sự cải thiện 2 × trong điểm chuẩn async-fs trên JetStream 2. IndexedDB cho thấy sự cải thiện nhanh hơn 1,3 × đến 5 × so với trước đây đối với hầu hết các hoạt động. Ngoài ra, còn có chương trình khởi động Công nhân dịch vụ nhanh hơn và cập nhật truy vấn phương tiện CSS hiệu quả hơn. Cải thiện phản ứng ngược về phía trước giúp điều hướng lịch sử cảm thấy snappier. Thêm vào đó, một trình thông dịch Hội đồng Web mới cải thiện đáng kể thời gian khởi động khoảng 8 × cho các ứng dụng WASM lớn.
Cải tiến an ninh
WebKit đã tiếp tục tăng cường bảo mật bằng cách sửa một số lỗi được tìm thấy thông qua một quá trình được gọi là mờ. Theo thông báo của chúng tôi về việc không dùng các kết nối TLS 1.0 và TLS 1.1, bản phát hành này hiện thêm cảnh báo của Not Not Secure đảm bảo khi kết nối với một trang web có bất kỳ tài nguyên nào đang sử dụng một trong hai giao thức mã hóa không dùng nữa.
Cập nhật phòng chống theo dõi thông minh
Có một số cải tiến mới trong Ngăn chặn theo dõi thông minh bao gồm chặn cookie của bên thứ ba đầy đủ, tài liệu trên trang web. Các trình duyệt đã hạ cấp về nguồn gốc của chúng và hết hạn dữ liệu trang web không phải cookie sau bảy ngày sử dụng Safari và không có tương tác với người dùng trên trang web.
Đọc toàn bộ Chặn cookie của bên thứ ba và nhiều bài đăng trên blog khác để biết thêm chi tiết.
Cải tiến chất lượng nền tảng web
Các lĩnh vực tuân thủ tiêu chuẩn và khả năng tương tác của trình duyệt được cải thiện bao gồm phân tích vị trí và độ dốc tương thích hơn, làm tròn thành phần màu, hỗ trợ mới cho đơn vị Q và tốt hơn calc () kiểu tính toán.
Cập nhật thanh tra web
Trình kiểm tra web trong Safari 13.1 bao gồm các trải nghiệm gỡ lỗi mới và thêm một số công cụ mới để giúp các nhà phát triển web kiểm tra chức năng hoặc xác định các vấn đề.
Tab nguồn
Tab Nguồn mới kết hợp Tab Tài nguyên và Tab Trình gỡ lỗi thành một chế độ xem, giữ thông tin quan trọng hơn ở một nơi mà không cần phải chuyển đổi qua lại. Trong số các cải tiến, nó bao gồm hỗ trợ cải tiến để gỡ lỗi nhân viên và có các điểm dừng JavaScript mới, chẳng hạn như tạm dừng trên Tất cả các sự kiện hoặc trên Tất cả các Microt Nhiệm vụ.
Cũng mới trong Tab Nguồn, nhà phát triển có thể tạo sử dụng nút Cấm + ở phía dưới bên trái của thanh điều hướng để thêm Tập lệnh khởi động thanh tra hoặc ghi đè cục bộ. Inspector Bootstrap Sc Script là một đoạn mã JavaScript được đảm bảo là tập lệnh đầu tiên được đánh giá sau khi bất kỳ đối tượng toàn cầu mới nào được tạo trong bất kỳ trang hoặc khung phụ nào, bất kể URL, miễn là Web Inspector được mở. Ghi đè cục bộ có thể được thêm vào để ghi đè bất kỳ tài nguyên nào được tải vào trang, cung cấp cho nhà phát triển khả năng thay đổi tệp và xem trước những thay đổi trên các trang mà họ thường không thể thay đổi.
Cả Tab nguồn và Tab mạng cũng được hưởng lợi từ việc hiển thị nội dung HTML và XML được cải thiện, bao gồm khả năng in đẹp hoặc xem bất kỳ dữ liệu yêu cầu / phản hồi nào dưới dạng cây DOM mô phỏng.
Tab Lớp
Tab Lớp cũng mới xuất hiện trong phiên bản này. Nó cung cấp một hình ảnh 3D và danh sách đầy đủ các lớp kết xuất được sử dụng để hiển thị trang. Nó cũng bao gồm thông tin như số lớp và chi phí bộ nhớ của tất cả các lớp, cả hai đều có thể giúp các nhà phát triển chỉ ra các vấn đề hiệu suất tiềm năng.
Đọc các lớp trực quan hóa trong các bài đăng trên blog của Thanh tra Web để biết chi tiết.
Blackboxing Script
Script Blackboxing là một công cụ mạnh mẽ khác, tập trung vào việc giúp các nhà phát triển gỡ lỗi các hành vi được xây dựng trên đầu thư viện hoặc khung công tác JavaScript. Bằng cách thiết lập hộp đen cho bất kỳ tập lệnh thư viện hoặc khung công tác nào, trình gỡ lỗi sẽ bỏ qua mọi tạm dừng đã xảy ra trong tập lệnh đó, thay vào đó trì hoãn tạm dừng cho đến khi thực thi JavaScript tiếp tục một câu lệnh bên ngoài tập lệnh hộp đen.
Bộ chọn màu được thiết kế lại
Các bổ sung khác cho Thanh tra Web cung cấp cho tác giả nội dung cái nhìn sâu sắc hơn về thiết kế và trải nghiệm người dùng. Bộ chọn màu được thiết kế lại sử dụng thiết kế vuông để lựa chọn màu chính xác hơn và bao gồm hỗ trợ cho các gam màu rộng với đường dẫn màu trắng hiển thị cạnh của sRGB sang không gian màu Display-P3.
Tìm hiểu thêm từ Màu rộng Gamut trong CSS với bài đăng trên blog Display-P3.
QuickLook AR tùy chỉnh
[ad_2]
Source link: webdesignernews