This is a bit of a scattered collection. Think of it as a highlight reel of some of the new features that Safari and WebKit have been bringing to the web.
Before I do that though, front-end developers let’s have a little talk. Feature detection. Use it. Please stop user-agent sniffing. Please. Just… don’t. Stop using a sledgehammer when a laser-scalpel is available. Be progressive.
You’d probably bruise your forehead facepalming if you knew how many sites treated Safari 10 as Safari 1 because of poor, old user-agent detection code. Yeah, so that really happened. To be fair, good web developers have gotten the message. Unfortunately, there is a lot of legacy projects that are going to take a very long time to fade away. Just stop doing it and hopefully I won’t have to keep fighting it when Safari hits version 100.
OK, rant over. On to the good stuff.
First, The recent font loading policies in WebKit available in Safari 10 are pretty fabulous. I always appreciate how much the WebKit project respects typography on the web. This policy strikes a great balance between large webfonts and poor network conditions. Users still get to see the content even while the slow-to-load webfont is downloaded. Nice.
Safari Technology Preview has a taste of things to come. It’s so nice to have a stable WebKit update every couple of weeks. And I love all of those super helpful release notes with each update. 😛
<a download> attribute!
One more thing… Flexbox is nice, but CSS Grids are just dandy and Safari 10.1 beta supports it! I can only hope it brings design character back to the web. Fair warning: it’s not for the weak. There’s a lot going on, but past the learning curve is a new era of table-less table design for the web… again. The ever helpful CSS Tricks has a great guide to get you started.
It’s a much different web than the one I grew up with in the mid-90s. A better web in most ways. A more complex web too. I hope to be a force that helps new developers get up to speed quickly even while things get more complex at a faster pace than ever.
As a tease for my next entry, I’ve been working on video and power issues. If you’ve ever worked on a video player, especially for sites with long-form video content, I’m going to show you how to achieve a special fullscreen low-power mode in Safari to help save your users battery life. You do care about your user’s battery life… right?