Share your CSS knowledge

Today I learnt about the :placeholder-shown pseudo-selector thanks to Daniel’s Tweet.

What are some things about CSS that you've learnt about recently or something you already knew and think others would benefit from knowing?

Comments

[Mazi Iheanacho]

Place-items can be used in place of
justify-content and align-items

[Mark]

I LOVE absolutely positioned ::before and ::after pseudo-elements. I usually use them to either draw lines underneath elements or additional boxes the full size of the element, which you can do wackier things to (like transforms) than using things like borders or background colors.

Example of an underline for a link:

.link {
    position: relative;
}

.link::after {
    /* 'content' value is required - this is just blank */
    content: ""; 
    position: absolute;
    display: block; 

    /* matches the width of the nearest position: relative parent */
    width: 100% 
    height: 2px;

    /* anchor it to the bottom-left corner */
    bottom: 0;
    left: 0;

    background-color: purple;
}

I use them all the time, so I set up a little SASS mixin to save some keystrokes and clean up my code:

/* the mixin (simplified version) */
@mixin pseudo($type) {

    content: "";
    position: absolute;
    display: block;

    if($type == width) {
        width: 100%;
    }
}

/* the code above with mixin */
.link {
    position: relative;

    &::after {
        @include pseudo(width);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: purple;
    }
}

Once you start playing around with them you'll find there's all kinds of fun stuff you can do without having to change the HTML at all!

[Bauke Regnerus]

Made use of the :first-of-type pseudo-class fir the first time.

[Chen Hui Jing]

I tend to have multiple languages on my presentations and use the :lang() pseudo-class to tweak the styles for phrases/sentences that are not the main language.

developer.mozilla.org/en-US/docs/W...

[Eric Valois]

What, I never heard of it! Awesome!

[Filipa Simão]

place-items - shorthand for align-items and justify-items
place-content - shorthand for align-content and justify-content

[niyasrahman]

*{
  border:1px solid red;
}

[AxelleDRouge]

Recently, in an effort to refactor (read rewrite) an app that was terribly written (like really really badly to the point of creating BIG security holes) I learned a lot of new things about css and scss (and React, and webpack, and Jest, and TDD, and security driven development, and...). From CSS Grid to beautifully manage the general layout of the page to css variables for theming (thanks for that Dev.to), with @mixin and @import ... soo many things to create clean, short, organized and efficient css styles

[Kyle Griffin]

:not can be stacked, to allow for multiple classes to be excluded:

.grid:not(.blue):not(.red) { }

This is because .grid:not(.blue), .grid:not(.red) will include both supposedly excluded classes as one includes the other.

[Glenn Carremans]

I think this blog post I made some time ago is a nice CSS trick I learned.

Code block $ prefix

Glenn Carremans ・ Feb 27 ・ 2 min read

#webdev #css #devtips #frontend

[Nick Taylor]

Nice! Thanks for sharing.

[Nicholas Stimpson]

I'm very much taken by display:contents at the moment. When creating different cases in responsive layouts, the ability it gives to flatten the box tree has a surprising number of uses.