Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

[Discussion] What is a CSS property or module that doesnโ€™t get the attention it deserves?

Weekly Treehouse discussion

With the assistance of the Treehouse staff, I've decided to begin posting a discussion question every week to the forums. We need some more discussion here. Thanks to Faye Bridge for the great job she does!

Every week, I'll post a new discussion thread with a question. We'll be covering a large variety of topics across several different levels of learning (beginner, moderate, advanced, etc.). We'll be mostly focused on the web, of course, but we will certainly touch on mobile and maybe desktop.

Question

What is an amazing CSS property or module that doesnโ€™t get the attention it deserves from the community?


Rules

  1. Upvote comments liberally. If a user posts a good comment, upvote it. Doing so will give that user a few extra points and will send their comment shooting to the top.

    • On that note, never downvote comments unless they contribute nothing to the discussion.
  2. Please nest comments appropriately to keep the discussion orderly. All direct answers should be direct replies to this thread, but everything else should be a nested comment.

    • If you're going to answer the question directly, scroll all the way down to the bottom of the page and use the answer box down there.
    • If you're replying to someone else's answer, click the Add Comment button underneath their answer and use that answer box.
    • If you want to clarify the question or something similar, click the Add Comment button underneath this question.
    • Comments that are not nested appropriately will be relocated by a mod. Please keep the discussion neat and organized.
  3. Keep the discussion civil. If we ever do discuss text editors or iOS versus Android, we don't want the discussion turning into a war. Everyone's opinion is valid.

  4. Provide unique answers. (We all know that flexbox is the best thing since sliced bread.) If you do decide on a common answer, be detailed and give us an aspect of your answer that many might not be familiar with.

    • Don't just give your answer and walk away. Tell us why your answer is good. Go into detail.
    • If someone else has already given the same answer as you, don't duplicate their answer. Rather, upvote their post and reply to their answer if you have any additional points to make.
  5. If you're posting any code, please format it correctly.

    • If you're posting anything more than a snippet, consider using CodePen or Gist.

Other information

  1. If you're having trouble formatting your response, just click the Markdown Cheatsheet link underneath your answer box.
  2. I'll edit this thread down the road if I forgot something. I'll summarize my edits at the bottom of this post.

Have fun!

EDIT: Tweaked the formatting. Nested lists seem to be a bit bugged.

2 Answers

Kevin Korte
Kevin Korte
28,148 Points

First I'll say this is a great idea!

For me it's the CSS calc() function.

So easy to use, incredibly powerful, and pretty solid browser support to boot. I'm not sure why it's forgotten about so much. Even I'm guilty of it.

Who doesn't like fluid sizes like width: calc(100% - 20px);

http://caniuse.com/#feat=calc

Haha, thanks! It's something I've been pondering for months now, but I haven't had to time to put towards it. I hope it turns out well!

I do think that calc() is way underrated. A while back, I read an article on using calc to build a grid system. It solves all the issues with inconsistent padding in nested grids in a very elegant manner.

Sean T. Unwin
Sean T. Unwin
28,690 Points

calc() is all kinds of wonderful. Hopefully it will be utilized more often now that there is better mobile support.

Sean T. Unwin
Sean T. Unwin
28,690 Points

I feel that viewport units, such as vw and vh, are very handy for flexibility (literally and figuratively). This (these?) can be even more powerful when used with calc() as well (see Kevin Korte's post).

http://caniuse.com/#feat=viewport-units

One of the nice things about using viewport units is how I can create divs that occupy the entire viewport of the user. It's useful for making landing pages or sliders that immerse visitors.