Issue 184
Supporting browsers, scrolling, values and units, lonely icons, and SVG fill
News
Issue 184
Later this week I am heading off to Amsterdam for my first trip of the year, slightly worried I may have forgotten how to travel. I'll be speaking at the Fronteers meetup, and running a spec reading workshop. I'm looking forward to it, I'm sure that working through the multicol spec with a keen group will be as enlightening to me as it hopefully will be to them.
No sponsor this week, if you work for a company who might be interested in sponsoring a week or two of this newsletter, point them to this information, it would be a real help!
A varied assorted of things this week - enjoy!
Rachel Andrew, CSS Layout News
HTML, CSS and our vanishing industry entry points
I try not to constantly wade into the "everyone is angry about CSS" debates, but every so often I realise I'm deleting tweets that I know are too terse to really explain what I mean. Then I know I need to write a blog post. Here are my thoughts on CSS, frameworks and our vanishing entry points.
Learn
A Guide To CSS Support In Browsers — Smashing Magazine
In this article I outline the different types of CSS support issues, along with some ways you can currently deal with them and some things that might be coming soon.
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
I like things like this. Find out the different ways to change an SVG fill on hover.
Gradians and Turns: the quiet heroes of CSS angles - DEV Community 👩💻👨💻
Having just spent quite a bit of time thinking about CSS Values and Units, I liked this article which talks about two units you might not ever have really come across - gradians and turns.
Applying Styles Based on the User Scroll Position with Smart CSS • PQINA
"By mapping the current scroll offset to an attribute on the html element we can style elements on the page based on the current scroll position. We can use this to build, for example, a floating navigation component."
CSS values and units - CSS: Cascading Style Sheets | MDN
Something I've been working on recently is an overview page for CSS Values and Units over at MDN. Understanding the different kinds of data types used in CSS can be helpful, for example knowing why the values used for grid-area are unquoted (because they are identifiers and not strings).
Interesting
The ineffectiveness of lonely Icons - Matt Wilcox
I have very little visual memory, something which is actually a thing, and one I had no idea about until relatively recently. Discovering that other people could actually conjure up images in their brains was a revelation! One of the ways this manifests is that icons mean nothing to me. Earlier this week I was baffled by the dishwasher, as I could not work out which button started the thing. The play icon was near a word which said reset. my brain (which has allowed me to turn the machine on before) decided that the reset word was the most vital bit of information, and while I academically know the little triangle means play, which means start, it was overruled.
So I love this piece, reminding us that icons alone are not a good way to convey information. I wonder how many of these icon heavy UIs are created by designers who are very much on the opposite side of the spectrum to me, people who really do find that a picture paints a thousand words.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.