Rare CSS Features You Probably Never Used
Jan Jurczyk
Rare CSS Features You Probably Never Used
Jan Jurczyk
Routine CSS properties are dull and boring.
All this styling and button coloring gets repetitive? At times making you wish you had to center something vertically, puzzle yourself, and spend days fighting your own stylesheet? Just like the good ol’ days?
Yeah, so to balance it all out - here are some rare and awesome CSS treats you may not have heard about (in no particular order!)
all
From time to time you may need to style child element exactly as its parent - inheriting widths and heights, or font colors in a link element.
Sometimes, you may also need to unstyle an element completely. Zero-out all the influence of cascaded styles and start with a blank sheet.
How to use CSS property all
Both of the fore-mentioned scenarios can be done the hard way - using inherit, normalizers, and CSS resets.
They can also be done the easy way - with the all property. A single CSS property that allows you to override every style applied to the element with a single line.
Browser support for CSS all
All major browsers, including new Edge (Internet Explorer never got to support it.)
Filter: drop-shadow
Everyone who had worked with modern CSS knows text-shadow. Pretty much everyone knows box-shadow. Startup designers seem to love both these days - shadows add depth and, obviously, make things look cool.
But, besides the advantage of wide-spread support and developer awareness, both text-shadow and box-shadow only somewhat fake the shadow effect.
Apply box-shadow to a transparent image (or even a text block) and, as the name says, you will get a rectangular shadow of the bounding box. Box shadows ignore the actual shape of the element - regardless if it is an image or an SVG shape.
Better shadows with CSS filter: drop-shadow
When what you need is a precise shadow of a (complex) element, consider using the drop-shadow filter.
Drop shadow generates a proper representation of shadow, including transparency and transformations. Moreover - filters run on the GPU, which in most cases also improves the performance!
When not to use filter: drop-shadow
If you need to support shadows on Internet Explorer, forget filters. And if the element you apply shadow to is an SVG image - filters on these aren’t entirely supported yet.
Support for CSS filter: drop-shadow
All major browsers (excluding Internet Explorer.)
clip-path
Another rarely used property, often bypassed by using already clipped images in production projects.
clip-path allows you to apply mask to images (experimentally also to entire HTML elements) using SVG shapes and simple primitives.
Don’t use CSS mask
Intuitively what clip-path does we would call a mask. Please note, that there is a separate CSS property called mask, and it is currently broken and unsupported by the major browsers.
Support for CSS clip-path
clip-path property is supported by all major browsers (including Internet Explorer). Primitive shapes (circle, ellipse, polygon) and animations of applied masks are supported on all browsers except for Safari.
image-rendering
If you like pixel art, you will like this one. image-rendering property allows you to tell the browser how to scale images and which type of interpolation method to apply.
In short - usually, scaling up a 32x32 pixel art Pikachu will render it very blurry. Using image-rendering set to pixelated will significantly sharpen the image and give an amazing, pixel perfect effect.
image-rendering on Chrome and Safari
The support for image-rendering one is tricky. On Chrome and Safari standard value crisp-edges will not work yet. Instead, use -webkit-optimize-contrast to apply the same effect.
image-rendering optimizeQuality and optimizeSpeed
Previously image-rendering used optimize values - optimizeQuality and optimizeSpeed. Support for these have been dropped, so be sure to not use these without fallbacks.
Support for CSS image-rendering
image-rendering support is very adventurous. Major browsers, except Internet Explorer, do support it, but the specification is still in progress. Meaning that the property values may differ between browsers and deprecate over time.
Final thoughts
Do you know any cool CSS tricks world has to absolutely know about? Send them over to jan@wtlstudio.com! or ping me on @thefrontendcat!
WTL Studio
Herengracht 499
1017 BT Amsterdam
The Netherlands
Monday - Friday
8 am - 6 pm
2016-2020 WTL Studio Amsterdam
KVK 68175922