Are your CSS skills like mine? I realized recently that I have been neglecting CSS for far too long. For a long time you could only do very basic things with it. Then they invented all this new CSS3 stuff, but only a few browsers implemented those new techniques, and it didn’t seem worth my time to learn the minutia of something that was not even widely adopted. Now, we cannot escape the fact that fancy CSS techniques are well supported by modern browsers, and they do a lot more than just font colors and background images.
For a long time, I would have argued that CSS is not a programming language. And for a long time it wasn’t. But now I think it actually deserves to be thought of as programming. Certainly it is not imperative. There are no scripts. But that’s because it is declarative. It’s a declarative programming language. You don’t have to tell it how to do things. You tell it what you want to see and the browser sees to executing it. It’s not really important whether you agree with me about the semantics. What’s important is that CSS is sophisticated, it’s sometimes challenging, there is a lot to learn, and I have become convinced that a front-end developer needs to know it.
It’s hard to gather good resources for learning CSS. A large, thorough book might be helpful, but I don’t want to pay for one. For now, in this “master class”, we are going to Google around and begin to compile a reading list and an overall plan of how to master CSS techniques.
Note: we will not cover the extremely basic stuff like width, border-style, font-family, etc. Our focus will be more advanced, more recent techniques.
Let’s start with some reading, and we will also make notes of some keywords we should come back and study. We will add these to a kind of map of CSS that will try to lay all of it out in full so at a glance we can tell which things we need to learn better.
I’m organizing this as a mind map online. I’m building the original here: https://app.mindmup.com/map/_free/2019/06/ddd8e100919a11e988255f6323b867cd . The current view is screen-capped below.
https://tutorialzine.com/2014/07/20-impressive-css3-techniques-libraries-and-examples. This is a list of examples of CSS. There are some interesting examples in here and a lot of using CSS to create images. I’m not a fan of using CSS to create graphics from whole cloth. That’s not its purpose, and it makes a lot more sense to use SVG for that. But it might still prove useful practice in using CSS. Some of this could become a practical part of a web page, and some of it is amazing.
This page reminds us that the new/advanced selectors are important. https://www.webfx.com/blog/web-design/3-advanced-css3-techniques-you-should-learn/ . I’ll add some of these selectors to my CSS map.
- :hover
- :active
- :first-child
- :first-of-type
- :nth-child()
- :not
I still sometimes see comments like “best viewed on WebKit browsers” but it’s hard to say how old that comment is because people don’t date things. I think everything should be dated. As we go, let’s also try to be aware of which parts of CSS are well supported by most browsers nowadays.
On that note, the next thing in that article is animation using -webkit-transition. If you have to put a “-webkit-” prefix on it, I’m not interested. That means it isn’t stable enough. However, according to w3schools, the “transition” property is well supported by all major browsers now. I for one will not be using any prefixed backup properties in my own CSS.
Here I made a little square that rotates (via transition) when you hover on it: https://codepen.io/adamcross/pen/rELdpL . I wouldn’t use that often. It looks like transition is limited to animating a change between two states, and that limits the kinds of animations that can be created with it. There are other techniques though.
Before talking more about animation, I’ll repeat that I hate extraneous animation on a web page. However, animation can be useful feedback for button clicks.
Keyframes looks like how we create more complex CSS animations. In the same codepen above I added a blue square that wobbles a little when you hover on it, using keyframes. Very likely one can do much more interesting things with this. Also, hover effects are not very useful to the user. He knows when he’s hovering over something. This sort of effect should indicate something. Perhaps such a proper use will come to mind so long as we know that it is available for use.
Let’s look at the “shape-outside” property and see where that leads us. See https://css-tricks.com/almanac/properties/s/shape-outside/ . In the examples, we see shape-outside applied to floating elements. Maybe it only makes sense for such elements. It’s about how other page elements flow around it. Of particular interest is that we can use it with geometric figures.
The use of shapes in this way in a CSS value is part of why I call it a programming language now. Exactly what is going on with a value like circle(50%). When did CSS define this “circle” thing, and where can it be used?
On MDN web docs we see these shape objects described here: https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape . The docs refer to them as instances of <basic-shape>, a CSS data type. We have these, listed below. And they can be used with clip-path, shape-outside, and offset-path.
- inset
- circle
- ellipse
- polygon
- path
This is useful reference for flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ . Flex is so much easier than trying to figure out all the crazy things people do with floats.
Speaking of float, let’s see if we can figure out how float and clear work. When I read the definitions and usage, it seems so simple. This page goes into some depth about how to use floats for creating a grids and such: https://www.w3schools.com/Css/css_float.asp. Just stacking floated boxes can create horizontal grids. Creating side-by-side columns was considered a difficult problem in web pages before we had flex. I made a little codepen: https://codepen.io/adamcross/pen/orLdKK .
I have often wondered with the height property does nothing most of the time when you might actually use it. In this side-by-side column example using floats, setting the height of an element to 100% does nothing. They are contained in a larger div element—at least nominally—but for all practical purposes the height of that outer div element is 0. Adding overflow: auto makes the outer div have the correct height, but setting the height of a column to be 100% still has no effect.
I found a StackOverflow QA page about this interaction between float and height. https://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el .
Here’s another useful page about floats and clear: https://css-tricks.com/all-about-floats/ .
It’s hard to find any information on the actual specification—what the height property is supposed to do on a floated element. When you Google it, all you get is information about clearfix and column layouts. Where are the fundamentals?
According to this page, Flex does not work in Internet Explorer 10. To that I say, “who care?” But people care if a lot of their users use IE10. Bootstrap switched to using Flex with Boostrap 4. I wonder if it no longer works with IE10 or if it has backup stuff for supporting that old thing.
Box sizing is important to bear in mind because the default behavior, bizarrely, is to add extra size for padding in addition to the element’s nominal size. https://www.w3schools.com/css/css3_box-sizing.asp
CSS Grid is something I’ve never used even once for anything, and it might be time to learn. Here’s an article: https://css-tricks.com/snippets/css/complete-guide-grid/ . I’d certainly inquire about browser support before using it anywhere.
Next up, calc comes to mind. I’ve never used it, and it’s probably time to learn. Calc looks like it would be especially useful for subtracting fixed lengths from percentages. https://developer.mozilla.org/en-US/docs/Web/CSS/calc .
CSS variables. I just saw someone use CSS variables recently for the first time. It was fairly clever. They used it to set at default value of a variable and then override it for specific instances. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
One could probably spend weeks learning to use CSS transforms https://www.w3schools.com/cssref/css3_pr_transform.asp, especially if we want to understand 3D transforms.
adamcross.blog 
One thought on “CSS Master Class (part I)”