loading...

3 easy-to-apply CSS improvements that you can use in your project right now

seibmacdaniel profile image Mac Daniel Updated on ・2 min read

CSS can be messy, and it usually is whether for the lack of conventions or well thought-out systems of doing things. This is why easy fixes with little to no effort is a breath of fresh air in a project that could be suffocating on a bloated code.

Font Loading

If your project was created before May of 2019, you probably don’t have a font-display property set for your Google fonts. Font display defines the way they are loaded (Here's a demo with simulation). For me, swap works best to assure that text content are loaded immediately while the actual font is still downloading. Other values are none, block, optional, and fallback.

The easiest way to do this is add the &display=swap at the end of the import link.Like so:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

or if you’re hosting the fonts yourself:

@font-face{
font-family: ‘Roboto’;
font-display: swap;
}

Buttery-Smooth Scrolling

Divs with scrollable content are a staple of websites to manage larger content without using significant amount of screen real estates. However, you might notice that in iOS, scrolling through these divs could feel glitchy and a bit unresponsive.

You may dd the -webkit-overflow-scrolling property to improve it.

.scrollable-div{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

Empty Elements

With components whose content are generated thru tinyMCE, say article body content, I always run into the problem of editors unmindfully adding unnecessary line-breaks.

.article p:empty { display: none; }

In this case I target the empty paragraphs inside the article. With this I can effortlessly get rid of them and at the same time maintain the visual rules of the website.


Do you have other easy CSS hacks for existing projects? Share them in the comments below. I'm all ears!

I'll also be sharing Easy-to-apply CSS before starting a project. Stay tuned if you're interested.

Discussion

pic
Editor guide
Collapse
eionrobb profile image
Eion Robb

webkit-overflow-scrolling is deprecated as of Safari 13

Perhaps suggesting when to use font-display:none would be helpful, like when using FontAwesome instead of showing tofu blocks while its loading in the icons

Collapse
seibmacdaniel profile image
Mac Daniel Author

Great points. No one wants those tofu blocks! :D

Collapse
bytet profile image
Bytet

Keep em coming Mac!👍

Collapse
willowbeehive profile image
Willoughby Labs

Thanks for this! I just recently learned about the font swap and was pleasantly surprised the import links from Google Fonts include it by default.

Collapse
hte305 profile image
Ha Tuan Em

Your post is cool. But why don't you upload the result ( image, code, ... ) after tip ? I think it better.