In the life of every CSS programmer comes a time when they are looking to expand their horizons and experiment with different techniques. CSS Tricks have been used ever since the style sheet’s language first inception and are tempting to use. The real question would be, are they really what they seem?
In this article, we will dive deep and take a look at some of the misused concepts about CSS and how we can use them efficiently. Keep in mind that some of them might be useful for special situations, and we do not condone using them when needed. These techniques will help you become a better developer and understand the decisions behind design choices and implementations. Without further ado, let’s take a deep dive into these tricks.
Misused CSS Tricks in 2022
One of the most underrated CSS classes allows designers to incorporate images and videos in a unique way to adapt to any resolution the devices might have. The main properties you are inclined to use are: contain, cover and scale-down. A combination of these three will ensure fewer headaches when adjusting them for different devices through old methods such as margin or text-align.
/* Global Values*/
One thing you should keep in mind about object-fit is that it’s not supported in Internet Explorer 11. You might want to consider this if your site demographics are showing users who are still using this browser. If you own a gaming website and host slots like Book of Ra, you might want to consider code that is rendered correctly for multiple browsers. This will also ensure that the pages load fast and efficiently.
This interesting property allows you to single out a certain area of an element, thus keeping the rest of it hidden away from the eyes of the users. One of the most common uses for clip-path is to crop certain images, but it can also have many other creative uses as quoting a certain part of a text. Attached is an example of how to properly use clip-path to crop out images correctly. Below are attached all the possible values for clip path and their corresponding reference.
/* referencing path from an inline SVG */
/* referencing path from external SVG */
/* polygon */
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* circle */
clip-path: circle(30px at 35px 35px);
/* ellipse */
clip-path: ellipse(65px 30px at 125px 40px);
/* inset-rectangle() may replace inset() ? */
/* rectangle() coming in SVG 2 */
/* rounded corners… not sure if a thing anymore */
clip-path: inset(10% 10% 10% 10% round 20%, 20%);
Let’s be honest, we all love fonts, but some of them would just not render properly for many reasons. And while you might be tempted to find something that adapts to your needs, the font-sized-adjust property is your best friend. Although you might expect it to work for all browsers since it’s included in CSS3 Spec, it currently only works for Firefox.
It works by taking the original value for the font size and dividing it by the value set for font-sized-adjust. We get back from this because we will no longer experience random x-heights during fallback rendering. We’ve also attached an example of how to use these CSS rules properly.
font-family: ‘Bookman’, ‘URW Bookman L’, serif;
The font-stretch that facilitates the use of other font faces is another method of keeping our fonts nice and pretty. This is particularly useful when you’ve already declared a font family but are looking to use a certain version of it for certain aspects on the page.
It’s worth knowing that you can choose from semi-condensed, semi-expanded, extra-expanded, and ultra-expanded, too. Font stretch can even hold percentage values if anywhere between 50% and 200% if you are looking for something in-between the pre-determined values.
Unfortunately, Internet Explorer does not support the latter percentage values and you will need to use the exact ones in that scope.
Font Smoothing Techniques
Moving on with the font-related CSS properties and font-smoothing can be used in two ways through these parameters: -webkit-font-smoothing and -moz-osx-font-smoothing. Their goal is to prevent jagged edges through anti-aliasing. Using CSS methods like this for newer browsers should work like a charm, but you should always consult reliable websites that contain browser support information.
Let’s face it, some of the most infuriating things about coding are when you are starting to encounter positioning-related issues due to padding. Many web developers swear by this trick and boast about it. For example, if you have a 10px padding on a 200px width, the box-sizing:border-box method allows you to still have a 200px width box in the end, without any subtractions.
Grids in CSS
As the name suggests, the CSS Grid focuses on differentiating the web space into a 2D-based layout which is miles better than what basic CSS offers us. Being cutting-edge technology, you might expect that only certain browsers such as Google Chrome and Mozilla Firefox support it. Other CSS directional styles usually focus on improving, but Grid allows users to determine their working space and control every parameter.
The CSS grid layout can only be activated alongside a container element (usually div tags) by typing: display: grid. And if you are looking to create a 400×400 grid with 4 columns and 2 rows, you can take a look at the sample code below.
grid-template-columns: 400px 400px 400px 400px;
grid-template-rows: 400px 400px;
When should you use CSS Grid?
You might be interested in using this method if you are looking to build complex web pages that are two-dimensional. This is not intended for simple landing pages or one-dimensional work, which can usually be done simply by using Flexbox.
If you’re trying to overlap block elements and having a hard time, it’s because you weren’t using this method before. With Grid, you can say goodbye to that issue because it only takes a few lines to have overlapping elements. Remember that you will need to use the grid-column and grid-rows properties.
Last but not least, one of the most common reasons to resort to this method would be the need for a gap between elements. This can be done easily by tweaking the CSS variable to facilitate the result needed.
grid-template-columns: 100px 100px 100px;
grid-column: 1 / span 2;
grid-column: 3 ;
grid-row: 1 / span 2;
grid-column: 1 ;
grid-row: 2 ;
grid-column: 2 ;
grid-row: 2 ;
Above, we have an example of the proper use of the grids, representing four elements separated by gaps. We highly encourage you to copy the code and start tinkering with it to understand this method’s power fully.
Variables in CSS
If you are someone who loves simplifying things and keeping everything tidy, you probably have heard about CSS Variables before. If not, all you should know is that they’re also referred to as custom variables or cascaded ones. If you have learned about any other programming language before, they behave exactly as the variables you know and love. The difference would be that these ones are called using the var() terminology and are declared using the double hyphen (- -).
You already know that you can use certain lengths in CSS, such as centimeters, millimeters, pixels, inches, points, and picas. But it’s worth mentioning that there are more than this present in the syntax.
Did you know that there’s a way to use the font as the foundation of the element’s dimensions? The em unit of measure allows you to scale things relative to the font size. For example, 4em will mean 4 times the current font size.
On another note, the rem unit functions as a way to scale things judging by the default value without tracking into account where the element is positioned. This is particularly useful when you’re starting to lay down the main pieces, and you don’t necessarily need to provide any scaling measures.
All of these units should already be supported by every browser out there so you shouldn’t worry about compatibility.
border: 1px solid black;
border: 1px solid red;
The font-size is 14px.
The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.
In the example above we can clearly see how the rem unit operates, scaling the text size up to 8 times.
If you’re looking to add a little twist to your websites, you might want to include background-blend mode and mix-blend-mode into your code. These proprieties can produce beautiful results if used correctly.
background-repeat: no-repeat, repeat;
background-image: url(“img_here.png”), url(“image2_here.png”);
As the example above suggests, you can choose multiple values for the blend mode. Here is a list of all the cool values you can play around with: multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, and luminosity. While it doesn’t get as good as a professional photo editing tool, you can still use it to shorten workloads.
There’s one thing you should keep in mind before playing too much with blending images, and that would be the performance costs. The main thing you should keep in mind is to make the website load as fast as possible, meaning that the browser should not use too many resources. Using too many blend modes might negatively impact your website’s performance, thus making it frustrating for users to browse.
These values should only be used as substitutes and in certain specific scenarios. It’s highly recommended only to apply one blend mode to an image to decrease the chances of putting a lot of strain on the system.
Now that we’ve taken a look at some of the most popular CSS tricks out there, it’s time to answer the most important question. Should you use all of the methods presented above? Like many others in life, the answer is not going to depend on what you are trying to do.
The magic of CSS is that you can do certain things in multiple ways. The number one thing that differentiates highly-skilled programmers from normal ones is how they choose to write their code. Optimization is the key to success when it comes to this business, and choosing the right path can make a night and day difference. Please let us know what your favorite trick was, and if you have any new ones to share with us, those would be greatly appreciated.
Thomas Glare is a science writer and space reporter. He graduated in Chicago before moving to the Netherlands to start building his career. His work is located at the intersection of STS and international relations, with special emphasis on space programs and security.