Unity and Epic’s Unreal Engine, the popular middleware tools frequently used by game developers, are not limited to creating compiled applications that run as an executable. Unity previously had a web player, which was a downloadable plugin that used ActiveX. Chrome killed support for NPAP (Netscape Plugin API), but announced it over one year ago. […]
Continue reading %Asm.js and WebGL for Unity and Unreal Engine%
GitHub's Atom is rapidly maturing into one of the best code editors available. While it lost to Sublime Text in last year's SitePoint Smackdown, many issues no longer exist:
The number of add-ons has increased exponentially with more than 750 themes and 2,400 packages at the time of writing. The reason: Atom can be extended using web technologies. If you're working on Node.js or front-end projects, Atom is a great choice.
Package installation is simple. You can either:
apm install <package-name>.Here are ten essential add-ons, plus a few bonus ones to make Atom even better …
Continue reading %10 Essential Atom Add-ons%
productColorizer is a light-weight solution for users to quickly preview a product in different colors. The plugin uses only two images per product to create the effect and it is built on top of the robust and popular Javascript framework jQuery, providing you with an easy setup
Cutting the Mustard is a term coined by Tom Maslen at the BBC. The method uses JavaScript that checks for browser capabilities before loading further CSS and JavaScript to give the user an ‘enhanced’ experience, otherwise the browser will only load the files necessary for a ‘core’ experience.
There has been a flurry of interest in cutting the mustard of late, for example Migrating to Flexbox by Cutting the Mustard and Server Side Mustard Cut, and in Progressive Enhancement in general.
In my experience, however, even a very basic ‘core’ experience can cause problems on some very old browsers, so I wanted to build on this idea and see if it was possible to deny really old browsers any CSS at all, leaving them with only the HTML.
Of course, the obvious solution is to use JavaScript to conditionally load all the CSS if the browser cuts the mustard, but this felt too heavy-handed for my liking; modern, capable browsers that didn’t load the JavaScript would be penalised by having no styles at all. So I looked for a CSS-only approach to the problem and I found an old post by Craig Buckler. After a fair bit of experimentation and adaptation, I came up with this:
[code language="html"]
Let’s examine what’s happening here.
The first <link> element’s media query allows the stylesheet to load only in the following browsers:
The second <link> element’s media query allows the stylesheet to load only in:
When combined, this technique will not load the stylesheet unless the browser is:
Note: the stylesheet is only loaded once no matter how many <link> elements there are.
It’s possible to combine the media queries into one link element by separating the declarations with a comma, like so:
[code language="html"]
However, I personally like to keep them separate as I find it easier to see what’s going on.
So if you structure your markup in a semantic and accessible way, older browsers should still be able to see your un-styled content in plain HTML.
This is of course very opinionated, but it’s my view that anyone using these browsers still deserves to be able to get to what they need. It’s quite likely that by giving these browsers CSS intended for newer browsers, some things will just break, and that could mean a totally unusable page. Using this method they at least get a clean slate. More importantly, you’ll never need to test in those browsers again. You’re done with them! At least, that’s the theory.
Of course, your support needs are likely to vary, but the great thing about this technique is that you can build on it. For example, if you need to add support for IE8, you can use a conditional comment to load the same stylesheet only for that browser:
[code language="html"]
[/code]
Or, if you need to support older WebKit devices with a pixel ratio of greater than 1, you could add another <link> element with a targeted media query, like this:
[code language="html"]
By itself, this will load the stylesheet only for Android 2.2+ (I wasn’t able to test earlier versions), but since it’s included in addition to the other <link> elements, it’s effectively just adding support for this other group of browsers.
It’s also possible that you can alter the main <link> element’s media queries from how I’ve presented them here to get the custom support you need. However, it took quite a lot of testing to get this right, so be warned!
Yes, I suppose they are, though that depends on your definition. Media Queries are designed to test the capabilities of the browser before applying the CSS, and that’s exactly what we want to do in this case, albeit indirectly.
Still, hack or not, I’m pleased with this technique and it’s been working well for me in all the testing I’ve done so far, and I plan to use it on a production site soon.
In all my testing to date, I’ve found only one case where things don’t work as expected. On Android 4.4 the UC Browser doesn’t respond to the media query. From what I can tell, the UC Browser uses an older version of WebKit, which would explain things.
Continue reading %Cutting the Mustard with CSS Media Queries%
In this short video I go over a feature in chrome developer tools that's rarely used, but can deliver great insight when doing a performance audit.
Continue reading %Video: Finding Performance Bottlenecks with Chrome Audits%