At our September meeting, we started with some news and follow-ups that came up over the summer.
We looked at an old-school site with a lot of animated GIF activity (it has now been suspended), but we noted that too much animation can be detrimental to users: Designing Safer Web Animation For Motion Sensitivity.
Our main topic was “New CSS Ideas.” We looked at four new properties that work in Firefox but are not entirely supported in other browsers. Open these examples in Firefox:
- Outline — Looks like a border, but it does not expand the size of the box, so it is good for de-bugging and testing layouts. See more at W3Schools.
- Outline-offset — Adds some space between the outline and the box.
- Resize — This property lets the user expand the size of the box. We played with an example and found that the rest of the page is reflowed when the box is resized. There is a nice interactive example at this CodePen page.
- Display:table — This property, among other things, is a way to center text vertically in a box, something for which CSS does not have a property. We will re-visit this topic when we do some more work on layouts.