Keith Clark: Front-end web developer
This article documents a CSS-only solution for controlling layout in browsers where container style query support is lacking, using CSS animations as a workaround. I m building a Splitview Web Component for my AppKit project that presents two resizable content areas separated by a draggable splitter. Users can drag the splitter to expand or contract the panes. A key feature I want to support is…
This article explores four different techniques for toggling complex layout changes to a shadow DOM, using one or more pseudo-boolean CSS custom properties. Over the last few months I’ve been progressing my AppKit project. It’s toolbox I use for quickly putting togther web apps. Among other things, AppKit provides a collection of web components whose internal layout and behaviour can be controlled…
Ripper is a web-based application for extracting sprite sheets, tilesets, fonts, screen memory, and other graphics from data files, executables, or disk images. This first release targets the Atari and Commodore computers from the 16-bit era. Launch Ripper Ripper reads a stream of arbitrary binary data and decodes it as if were an image, rendering the result to a canvas. Ripper will read any file…
ZzFXM is a tiny music generator designed for size-limited JavaScript productions. It’s built on the equally tiny ZzFX sound library, by Frank Force . ZzFX is amazing! With a few hundred bytes of JavaScript you can create and play a vast range of sounds using just a handful of numbers. ZzFX caught my eye when Frank released it back in 2019. He d used it in a few of his games that year and the sound…
This is a post-mortem of my JS1K entry for 2019, Flux . A 1024 byte JavaScript demo with seven different scenes and a bytebeat soundtrack. Play Flux Note: This version uses a custom shim to create a full viewport canvas and plays nicely with audio autoplay. The JavaScript is identical to that used in the official JS1K entry. To play the entry in the official shim, please head over to the JS1K…
This is a story of lazy CSS feature detection and why simple syntax checks may not be robust enough to future-proof your CSS. Back in January I wrote an article explaining how to use CSS conic gradients to create single element CSS pie charts with variable segment counts and values. At the time I was developing the examples in Chrome, which supported conical gradients behind the "Experimental web…
A few months ago I started looking into the feasibility of enhancing HTML documents for VR using CSS . The idea of the experiment was to demonstrate how easy it could be for developers to create VR experiences using web standards, if browsers implemented stereoscopic DOM rendering and supported VR media queries. The CSSVR prototype turned out much better than I d hoped. It answered almost all of…
This article explores a technique for creating a single element CSS pie chart that can display an arbitrary set of values, using a few basic style rules. NOTE: The examples in this article use experimental CSS features. At the time of writing only Chrome 69+ implements everything required to view the examples. Creating a static, single element pie chart Let’s get the basics out of the way. First,…
Fixing an element containing site navigation or branding to the top or bottom of the viewport is a common design trend. Most solutions I’ve come across use a combination of fixed positioning and JavaScript to mitigate any side-effects. I’ve found a better solution that uses sticky positioning... Try the clamped content demo The common method — position: fixed Setting an element’s CSS position…
In most browsers, tucked away behind a feature flag, is an exciting new API for creating VR experiences on the web. However, creating content for this new medium could potentially see you at the bottom of a steep learning curve — but does it have to? There are a couple of options available for creating VR content on the web. The first requires a working knowledge of both the WebVR and WebGL APIs.…
Recently, I needed to implement a design that scaled the space between components as the viewport changed size. The requirement is nothing new but I wanted to find a way to acheive it without having to re-declare multiple style rules in a media query. This article explains the technique I used. The design in question starts out as a linear list of elements that are cloesely spaced to make best use…
Last year, I wrote an article that demonstrated how to acheive the popular parallax scrolling effect using nothing but CSS transforms. Since then, I’ve had plenty of feedback from developers about the technique and the issues they have run into. This post tackles many of these issues and outlines practical methods for implementing CSS parallax. CSS Parallax feature detection Many of the reported…
This article demonstrates a technique to get content in front of visitors as quickly as possible by asynchronously downloading stylesheets to prevent them from blocking page render. Warning! I posted this with the best of intentions, but it would be irresponsible not to make readers aware of the following issues. Community feedback is coming in thick and fast (something I m very grateful for) and…
Last year, I entered JS1K for the first time with a game based on the 8-bit classic, Thrust . My entry for 2015 is another retro game — this time inspired by the arcade shooter Defender . Since writing this article, Defender went on to win JS1k 2015! Squeezing such an iconic game into a kilobyte while keeping true to the original was a real challenge. The 1024 byte limit meant I couldn’t include…
This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. If you find this article useful and want to explore CSS Parallax further, you may find my follow-up article " Practical CSS Parallax " an interesting read. Parallax is almost always handled with JavaScript and, more often than not, it’s implemented badly with…
Webkit will render an element differently when the responsibility of painting it is passed from the CPU to the GPU. This switch can trigger unintended rendering artefacts which, although most obvious in text, apply to all types of content. Changes in antialiasing With the exception of IE11, every browser I tested uses subpixel antialiasing on the CPU. If an element is promoted to the GPU in…
A new open source version of Google Analytics Debugger is available on github. This is a complete rewrite of the original Firefox-only add-on with new features including support for Universal Analytics. Contribute on Github For the moment only a Chrome version exists in the repository but extensions for Firefox and hopefully other browsers will come along in the near future (perhaps from the…
This year I decided to write something for JS1K . My entry is based on a game from my childhood called Thrust ). The basic premise of the game is to navigate a ship down into a cavernous planet, retrieve a pod and escape with it back to space. Play Thrust at JS1K The original game featured simple physics, pixel perfect collision detection, fuel depots, nuclear reactors, gun turrets and tractor…
CSS transforms make it easy to manipulate an element in 3D space without worrying about the complex maths involved. But what if you want do more than transform elements? How can you shade an element or test if two transformed elements intersect? To do that you need access to the elements vertex data — unfortunately that data doesn’t exist. In this post I’m going to explain how to generate vertex…
I was recently asked is it possible to select every element in the last row of a grid containing an arbitrary number of items using CSS selectors? Not wanting to shy away from a challenge, I started hacking and found a solution which I’ve written up along with a few other techniques for targeting elements in the first or last row of a grid. View the demo Throughout this post I’ll be using the…
I’ve released a small update to my Google Analytics Debugger add-on for Firefox. This post details the latest changes. Download the Add-on HTTPS support GA Debugger now tracks data over HTTPS connections. The previous release only intercepted __utm.gif requests to www.google-analytics.com . The progress listener interface now listens for requests to ssl.google-analytics.com too, allowing you…
Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did…
If you follow me on twitter you’ll know I’ve been experimenting with CSS 3D transforms to see how far I can push them. A while back I wrote a very simple first person demo built using HTML, CSS3 and a splash of JavaScript. The 3D enviroment was constructed entirely from <div> elements that were positioned in 3D space using CSS transforms. In my free time I’ve been evolving the idea to see if I…
Here’s an alternative method for writing IE specific style rules without having to move them into separate files. The idea is to put your IE styles into a @media block that will only be applied in certain versions of IE. I discovered this trick while looking for a way to write a media query pass-through filter for older versions of IE. It’s a hack! As with all CSS hacks this technique works by…
I’ve been looking into ways to modify elements before DOMContentLoaded so that enhancements can be made as an element is rendered to the screen allowing users to begin interacting with a page even if it hasn’t finished loading or if rendering is being blocked by 3 rd party assets such as banner ads or tracking code. The most robust way to do this is to include an inline <script> directly after…
Parallax scrolling websites have become very popular recently. Some of the effects are pretty striking and create a very engaging user experience. I’ve been looking into parallax scrolling for something I’m designing but noticed a real issue with speed when using the effect in Firefox, so over the weekend, I set about addressing the problem. Here’s what I came up with: What causes the issue? The…
A while ago now, I tweeted about using cookies as a means of serving images to a browser based on the size of the device viewport. Scott Jehl has already implemented the idea into a branch of his responsive images script but now that I have a platform to document my ideas I’ve decided to write up my approach to responsive images. CSS media queries allow us to develop flexible designs that adapt to…
Yesterday I was experimenting with a few ideas for decreasing the start-up time of selectivizr (something I’ll be posting about in the future). Part of the testing process was to establish if the position of the selectivizr script in a document had any affect on its start-up time. While testing I noticed an interesting side effect relating to the way assets are downloaded when they are mixed with…