![]() There were a couple of significant releases this month: Check it out if you want to know more! Release time! There is a great article in web.dev where they discuss fetchpriority along with other resource hints (like preload or async/defer) to optimise resource fetching. Unfortunately, this is only supported in Chrome to this day, but it’s a progressive enhancement that won’t hurt unsupported browsers. You can also prioritise iframes, scripts, links and fetch requests, the latter using Request.priority. Through the fetchpriority attribute, priority hints allow you to tell the browser the relative priority of a resource, like in the carousel example below, where you may want to prioritise the visible or above the fold image: That’s where Priority Hints come into play. Browsers are usually pretty good at determining download priorities, but they may not always be optimal. The order in which the assets are downloaded is determined by the browser itself, taking into account resource type, position in the document, etc. APPLE EXPERIMENTAL WEBKIT FEATURES FULL VERSIONWhen a browser parses HTML, it discovers resources like images, styles and scripts and starts downloading them to render the full version of the page. APPLE EXPERIMENTAL WEBKIT FEATURES SERIESThinking on ways to solve Dialog: The last YouTube video in the GUI Challenge series by Adam Argyle from Google Chrome Devs channel.Fun with the Dialog Element: An interesting post about it by Mark Otto, the creator of Bootstrap.Introducing the Dialog Element: Comprehensive documentation of the feature by the WebKit team, probably the best resource to learn about it.Now that it is supported in every evergreen browser, it is a good time to take a look at it: You’ll still need to write JS to open it, but it already handles a lot of things for you, like always being on top of everything no matter the z-index and focusing into the modal when it gets opened. It’s not just a semantic element, it has an API for opening and closing and special CSS features, like the ::backdrop pseudo-element. There was a native element though, but it was not widely supported, and thus, it was still pretty experimental… Until right now, that it just landed in Safari 15.4 across all Apple devices, as well as Firefox 98. Creating web dialogs has always been a matter of using JS libraries or hacking with z-index, pointer-events and JS to show the element on top and block the other mouse or keyboard events if needed. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |