DEV Community

Cover image for My 5 favorite CSS tricks I learned this year
Uriel Bitton
Uriel Bitton

Posted on • Updated on

My 5 favorite CSS tricks I learned this year

This year has been very productive for me as i developed numerous UI/UX apps and websites. On the way i've picked up some useful tricks to enhance my designs.

1. CSS Variables

CSS variables are useful when we want to apply the same style to common elements. Instead of adding a complex box-shadow, for example, to common elements we can initialize a variable and use that variable everytime we want to apply that style to an element

We initialize CSS variables with :root and the property we want to set, like so:

:root {
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}
Enter fullscreen mode Exit fullscreen mode

And we can then use it in any element we want to apply this box-shadow to:

.container {
   box-shadow: var(--shadow);
}
Enter fullscreen mode Exit fullscreen mode

2. Height Media Queries

Besides for screen width media queries, we can also apply screen height media queries, so devices with smaller screen height can be responsive. As well, when a device rotates its screen, the screen height changes and we need to reflect those changes for responsive purposes.

@media only screen and (max-height: 800px) {
    .container {
        height: 95%;
    }
}
Enter fullscreen mode Exit fullscreen mode

For screens at 800 or less pixels will change the grid element's height.

3. Calc Function

The CSS calc function can be very useful when setting dynamic widths. Say we want an element's width to be based on another element's width.

.container {
    width: calc(100%-300px);
}
Enter fullscreen mode Exit fullscreen mode

The width of our container element will be based on 100% of its parent container minus 300px, so if a container next to it is 300px, our dynamic container will respond accordingly.

4. Vertical Alignment

There are many ways to align an element vertically, But sometimes it can get complicated and not work, due to positioning complications of the parent element. One such method that works everytime is to position an element we want to align vertically, as absolute position and apply the following styles.

.container {
    position:absolute;
    top: -50%;
    transform: translateY(50%);
    margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

This will vertically align the element to its parent container.

5. Border-Box Property

.container {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Border box is one of the most useful properties in CSS. It allows us to create padding on elements while keeping the dimensions of the element uniform. So if we have a container with 300px width and 300px height and a padding of 30px, by default CSS will add those 30px to the container's dimensions thus causing many problems of alignment and other issues in our design. By applying a box-sizing: border box property, we can make all containers uniform in size.
box-sizing can also be used to make inputs, textareas and select boxes, the same size as well, to create a uniform look to our elements.

Website: www.flexrweb.com

Top comments (24)

Collapse
 
ben profile image
Ben Halpern

box-sizing: border-box; is a life changer πŸ˜„

Collapse
 
viallymboma profile image
vially

Most definitely...I learnt it yesterday...and it completely changed my level of understanding of CSS and HTML...was really great

Collapse
 
urielbitton profile image
Uriel Bitton

Haha I know right!

Collapse
 
yannik_sc profile image
Yannik_Sc

A tip for vertical align: although transform/translate works, I would not recommend it for frequent centering as it forces the GPU to render your element. This is especially bad if you have many child elements.
A better way is to use display: flex with justify-content and align-items.

Collapse
 
squidbe profile image
squidbe • Edited

Beat me to the punch. 😊
To the OP, note that align-items is for vertical alignment while justify-content is for horizontal. This is assuming your flex-direction is "row".

Collapse
 
ozanbolel profile image
Ozan Bolel • Edited

I wouldn't recommend vertically centering a div by position absolute. Often times browsers render it blurry. You should use flexbox instead, it's easier and reliable. If you are not able to use flexbox due to browser support, in my opinion, display table is a better solution.

Collapse
 
urielbitton profile image
Uriel Bitton

why do they render absolute position blurry. Do you have a sources to back this up?

Collapse
 
rshelnutt profile image
Rob • Edited

This is because of subpixel rendering from the browser when using the transform property - it's actually a longstanding "issue" faced by front-end devs for years (albeit, working as intended). When working in subpixel ranges (1.875px, 10.5px, etc) with transforms, the browser calculates the draw differently than flex.

This method works ok for images and other media elements that will receive some sort of rendered anti-aliasing from the browser naturally, but when it comes to pixel perfect UI elements (borders, buttons, fonts etc) that anti-aliasing is performed on the entire element, again, when it shouldn't be. Some tricks like using the transform z-scaling, transform rotate with fractional degrees, and backface-visibility:hidden can sometimes mitigate the issue, but its pretty hit-or-miss and isn't always supported across all browsers.

TLDR; Use transformation centering for media elements and select structure layouts, it's great to have in your toolkit. Items containing UI elements are more safely centered vertically with flex.

Collapse
 
louislam profile image
Louis Lam

It is not caused by position absolute. But css transform makes elements blurry in some conditions.

stackoverflow.com/questions/320345...

Collapse
 
pavelloz profile image
PaweΕ‚ Kowalski

I dont know about blurriness, but flexbox is the way to go.

Collapse
 
urielbitton profile image
Uriel Bitton • Edited

youre right flexbox works better. But i learned this trick a while ago and its helped me a lot so thats why I mentioned it :)

Collapse
 
uxguy profile image
UX-Guy

For the vertical alignment, you mistakenly transform translateX, instead of Y.
.container {
position:absolute;
top: -50%;
transform: translateY(50%);
margin: auto;
}

Collapse
 
urielbitton profile image
Uriel Bitton

Ah yes thanks for pointing out! I will edit it :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Also, those values will push the .container outside of the screen. I should be:

    top: 50%;
    transform: translateY(-50%);
Thread Thread
 
urielbitton profile image
Uriel Bitton

Right i believe i edited that :)

 
vyckes profile image
Kevin Pennekamp

It depends. Yes calc() is more expensive to run, but most browsers are shipped with highly optimized engines. On the other end, shipping more CSS to users impacts the loading time of the website. It's a balancing act for the users!

Thread Thread
 
urielbitton profile image
Uriel Bitton

of course. Usually one doesn't use calc for widths on all elements. I use it like max 2-3 elements per stylesheet

Collapse
 
iotapp profile image
Derek Flynn

Hey, thanks for these tips! I didn’t know you could assign CSS variables 0_o

Collapse
 
vyckes profile image
Kevin Pennekamp

CSS variables and calc together are quite powerful! You can achieve fluidity with them

Collapse
 
urielbitton profile image
Uriel Bitton

nice article !

Collapse
 
urielbitton profile image
Uriel Bitton

You're welcome man. Enjoy!

Collapse
 
jrmoynihan profile image
jrmoynihan

Two words for you:
1) SCSS
2) Grid

Collapse
 
wulforr profile image
Shaurya Vardhan Singh

For vertical alignment make sure that parent element has position : relative

Collapse
 
jpalala profile image
jose palala

You could also use flexbox to center once "arranged" by column