CSS is changing fast. Here’s our guide to the most exciting updates.
Object-fit
A more reliable way to present media
To make an image fill a content box, we have had to make use of the background-size: cover|contain styles. However, attempts to recreate this behaviour for images or videos have been somewhat clunky.
Thankfully the object-fit property has emerged, seemingly out of nowhere, to help. This can be used to achieve the same result, but on media assets such as images and videos. Object-fit can take five values:
fill Stretches the asset to fit the parent container.
contain Scales the asset to fit inside the parent container, maintaining aspect ratio (similar to background-size: contain).
cover: Scales the asset to completely fill the parent container, cropping from the sides where necessary (similar to background-size: cover).
Scale-down Similar to contain, however, this will only scale the asset down, and not make it larger than it is natively.
none Render the asset as it would normally.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
This property can also be combined with object-position to determine where the asset should be scaled from. Applying object-fit to your images is fairly simple:
It is important to remember height and width of the area you’d like to cover, otherwise the image will take on its default aspect ratio. This will most likely result in the image spanning the entire width of your available area.
In terms of browser support, object-fit is quite compliant, as it is supported in all browsers with two exceptions. There is no support at all in Internet Explorer, while Microsoft Edge supports object-fit on images only.
Shape-outside
Something that has previously been lacking from CSS was the ability to wrap content cleanly around images that do not have squared edges. Now with the introduction of shape-outside, you can create more adaptive layouts that resemble something closer to a magazine layout than our old standard floated block images.
To use shape-outside, first apply it to a floated element such as an image. Then in your CSS, declare which shape method you would like to use. The options available are:
circle – Create circular shapes
ellipse – Create elliptical shapes
inset – Create rectangular shapes
polygon – Create any shape with three or more vertices
url – identifies which image should be used to wrap text around (works by placing text within the transparent areas of the image
Support for shape-outside isn’t particularly good yet, as Internet Explorer, Edge and Opera Mini all offer no support, but Firefox has now begun supporting it from release 62 onwards. The support of shape-outside in Microsoft Edge is currently under consideration, but there is no official word on when it could be implemented.
currentColour
currentColor is something that has creeped into our daily code usage. You declare your colour of choice via color: #000; and then when you want to apply the colour to something else like a border, for example, you would use border: 1px solid currentColor;. This will result in the border colour matching the declared text colour.
Additionally, the colour then cascades down as your styling changes. Pretty cool, eh? If you were to declare a colour on a link and then apply currentColor to a border and SVG icon within that link, these would also change when you declare your hover and focus states like all responsible developers should be declaring.
Other CSS properties to explore
01. Will-change
This relatively new CSS feature has little impact on the appearance of your page – it is more of a processing tool than anything. The idea with will-change is to help the browser understand and prepare for elements of your code that will change when interacted with.
For example, when interactions are performed with CSS, the browser will do the best it can to plan ahead for what changes may occur. And with the addition of will-change you can notify the browser in advance of what may change so it can prepare better. This will result in any interactions you need being more responsive.
02. Read-only
The read-only pseudo selects elements that are not editable by the user. Combined with the :read-write selector, they form a simpler way to style disabled, read-only and content-editable HTML. This is especially useful when building forms that have some read-only inputs showing existing, non-editable data.
03. ::playing and ::paused
The ::playing or ::paused pseudo elements can be applied to highlight a component when it is currently being played or is paused, which will be useful if you’ve ever got any videos in your build. Unfortunately this code is in draft so it not fully supported yet.
Environment variables function in a similar way to CSS variables, but do not allow for overwriting. An environment variable defined once is guaranteed to have the same value throughout the document, whereas CSS variables (custom properties) can be overwritten on a component level and changes will cascade down to child declarations.
Probably one of the most eagerly anticipated newcomers, this selector is active when the user has focused a child element. This is especially helpful for exposing elements for keyboard accessibility.
05. Shape media-query
Most web devices are designed and implemented for rectangular devices. However, with the rising popularity of wearables, we are seeing more and more round devices on the market. The shape media-query can be used to target rectangular and round devices. This is specifically useful for ensuring everything fits onto the appropriate device’s screen.
The introduction of scroll anchoring addresses one of the most frustrating problems that happens on the web: when you unintentionally click on a re-positioned element after late-loading content in your page finally displays. Scroll anchoring aims to solve this problem by forcing the browser to maintain your viewport position when content is loaded to the page.
The core concept behind regions is being able to say, 'Display this content over there instead'. By setting an area of the document as a named region, content from other parts of the page can be moved into a different part of the document flow. Unfortunately, the draft for CSS Regions has not been updated in some time and may be dropped.
This article was originally published in creative web design magazine Web Designer. Buy issue 277 or subscribe.
Mirum is a 'borderless' agency of over 2500 digital savants, storytellers, technologists and makers. UI team lead Andrew Collinson, interface engineer Paul Sandwell JavaScript engineer Dan Hughes joined forces to put together this article.
