DEV Community

Adrian Perea
Adrian Perea

Posted on

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! πŸŽ‰

Discussion (39)

Collapse
robbiegm profile image
RobbieGM

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

* {
  -webkit-tap-highlight-color: transparent:
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}
Collapse
_lexedwards profile image
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%

Collapse
calag4n profile image
calag4n

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

Collapse
adrianmarkperea profile image
Adrian Perea Author

Which kinds of quirks, Robbie?

Collapse
robbiegm profile image
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.

Thread Thread
adrianmarkperea profile image
Adrian Perea Author

Thanks for the info!

Collapse
vanaf1979 profile image
Stephan Nijman • Edited on

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;
}
Collapse
lifelongthinker profile image
Sebastian

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

Collapse
adrianmarkperea profile image
Adrian Perea Author

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

Collapse
dzhavat profile image
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'.

Collapse
vanaf1979 profile image
Stephan Nijman

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

Collapse
bayuangora profile image
Bayu Angora • Edited on
html {
-webkit-tap-highlight-color: transparent;
}

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

Collapse
adrianmarkperea profile image
Adrian Perea Author

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

Collapse
terabytetiger profile image
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.

Collapse
bayuangora profile image
Bayu Angora

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

Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited on

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.

Collapse
jamesthomson profile image
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%);
  }
Collapse
adrianmarkperea profile image
Adrian Perea Author

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;
}
Collapse
lifelongthinker profile image
Sebastian • Edited on

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
}
Collapse
adrianmarkperea profile image
Adrian Perea Author

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!

Collapse
nicolalc profile image
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%;
  }
}
Collapse
bayuangora profile image
Bayu Angora

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

Collapse
nicolalc profile image
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 😎

Thread Thread
bayuangora profile image
Bayu Angora

Thanks.

Collapse
artemartemov profile image
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

Collapse
adrianmarkperea profile image
Adrian Perea Author

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

Collapse
artemartemov profile image
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.

Thread Thread
adrianmarkperea profile image
Adrian Perea Author

Cool!

Collapse
5t3ph profile image
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 >

Collapse
adrianmarkperea profile image
Adrian Perea Author

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!

Collapse
carl0smore1ra profile image
Carlos Moreira

My best friend,
margin: 0 auto;

Collapse
adrianmarkperea profile image
Adrian Perea Author

Simple yet important. Thanks, Carlos!

Collapse
vladi160 profile image
vladi160

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

Collapse
robertotonino profile image
Roberto Tonino

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

Collapse
jeferson_sb profile image
Jeferson Brito • Edited on

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

Collapse
davecranwell profile image
Dave Cranwell

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.

Collapse
penandpapers profile image
PenAndPapers

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

Collapse
adrianmarkperea profile image
Adrian Perea Author

Glad to be of help!

Collapse
cal_woolgar profile image
Cal

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.