3 Underused CSS Features to Learn for 2020

bryanlrobinson.com bryanlrobinson.com3 years ago in #Dev Love192

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. 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:…

Like to keep reading?

This article first appeared on bryanlrobinson.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply