Taran_logo_black
TILBLOGABOUT

Today I learned about...
css

Back to all tags

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!

wont-work.css
: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;
  }
}

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.

Read More

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);
Read more

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.

Read more

23.03.2021css

attr

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!

Read more

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)

Read more here

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'])

Read more here

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.

Read more

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;
}

Read more here