DEV Community

loading...
Cover image for 5 CSS tips you didn't know you needed

5 CSS tips you didn't know you needed

lynnewritescode profile image Lynne Finnigan ・Updated on ・3 min read

Having worked in web development agencies over the years, I've picked up some tips and tricks along the way. There are some things that I use day to day, that I barely even think about. Some of them are fairly standard, and others are a bit more unusual, but all of the snippets and examples below are things that I've used on client websites.

Transitions

By default on all of the websites I build, I always add a CSS transition on the links and buttons for their hover state. It just adds a nice effect on hover, and takes away from that harsh/abrupt change when you interact with a button or link.

// Background colour transition
transition: background 0.2s ease-in-out;

For a button I'd most likely add the transition for the background colour as shown above, for a link I'd set the transition property to all (transition: all 0.2s ease-in-out) which could allow me to transition the hover colour and border for example.

I also never use text-decoration: underline. You don't have much control using that, whereas you can use a bottom border to get a much nicer effect. Padding allows for better spacing, and you can even transition or animate the border if you'd like.

.link {
    transition: border 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}

.link:hover {
    border-color: blue;
}

Background overlay

Say you have some text, positioned absolutely on top of an image. But the background image is too bright, making the text unreadable. You could add another div in there somewhere to create a dark overlay behind the text, however this is not great and adds an extra empty div that is not really necessary.

Pseudo-elements to the rescue!

Using the :before element means we can also apply it if a certain class is added to the div for instance. Below is an example of how I would achieve this overlay background:

The key part in the above code is setting your overlay colour, and opacity level. This can be any colour, I've just used black and white as an example:

//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);

//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);

Multi-line underline effect

The pen below is something that may or may not be useful to people, but it is something I was asked to do on a client website. It allows the ability to have a bold underline effect which will span across a sentence to the length of that sentence, even if it's wrapped over multiple lines.

Even if this doesn't apply to your design, or requirements. It can also be used for things such as a link hover effect like the one shown below:

Sticky elements

Need an element to stick on scroll, but don't want to use JavaScript, or a plugin, or the height of your content is dynamic and likely to change? position: sticky is your friend.

position: -webkit-sticky;
position: sticky;
top: 0px;

This was incredibly handy for me when I had to have a sidebar stick next to an accordion element. Because of the accordion opening and closing, I would have had to calculate the height or use some other complicated method, when position: sticky just worked straight away. The only thing I've found to look out for is that it doesn't work when the body element is set to overflow: hidden, and is not supported in IE11 (it just doesn't stick, and Edge is fine).

Prevent highlighting

Being able to select text on a website is fairly standard and expected, however I've found occasionally that the user can click multiple times on an element (for example a carousel arrow) and it selects/highlights the element.

To prevent this, you can use the following snippet:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

If you got this far, thanks for reading! I hope this comes in handy for some people and I hope to do some further posts with some more day to day snippets if that is of interest to anyone.

Follow me on twitter and instagram for more dev related stuff!

Discussion

pic
Editor guide
Collapse
quantumsheep profile image
Nathanael Demacon

The most useful trick I use in every project is:

* {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

Which prevent breaking box dimensions with margin, padding or borders.

Collapse
javamajk profile image
JavaMajk

Yup, ..to be extra safe :D


  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
Enter fullscreen mode Exit fullscreen mode
Collapse
jonny_goodwin profile image
Jonny Goodwin πŸš€

I think that using box-sizing: inherit;’ can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.

Unless you are sure you want that to happen, it’s probably best just to use β€˜box-sizing: border-box;’ to ensure that all elements use β€˜border-box’. If any elements need a different box-sizing, you would override it with more specificity.

Thread Thread
javamajk profile image
JavaMajk

Yeah indeed, things can get messy in this case.

Thread Thread
dan503 profile image
Daniel Tonon

I was a box-sizing: inherit; person, then I realised this is super useful:

.page-restrictor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

It means that when the screen is less than 1240px wide, it will have a 20px gap down either side of the screen with no need for media queries.

This technique doesn't work with box-sizing: inherit; though.

Collapse
giacomosorbi profile image
Giacomo Sorbi

Mh, the * selector is relatively very expensive: I would use it rather sparingly.

Thread Thread
equinusocio profile image
Mattia Astorino

No. The * is the less expensive. Check some talk about performances by csswizardry

Thread Thread
giacomosorbi profile image
Giacomo Sorbi

Googling quickly, they still seem to confirm it among the less efficient: csswizardry.com/2011/09/writing-ef...

Thread Thread
equinusocio profile image
Mattia Astorino

8 years old post...

Thread Thread
giacomosorbi profile image
Giacomo Sorbi

This one is much more resent and confirms that * is still more expensive: sitepoint.com/optimizing-css-id-se...

Collapse
quantumsheep profile image
Nathanael Demacon

It seems like the same thing? :(

Thread Thread
equinusocio profile image
Mattia Astorino

No. The second snippet allows you to define a global box-sizing but let elements to inherit or change the behaviour

Thread Thread
quantumsheep profile image
Nathanael Demacon

Oh ok! So your way is better for sure!

Thread Thread
rinatvaliullov profile image
4rontender

It's old trick, man

box-sizing

Collapse
sduduzog profile image
Beautus S Gumede

This should be default

Collapse
deadcoder0904 profile image
Akshay Kadam (A2K)

Thank you, Lynne, for that wonderful multi-line effect.

I saw it somewhere but forgot about it. Soon I'll use it on my next project.

I've made some Pens for practicing these & to simply copy-paste next time I use it. Of course, I've given credits to you on top of each CSS file. Here are the links -

1) Transitions - Button & Link

2) Background Overlay

3) Multi Line Underline Effect

4) Sticky Elements

5) Prevent Highlighting

Collapse
lynnewritescode profile image
Collapse
lexlohr profile image
Alex Lohr

A CSS trick with an effect on JS: pointer-events: none will remove an element from the DOM event tree even if it is in the foreground, which means that if you capture click events, you'll receive the parent. If you are using event.target, you'll save yourself some steps of filtering.

Interesting fact I found out: if you add text nodes via appendChild, some browsers will handle them as own elements inside the DOM event tree.

Collapse
equinusocio profile image
Mattia Astorino

you need always to double check with js because removing pointer-events: none the element will be targettable even if it is eg. disabled.

Collapse
sh4hids profile image
Shahidul Islam Majumder

Multi line hover effect is really cool. Thanks for sharing the tricks.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

No problem, I really like the effect too! Hopefully some of them come in handy :)

Collapse
leob profile image
leob

Never ceases to amaze me how much "stuff" there is in CSS, it's endless. Implementing a CSS processing/browser rendering engine must be one of the most dauntingly complex pieces of engineering you can imagine.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

I know, right?!

Collapse
leob profile image
leob

I saw a statement recently that "CSS is the most complex programming language that exists" ... I don't know if it can really be considered a programming language (in the Turing sense), but it is really insanely complex, especially because of its long history and never ending evolution, which means that there are always at least half a dozen different ways to do something.

Anyway, some really great tips and techniques here, thanks for the article! "sticky" is especially a cool one, and the transition tip is simple but very useful.

Collapse
puremana profile image
Jeremy

Have been using CSS for a long time now and I had never come across sticky or user select none before!

Thanks for that ☺

Collapse
lynnewritescode profile image
Lynne Finnigan Author

You're welcome :)

I think for a while position sticky didn't have much browser support, but now it does other than IE11. At least because it's css, it doesn't break anything in IE11, it simply just doesn't stick!

Collapse
allanjeremy profile image
Allan N Jeremy

The pseudo-selector background overlay is neat! Knew about pseudo-elements but never occurred to me to use them for the background overlay. Always added that extra inner div. Time to refactor!

The underline one was pretty cool too. Heck, they were all interesting in their own way.

Thanks for sharing Lynne

Collapse
lynnewritescode profile image
Lynne Finnigan Author

I'm glad it helped! These are things I've discovered along the way, thought it would be good to share :)

Collapse
thobyv profile image
Thoby V ijishakin

Wow awesome tips. Thanks for sharing.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

No problem! Hope they come in handy :)

Collapse
jwesorick profile image
Jake Wesorick

Pretty sure you're not supposed to prevent highlighting as thats there for people with disabilities.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

When I had to use this it was to prevent the highlighting when you clicked multiple times on a carousel arrow really fast. I wouldn’t apply it to text or anything like that - I would have no reason to.

I can’t find much info on this specific property and accessibility issues, where did you find that information?

Collapse
jwesorick profile image
Jake Wesorick

I am wrong. I was thinking of this: a11yproject.com/posts/never-remove.... As long as it still has an outline when it's focused you're safe.

Thread Thread
lynnewritescode profile image
Lynne Finnigan Author

It was worth checking again, considering how screenreaders work! Thanks for sharing the issue with removing the outline on focus πŸ™‚

Collapse
apixelvisuals profile image
APixel Visuals

Can also be used to prevent selection of images by accident.

Collapse
dailymack profile image
Collapse
janphkoch profile image
Jan-Philipp

Thanks for the tipps!

Just starting out on Web Dev. I will copy your blending for the links this evening on my project :)

Collapse
lynnewritescode profile image
Lynne Finnigan Author

Awesome! Let me know what you think :)

Collapse
astonge profile image
sp4c3m0nk3y

Here is a nice CSS tip (or CSS idea) for mobile design that a co-worker showed me today:

On mobile make your buttons wide so they're easy to click.

Collapse
shubhambattoo profile image
Shubham Battoo

Really cool tricks.

Collapse
lynnewritescode profile image
Collapse
darksmile92 profile image
Robin Kretzschmar

user-select was new to me, thanks for sharing this! :)

Collapse
lynnewritescode profile image
Lynne Finnigan Author

No problem, it was a strange one at the time, took a while to find a solution!

Collapse
gzamann profile image
Gulshan Zaman Khan

that's some really cool trickrey πŸ˜ƒ well, for background overlay example, I use blend-mode which is really easy. And for the text underline I've been using box-shadow but that hover effect is really cool! I'll try that one.

Collapse
dan503 profile image
Daniel Tonon

Hot tip:

transition: 0.2s;

=

transition: all 0.2s ease;

😁

Collapse
azkar_moulana profile image
Azkar Moulana

position: sticky is your friend.

Not supported by all the legacy browsers. Even chrome gives the partial support. But a very handy style rule, browser supports will be granted in near future.

Collapse
emranweb profile image
Emran

Thanks. for share your experience.

Collapse
lynnewritescode profile image
Collapse
mathiu profile image
Mathiu

This is awesome, I actually never saw proper text underline with hover, it works even when you change line-height and have more than 2 lines of text.

Thanks for sharing!

Collapse
lynnewritescode profile image
Lynne Finnigan Author

Thanks :) glad to share!

Collapse
codejoywins profile image
Max Jann

hey thanks i like the time delayed underline on hover

Collapse
nouraellm profile image
El Allam Noura

a big thank you for the writer, i learned new things from this article.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

That’s great to hear! Thanks :)

Collapse
maximesimoncelli profile image
Maxime Simoncelli

Really love that multiline effect, thanks for sharing !

Collapse
pflash profile image
Precious adeyinka

wow, thank you so much for this article it came in handy, I learnt newer features of css.

Collapse
lynnewritescode profile image
Lynne Finnigan Author

Glad you found it useful! 😊

Collapse
pflash profile image
Precious adeyinka

Yeah I did :) merry Christmas πŸŽ„

Collapse
anurella profile image
Anurella

thank you

Collapse
lynnewritescode profile image
Lynne Finnigan Author

You’re welcome 😊

Collapse
phr3nzy profile image
Osama Adil

Beautiful! I was looking for these tips for a while now. Thanks!

Collapse
peterdavidcarter profile image
Peter David Carter

I learned so much! πŸ™ƒ

Collapse
lynnewritescode profile image
Lynne Finnigan Author

Glad to hear it! :)

Collapse
mlevesquedion profile image
mlevesquedion

For that last one (prevent highlighting), if you're using bulma you can use the "is-unselectable" class.