Back to home

Removing the White Bars in Safari on iPhone X

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn’t cause an issue when viewing websites in portrait but by default does cause some issues in landscape.
September 14, 2017
Related Tags


Hovering over the image will remove the filter effect. Unfortunately, IE & Edge browsers, as well as Opera Mini do not support filters and blend modes.
January 22, 2017
Related Tags

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

Visible vs hidden content in HTML pages and apps.

There’s quite a few ways that you can hide something from the screen, but not all techniques are created equal.
January 21, 2017

CSS Reference

An excellent CSS Reference.

January 21, 2017
Related Tags

Performant Parallaxing

Love it or hate it, parallaxing is here to stay. When used judiciously it can add depth and subtlety to a web app. The problem, however, is that implementing parallaxing in a performant way can be challenging.
January 20, 2017
Related Tags

ECMAScript 6 Enhancements & Unprefixed CSS Properties.

The properties in Newly supported ECMAScript 6 properties are now fully supported by Safari, without the -webkit- prefix.

June 09, 2015

BPScott/breakup · GitHub

Breakup is a Sass component that allows you to create multiple CSS files from a single Sass partial by wrapping your code within breakpoint blocks. It allows you to abstract what your Sass partials folder looks like from what CSS files you create.

April 24, 2014

CSS Blend Modes could be the next big thing in Web Design


If I didn’t know any better, I’d say standards bodies and browsers (those responsibility for crafting/implementing CSS) are starting to care about designers. Another big win from the Adobe Web Platform team.

January 06, 2014
Related Tags

An update to the extremely popular -9999PX image replacement technique.

 .hide-text {
                text-indent: 100%;
                white-space: nowrap;
                overflow: hidden;
March 02, 2012
Related Tags

Trouble with @font-face Thickness in WebKit.

While Webkits default subpixel-antialiased type looks good in many cases, if you’re using a font service like Typekit many of those fonts tend to render thick in Webkit. In my opinion WebKit’s text rendering is too thick and bloated by default. This is usually a problem that can be fixed by applying the following webkit vendor-prefixed property as mentioned in a blog post by Max Voltar:

-webkit-font-smoothing: antialiased;

We recently ran into a situation where we were using @font-face to include a custom font in a mobile website we were developing. The type was still rendering thick even after we tried common fixes like applying a text-shadow to text and the -webkit-font-smoothing fix mentioned above. The solution was to apply a 3D transformation of 0px to the elements that we’re too thick.

-webkit-transform: translate3d(0px, 0px, 0px);

The image above shows the before and after results when this rule is applied. By applying this rule to our CSS it also eliminates the “pop” you get when animating the element. The end result gave us consistent font rendering across all webkit browsers.

February 27, 2012