DEV Community

What CSS tip do you want to share with others?

Adrian Perea on June 17, 2020

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

Read full post

RobbieGM • Jun 17 '20

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

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

Alex Edwards • Jun 17 '20

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 • Jun 18 '20

Didn't knew that ones, thanks 👌

Adrian Perea • Jun 17 '20

Which kinds of quirks, Robbie?

RobbieGM • Jun 17 '20

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 • Jun 17 '20

Thanks for the info!

Stephan Nijman • Jun 17 '20 • Edited

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 • Jun 17 '20

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

Dzhavat Ushev • Jun 18 '20

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 • Jun 18 '20

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

Giorgos Sarigiannidis • Jun 18 '20 • Edited

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 • Jun 18 '20

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 • Jun 18 '20

First time I've seen this solution!

I usually see two variants:

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>

Break out the container by adding negative margins to both sides:

.container {
    padding: 2rem 1rem;
}

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

Adrian Perea • Jun 18 '20

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 • Jun 17 '20

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 • Jun 17 '20

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

Nicola • Jun 17 '20

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 • Jun 17 '20

Thanks.

Artem Artemov • Jun 17 '20

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 • Jun 18 '20

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 • Jun 18 '20

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 • Jun 18 '20

Cool!

Bayu Angora • Jun 17 '20 • Edited

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

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

Adrian Perea • Jun 17 '20

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

Tyler V. (he/him) • Jun 17 '20

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 • Jun 17 '20

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

Stephanie Eckles • Jun 18 '20

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 • Jun 18 '20

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 • Jun 18 '20

My best friend,
margin: 0 auto;

vladi160 • Jun 18 '20

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

Adrian Perea • Jun 18 '20

Simple yet important. Thanks, Carlos!

Roberto Tonino • Jun 18 '20

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

Jeferson Brito • Jun 24 '20 • Edited

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

Dave Cranwell • Oct 8 '20

Regardless how you do CSS, I strongly recommend considering vertical and horizontal "rhythm" (the distance between stuff) as something to apply as utility classes directly to HTML.

All too often CSS starts to get unmaintainable as people try to teach a previously standalone component how to position itself relative to its surroundings in a growing range of situations.

Cal • Jun 18 '20

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.

PenAndPapers • Jun 17 '20

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

Adrian Perea • Jun 18 '20

Glad to be of help!