Banner image featuring multi-column vector illustration with title "CSS Features for 2020"

CSS has a whole lot of power. There are properties and values for any number of amazing designs. With all that power comes a lot to remember.

If you don't know about all the tools in your toolbox, how will you find the right one for the job?

In this post, we'll take a look at three lesser-used, but super useful tools for various jobs in CSS.

1. How to have readable line-lengths with the ch unit

There is a plethora of amazing length units in CSS, so why let px and rems have all the fun?

We've known for a long time that line length has a lot to do with how easily a person can read content. We've had more issues determining the proper size with static lengths like pixels. Enter the ch length unit in CSS.

The definition of the ch unit is the width of the 0 character in the current font size. While not perfect, this allows us to specify a width for a column of content to be equal to an "ideal" number of characters. In the Smashing Magazine article linked above, the author indicates a comfortable line length to be between 45 and 85 characters wide. Instead of doing calculations and figuring out the proper amount of pixels, we can substitute the "character unit" to keep things balanced.

.centered-column {
width: 90vw;
max-width: 75ch;
margin-left: auto;
margin-right: auto;
}

With this snippet, you now have a centered column that will never exceed a maximum recommendation.

If you adjust the font size at various breakpoints, the max-width of the column will expand or contract. If you decide to change fonts, the max-width will adjust.

The one caveat I'll throw in here is that you don't want to use this for precise measurements. This should always be approximations. Since the ch unit keys off of the 0 glyph in the font, greater or fewer characters may be on each line. Take this relatively simple example.

Image showing four 0s side by side and a group of Ms where only 2 Ms fit next to each other

In the image above, only two M characters fit side by side in the same space as four 0 characters. That's because each capital M is roughly 36 pixels wide; each 0 is 20 pixels. Combine this with each font having different glyphs and you get something not precise. Since our code example doesn't worry about precision and just wants the line length around 75 characters wide, we're safe.

2. How to simplify your CSS with CSS Attribute selectors

I'm not overly surprised that ch units don't have much popularity. They feel very tied in with design concerns. Attribute selectors, however, shock me in their lack of use. They're so versatile and feel very programatic.

At their core, Attribute selectors allow you to select an HTML element that has a specific attribute or has a certain value of an attribute.

One of my favorite new uses of the attribute selector comes from Andy Bell's amazing new CSS reset.

In his reset -- which is full of well-thought-out configurations -- he uses attribute selectors to remove margins and paddings only from uls and ols that have classes. The thinking being that if you set a class on the item, you probably are resetting the list's styles. If you don't have a class, you probably want a bulleted or numbered list.

ul[class],  
ol[class]
{
padding: 0;
margin: 0;
}

You could also apply this to anchor tags that have a target attribute. Use this in conjunction with an ::after element to add a small icon for links that will take a user into a popup window.

a[target] {
padding-right: 2ch;
}

a[target]::after {
background-image: url(icon.svg);
width: 1.75ch;
height: 1em;
...etc.
}

Using that same method for icons, you could apply a Twitter logo to any URLs that begin with Twitter's URL.

a[href^="https://twitter.com"] {
...styles
}

This will target any anchor tag with an href that starts with the string "https://twitter.com".

Conversely, you can also check the end of a string for perhaps .pdf to find all the links to PDFs on the page.

a[href$=".pdf"] {
...styles
}

There are so many handy recipes you can concoct with the attribute selectors. I wish more people knew about them and used them.

3. How to create multiple columns of flowing text or elements with CSS Multi-column

Image of multicolumn in 3 columns at desktop and 2 at tablet

Even before CSS Grid became available, we could do some minor work in columns outside of tables. CSS Multi-column is a specification that allows us to have text and elements flow through multiple columns.

You can use it with any amount of text and give it either a specific number of columns or a column-width to match against.

This can create interesting interstitial layouts in the middle of a blog post.

.column-content {
column-width: 250px; /* Columns with max-width of 250px
/* column-count: 2; Always 2 columns */

column-gap: 2rem; /* Columns with 2rem of space in between */
}

There's even more you can do with things like column-rule for borders, and column-span to create breaks in your columns for new headers.

A bright future for CSS with the past

While the second half of the 2010s has been amazing for new CSS (things like Flexbox and Grid), it's important to remember there are a lot of additional powers from the past.

The features mentioned in this post have been in browsers for years and don't get a lot of use. While experimenting with new cool toys this holiday season, don't forget to remember the past cool toys.

Question: What CSS feature do you think is underutilized by the industry as a whole?

Send me a Tweet to let me know.

Webmentions

  1. jkolenko@ukr.net
    We bring to your attention a selection with links to new materials from the frontend area and around it. Media | Web development | CSS | Javascript | Browsers MediaCSSSR Podcast, News 512 – V8 8, Vue 3, microbrowsers, RUM, security releases and pollsUnderJS Podcast # 12 – Denis Radin about conferences and WebGL (Tube) Podcast Frontend Youth (18+) # 119 Balancing over the shoulderReact Five Minute Podcast: EffectorCSSSR Podcast, Remote Talk # 10 – Vitaliy Slobodin, Rostov-on-Don, JS after C #, PhantomJS, work in GitLabMinskCSS Meetup # 7 – December 12, 2019 Web development • Hacking with Unicode (on the example of GitHub) • 30 Utilities for Firefox Developer Tools • How to quickly test and inspect your website?What is TDD and BDD on the fingers, and what does the front-end know about themNew experimental look CSS-live.ruState of JavaScript 2019. Web Developer Annual Survey Results • My Perfect Stack of 2020: A New Stack for a New Generation Adding dynamic and asynchronous functionality to JAMstack sites Chris Coyer: Is Web Development Today Easier or More Complex than It Was 10 Years Ago?The modern web is becoming unusable, user-hostile wastelandBest practices for using service workers in developmentFront-end 2020 Roadmap and trends | What to learn in 2020? CSS • Top 5 Reasons Why I Like Custom CSS Properties • Level 3 CSS Writing Modes officially becomes W3C standardRTL Styling 101 – A detailed guide to using RTL in CSS Dynamic color based on data using JavaScript, HSL and CSS variables your poisonUnderstanding CSS Positioning 3 little-used CSS features to learn in 2020 Customization of the checkbox according to the 2020 versionCSS minimalist icon library Modern typography scaling Flexible caption images with captions Alignment in Flexbox. Visual cheat sheet by margins JavascriptV8 v8.0 releaseSvelte 3 reviewThreading on the web with module workers Scroll, Refraction, and Shader Effects with Three.js and ReactDeep Immersion in TypeScript Types – Part 2: Absence of Value A look at all 13 JavaScript Proxy traps BrowsersDevelopers can now publish Edge extensions on Chromium in Microsoft Edge AddonsChrome 79 update for Android leads to the disappearance of these WebView-based applications We apologize for any typos or broken / duplicated links. If you notice a problem – please write in a personal email, we try to quickly fix them. Last week digest. Material prepared dersmoll and alekskorovin.
  2. Published on 12 January 2020 in Weekly Useful Links Stéphanie Walter Senior UX Designer - Mobile Expert Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE) Follow on Twitter Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…This week’s selection: signification of icons, front-end performance checklist, task flow vs user flow, dark mode, interesting CSS features to play with, min/max-width in CSS, understanding CSS position, hierarchy in UI Design, a guide to theTerminal, measuring the value of design systems, prototyping hover, Svelte framework, Web components, some accessibility checking tools, etc.#Now – what I’m up toI’m teaching User Experience for native apps and responsive websites again this year. So I spend some time updating the lessons. Part of this course is teaching students about native and web capabilities on mobile so I asked on twitter “in 2020 what do you think you can do in native apps/with mobiles phones that is not possible on a website on a phone?” Answers are really interesting. Things move fast on the web so I will update my talk “Super Secret Powers of Mobile Browsers” and maybe write an article about all of those capabilities when I find more time.TL;DNR the one you should not miss#Icons“Hamburger ☰ Heaven” nice article to remind us that what we take for granted like the signification of the burger or the magnifying glasses for search icon might not be understood by people with different cultures and mental modelsInteresting article#UX Design⭐ This is a really nice article with an easy to understand example: “UX task flows vs. user flows, as demonstrated by pancakes“ “Dark Isn’t Just a Mode” a great article on how to design for dark mode beyond the whole trend at the moment, he explains contrast and color really nicely Top 10 UX Articles of 2019 #UI DesignInteresting broad introduction for anyone starting in the UI design field: Fundamentals of Hierarchy in Interface Design (UI) Haha looks like I missed this trend, not sure I missed much: Neumorphism will NOT be a huge trend in 20204 ways to prototype a hover state: InVision, Framer, Sketch, Figma” I’m curious about Adobe XD now. I usually build simple animations directly in HTML and CSS and use Flinto for more complex ones #DesignSystems Measuring the value of design systems: “when participants had access to a design system they completed their objective 34% faster than without a design system.” Interesting data to help you sell a design system to your company “There Is No Design System” Move away from thinking of design systems as an actual thing and more as a way of working better, more efficiently, and more creatively so that we can build great experiences for our users. #FrontEnd“Why I moved from React to Svelte and others will follow” oh another JS framework ^^ “Why We Use Web Components” Viljami Salminen debunking a few myths about Web Components “Understanding positioning in CSS” a good article to start the week with quick reminders about CSS. Remember you aha moment when you finally understood relative and absolute and the relationship between? #Video Games“Borderlands 3’s Biggest Problem? It Already Feels Dated” I would not say dated but yes all of those problems are annoying and disappointing for a game launcher in 2019#Hiring“What I learnt from rejecting design candidates— and what you shouldn’t do as an applicant” point 4. Don’t copy. I repeat. Do not copy, YES YES and YES. It happened to me at least 4 times already, confronted the candidate and he kept lying…Inspiration, fun experiments and great ideas#Designers #FunSeth Coolen created a serie of small videos that make fun of designers and it’s hilarious: Figma users, Sketch users, Dribbble is Literally Ruining Design, etc.#Fun UIHooo look flash is back baby 👉👉 “Flat UI and a half”#SVGSarah Drasner created a fun Z Zebra Facts animation in SVGTutorials#CSS“3 underused CSS features to learn for 2020” ch units, CSS attribute selectors and multiple columns, again I think the ch trick for typography is quite interesting ⭐ This is a great article you should bookmark for future reference: “Min and Max Width/Height in CSS“. I especially love the Max Width and the ch unit trick for typography. #Terminal“A Designer’s Guide to the Terminal” I’m not sure why the is a guide for designers I would say it’s a nice introduction yo anyone who wants to understand terminal commandsUseful tools and plugins that will make your life easy#PerformanceYou all love a good checklist so here we go: “Front-End Performance Checklist 2020”#ColorsKolormark lets you name colors. If you want to name one for free use my coupon “9XGDO7” Obviously I had to name the yellow and purple on my site. Meet “Plump is the New Plum” and “Zero Fox Given Yellow” 🙂#Design #AccessibilitySome tools to help you build accessible good looking designsAre you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.
  3. Ricky Onsman Ricky Onsman
    Excellent choices that should be used more.
  4. Russell Heimlich Russell Heimlich
    Using a max-width set in ch units for a comfortable line length is the hotness
  5. Bryan Robinson Bryan Robinson
    Yes! Attribute selectors are super handy and multi column gives us something no other layout mechanism does :D
  6. James Ferrell James Ferrell
    I use attribute selectors and multicolumn layout all the damn time 👍
  7. Stephen Bell Stephen Bell
    I love object-position (combined with object-fit) for cropping photos while keeping focal point in view.
  8. CSS {IRL} CSS {IRL}
    Some gems in here, especially some great tips for using attribute selectors!
  9. Bryan Robinson Bryan Robinson
    When I discovered using translate for centering absolute/fixed items, I wanted to go back in time and tell my younger, IE6-bug-fixing self that everything was going to be ok later in life :D
  10. Brian Haferkamp Brian Haferkamp
    Totally agree. I can think of two scenarios I use quite often: using an element to overlap two sections and centering an absolute or fixed position element.
  11. Bryan Robinson Bryan Robinson
    Very true! I also think more should be talked about the benefits of the transform functions separate from animations
  12. Brian Haferkamp Brian Haferkamp
    Transition Transform Animation For as powerful and popular as animation is I don't hear devs talk about them much. However, I use them all the time in projects. #CSS3