Learn more by reading The Focus-Indicated Pseudo-class :focus-visible. WebKit added support for the :focus-visible pseudo-class to style the focus indicator only when the browser renders it. WebKit is happy to lead the pack, shipping these new units first and encouraging other browsers to do so through Interop 2022. And svi, svb, lvi, lvb, dvi, and dvb provide logical dimension units for the small, large, and dynamic versions of the inline and block dimensions. To support logical dimensions, the new vi and vb are similar to existing Viewport Units, in the viewport inline and viewport block dimensions. To cover the small, large, and dynamic versions of vmin and vmax, the svmin, svmax, lvmin, lvmax, dvmin, and dvmax units were implemented. There are other new viewport units as well - svw, lvw, and dvw serve the same purpose for width. And 100dvh refers to 100% of the dynamic viewport height - meaning the value will change as the user scrolls. 100lvh refers to 100% of the height of the largest possible viewport. 100svh refers to 100% of the height of the smallest possible viewport. The new Viewport Units are that solution. Web developers often ask for a tool that would work similar to existing viewport units, but work better on mobile devices where the dimensions of the browser’s viewport change as a user scrolls the page. Several more additions to CSS in WebKit introduce solutions to long-standing pain points. WebKit also added support for CSS Containment - all four types: size, layout, style, and paint - with the contain property. Cascade Layers is arriving in all major browsers at about the same time and is included in Interop 2022, ensuring this is a tool web developers can begin to seriously consider for the future. They could designate that everything in the custom layer should beat everything in the framework layer, no matter the specificity of the selectors used in each layer. WebKit added support for Cascade Layers - a powerful way to organize styles into layers where specificity is calculated independently inside each layer.Ī web developer could create a “framework” layer and a “custom” layer - assigning all the CSS from a 3rd-party framework to the “framework” layer, and writing their own code in the “custom” layer. It was long thought such a selector was not possible, but our team figured out a way to highly-optimize performance and deliver a flexible solution that does not slow the page. This selector fulfills a long-expressed desire for a “parent selector” - a way to apply CSS rules conditionally based on the contents of an element - and goes even further with the possibilities it enables. Landing in Safari first, WebKit added support for the :has() pseudo-class. Several additions to CSS in 2022 offer revolutionary new ways for web developers to architect their code, making it easier to reuse code, create design systems, and integrate with complex applications. WebKit also added support for the global autofocus attribute allowing developers to indicate which element should be the one in focus when the page loads or when a is displayed. You can learn all about using and ::backdrop in Introducing the Dialog Element. Show the dialog Pretty dialog example styled The ::backdrop pseudo-element makes it possible to style the background underneath the modal. Do you want to delete everything? You will lose all your data. The element provides a robust and powerful way to create overlays and modals. WebKit added support for lazy-loading images with the loading attribute on the element, providing web developers with an easy way to instruct the browser to defer loading certain images until the user scrolls near them.Īfter years of standardization debates over accessibility considerations and with a solution finally at hand, WebKit added support for the element and ::backdrop pseudo-element. You can update to Safari 15.4 on macOS Big Sur and macOS Catalina by going to System Preferences → Software Update → More info, and choosing to update Safari. Safari 15.4 is available for macOS Monterey 12.3, macOS Big Sur, macOS Catalina, iPadOS 15.4, and iOS 15.4. This is the first big WebKit release of 2022, and we’re just getting started. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |