Today I learned about...
css

TIL about will-change in CSS. It’s a way to hint to browsers that certain CSS properties of an element are likely to change. It’s mostly used for animations, but it can be used for other things too.

It should be noted that it should be used sparingly but if you’re ever coming across a janky animation, remember that you should be animating transforms and opacities and maybe throw in a will-change for good measure. Maybe even consider removing will-change after animations complete, since leaving it on can waste memory.

TIL that you can use scroll-margin to define outsets for the defined scroll area. It’s very much like margin but it only applies it whenever there is a scroll to mechanism.

.scroll-margin-top {
	scroll-margin-top: 100px;
}

Check it out

TIL about :user-valid and :user-invalid pseudo-class selectors! They function similarly to :valid and :invalid but :user-valid and :user-invalid are only applied only after a user has significantly interacted with the input.

In the example below, you’ll notice that the first two inputs will not have any border styling applied until the user has interacted with the input. Conversely, the last two inputs will have border styling applied immediately 🫢.

Check it out

TIL about this neat little tool that lets you test your CSS nth-child and nth-of-type selectors.

Check it out

TIL, it’s pretty easy to stack elements in CSS, without having to use positioning! It’s a litle bit more verbose to do it in tailwind, but it’s the same idea.

.parent {
  display: grid;
}

.child {
  grid-area 1 / 1
}

TIL about Fontsource, a free Vercel resource that provides you with information on how to easily install and self-host web fonts. They support all Google Fonts, as well as open source ones!

Check it out

This one’s pretty sweet and I’ve been reaching for it a lot lately at work! Rather than having multiple className conditions, you can use a data-attribute to manage your state.

This is not only a great way to keep your component clean but also allows you to target any state pertinent to your component without JavaScript! Mind you, I’m assuming you’re using something like Tailwind for your styling.

// no reliance on utility functions like `twMerge`
<div
	data-state-can-scroll={canScroll}
	className="data-[state-can-scroll=false]:hidden"
>
	Hidden when canScroll is false!
</div>

TIL about the following…

    /* top, left, right, button, are all set to to the same value */
    .box {
      inset: 0;
    }

1. The inset property is a shorthand for top, right, bottom, and left properties.
2. Absolute elements can only be contained by other elements using Positioned layout.
3. Positioned elements will always render on top of non-positioned ones
4. Stacking context is the stacking order of elements that are positioned.
   • We can create a stacking context by combining a non-static position with a z-index. So position absolute and z-index will create a stacking context.
   • We can also create one by setting opacity to less than 1.
   • Check out the link above for more info.
5. The isolation property allows you to create a stacking context. We can add this to a parent element and then we can forget about having to add a position: relative and z-index to the children. It is the lightest weight way to create a stacking context.
6. The z-index property can be used in a flexbox the same way as it can be used with a positioned element.

TIL about the stacking context inspector. It’s a tool that allows you to inspect the stacking context of an element.

Check it out

TIL that there’s a tool to help you apply color filters to your dom nodes!

Check it out

TIL margin is meant to increase the distance between siblings. It is not meant to increase the gap between a child and its parent’s bounding box; that’s what padding is for.

width looks up the tree but height looks down the tree. An element’s width is calculated based on its parent’s size, but an element’s height is calculated based on its children.

Thanks Josh Comeau!

😆 while going through a CSS workshop, I came across this list of CSS mistakes. Be humble folks. We all mistakes.

Here’s a list (probably not complete) set of inheritable css properties.

TIL about the unset keyword in CSS; it resets the property value from the one it inherited from its parent and it it doesn’t natrually inherit from its parent, it sets it to its initial value.

Check it out

We tried to use some CSS variables we defined inside of the :root with our tailwind config and even though tailwind let’s you do that, the outputted CSS isn’t actually valid 🤯! The media query declarations are processed while our CSS is being parsed!

:root {
	--mobile-breakpoint: 600px;
	--tablet-breakpoint: 900px;
}

/* This gets processed before the CSS is parsed */
/* So the media query is invalid */
@media(max-width: var(--mobile-breakpoint)) {
	.showMeGoing {
    visibility: visible;
  }
}

So there’s a kind of new styling solution for the web called stylex brought to you by Facebook. I haven’t used it yet, but damn, it looks neat y’all.

Check it out

Alright, I’m not the greatest at CSS, but I respect those people, such as Josh Comeau that are! TIL (from reading his blog post) the following about some CSS attributes and how they relate to grid:

• justify: deals with columns
• align: deals with rows
• content: deals with the grid struture
• items: deals with the DOM nodes within the grid structure

For example, align-items: center can loosely be translated into: In the context of the row, these DOM nodes, center them... bro. Seriously, go read his article.

Check it out

TIL that css var can accept a fallback! If we’re setting the variable with some JS and this JS code for some reason or another fails to run, we can set a sensible fallback and present our users with at least something adjacent to what we wanted😊!

color: var(--someVariable, #888888);

Check it out

TIL that there is CSS scroll driven animations. They don’t have great browser support (still experimental) but I’m using it on my site 🤣.

TIL that there’s a sick new css feature dropping soon: container queries. I haven’t played around with them much myself but based on what I’ve seen, they allow developers to now not only make layout changes via css based on the viewport but also based on the size of an elements containining element.

A lot of people are pretty hyped about this feature and calling it the next evolution of responsive design on the web.

Check it out

There’s a neat little css function that lets you retrieve the value of an attribute of the selected element and use it in the stylesheet!

For example:

<h1 data-color="red">Hello</h1>

h1 {
	color: attr(data-color);
}

Would generate an h1 with red text!

Check it out

So if you have an element positioned absolutely in a container and the container has overflow hidden the absolute element is gonna be hidden.

Need a structure of grandparent (relative position) > parent (overflow hidden) > child (position absolute)

Check it out

Bruh, you can’t do something like document.querySelector('#1') and expect it to work. The browser will yell at you! You have to do document.querySelector([id='1'])

Check it out

So today at work I noticed that I was not getting the spacing I expected from block level elements. The reason this was occuring was because my team and I were relying on margins for spacing out elements, but we should have been relying on padding instead.

Margins collapse in on each other (for siblings). If element A has a margin bottom and element b is its sibling and underneath and has a margin top, we would see the margin bottom of element A “collapse” (not be applied) and only see the margin top of element B.

Check it out

The focus-within pseduo class represents an element that has received focus or contains an element that has received focus.

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
	background: cyan;
}

Check it out

Blog post about: I knew I had a problem when I found myself frantically tossing Tailwind classes at a carousel, praying for the layout gods to fix it.