Best of CSS-Tricks — June 2021

1. 1
   Article

   CSS-Tricks·5y

   Front-End Testing is For Everyone

   There are many types of tests and perhaps that is where some of the initial fear or confusion comes from. Testing is an automated tool that finds errors in your development as early as possible. Tests also serve as a reminder that you may have forgotten to check your own work in a certain area.

   56

   4
2. 2
   Article

   CSS-Tricks·5y

   VS Code Extensions for HTML

   This week we look at some extensions for VS Code that make writing and editing HTML better. These are just a handful that I’ve tried and liked to some degree. You may not like all of them. Maybe some of them don’t appeal to you, or feel like more clutter than you need.

   52

   7
3. 3
   Article

   CSS-Tricks·5y

   Code blocks, but better

   I've been exploring ways to improve the user experience of code blocks. In this post, I'll share with you how I built a custom code block component. This is not a tutorial, but I hope you can discover something new. I'll be using the code block of my own website as the demo.

   32

   2
4. 4
   Article

   CSS-Tricks·5y

   Detect Unused Classes in… HTML

   Unused CSS is a hard problem because of how hard it is to know for sure know if a ruleset is unused. Robert Kieffer's solution is to load up document.styleSheets and find all the rules (the ones that are classes) Then, use a MutationObserver to watch the DOM for all HTML. If the HTML has a class not found in a stylesheet, report it.

   21

   2
5. 5
   Article

   CSS-Tricks·5y

   target="blank"

   target="_blank" is a special keyword that will open links in a new tab every time. The blank part is just a name. It could be target="foo" or, perhaps to foreshadow the purpose here: target="open-new-links-in-this-space"

   15
6. 6
   Article

   CSS-Tricks·5y

   Positioning Overlay Content with CSS Grid

   With CSS Grid, positioning overlay elements can be built using more logical, readable properties and values. The following are a few examples of where these grid properties come in handy. It will help to read up on grid-template-areas and grid-area properties if you’re not yet familiar with them.

   13

   1
7. 7
   Article

   CSS-Tricks·5y

   Making Tables With Sticky Header and Footers Got a Bit Easier

   Chromium revamps tables in the rendering engine in Chromium, bringing tables up to speed. It’s not just the stickiness that was fixed, but all sorts of things. The headline to me is that <thead> and <tfoot> are sticky-able.

   13

   1