What CSS tip do you want to share with others?

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

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

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

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.

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

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!

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

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

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

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

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 >

My best friend,
margin: 0 auto;