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

[Hao]

Several tricks that I used very often:

Select all the elements with same class except for the first one

While you complaining there's no :not(:first-of-class) selector, you can do this instead:

.foo + .foo {
  margin-top: 1rem;
}

Mimicking grid-gap without using grid layout:

.album {
  --gap: 1rem;
  padding-top: var(--gap);
  padding-left: var(--gap);
}

.album > .photo {
  margin-right: var(--gap);
  margin-bottom: var(--gap);
}

Clear all the predefined styles

a {
  display: block;
  text-decoration: none;
  /* blah blah blah... */
}

a.logo {
  /* This disables all the rules defined above */
  all: unset;
  /* start from fresh */
}

[Freddie]

I never knew about all! Thank you for this!

[James Thomson]

object-fit is one I haven't used too much until recently (due to browser support). Once you can finally get off that IE11 train the web world really opens up!

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

[Mark]

My favorite thing about object-fit is that you can use it with img srcset for responsive background images! The picture element is cool if you really need to be serving differently cropped images, but whenever I can get away with same aspect ratio and not supporting IE, I always use object-fit + srcset for all background images.

[James Thomson]

Definitely a good use case! Did this myself in a recent project in fact.

[Saurabh]

isn't is similar to background cover?

[James Thomson]

Indeed it is, but can be used on replaced elements, such as image and video

[Clinton Welewa]

This property comes in handy when using the img selector, it could be responsive very good one tho!.

[FidelVe]

I didn't learn this recently but I tend to forget it from time to time.

The nth-child() selector every now and then throws me off.

I don't know why but I always interpret it like "select the nth child of this element", when in reality is "select this element if it is also the nth child of its parent", to put it in code, let's say we have this structure:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

If I want to select the first div with the class name "child", I always first write .parent:nth-child(1), then realize my mistake when the code is not working and rewrite it as .child:nth-child(1)

[Emmanuel Raymond]

Wow...today I learned. Thank you ;)

[Ben Halpern]

Not that it's hidden in the depths of css or anything, position: sticky is not so well known/utilized IMO.

Why it's time to embrace position sticky

Matt Studdert ・ Oct 15 '18 ・ 2 min read

#webdev #css #devtips #learning

Same with CSS variables...

CSS Variables Cheat Sheet

Milos Protic ・ Apr 21 ・ 4 min read

#css #webdev

[Nick Taylor]

That made me think of this funny Tweet from @chriscoyier today about position sticky.

Chris Coyier

@chriscoyier

i don’t know who needs to hear this but if you put a position: sticky; element in a rotated parent, it’s funny and weird.

codepen.io/team/shoptalks…

18:35 PM - 14 Nov 2019

24 134

I think CSS variables are starting to gain steam. It makes a lot of sense for theming. DEV, for those who aren't aware, uses CSS variables quite a bit for theming.

@davidkpiano recently talked about his heavy use of them for animations on a recent episode of Shop Talk.

381: Animation with the Keyframers

Shop Talk Show

iTunes Overcast Android RSS

1x [ x ]

Him and David Shaw have this awesome Twitch stream where they reverse engineer animations. They're called the Keyframers and you can follow them on Twitch or on the Twitters.

the @keyframers

@keyframers

Navbar Nudging with @chriscoyier!

Watch the very first #THREEFRAMERS guest collaboration where we tackle a deceptively difficult navigation toggle.

💻 @CodePen Demo: cdpn.io/pen/xvoBrx
📺 @YouTube Video: youtu.be/wdCgNoXFsgs

#webdev #css #js #animation #tutorial

21:32 PM - 13 Aug 2019

31 167

It's really an amazing thing to watch.

[Steve Clark 🤷‍♀️]

As I learned instead of writing six lines of JS to lock a nav bar I place, position:sticky; took care of it.

[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!

[Andrew McKeever]

Using the tilda to target siblings has huge use cases

.oneElement ~.anotherElement

[Saurabh]

I once used :placeholder-shown thing to make a material design like floating input label.

[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!

[Christina Gorton]

Also this 😀
thepracticaldev.s3.amazonaws.com/i...

[Tyler Hall]

😯

[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.