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
There is a plethora of amazing length units in CSS, so why let
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.
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.
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
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.
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.
Using that same method for icons, you could apply a Twitter logo to any URLs that begin with Twitter's URL.
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
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
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-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.
- 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 2020 “4 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 малоиспользуемые функции CSS для изучения в 2020 году bryanlrobinson.com/blog/three-und…
- Totally gobsmacked as they say in Britain. The CSS ch unit lets you ensure a readable maximum line length. bryanlrobinson.com/blog/three-und…
- 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