Generated Content by David Storey

Is your Fullscreen API code up to date? Find out how to make it work the same in modern browsers

With the introduction of IE11, all major browsers now support the Fullscreen API. However, due to prefixes and differences between the specification and early implementations, you may need to update any code you have that makes use of this feature. When I looked through the top search results on Google, none of the results showed both the latest syntax for all features and the ms prefix. In this post I’ll show you what has changed and what needs updating.

Read More

The (probably not) definitive list of CSS features in non-CSS specs

While most CSS features are defined by the CSS Working Group and either included in CSS Level 2.1, or individual CSS Modules, there are a surprising number squirrelled away in various other specifications. These may or may not have been worked on in conjunction with the CSS WG, but as many probably get overlooked, I thought I’d list them in a blog post so that I can find them later. How many did you know about?

Read More

Setting native-like scrolling offsets in CSS with Scrolling Snap Points

One of the arguments in favour of native vs. Web is that of user experience; particularly when it comes to scrolling. A typical interaction on touch screens (especially tablets) is the sideways swipe to flip between items, such as the next/previous page or photo. Native apps handle this…well…natively. The platform deals with it, so the performance is good, and the behaviour is consistent between apps on the platform. Web apps, on the other hand, have to roll their own. This usually involves a bunch of complex JavaScript, and it isn’t hardware accelerated. As it is an emulation, the behaviour may differ from that on the user’s platform.

However, some platforms use web technologies for native apps. As such, the platform vendor has probably had to solve this problem using those tools. One such platform is Windows 8. Internet Explorer 10+ provide a bunch of vendor specific CSS properties for touch-based scrolling. As these have proven useful, the properties for scroll offsets have been recently been added to the standards track as Scroll Snap Points. In this post, I will quickly guide you through the functionality that is currently in the spec. As it is very new, everything is subject to change, but it does work as is in IE 10 and 11.

Read More

Creating an angled split feature area with CSS transforms

For an upcoming project I’m working on, I needed to have a feature area that showcased two things equally. The easy option would have been to show them in boxes, either side by side or one on top of the other. I decided instead to try my hand at a comic book look, where the cells are split diagonally. I also wanted to have a hover effect, so that each cell grew bigger or smaller depending on which cell was hovered.

CSS has traditionally not been good at things that are not square (or rounded with border-radius), but it is possible with minimal extra markup. I was speaking to Simurai and he suggested using skew to skew the box, then skew the contents back again. That idea worked and formed the basis of the technique, along with a bunch of other fiddling.

Read More

box-sizing: border-box; the results are in

A week has passed since I created a poll on the use of box-sizing: border-box. In that time 256 people filled out the survey. The results so far are as follows:

Read More