Today I learned about...
css

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