Web design has transformed in recent years. Things are not only different but the foundational landscape of our industry has changed completely. We have new, powerful tools to play with, none of which have been as influential as the new CSS features that are allowing us to flex our creative muscles.
Read on below for CSS features of 2019:
Grids are one of the basic truths of web design but once upon a time they were quite complicated. In order to create a custom-sized grid you would have to work your way through a list of processes, including calculating the width of each column, calculating the size of each gutter, working out the positioning of the grid, and then using HTML to style it.
It was a long, somewhat tedious process, which is why web designers everywhere began to choose grid frameworks as a shortcut. Over time, the 12-column grid became the standard. This was rarely changed because it was a pain to do so and, well, why bother? By sticking to the norm it allowed us to focus more energy on creative, fun things, like colour schemes and typography.
Then CSS grids came to stir things up again.
Which is great news because creating a grid in CSS is extremely easy. It no longer requires complex math skills and an obsessive eye on the details. Even someone with little to no coding knowledge could create a grid in CSS.
Browser support for CSS grids has rapidly grown and the easy layout makes it simpler than ever to change grid items to fit different device screens. This level of customisation would be extremely difficult to come next to impossible with an old school class-based grid and has been instrumental in the new wave of responsive-led design. As an added bonus the code is relatively clean and self-explanatory, which makes it easy to troubleshoot for external devs.
CSS custom properties offer a lot of advantages for the modern web designer working on big projects. They allow designers to define specific values that can be reused throughout a document. You can set them by using a custom property notation and they can be accessed easily via the var() function, saving time (and sanity) by removing the need to keep repeating values.
Why is this useful for big projects? Well, simplicity for one. Big, complex sites tend to have enormous amounts of CSS, and often this CSS has countless repeated values. By using custom properties you can store a value in one place and then reference it however many times you need, without having to create it again. Also, semantic identifiers tend to be easier: main-text-color is much easier to understand than a seemingly random sequence of letters and numbers.
Tip: Custom properties inherit their value from their parent and are subject to the cascade.
The clip-path property lets you take complex shapes and ‘clip’ them into a basic shape (polygon, inset, circle or ellipse). Anything outside of the bounds of your shape will be removed.
When you have two or more clip-path shapes with the same number of points you can use them to make CSS Animations. CSS Shapes can be both transitioned and animated, letting us animate key visual areas without disrupting the content within the element. We could, for instance, start with hidden (clipped) content and then grow the clipping path to reveal what has been removed. This can lead to some engaging visual concepts and lets designers to get a little creative with their pages. Definitely one of the CSS features to look out for!
Browser support for clip-path has increased in recent times, possibly due to the increased attention on web animations and page engagement. By mastering its functionality you open yourself up to some new possibilities, especially when you move beyond just using it to customise basic shapes.
CSS features such as writing mode allow you to change the alignment of the text so that it can be read from left to right or top to bottom. Clearly, this is most useful when working in vertical languages such as Chinese or Japanese – a great plus if you are working with an international client. It has its uses in English too, however, though these are more likely to be aesthetic and part of the overall design of your page.
Writing mode will set the direction in which blocks progress. Specifically, it will specify the block flow direction, which is the direction in which block-level containers are positioned and the direction in which content flows within said block container.
The property is specified as one of several values. These include horizontal-tb, where content flows horizontally from left to right and vertically from top to bottom. Vertical-rl, where content flows vertically from top to bottom and horizontally from right to left. Sideways-rl, where content flows vertically from top to bottom and glyphs are set sideways towards the right. And sideways-lr, where content flows vertically from top to bottom and all glyphs are set sideways towards the right.
Tip: Use this property for both multilingual content presentation and as a formidable design tool.
@supports is a clever little feature that allows you to test if a specific browsers supports a property or property: value before applying styles. It is similar to how @mediaquery works by matching the width of a browser window to specific screen size. Similarly, CSS that is contained within the @supports feature will fire when the property: value being examined is supported by the browser currently in use.
In the majority of scenarios, the best use of @supports is setting an old set of style as a backup and then cancelling those styles out and enhancing the design if a given property is supported by the current browser. One place where @supports could be extremely useful is when dealing with layout and it is likely to become more useful as time goes on and browsers catch up with new functionalities.
The initial letter is a CSS property that automatically selects the first letter of an element and then specifies the number of lines occupied by that letter. Its most common application is on sites that convey a lot of information, such as traditional news sites, where the first letter of the paragraph is often larger and higher than the remaining content.
Using the initial letter property automatically adjusts font size and adjust the number of lines needed to create the drop cap. The visual effect is pleasing and, oddly enough, has been used in print media and literature for centuries to emphasise the beginning of a page. It is one way to make your design more unique and to provide easy-on-the-eye visual cues to the user present on your site. It is still often used in print design and now the digital world is adopting it in order to guide visual hierarchies.
Good design makes design look easy, but that’s always been the way. The truth is, behind the scenes, we need effort and initiative to get the job done. Unique designs that speak to the people we are trying to reach are within all of us, and the new tools listed above help to make things just a little bit easier when bringing our ideas together.
One of the strangest outcomes of recent years is how the old-fashioned print world is starting to inform the aesthetics of digital. It’s almost as if they were never two separate things at all.
“What was thought to be only achievable in flat mediums like print is now coming to the web natively using simple code rather than complicated hacks. Expect to see experimental layouts which use grid, clip-path, writing-mode and initial letter coming together to create layouts that would look more at home in a design magazine. Now we just need the world to upgrade to the latest browser version…”
Jordan Thompson, Creative Director @ KIJO
As our tools refine themselves via mass use and feedback expect more experimentation to take place at an even faster pace. The new wave of web design will be something totally unrecognisable to what we have seen before – the complex will be made even simpler. And it will be down to us to make the most of it. It’s exciting to think about the future of HTML and CSS features going forward.
For more information on how the team at KIJO are keeping up to date with the changing trends of HTML & CCS when designing websites and apps, simply contact us today.
