Các tính năng WebKit mới trong Safari 13.1

[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.

 Dòng thời gian thanh tra và hoạt hình của thanh tra web "class =" wp-image-10250 "/> </picture> </figure>
<p> Đọc thêm về Ảnh động trên Web trong WebKit. </p>
<h2> API Clipboard Async </h2>
<p> WebKit mang API Clipboard Async cho phiên bản Safari này. Nó cung cấp quyền truy cập vào bảng tạm hệ thống và các hoạt động của bảng tạm trong khi giữ cho trang web phản hồi nhanh. API này linh hoạt hơn nhiều so với DataTransfer, cho phép các nhà phát triển viết nhiều mục với nhiều loại cho mỗi mục. Ngoài ra, nó mang đến chương trình dán cho tất cả các trang web trên macOS và iOS. </p>
<p> Việc triển khai có sẵn thông qua API <code> navigator.clipboard </code> phải được gọi trong bộ xử lý sự kiện cử chỉ của người dùng như <code> con trỏ xuống </code> hoặc <code> con trỏ </code> và chỉ hoạt động cho nội dung được phục vụ trong một bối cảnh an toàn (ví dụ: <code> https: // </code>). Thay vì mô hình dựa trên quyền để đọc từ bảng ghi tạm, giao diện người dùng gốc được hiển thị khi trang gọi vào API <code> </code>; bảng tạm chỉ có thể được truy cập nếu người dùng sau đó tương tác rõ ràng với giao diện người dùng nền tảng. </p>
<p> Để biết thêm chi tiết, hãy xem thông số kỹ thuật API gốc. </p>
<h2> Cải tiến JavaScript </h2>
<p> Các bản phát hành này bao gồm hỗ trợ JavaScript mới cho phương thức <code> thay ALL () </code> cho chuỗi và toán tử kết hợp nullish mới (<code> ?? </code>). </p>
<p> Phương thức <code> String.prototype.replaceAll () </code> thực hiện chính xác những gì nó gợi ý, thay thế tất cả các lần xuất hiện của một giá trị đã cho trong chuỗi bằng chuỗi thay thế. </p>
<pre> <code class= "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 ?? 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 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, 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

 Biểu ngữ HTML tùy chỉnh AR QuickLook "class =" alignright wp-image-10258 "style =" max-width: 250px; "/> Trong Safari trên iOS 13.3 trở lên, người dùng có thể khởi chạy trải nghiệm AR từ web nơi các tác giả nội dung có thể tùy chỉnh một biểu ngữ che phủ chế độ xem AR. Có thể tùy chỉnh: </p>
<ul>
<li> Kiểu nút Apple Pay </li>
<li> Nhãn nút hành động </li>
<li> Một tiêu đề vật phẩm </li>
<li> Phụ đề vật phẩm </li>
<li> Giá </li>
</ul>
<p> Hoặc, các tác giả có thể tạo một biểu ngữ hoàn toàn tùy chỉnh với HTML: </p>
<pre> <code> https://example.com/example.usdz#custom=https://example.com/customBanner.html
</code> </pre>
<p> Để biết thêm thông tin, hãy đọc về Thêm nút Apple Pay hoặc Hành động tùy chỉnh trong AR Quick Look. </p>
<h2> Phản hồi </h2>
<p> Những cải tiến này có sẵn cho người dùng đang chạy watchOS 6.2, iOS và iPadOS 13.4, macOS Catalina 10.15.4, macOS Mojave 10.14.6 và macOS High Sierra 10.13.6. Các tính năng này cũng có sẵn cho các nhà phát triển web với các bản phát hành Safari Technology Preview. Những thay đổi trong bản phát hành Safari này đã được bao gồm trong các bản phát hành Safari Technology Preview sau: 90, 91, 92, 93, 94, 95, 96, 97, 98. Tải xuống bản phát hành Safari Technology Preview mới nhất để luôn đi đầu trong nền tảng web trong tương lai và tính năng Thanh tra Web. Bạn cũng có thể sử dụng trang Trạng thái tính năng WebKit để theo dõi các thay đổi đối với các tính năng nền tảng web yêu thích của bạn. </p>
<p> Gửi một tweet đến @webkit hoặc @jonathandavis để chia sẻ suy nghĩ của bạn về bản phát hành này. Nếu bạn gặp phải bất kỳ vấn đề nào, chúng tôi hoan nghênh các báo cáo lỗi của bạn cho Safari hoặc lỗi WebKit cho các vấn đề nội dung web. </p>
<p>                            </p></div>
<p> <script async src=
[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.