corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: safari

Cross-Browser HTML5 Form Validation is Finally Here! Now What? image/svg+xml

I’m irrationally excited because this is more than just a mundane feature shipping in a random browser preview. Safari was the last browser to implement HTML5 form validation — a feature that offers massive time savings for web developers — and it’s been a long time coming.

In this article I’d like to take a quick look at how we got here, what this change means, and why cross-browser form validation may change the way we build forms on the web.

It seems like we’ve been waiting for browser form validation forever, so it’s excellent to read that it’s finally coming to Safari. Validation and sanity checking are amongst my least favourite tasks, so any help the browser can provide to make client-side validation a bit easier and more standardised has to be a good thing.

New iPad And Web Browsers On iOS

A belated Merry Christmas to you. This year, Becky (my wife) gifted me a new iPad Air 2, it was a wonderful and totally unexpected surprise. I’ve never owned an iPad before, I’ve owned an Android tablet and I’ve used a lot of Android tablets at work (where I develop apps for them), but this is the first time I’ve used an iPad for longer than a minute or two at the local Apple store.

The iPad Air 2 is a fantastic device. IMHO, it’s far superior to any of the Android devices I’ve used. The retina display is just beautiful, and compared to Android, iOS is silky-smooth and a joy to use. In case you can’t tell, I’m really pleased with it. Thank you Becky :)

Anyhow, I’m not writing about my gift to post a review of the device, but just to note some initial observations.

First observation: browser rendering

I’ve been using the device to browse the web, using both Safari and Google Chrome. One of the first sites that I visited was this one (narcissism FTW) and I quickly found out that my technique of detecting the browser’s scroll position and applying various CSS rules depending on said position is totally broken. It works with all browsers on all OS’s on desktops, but it does not work on iOS.

Crap.

So, I spent a little while fixing it for Safari, only to find that it was still broken in Chrome. This was somewhat frustrating and I attempted a number of different approaches to solve the problem, but the more I fiddled with it, the more unhappy I became with the fugly hacks I was applying. In the end, I decided that the best solution would be to scrap the technique altogether and remove it from my design. Sometimes the most elegant solution to a problem is to remove the problem.

I will no doubt revisit this in the New Year, also, it’s a good lesson learned; I need to test my designs more, on more devices.

Second observation: doodling

The iPad Air 2 is a fantastic doodling device :)

A doodle of a robot in space.

A doodle of a robot in space.

The New Favicon image/svg+xml

The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser.

The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the icon on the pinned tab.

A detailed look at how to create icons for Safari’s new pinned tabs. I’ll be giving this a try real soon.