Here are some new things that I’ve learned with CSS, which solve common real-word problems. I’m always looking at improving my css skills (who doesn’t!) Here are 6 of the latest things I’ve discovered:
Fitting that round image in a square peg
Sometimes you want an image to always fill a space, for example as a background image on an element. But you still want to have control over the the image aspect ratio at different screen sizes. So you can’t use background-image. object-fit solves this problem:
.image {
height: 100%;
object-fit: cover;
width: 100%;
}The above code will fill your element with your image (whilst sacrificing some cropping). Note that width and height need to be set to allow object-fit to work properly. There are other values available for object-fit too, but you’ll find this one to be the most useful.
Fluid font size that scales with the browser
Using clamp can allow for something that behaves like media queries…without media queries. The added benefit is that you can scale font size based on screen width. Take the following:
.title {
// clamp(min value, preferred value, max value)
font-size: clamp(1rem, 5vw, 4rem);
}The preferred value here is triggered when the current value is between the min and max value. Prevously this all had to be done with complex css math, or javascript…
Inheriting a focus value from a parent element
I have found :focus-within to be the most useful when used alongside keyboard navigation, i.e acccessibility. For example where you need a dropdown menu to be open whilst any link inside it has focus.
.menu:focus-within a.menu__link {
font-weight: bold;
}Fixing spacing issues with empty elements
When you use a CMS you might find that sometimes it’ll add empty elements onto the page. Even though they’re empty, they might add unwanted margin space and height to your page layout. Using :empty can help fix this problem (though note that it’s not 100% effective):
p:empty {
display: none;
}This will work even if the empty p element contains a <!-- comment -->. But it won’t work if there is empty whitespace, as that counts as content. It also won’t work if you have anything else in there that’s empty, like another empty element:
// this p element won't be regarded as empty
<p><span></span></p>Breaking out of the usual boxy design layout
The internet is mostly just boxes of content. But it doesn’t have to be. By using clip-path you can define an area where content can sit, like an image:
.image {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}The above path will place the selected image inside a triangle. Each value in the polygon is an x and y value pair, where a point is placed in your polygon. Explaining the settings here is an article in itself, so you’re best heading over to this great little tool to see it in action: https://bennettfeely.com/clippy/. It will generate clip paths for images, in a number of shapes, even custom ones!
Note that there are other possible types of clip paths too, including being able to use an svg file, and refer to it using clip-path : url('#id-of-svg-file').
Applying colour, hover states etc to svgs
I learned this neat trick pretty late, the best one here for improving my css skills tbh. If you have used SVGs for a while you’ll know that they’re in the shadow DOM (cue creepy music). What this means is that you can’t directly affect the styles on it, when it comes to things like :hover states. This is where the property value currentColor comes to the rescue. You need to set up the svg file first as follows:
<a href="#" class="link"><svg fill="currentColor">...</svg></a>Then, in order to manipulate the svg (get it to change colour to match your link hover state), you can simply change the link value as normal:
.link {
color: #C0FFEE
}
.link:hover {
color: #BADA55
}And the svg will refer to the currentColor to set it’s fill colour. And that’s defined by the closest parent, in this case the .link colour. You could also take the same approach for applying stroke to the svg and so on. Magic!