From the blog

✻ Miriam Suzanne has just published a great post about Loops in CSS Preprocessors:

We'll take a look at what loops can do, and how to use them in the major CSS preprocessors: Sass, Less, and Stylus. Each language provides a unique syntax, but they all get the job done.

CSS can't do loops. Preprocessors can do loops, like for, forEach and while. They each have their uses, even quite practical ones, and could potentially save you time.

✻ Chris looks at Input Masking which is a technique that aims to improve default input elements with JavaScript. Here’s an example:

There are lots of different plugins to use and, as with everything in front-end development, potential problems with performance and accessibility that might unintentionally affect your users. So be careful out there!

✻ In The Power of Changing Classes, Chris looks at why designers should learn how to toggle classes with JavaScript:

If you're looking to baby step yourself into JavaScript, learning to select things and changes classes without any library help at all is a great way to do that.

We look at Benjamin De Cock's uilang library which abstracts the idea into human language.

✻ Eduard Pochtar explains how to design a high contrast interface with preprocessors. This is for folks with disabilities that struggle to distinguish between elements because of their eye sight. Eduard then describes how he built a plugin in PostCSS to help make an alternate version of a stylesheet with all high-contrast colors.

✻ Catalin Rosu shifts through data from eight million websites and find some random interesting facts on HTML/SVG usage. Plenty of surprises and not-surprises in here.

✻ Inspired by a cool thing he saw on twitter dot com, Chris looked at how to visualize sentence length in a variety of interesting ways:

✻ bgcolor=white used to be a famous best practice for older browsers but now, not so much. Chris notes that it’s funny attached we can get to Web Design Best Practices™ without re-evaluating them. Even though, in this particular case, there are a few still-legit reasons to set a white background (although please do it with CSS!)

✻ Robin experimented with color fonts, a relatively new development in webfont technology:

With a color font, type designers can now embed multiple colors within the glyphs themselves. Then, a web designer can pick one of the options available with the font-variation-settings property in CSS. Below, I’ve made a demo that shows how this works with Trajan Color, a new font made by Adobe and now available with Typekit:

By using the font-feature-settings CSS property we can change the colors in a color font just like in the demo he made below:

✻ In a guest post, Pieter Biesemans came up with a bonafide CSS trick for making a webpage scroll horizontally:

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!

From around the web

Ire Aderinokun summarised her experience at Chrome Dev Summit 2016 and noted the top five things that she found most interesting to her.

✻ ✻ ✻ 

text-decoration-skip just landed in Chrome Canary. This is CSS property that allows us to easily style the underline of text:

Two things to note here:

  1. A while back, Marcin Wichary used the image above to show why we should have more control of underlines. He talks about how Medium uses a bunch of JavaScript to get around the limitations of browser support.

  2. Marie Mosley made a great update to the Almanac earlier this year with a post about the property and goes into a lot more depth if you’re interested.

✻ ✻ ✻ 

Manuel Matuzovic reminds us that print style sheets are still a thing:

Optimizing web pages for print is important because we want our sites to be as accessible as possible, no matter the medium. We shouldn’t make assumptions about our users and their behavior. People still print web pages. Just think about articles or blog posts, recipes, contact information, and directions or real estate sites. Someone somewhere will eventually try to print one of the pages you made.

Some notes from us.

What have you learned this week?

Robin Rendle: Earlier this week I watched Kenneth Ormandy’s delightful talk about web typography. He starts with a discussion about how we style our text in code editors but then takes a wide swipe across the whole spectrum of typography. 

There’s lots of tiny gotchas that are easily forgotten about, or missed entirely, when typesetting and Kenneth brings up ligatures and numbers as an example. So if you haven’t read or watched anything about typesetting in a while then I recommend you check out his talk as soon as possible.

Chris Coyier: It's pretty cool that we can copy to the clipboard natively now. Remember you can do it from the browser console as well! As ever, there are plenty of UX things to consider.


Until next time!
Team CSS-Tricks

Any of y'all involved with web education? There is a page now that explains the variety of ways in which CodePen can be useful that.
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list