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! ๐
Top comments (37)
Remove some stupid quirks in mobile browsers, particularly iOS Safari.
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.
Thanks for the info!
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. :)
Yes, I use this all the time as well! Very helpful. Thanks, Stephan!
It's a good one. May I suggest using
max-width
instead ofwidth
. 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.
I like
beacause it can save you some lines of JS.
Also, some times I happen to need to center-align an absolute element with:
CSS Counters and object-fit can be very handy under specific circumstances
The same goes for
(Here is a practical example). On that note, I love the potential uses of ::before and ::after pseudoelements in general.
allows you to click through an element.
combined with something like opacity: 0; allows you to hide an element avoiding display: none;, which allows you to apply CSS effects.
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.
First time I've seen this solution!
I usually see two variants:
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:
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 ๐
Thanks.
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 boardHi, 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.Cool!
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.
You can check my score here ->
webpagetest.org/result/200615_SW_b...
Hey, great discussion idea! ๐
Center one or more items within a container horizontally and vertically:
Details and more centering options >
My other favorite is responsive equal-width columns that break to row layout below a minimum width:
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:
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!
My best friend,
margin: 0 auto;
Your best friend is some width -> margin: 0 auto; ;)
Simple yet important. Thanks, Carlos!
Hi @adrianmarkperea !
I think you should def check the
clamp()
function, so you don't need to usemin(max({MIN_SIZE}, 4vw), {MAX_SIZE})
but justclamp({MIN_SIZE}, 4vw, {MAX_SIZE})
๐It has the same browser support, too.
MDN Reference
I like this one:
to increment each item you add to a
ul
list automatically and it also supports nested lists.and this one
to easily create breadcrumb navigation
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.
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!
Glad to be of help!