Tags: kit

67

sparkline

Friday, February 9th, 2018

Workers at Your Service | WebKit

Here’s an interesting insight on how WebKit is going to handle the cleanup of unused service workers and caches:

Service worker and Cache API stored information will grow as a user is browsing content. To keep only the stored information that is useful to the user, WebKit will remove unused service worker registrations after a period of a few weeks. Caches that do not get opened after a few weeks will also be removed.

Thursday, January 25th, 2018

Safari 11.1

Squee! The next time there’s an update for OS X and iOS, Safari will magically have service worker support! Not only that, but Safari on iOS will start using the information in web app manifests for adding to home screen.

That’s an impressive turnaround.

Thursday, December 21st, 2017

Release Notes for Safari Technology Preview 46 | WebKit

Well, that escalated quickly! Service workers are now available in Safari’s Technology Preview, which means it won’t be long before it lands in Safari proper.

Also: service workers also just landed in the insider release of Edge.

Everything offline’s coming up Milhouse!

Saturday, September 23rd, 2017

Designing Websites for iPhone X | WebKit

This could be a one-word article: don’t.

More specifically, don’t design websites for any specific device. That way lies pain (and it is not the way of the web).

But read on for a textbook example of how not to introduce new CSS properties. Apple proposed the new syntax that they’re shipping. Now it’s getting standardised …with a different name. So basically Apple are shipping the equivalent of a vendor-prefixed property without the vendor prefix.

Thursday, August 3rd, 2017

Attachment #317095 for bug #175115

I’ve never been so excited by a single diff in a JSON file.

Service workers are coming to Safari.

Monday, July 31st, 2017

Shoelace.css: a back to the basics CSS starter kit

A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.

For when you don’t need the whole boot.

Also:

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

I approve this message!

Wednesday, May 31st, 2017

Responsive Design for Motion | WebKit

A really great overview of using prefers-reduced-motion to tone down CSS animations.

This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!

Monday, December 26th, 2016

Enigma-E

An Enigma machine of one’s own.

Saturday, October 8th, 2016

Why we are suing Apple for better HTML5 support in iOS?

Finally! Apple are being sued for refusing to allow any non-Webkit browsers to be installed on iOS.

I’m not usually in favour of legal action but in this case, there doesn’t seem to be any other recourse.

We would be delighted at Nexedi to create a Web browser for iOS with better HTML5 support based on a recent version of Blink library for example. But as soon as we would publish it, it would be banned from Apple’s AppStore. Many developers have experienced this situation already. Many companies are being hurt by this situation. Some companies have already begged Apple to improve HTML5 support in iOS with little significant results.

Tuesday, April 26th, 2016

Updating Our Prefixing Policy | WebKit

Ted has snuck a blog post out from behind Apple’s wall of silence, and it’s good news: WebKit is not going to use vendor prefixes for new features.

Thursday, April 14th, 2016

Kite - Programming copilot

This looks like it could be a very nifty tool to have at your disposal while coding. I like that it’s editor-agnostic.

Wednesday, March 2nd, 2016

A Complete History of the Millennium Falcon — Kitbashed

Everything you never knew you wanted to know about the Millennium Falcon, wrapped up in one unsurprisingly insanely detailed essay from Michael.

Monday, January 11th, 2016

Without delay

When I wrote about mobile Safari adding support for touch-action: manipulation, I finished with this snarky observation:

Anyway, I’m off to update my CSS even though this latest fix probably won’t land in mobile Safari until, oh ….probably next October.

Historically, Apple have tied mobile Safari updates to iOS version number increments, and they happen about once a year. But this time, it looks like my snark was unfounded:

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a “fast-tap” response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action property, using the manipulation value.

That’s from the release notes for Safari 9.1—a point release.

I’m very pleased to have been absolutely wrong with my prediction of Apple’s timing.

Saturday, December 26th, 2015

Delay

Mobile browser vendors have faced a dilemma for quite a while. They’ve got this double-tap gesture that allows users to zoom in on part of a page (particularly handy on non-responsive sites). But that means that every time a user makes a single tap, the browser has to wait for just a moment to see if it’s followed by another tap. “Just a moment” in this case works out to be somewhere between 300 and 350 milliseconds. So every time a user is trying to click a link or press a button on a web page, there’s a slight but noticeable delay.

For a while, mobile browsers tried to “solve” the problem by removing the delay if the viewport size had been set to non-scalable using a meta viewport declaration of user-scalable="no". In other words, the browser was rewarding bad behaviour: sites that deliberately broke accessibility by removing the ability to zoom were the ones that felt snappier than their accessible counterparts.

Fortunately Android changed their default behaviour. They decided to remove the tap delay for any site that had a meta viewport declaration of width=device-width (which is pretty much every responsive website). That still left Apple.

I discussed this a couple of years ago with Ted (my go-to guy on the inside of the infinite loop):

He’d prefer a per-element solution rather than a per-document meta element. An attribute? Or maybe a CSS declaration similar to pointer events?

I thought for a minute, and then I spitballed this idea: what if the 300 millisecond delay only applied to non-focusable elements?

After all, the tap delay is only noticeable when you’re trying to tap on a focusable element: links, buttons, form fields. Double tapping tends to happen on text content: divs, paragraphs, sections.

Well, the Webkit team have announced their solution. As well as following Android’s lead and removing the delay for responsive sites, they’ve also provided a way for authors to declare which elements should have the delay removed using the CSS property touch-action:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

So to get the behaviour I was hoping for—no delay on focusable elements—I can add this line to my CSS:

a, button, input, select, textarea, label, summary {
  touch-action: manipulation;
}

That ought to do it. I suppose I could also throw [tabindex]:not([tabindex="-1"]) into that list of selectors.

It probably goes without saying, but you shouldn’t do:

* { touch-action: manipulation; }

or:

body { touch-action: manipulation; }

That default behaviour of touch-action: auto is still what you want on most elements.

Anyway, I’m off to update my CSS even though this latest fix probably won’t land in mobile Safari until, oh ….probably next October.

Wednesday, December 16th, 2015

More Responsive Tapping on iOS | WebKit

This solution to the mobile tap delay by the WebKit team sounds like what I was hoping for:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

It would be nice to know whether this has been discussed with other browser makers or if it’s another proprietary addition.

Tuesday, January 27th, 2015

Adrian Roselli: All of This Has Happened Before and Will Happen Again

Everyone who calls for WebKit in Internet Explorer is exactly the same kind of developer who would have coded to Internet Explorer 15 years ago (and probably happily displayed the best viewed in badge).

Truth.

It’s happening again, and every petulant, lazy developer who calls for a WebKit-only world is responsible.

Saturday, October 4th, 2014

Monday, August 4th, 2014

The Mobile Web should just work for everyone - IEBlog

One more reason why you should never sniff user-agent strings: Internet Explorer is going to lie some more. Can’t really blame them though—if developers didn’t insist on making spurious conclusions based on information in the user-agent string, then browsers wouldn’t have to lie.

Oh, and Internet Explorer is going to parse -webkit prefixed styles. Again, if developers hadn’t abused vendor prefixes, we wouldn’t be in this mess.

Tuesday, August 13th, 2013

Surfin’ Safari - Blog Archive » Improved support for high-resolution displays with the srcset image attribute

WebKit nightlies now have support for srcset. I’m pleased to see that it’s currently constrained to just handling the case of high-density displays; it doesn’t duplicate the media query functionality of picture.

I’ve always maintained that the best solution to responsive images will be some combination of srcset and picture: they each have their strengths and weaknesses. The “art direction” use case is better handled by picture, but the “retina” use case is better handled by srcset.

Thursday, June 20th, 2013

‘Kitten kitten kitten kittens’ — I.M.H.O. — Medium

This is what Medium is for.

If you want to read some of Dan Catt’s lesser thoughts, he has his own blog.