![]() ![]() Here in the sidebar, the available space is a bit narrow, so I want all the content inside my component to stack vertically. I'm making the card that presents a piece of clothing into a reusable component and dropping that component into several different places in the page layout. Here, I'm experimenting with an alternative layout for the clothing swap website. With that, we know the number one request for new web technology has been container queries.Īnd we're thrilled to announce container queries will ship in Safari 16! You'll be able to use both size queries and container query units. ![]() I'm really loving how the site's looking so far, and it's going to work great for those using assistive technologies as well.Īnd those HTML features are just getting us started, because there's so much to check out with CSS this year too.Ī huge part of our CSS focus has been around making your CSS easier to reuse through more powerful architecture. On my site, there's some icons in the header that I need to load right away, but for the clothing item images that are offscreen on that first load, we can utilize lazy loading for them, so the images only load when the user scrolls to them, making the page feel faster and more responsive. I can use the inert attribute to fix this.īy dynamically applying the inert attribute with the JavaScript here, I'm disabling any interactions for elements on slides that aren't the currently selected slide as we switch between them.Īnd, using inert includes disabling interactions for assistive technologies and prevents screen readers from reading those disabled items aloud, giving much clearer guidance on which elements are intended for interaction.Īnd lastly for HTML, there's the new lazy loading for images. See that shadow and animation? It's really looking great! Then, once an item is requested on our site, the person who posted it needs to be able to accept the request.Īt the bottom of the page, there's a carousel to flip through all your received requests.īut I don't want someone to accidentally interact with a button or a text field for one of the items that's not the frontmost, with either clicks or keyboard navigation. Let's bring up the dialog by requesting an item. The new dialog element provides a really easy way to create overlays in a robust and accessible manner that we can use for our request form.Īnd the new backdrop pseudo-element in CSS makes it possible to style the background behind the modal. My design for the site includes a Request Item button that should show you a form to fill out when you spot a piece of clothing that you like.Īnd I want that form to show up in an overlay over top of the whole page. I personally really like to thrift and repurpose my clothes as a way to make my wardrobe more sustainable, and I thought a clothing swap website would be a great way to have my team try it out too. So, let's get started with what's new with HTML by taking a look at a web page I'm creating for my coworkers and I to use. Today we'll be looking at new HTML features, CSS enhancements - including a bunch to help your code architecture - new Web Inspector tools, a wide selection of new web API, great JavaScript and WebAssembly features, and improvements to security and privacy. We've been proud to provide so many new tools for you to use to make your websites and web apps.Īnd for macOS, the best way to see what's new and exciting as soon as possible is through Safari Technology Preview, where you can try out the latest and greatest for Safari and WebKit and also help us know what we should have come next.īut like you saw, there's a whole bunch of new features, so let's take a look at everything that we're going to cover. There's been a total of 162 new web platform features and improvements across the seven Safari releases this past year. In fact, what's here is just some of the new content that we'll be going over today.īut there's so much more that we wouldn't possibly be able to cover it all in this one session. We want to make your daily work that much better and easier while building the best and most powerful software for the web. Like adding a parent selector with the :has() pseudo class, the new flexbox inspector, and even container queries. In fact, it's been quite a busy year! Since last fall, each release of Safari has delivered new and exciting features that we know y'all as web developers have been asking for.Įach of the new enhancements delivered this year aimed to address some of the biggest points of feedback you've been sharing with us. It's been a full year since we last got together at WWDC, and today, we're going to be talking about all the amazing features and enhancements to Safari and WebKit from both what's new here at this year's WWDC and from what we've seen throughout this whole past year. ♪ Mellow instrumental hip-hop music ♪ ♪ Hi there! I'm Kendall Bagley, a software engineer on the Safari team. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |