Una Kravets shares this fairly minimal update: the select element can now have hrs in it (at least in Chrome & Safari). Firefox just ignores them, not sure about Edge, but hoping Chrome means Chromium?
Sticking with Una for second, let’s take a moment to bask in the growth that CSS experienced in 2023! We are days away from :has() being available in all major browsers, plus nesting, subgrid, container queries, View & Scroll Transitions (in Chromium), and so much more…
Not to be outdone, Jen Simmons and Marcos Cáceres announce a slew of features coming to Safari v17.2!
In a similar vein of thought, Kilian Valkhof shares a list of items that You don’t need JavaScript for. From fancy toggles, to data list dropdowns, dialog overlays (mostly) and more.
And thanks to Scott Jehl, we can also add responsive video to that list, as he helped this land in Firefox, and announces that Chrome will soon be bringing it back!
We also recently got the results of the State of HTML 2023, State of CSS 2023 and State of JS 2023. Both worthy of at least a scan.
What the heck, let’s keep this bandwagon rolling: the Chrome for Developers team rolled out a demo site called The Web Can Do That? to highlight all the cool things we can do to make our sites “stand out” a little more.
And while we’re enjoying how far the web has come, let us not forget where we started… Neal Agarwal presents Internet Artifacts, a site to help the youngsters our there learn (and us old people remember) what life was like in the 1900s… I love how things were “officially proposed”, like the :-) and :-( or OTW, etc.
With INP looming, being able to diagnose issues is imperative. And while the Long Tasks API helped, it didn’t help a lot… So now we have the Long Animation Frames API (LoAF, pronounced Lo-Af, as of Chrome 116). Definitely an improvement!
And speaking of INP, Ivailo Hristov‘s contribute to the 2023 Web Performance Calendar, Yielding to the Main Thread: How Breaking Up Tasks Can Fix INP, should also help debug and resolve any INP issues you encounter.
More on CWVs, the good folks at DebugBear remind us that a good LCP score is not only about optimizing an image or telling the browser about it ASAP. LCP is actually comprised four components:
- Time to First Byte
- Resource Load Delay
- Resource Load Time
- Render Delay
All of the above can affect your LCP, so make sure you are optimizing all of them!
Geoff Graham points out that MacOS Sonoma lets you add websites to the dock. Fan-freaking-tastic!
Mr. CSS Wizard himself, Harry Roberts shares what he considers to be sensible defaults for your img elements, and explains why each declaration is important.
The great Sara Soueidan shows off her Practical Accessibility course! Very exciting!
Speaking of a11y, Adrian Roselli shares his findings after conducting an accessibility review of the HTML video element using numerous browsers and accessibility tools.
Another on a11y, Oriana García helps us navigate Creating Accessible UI Animations. With a little fore-thought, and few @media blocks, you can make the web much more inclusive.
Okay, one more, as Whitney Lewis shows us How to use Chrome’s accessibility tree to help understand how accessible technologies will see, and interpret, your page. Easily click back-and-forth between the DOM View and the Accessibility Tree to see how elements are interpreted.
Want to have some fun in the DevTools Console? Zoran Jambor shows us How to Style console.log().
And finally, ever wondered how many Intertube trains your packets had to take to get to your browser? Yeah, me neither, but Lexi Mattick created How Did I get Here?, and it is a compelling visual! I am always amazed at how much is happening with just a click…
Happy reading,
Atg