Best of CSS-TricksJune 2021

  1. 1
    Article
    Avatar of css_tricksCSS-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.

  2. 2
    Article
    Avatar of css_tricksCSS-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.

  3. 3
    Article
    Avatar of css_tricksCSS-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.

  4. 4
    Article
    Avatar of css_tricksCSS-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.

  5. 5
    Article
    Avatar of css_tricksCSS-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"

  6. 6
    Article
    Avatar of css_tricksCSS-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.

  7. 7
    Article
    Avatar of css_tricksCSS-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.