Links
Building out a layered hero grid layout from Dribbble
I tackle an interesting grid layout that also features some pretty unique background image treatment. The low fidelity hero background image with a photographic stripe through the middle really captured my imagination and it gave me an opportunity to use it — along with other elements on the page — as an opportunity to talk about choosing the path of least resistance.
This Web Page is Best Viewed in the EU
Hooray! iOS 17.4 will support alternative browser engines—but only in the EU. What does that mean for web developers in the rest of the world?
12 Modern CSS One-Line Upgrades
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
Big, beautiful, beefy focus states with :focus-visible
Focus states are one of the areas of accessibility that are easy to neglect when you don’t use your keyboard to navigate everyday. I went on a deep dive fixing some accessibility issues on my site last month and found all kinds of issues with focus. So I fixed them using
:focus-visible
.
CSS Relative Colors
Before the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties.
Videos
Modern CSS, the state of the web, Safari's progress, and more! With Jen Simmons
Jen Simmons was kind enough to have an in-depth talk with me, where we talked about everything from the current state of the web, how we got to where we are now, what Safari and Webkit are up to, a bunch of modern CSS features, and more.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.