mm

September 14, 2015 WATB Team
Follow me on Twitter

Development and implementation of CSS features seems to be happening at an incredible rate right now. Actually, I’m starting to find it tricky to keep tabs with all the new features coming in, how to use them and how they will benefit me as a product designer and front-end developer. Here I’ve picked out a few that I think are very interesting. Some can be used now, whereas others lack wide support so use of them should be very carefully considered.

Clip-Path

Clip-path in CSS works much the same as a clipping mask in Photoshop – it allows you to define a region of an element that is not displayed. In CSS, we can defined our region either by specifying a URL to an inline or external SVG, or by using a shape method. The shape method works by specifying either Circle, Ellipse, Polygon or Inset and then a set of co-ordinates.

Clip-path is a game changer because it allows us to use images that are shaped – without resorting to crude PNGs. We can also use clip-path to crop images differently on different screen sizes – in combination with CSS Shapes (see below). You can see an example of this in the frame below.

Clip-path has many uses and it allows us to achieve more magazine-style layouts for our web pages. Support is patchy however, with IE and Edge not supporting clip-path currently. You can find out more about clip-path here: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

will-change

For front-end developers, the ability to animate elements on the web page changed everything, allowing for a more dynamic experience that didn’t depend upon crude JavaScript. That said, CSS animations are by default not hardware-accelerated, so sometimes the performance of your animations is not optimal. You might notice flickering, shuddering or even artefacts.

Previously, we forced browsers to use the GPU to animate our elements using the translateZ hack. This would trick the browser into using hardware-acceleration, but it was always and will always be a hack. The method increases RAM usage and on mobiles in particular the performance trade offs, particularly on an animation heavy page, can be significant.

It’s this issue that brought about will-change. Will-change allows us to inform the browser, in advance, that an element is likely to change in a particular way and therefore the browser will utilise hardware-acceleration. We do this by specifying the CSS properties we’ll be changing (or animating) as the value of will-change. For example, if we know we will be animating the transform property, we can write this rule:

will-change: transform;

The temptation at this point would be to use will-change on every element, but much like the translateZ hack use of will-change should be carefully considered. You can read more about will-change as well as the various caveats here: https://dev.opera.com/articles/css-will-change-property/

CSS Shapes

Whilst clip-path allows us to define a portion of an element not to be rendered, it won’t actually change how other content on the page flows around that element. CSS Shapes allow us to specify a shape for the element in much the same way – but this time, the shape changes how the content around the element flows.

For example, we may have text over laying a background image and on the image there are a series of circles and we want the text to wrap around these circles. Currently, we can’t do this, the text will always wrap around rectangles. But with CSS Shapes, we can, and it allows us to achieve the desired layout.

There are two properties within the spec, shape-outside and shape-inside. Currently, shape-outside has the better support. The property can take either a shape function as a value, or it can accept a URI to an image that has an area of alpha transparency that defines the shape required. For example:

shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);

Or:

shape-outside: url(bear-shape.png) border-box;

CSS Shapes have quite patchy browser support with only webkit/blink browsers supporting the shape-outside property. That said, you could begin to use this property providing that you checked that in other browsers the layout you’re looking to achieve still works. You can find out more about CSS Shapes here: http://tympanus.net/codrops/css_reference/shape-outside/

Image-set

A new CSS image function, image set allows us to utilise responsive images in our CSS. You’re probably thinking we can already achieve this with break points, but whereas break points tell a browser it must use a particular image, with image set we are giving the browser a set of options from which to select the most appropriate image at the discretion of the browser. An example of the code is below:

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

Browser support is again patchy with only webkit/blink support, that said both iOS Safari, the Android browser and the Chrome mobile browser all support this function. This means that for most mobile users we can start utilising this technique now. As desktop browser support is more patchy, I would suggest confining your image-set declaration to within a mobile-only media query. For example:

@media screen and (max-width:768px){

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

}

Wrap Up

So – there we have several new CSS features that you should know about. Some you can start using now, others should be approached with caution. What these features show however, is how CSS is progressing at an extremely rapid rate. These are just a handful of new features, the actual number of new CSS features coming up is vast.

If you want to stay ahead of the curve, know your resources:

 

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →