Tags: browsers

The Extensible Web Manifesto

An intriguing initiative to tighten up the loop between standards development and implementation.

Request Quest

A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.

I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.

Line-mode browser dev days at CERN

Squee! I’m going to CERN on the 19th and 20th of September to take part in this hackday-like project to recreate the first line-browser.

If you want to help out, fill in the application form.

Deep dive into the murky waters of script loading

Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.

The irregular musings of Lou Montulli: The reasoning behind Web Cookies

A fascinating look at the history of cookies …from the inventor of cookies.

Is Android good yet?

Joking aside, this is a useful resource for keeping track of the current spread of Android versions.

mezzoblue § 10 Years

Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!

Responsive Inspector

A handy plugin for Chrome that always you to inspect media query breakpoints and take screenshots at any of them.

I know jQuery. Now what?

A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.

Really good stuff.

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Thoughts on Blink

A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

A List Apart Issue № 371

This issue of A List Apart is a great double-whammy. Lara Swanson has a ton of practical tips for front-end performance enhancements, and Brian dives deep into making your own icon fonts.

For discussion: viewport and font-size data in client hints

The “client hints” proposal looks really interesting: a way for user-agents to send data to the server without requiring the server to have a library of user-agent strings. But Scott has a few concerns about some of the details.

Playing with game console browsers

The slides from Anna’s terrific talk at the Responsive Day Out.

gaia/build/ua-override-prefs.js at master · mozilla-b2g/gaia · GitHub

And this is why user-agent sniffing not a future-friendly technique. A new mobile browser comes along, and it has to spoof a fake UA string to all of these sites.

It’s a Red Queen arms race.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

A primer to front-end SVG hacking by David Bushell – Web Design & Front-end Development

Everything you ever wanted to know about using SVG today.

The impending crisis that is Windows XP and IE 8 by Troy Hunt

A good explanation of the litany of woes that comes from Internet Explorer 8 being the highest that users of Windows XP can upgrade to. It’s a particularly woeful situation if you are a web developer attempting to provide parity. But there is hope on the horizon:

2013 will see the culmination of all these issues; support for IE 8 will drop of rapidly, users of XP will find an increasingly broken web, the cost of building software in XP organisations will increase.

Form Follows Function

A gorgeous collection of experiments that showcase just how much is possible in browsers today.

Interview with Ian Hickson, HTML editor on HTML5 Doctor

Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.

Deploying New Image Formats on the Web - igvita.com

A well-reasoned argument for tackling image optimisation on the server, using content-type negotiation.

Mobile first: the revolution is well under way - Generated Content by David Storey

David takes a look at worldwide trends in web browsing, pointing out where mobile traffic exceeds desktop …and we’re not necessarily talking about smartphones here either.

It would be possible to travel from the Niger Delta on the west coast of Africa, to the horn of Africa on the east coast, without passing through a country where people surf more on desktop than a mobile phone.

Going Full Frontal — Acko.net

Steven Wittens, who gave a terrific talk all about maths at last week’s Full Frontal conference, describes his experience at that most excellent event.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

Game Console Browsers

This is an excellent resource from Anna. She’s documenting the browser capabilities of games consoles.

WebPlatform.org — Your Web, documented

A one-stop-shop for browser-compatibility information. This is MDN, HTML5 Rocks, and Quirksmode all rolled into one.

CSSquirrel : Game Break | opinions and news on web design by Kyle Weems

Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.

There’s also a call for more community device labs. I approve.

A List Apart: Articles: Testing Websites in Game Console Browsers

An excellent in-depth article from Anna on the many gaming devices out there that have both an internet connection and a web browser.

LukeW | Data Monday: Mobile Browser Use

Luke collates some useful mobile browsing statistics once again. Most of it is quite US-centric, but this closing point is a whopper:

36 countries more than doubled their Opera Mini user bases in one year.

» 4 August 2012, baked by Bruce Lawson @ The Pastry Box Project

Bruce writes about a worrying trend in standards work:

Tossing a specification that you’ve written in-house, in secret and already implemented onto a table at W3C, saying “here, standardise this” as you saunter past isn’t a Get Out of Jail Free card for proprietary misdemeanours. And it isn’t standardisation.

Things that compile to JavaScript

Stuart on the importance of View Source.

Twitter Blog: Overhauling mobile.twitter.com from the ground up

A great behind-the-scenes look at the redesign (and redevelopment) of Twitter’s mobile subdomain silo. Man, I would love to see this progressively enhanced up to the current widescreen view for “desktop” browsers without the need for separate URLs for any class of device.

But I digress …this is good stuff.

It’s time to stop blaming Internet Explorer | NCZOnline

Nicholas is inside my head! Get out of my head, Nicholas!

What makes the web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your web applications, that’s what progressive enhancement is all about.

Squirrel!

Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!

Compare the “view source” output with the generated source output to see it’s being interpreted.

Anna Debenham: Using the Nintendo DSi browser

Anna reports on her experience testing on a device we don’t often think about: the Nintendo DS …very popular with the young ‘uns.

The Evolution of the Web

A nice timeline visualisation of recent history.

Florian’s Compromise | Responsive Images Community Group

Wilto does an excellent job of summarising the current state of responsive images, highlighting Florian Rivoal’s compromise proposal that combines the best of the picture element with the best of srcset.

New Internet Explorer 7 Tax :) -

Well, I guess this is one way of encouraging people to upgrade their browser.

Responsive images: what’s the problem, and how do we fix it? - Dev.Opera

A nice round-up of the issues around responsive images and their potential solutions.

Issue #408: Generate a separate css with flattened media queries

This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).

If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.

» The real conflict behind picture and @srcset (Cloud Four Blog)

Jason outlines the real challenge to every proposed solution for responsive images: they just don’t jibe with the way that browsers (quite rightly) pre-fetch images.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

The origin of the blink tag

Have you thought “There must be a good reason for the blink element.” Well, read on.

Mobile Browser Panel 2012, Mobile Browser Panel at Mobilism 2012 Moderated by Jeremy Keith, this panel features Andrea Trasatti (Nokia), Andreas Bovens (O…

Here’s the video of the mobile browser panel I moderated at Mobilism in Amsterdam. These guys were really good sports to put up with my wisecracking shots for cheap laughs at their expense.

Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 (www-style@w3.org from May 2012)

This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.

We don’t support Internet Explorer, and we’re calling that a feature | Tips for Freelancers on Time Tracking and Invoicing | Paydirt Blog

This is the absolutely worst way to think about browser support: because the design doesn’t render “pixel perfect” (whatever that means) in a browser, that browser is blocked from accessing content. This is completely unnecessary and shows a fundamental lack of understanding of the web’s greatest feature: progressive enhancement.

The state of responsive images | Feature | .net magazine

Wilto gives a thorough explanation of the state of things with responsive images, particularly the work being done at the Responsive Images Community Group at the W3C.

Modern Web Development Part 1 – The Webkit Inspector

This is a very in-depth look at how to become a power user of the Web Inspector in Webkit browsers. I’m sitting down with a nice cup of tea to go through all of this.

10 questions about web performance – Jeremy Keith at Clearleft

I had a chat with the guys from Pingdom about performance’n’stuff. If I sound incoherent, that’s because this is a direct transcription of a Skype call, where, like, apparently I don’t, y’know, talk in complete sentences and yeah.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Responsive News - Cutting the mustard

This seems like a sensible way of separating capable browsers from legacy browsers: if the browser supports querySelector, localStorage and addEventListener, you’re good to go.

Testing For Dummies | Testing

An in-depth look at the BBC News mobile testing process. I think it’s great that people are sharing this kind of information.

BrowserQuest

A fun little multiplayer game, all possible in the browser thanks to web sockets.

Shirky: View Source… Lessons from the Web’s massively parallel development.

An oldie but a goodie: Clay Shirky looks at the design principles underlying HTML in order to figure out what made it so successful. Even though this is fourteen years old, there are plenty of still-relevant insights here.

Nicholas Zakas: Progressive Enhancement 2.0 - YouTube

A great talk by Nicholas on what progressive enhancement means today. There’s some good ammunition in here.

scottjehl/Device-Bugs

Scott has created a one-stop-shop for documenting browser bugs in mobile devices. Feel free to add to it.

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Video, Mobile, and the Open Web | Brendan Eich

Mozilla will be supporting H.264 …but they’re not happy about it.

I won’t sugar-coat this pill. But we must swallow it if we are to succeed in our mobile initiatives. Failure on mobile is too likely to consign Mozilla to decline and irrelevance.

Content Protection, fonts, and trolling « in progress

Chris defends himself from some inaccuracies I flung his way, regarding fonts and DRM.

LukeW | Vector Images for Mobile

Luke rounds up some of the alternatives to bitmap-based images—an increasingly important topic for “resolutionary” “retina’ displays (bleurgh!).

Browser Support? Forget It! – David Bushell – Web Design

A great post that discusses exactly what we mean when we talk about “supporting” different browsers.

Ringmark

An acid test for mobile browsers. Point your device at rng.io and it will report on how much or little mobile shininess is available.

Responsive Summit: The One Tool | Mark Boulton

Mark talks about the tools web designers use and the tools web designers want. The upshot: use whatever you’re most comfortable with.

The CSS3 Test

A really handy test site from Lea that reports your browser’s recognition of CSS properties.

A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need

A terrific article from Wilto detailing the thinking that went into the Boston Globe’s responsive image techniques and how browser pre-caching is now throwing a spanner in the works.

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Browser Support

A very useful site for checking browser support for CSS features. The test cases are really handy and the site gets extra bonus points for not calling itself “HTML5” anything.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

» 21 January 2012, baked by Ben Ward @ The Pastry Box Project

Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.

On designing content-out (a response to Zeldman and others) | Stephanie Rieger

Stephanie details all the things we have to know about when designing for today’s broad range of devices: performance, capabilities, form factor, pixel density, and network latency.

These are all good points but I worry that if we just concentrate on the current device landscape, our processes won’t adapt to the future.

Leaving Old Internet Explorer Behind — Joni Korpi

Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.

Confusion over HTML5 & WAI-ARIA | Karl Groves

This helps to clarify the difference between native semantics and ARIA additions.

Is the web dead?

View source.

Heaven Devoid of Stars – a tale of cross-browser kerning | Clagnut § Browsers · Typography · CSS techniques

Richard dives into the differences in how browsers handle kerning. Be sure to click through to the beautiful finished result.

Support Vs Optimization | Brad Frost Web

Brad is on a roll. He knocks it out of the park again, this time talking about the difference between supporting the huge range of mobile browsers out there compared to trying to optimise for them.

Position: fixed revisited - QuirksBlog

PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

The Mobile Case for Progressive Enhancement | Brad Frost Web

A great, great reminder from Brad on the importance of progressive enhancement especially on mobile. There seems to be a real mindset amongst developers working on mobile sites that JavaScript is a requirement for building anything (and there’s a corresponding frustration with the wildly-varying levels of JavaScript support). It ain’t necessarily so!

Vendor Prefixes Are A Rousing Success | Infrequently Noted

Alex weighs in on the newly-reopened debate on vendor prefixes, roundly squashing Henri’s concerns.

Fixed Positioning in Mobile Browsers | Brad Frost Web

Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.

LukeW | The Web OS is Already Here…

Luke points out that the web is everywhere: it’s accessible through the browser but also through many native applications. This is the real Web Operating System.

The Web (browser) is inside of every application instead of every application being inside the Web (browser).

CSS vendor prefixes, an answer to Henri Sivonen -

Daniel responds to Henri’s call-to-arms on vendor prefixes. While he stridently disagrees with most of what Henri suggests, there is also overlapping agreement: they both want vendor prefixes to ship only in experimental builds, not stable browser releases.

Vendor Prefixes Are Hurting the Web

This is a very thoughtful piece by Henri on vendor prefixes and it’s well worth a read …however the thought of one browser implementing support for vendor-prefixed properties intended for a different browser does make me quite quesy.

zomigi.com » Essential considerations for crafting quality media queries

A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.

Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four

Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.

Responsive IMGs — Part 1 « Cloud Four

Jason takes a high-level look at tackling mobile-first responsive images (his next post will dig into the details). This is a really good summation of current thinking. Be sure to read the comments too: Andy chimes in with his experiences.

Browser Market Pollution: IE[x] is the new IE6 « Paul Irish

Paul paints a grim picture of our future support nightmares with multiple Internet Explorers, each one with multiple buggy “compatibility” modes.

Bruce Lawson’s personal site  : Future friendly, or Forward to Yesterday?

Bruce nails his colours to the mast of future-friendliness (and nicely summarises recent heated debates between John Allsopp, Alex Russell and Joe Hewitt).

The web is a different problem | Web Directions

John pushes back against the idea that browser innovation is moving too slow.

Test page for -webkit-font-smoothing | Christoph Zillgens

This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).

Things the W3C Should Stop Doing | Infrequently Noted

I was all set to bristle against an attack on the W3C from Alex …but when I actually read the post, I found it hard to disagree with. If anything, this shows just how much Alex cares about the W3C (probably more than most people).

The conversation in the comments is worth reading too.

Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices

This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.

Mobile Web: Taiwan, Opera and WebOS

An eye-opening insight into web usage on mobile devices in Asia from Paul Rouget.

Line-height in input fields | 456 Berea Street

This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

marstall/shim - GitHub

A very clever and tricksy way to sync up multiple devices so that when you refresh a URL or follow a link on one, it happens on all of them. It uses OS X’s Internet Sharing feature combined with locally-hosted Node.js. It’s positively McGyverian!