loading...

What CSS tip do you want to share with others?

adrianmarkperea profile image Adrian Perea ・1 min read

The world of CSS is very wild. Let's help each other out by sharing things that give it some order!

I'll start!

You can ditch media queries for dynamically changing font-sizes by use of fluid typography. By using min, max, and viewport units, we can dynamically change the font-size and constrain so that they don't explode (or shrink).

Let's see an example. Let's say you want your header to be 2rem on mobile and 4rem on larger displays. Here's how you use fluid typography to accomplish that:

h1 {
    // font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE});
    font-size: min(max(2rem, 4vw), 4rem);
}

On most cases, 1rem = 16px, so our minimum font-size is 32px. This means that when the viewport width is less than 800px (0.04 * 800px = 32px), we will always have 32px as our font-size. This is perfect for mobile. When the viewport width is greater than 800px, our font-size will dynamically change along with the viewport, but never exceed 4rem = 64px.

4vw was just used as an example. You can change it to any value that suits your needs.

To see this in action, try changing the viewport width of the pen below. I changed 4vw to 8vw to make the font-size increase faster (font-size acceleration?!):

And that's it! In just one line of code, you can make your font-size responsive!

I hope this simple trick helps you guys out.
Share other awesome tips down below! πŸŽ‰

Posted on Jun 29 by:

adrianmarkperea profile

Adrian Perea

@adrianmarkperea

Software Engineer. AI Enthusiast. Writer. Teacher. I talk about JavaScript and Artificial Intelligence. Check me out at: https://adrianperea.dev

Discussion

markdown guide
 

One of my favourite css rule is the following, to make sure images never grow outside their parent element. Simple but very effective in my day to day work. :)

img {
    display: block;
    max-width: 100%;
    height: auto;
}
 

Yes, I use this all the time as well! Very helpful. Thanks, Stephan!

 

Yep, I too am using this over and over again πŸ‘πŸ‘πŸ‘

 

It's a good one. May I suggest using max-width instead of width. The former will make sure the image doesn't stretch if its width is smaller than the parents'.

 

You are absolutely right. I changed the example! :) Thanks.

 

Remove some stupid quirks in mobile browsers, particularly iOS Safari.

* {
  -webkit-tap-highlight-color: transparent:
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}
 

Always check for IOS quirks! Biggest pet peeve is that all browsers in IOS are using Safari's rendering engine (AFAIK), and Safari has it's moments of implementing 90% of the ruling and then deviating from the 10%

 

Didn't knew that ones, thanks πŸ‘Œ

 

Which kinds of quirks, Robbie?

 

The first rule removes the annoying tap highlight when you click on anything, which is blue on Android and gray on iOS Safari. The second rule makes it so any scrollable element positioned absolutely or fixed still scrolls normally rather than in a weird way where there is no momentum. The last rule prevents double tap to zoom, so that browsers don't wait 300ms after clicking on a button to make sure the first tap wasn't just part of a double tap gesture.

 
html {
-webkit-tap-highlight-color: transparent;
}

This is useful to remove default blue square when tapping object on mobile.

 

This one is interesting. Would you know if this would affect accessibility?

 

This was my first thought when I saw what this CSS did. After a bit of digging, I found this GitHub issue discussing it: github.com/necolas/normalize.css/i...

A similar note on MDN makes me think that removing the blue square is not best practice.

 
 

I like

html {
  scroll-behavior: smooth;
}

beacause it can save you some lines of JS.

Also, some times I happen to need to center-align an absolute element with:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

CSS Counters and object-fit can be very handy under specific circumstances

The same goes for

&::before {
      content: attr(data-attribute);
}

(Here is a practical example). On that note, I love the potential uses of ::before and ::after pseudoelements in general.

pointer-events: none;

allows you to click through an element.

visibility:hidden;

combined with something like opacity: 0; allows you to hide an element avoiding display: none;, which allows you to apply CSS effects.

input[type="checkbox"]:checked + label {
  // Do something
}

allows you to style the label of an checkbox only when it is checked. Combine it with the ::before pseudoelement and you can have some nice, js-free effects.

 

Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:


html {
  // with 100% 1rem === 16px
  font-size: 100%;
}

p {
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  html {
    // at 90% 1rem equals to (16px/100 * 90) = 14.4px
    // our p element will have font-size: 14.4px
    font-size: 90%;
  }
}
 

I use this too, but I put the initial font size on body rather than html. Which one is better?

 

Currently, there is another one:

:root

I think this is the best, I don't think there are differences between HTML and body. Personally I prefer to use html instead of body for font-family and size, but It's a personal idea 😎

 

Hey, great discussion idea! πŸ†

Center one or more items within a container horizontally and vertically:

display: grid;
place-content: center;

Details and more centering options >

My other favorite is responsive equal-width columns that break to row layout below a minimum width:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));

See it in practice >
Read about how it works >

 

Hi, Stephanie! Thanks! First time I've heard about using grid to center items this way. I mostly use flexbox:

    display: flex;
    justify-content: center;
    align-items: center;

It's nice to always have options!

The responsive grid columns is awesome as well. I believe Chris Coyier called this "The Most Powerful Lines in Grid".

Thanks for sharing!

 

love using object-fit: cover; when appropriate. I work a lot with image grids and random crops (thanks editors!) so we gotta make sure it looks decent across the board

 

Hi, Artem! Can you give more detail on what object-fit: cover accomplishes? (In my head, it kinda sounds like cover background image positioning)

 

yes pretty much! it is very helpful to preserve aspect ratio for both images and video.

so lets say you have a 2:1 image (and you cannot crop it down manually or via some upload tool) you can use object-fit: cover - so if the container that holds the image is a 1:1, it will not distort but in fact crop outside of the container.

 

I find the 'adjacent sibling selector' (combinator) especially useful when it comes to getting the space between paragraphs right:

p+p
{
   // ...
}

And absolute positioning with a negative value also comes in handy at times:

div
{
  position: absolute;
  left: -10px;
   // or //
  right: -10px
}
 

The adjacent paragraphs snippet is cleaner than the solution I currently use. I select the last paragraph child to set a different margin.

Also, in case using position: absolute destroys your layout, an alternative would be negative margins. I use this for micro-adjustments, too!

Thanks for sharing!

 
 

Simple yet important. Thanks, Carlos!

 

Your best friend is some width -> margin: 0 auto; ;)

 

I don't use it all the time, but this one comes in handy when you need something to go full width but you're confined by a container it's already in. For example, an article where you want full width images, but fixed width content.

.breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
 

First time I've seen this solution!

I usually see two variants:

  1. Use a container multiple times to only constrain particular sections of your page:
<div class="container">...</div>
<img class="full-width" ... />
<div class="container">...</div>
  1. Break out the container by adding negative margins to both sides:
.container {
    padding: 2rem 1rem;
}

.breakout {
    margin: 2rem -1rem;
}
 

Hi @adrianmarkperea !

I think you should def check the clamp() function, so you don't need to use min(max({MIN_SIZE}, 4vw), {MAX_SIZE}) but just clamp({MIN_SIZE}, 4vw, {MAX_SIZE}) πŸ˜‰


h1 {
    /* font-size: clamp(MIN_SIZE, 4vw, MAX_SIZE)}; */
    font-size: clamp(2rem, 4vw, 4rem);
}
h1 {
    /* font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE}); */
    font-size: min(max(2rem, 4vw), 4rem);
}

It has the same browser support, too.
MDN Reference

 

I like this one:

ul {
  counter-reset: counter;
}

li:before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

to increment each item you add to a ul list automatically and it also supports nested lists.

and this one

.breadcrumb a:first-child::before {
    content: " Β» ";
}
.breadcrumb a::after {
    content: " /";
}
.breadcrumb a:last-child::after {
    content: "";
}

to easily create breadcrumb navigation

 

This is a really cool tip! I’ve always struggled with font sizes and what they should roughly be on desktop and mobile but this would help with that as I won’t need to worry about changing them.

 

This is gonna be helpful to me and other devs too who are tired of using media quiries to change font sizes. Thanks!