What CSS tip do you want to share with others?

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! 🎉

Comments

[RobbieGM]

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

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

[Alex Edwards]

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%

[calag4n]

Didn't knew that ones, thanks 👌

[Adrian Perea]

Which kinds of quirks, Robbie?

[RobbieGM]

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.

[Adrian Perea]

Thanks for the info!

[Stephan Nijman]

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;
}

[Adrian Perea]

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

[Dzhavat Ushev]

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'.

[Stephan Nijman]

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

[Giorgos Sarigiannidis]

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.

[James Thomson]

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%);
  }

[Adrian Perea]

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;
}

[Adrian Perea]

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!

[Nicola]

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%;
  }
}

[Bayu Angora]

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

[Nicola]

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 😎

[Bayu Angora]

Thanks.

[Artem Artemov]

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

[Adrian Perea]

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

[Artem Artemov]

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.

[Adrian Perea]

Cool!

[Bayu Angora]

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

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

[Adrian Perea]

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

[Tyler V. (he/him)]

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.

[Bayu Angora]

You can check my score here ->
webpagetest.org/result/200615_SW_b...

[Stephanie Eckles]

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 >

[Adrian Perea]

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!

[Carlos Moreira]

My best friend,
margin: 0 auto;

[vladi160]

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

[Adrian Perea]

Simple yet important. Thanks, Carlos!