Safari 15: New UI, Theme Colours, and… a CSS-Tips Cameo?

No Comments

There’s a 33-minute video (and sources) over on masking the upcoming Safari modifications we noticed within the WWDC keynote this yr in rather more element. Look who’s obtained slightly cameo in there:

Maybe probably the most noticeable factor there in Safari 15 on iOS is URL bar on the backside! Dave was speculating in our little Discord watch occasion that this most likely fixes the bizarre points with 100vh stuff on iOS. However I actually simply don’t know, we’ll must see when it comes out and we will play with it. I’d guess the expectation is that, to ensure that us to do our personal fixed-bottom-UI stuff, we’d be doing:

.bottom-nav {
place: fastened; /* perhaps sticky is best if a part of general web page structure? */
backside: 100vh; /* fallback? */
backside: calc(100vh – env(safe-area-inset-bottom); /* new factor */

On desktop, probably the most noticeable visible function might be the theme-color meta tags.

This isn’t even a model new Apple-only factor. This is similar <meta> tag that Chrome’s Android app has used since 2014, so that you may already be sporting it by yourself web site. The addition is that it helps media queries.

<meta title=”theme-color”
content material=”#ecd96f”
media=”(prefers-color-scheme: mild)”>
<meta title=”theme-color”
content material=”#0b3e05″
media=”(prefers-color-scheme: darkish)”>

It’s nice to see Safari get aspect-ratio and the brand new fancy colour techniques like lab() and lch() as effectively. High-level await in JavaScript is nice because it makes patterns like conditional imports simpler.

I don’t assume all this might fulfill Alex. We didn’t precisely get different browser engines on iOS or signifiant PWA enhancements (each of which might be actually nice to see). However I applaud all of it, and it’s good things. Whereas I do assume Google typically takes privateness extra significantly than what basic web chatter must imagine, it’s notable to check every firm’s newly-released options. Should you’ll forgive a little bit of cherry-picking, Google is engaged on FLoC, a expertise very particularly designed to assist focused promoting. Apple is engaged on Personal Relay, a expertise very particularly to creating net shopping untrackable.

The publish Safari 15: New UI, Theme Colours, and… a CSS-Tips Cameo? appeared first on CSS-Tips.

You may assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment