Monthly Archives: March 2018

We’ve blogged about responsive tables a number of times over the years. There’s a variety of techniques, and which you choose should be based on the data in the table and the UX you’re going for. But many of them rely upon resetting a table element’s natural display value to something else, for example display: block. Steve Faulkner warns us:

When CSS display: block or display: grid or display: flex is set on the table element, bad things happen. …

The post Short note on what CSS display properties do to table semantics appeared first on CSS-Tricks.

Have you ever lost your voice? How did you handle that? Perhaps you carried a notebook and pen to scribble notes. Or jotted quick texts on your phone.

Have you ever traveled somewhere that you didn’t speak or understand the language everyone around you was speaking? How did you order food, or buy a train ticket? Perhaps you used a translation phrasebook, or Google translate. Perhaps you relied mostly on physical gestures.

All of these solutions are examples of communication methods — tools and strategies — that you may have used before to solve everyday communicative challenges. The preceding examples are temporary solutions to temporary challenges. Your laryngitis cleared up. You returned home, where accomplishing daily tasks in your native tongue is almost effortless. Now imagine that these situational obstacles were somehow permanent.

The post A Browser-Based, Open Source Tool for Alternative Communication appeared first on CSS-Tricks.

There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code.

• Umar Hansa: Improving the performance of Soylent.com with local overrides and font-display
• Harry Roberts: Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses

The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools …

The post Chrome DevTools “Local Overrides” appeared first on CSS-Tricks.

Say you’re trying to pull off a design effect where the corner of an element are cut off. Maybe you’re a Battlestar Galactica fan? Or maybe you just like the unusual effect of it, since it avoids looking like a typical rectangle.

I suspect there are many ways to do it. Certainly, you could use multiple backgrounds to place images in the corners. You could just as well use a flexible SVG shape placed in the background. I bet …

The post Notched Boxes appeared first on CSS-Tricks.