--- title: Best CSS-Tricks posts — June 2021 | daily.dev description: The most upvoted CSS-Tricks posts from June 2021, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2021/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2021/06 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — June 2021 | daily.dev og:description: The most upvoted CSS-Tricks posts from June 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — June 2021 1. 1 [](https://daily.dev/posts/front-end-testing-is-for-everyone-nio6nzxny "Front-End Testing is For Everyone") 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 [](https://daily.dev/posts/vs-code-extensions-for-html-ifch06h7y "VS Code Extensions for HTML") 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 [](https://daily.dev/posts/code-blocks-but-better-qn5r227bz "Code blocks, but better") 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 [](https://daily.dev/posts/detect-unused-classes-in-html-z6xddou8v "Detect Unused Classes in… HTML") 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 [](https://daily.dev/posts/target-blank--uwyb4eix3 "target="blank"") 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 [](https://daily.dev/posts/positioning-overlay-content-with-css-grid-pd-oowf24 "Positioning Overlay Content with CSS Grid") 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 [](https://daily.dev/posts/making-tables-with-sticky-header-and-footers-got-a-bit-easier-z9fjf-nsj "Making Tables With Sticky Header and Footers Got a Bit Easier") 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 and are sticky-able. 13 1 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2021/06#page","url":"https://daily.dev/sources/css_tricks/best-of/2021/06","name":"Best CSS-Tricks Posts — June 2021","description":"The most upvoted CSS-Tricks posts from June 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2021/06#items","numberOfItems":7,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/front-end-testing-is-for-everyone-nio6nzxny","name":"Front-End Testing is For Everyone"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/vs-code-extensions-for-html-ifch06h7y","name":"VS Code Extensions for HTML"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/code-blocks-but-better-qn5r227bz","name":"Code blocks, but better"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/detect-unused-classes-in-html-z6xddou8v","name":"Detect Unused Classes in… HTML"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/target-blank--uwyb4eix3","name":"target=\"blank\""},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/positioning-overlay-content-with-css-grid-pd-oowf24","name":"Positioning Overlay Content with CSS Grid"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/making-tables-with-sticky-header-and-footers-got-a-bit-easier-z9fjf-nsj","name":"Making Tables With Sticky Header and Footers Got a Bit Easier"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"June 2021"}]}]} ```