Frontend Focus
Issue 222 — January 13, 2016
You can perform feature detection using native CSS feature queries with the @supports rule, supported in Edge, Firefox, Chrome and Safari.

A document that brings together a collection of non-standard (and often vendor-prefixed) CSS properties and DOM APIs that browsers need to support for compatibility with the ‘de facto’ Web.

Safari 9.1 includes support for native CSS variables, improved image smoothing for HTML5 Canvas, and, on iOS, ‘fast-tap’ support (no 350ms wait) on well scaled mobile pages.

Telerik Kendo UI
Are you working on a responsive HTML5 project? Learn the must-know techniques for success with this whitepaper.
Telerik Kendo UI   Sponsor

An extensible and complete development environment for making 2D and 3D HTML5-based games.
Sparklin Labs

18F, a digital services agency within the US government, has released a CSS style guide covering best practices and rules they apply for producing consistent, maintainable CSS code.

X-Tag is a Microsoft-backed open source library that wraps the Web Components APIs. “In other words, X-Tag is to Microsoft what Polymer is to Google”

This has been talked about for a while but Firefox 46 or 47 is likely to have support for specific -webkit prefixed CSS properties.
The Register

Includes things like filters, CSS3 selectors, @supports, and performing calculations.
Anthony Dillon

A look at the uses for ‘variables’ in CSS (as when processed via Sass, PostCSS, and similar tools) and some best practices for them.
Smashing Magazine

Jobs Supported by

  • Front-End Developer at Ecosia (Berlin, Germany)Ecosia is the search engine that plants trees. With 3 million users and 25 million searches, we're now looking for a passionate Front-End Developer who will be responsible for delivering a fantastic front-end experience to our users. Ecosia
  • Front-End Web Developer (Minnesota, USA)We're looking for an experienced front-end developer to join our team in Saint Paul, Minnesota. The perfect candidate is highly experienced in HTML5, CSS3, and JavaScript animation libraries such as jQuery. Local candidates only please. Plaudit
  • Get 10 offers from top tech companies in one week.Indeed Prime is an elite new program from that presents in-demand tech talent like you to top employers. Indeed Prime opens the door to exciting career opportunities with one simple application. Join today. Indeed

Can't find the right job? Want companies to apply to you? Try

In Brief

Upcoming Web Design Conferences (January–June 2016) news
Come meet the Cooper Press team at O'Reilly Fluent this March in San Francisco.
Smashing Magazine

Application Cache Support to Be Removed From Firefox news
In favor of the Service Workers API.
Firefox Site Compatibility

jQuery 2.2 and 1.12 Released news
Official jQuery Blog

W3C to Be Honored with Emmy Award for Standards Work news

We'll take you from beginner to employed engineer, guaranteed rawurl
Sign up to start learning everything from HTML to Angular. We guarantee you a job after graduation or your money back.
Thinkful  Sponsor

Building Games for Firefox OS TV using Web Technologies tutorial
Mozilla Hacks

Moving Along A Curved Path in CSS with Layered Animation tutorial
Tobias Ahlin

Optimising SVGs for Web Use, Part 1 tutorial
Andreas Larsen

Rendering Realtime Caustics in WebGL tutorial
Evan Wallace

What's New in Foundation 6? tutorial

Using WebGL2 for Pixel Perfect Sprites and Multi Fragment Outputs for Color Picking tutorial
Vicious Robot Rodent

Discussing CSS Grid Layout with Rachel Andrew podcast
The Big Web Show

The Big Browser You Haven’t Heard of Yet opinion
Spoiler: It’s Samsung’s and is Chromium based.
Daniel Appelquist

Why Bootstrap 4 Means Sass Has Won opinion
Telerik Developer Network

The CSS Support Guide for Email Clients tools
Campaign Monitor

Swiss in CSS: International Typographic Style in CSS demo
Jon Yablonski

HTML5 Canvas Pacman Game demo

Conway's Game of Life Rendered with a WebGL Shader code demo
GLSL Sandbox

Jump-start your Angular 2 Applications with our Expert Training course
Now offering a 2-day crash course to get you up to speed on Angular 2 quickly. Learn online and access recorded sessions. Don’t get left behind.  Sponsor