Even if you're familiar with CSS and building beautiful layouts, you can still discover new CSS properties and features. By using them, you have more influence on how the content behaves on the website, as well as having more freedom in terms of how you apply creative techniques to elements such as photography. In this tutorial, we are going to dig into some lesser-known properties. When experimenting with them, please bear in mind that mentioned features are not supported by all the browsers. Let’s dive into some short and concise examples.
We're familiar with text stroke (outline) from Adobe Illustrator. We can apply the same effect using the text-stroke property. It's good to know you can animate text-stroke with CSS but only the stroke colour – the stroke width isn't.
This pseudo-element applies styles to the very first letter of the block-level element. Thanks to that we can introduce effects that are familiar to us from print and paper magazines.
Finally we can apply gradient to our text without any complicated methods. Let’s find out how can we introduce this eye-catching effect on our website.
The line-clamp property truncates text at a specific number of lines. We need three properties to make it work.
Thanks to the column-count property, a browser evenly distributes the content in a specified number of columns.
We can limit our text width or height depending on the character unit. As Eric Mayer points out, the ch unit represents the width of the character '0' (zero) in the current font, which is of particular use in combination with monospace fonts. It changes as the font family changes. We can treat it a bit like an x-height but the ch is based on the width of the 0 character instead of x.
Although this tutorial is based around CSS tricks I also want to mention one HTML tag:
If you wonder whether we can control image behaviour depending on the size of the container, I recommend you check out the object-fit property. This one defines how the content of an img or video should be resized to fit its container. We have four options: fill, contain, cover and scale-down. For instance, with the cover value, the replaced content is sized to maintain its aspect ratio while filling the element's entire content box.
To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.
To change the Text Selection colour, ::selection is a pseudo-element that overrides at the browser-level to replace the text highlight colour with a colour you choose. The colour can be seen once you select the content with the cursor.
Whenever you want to use a CSS property not supported by all browsers, there is a feature query called the @support rule. This enables you to check the browser support for CSS property: value pairs. The code included in the @support block will be rendered only if these conditions are true. If the browser doesn't understand @support, it doesn't generate a given part of the code either.
Although some properties may still experience problems with the browsers' compatibility, don't hesitate to play with them. While your browser support may be limited now, these will likely become mainstream practices in the future. It is just a matter of time. If you would like to ensure these effects only load on browsers that can render them, use the @supports rule to wrap the styles.