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 sources ones!
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;
}
inset property is a shorthand for top, right, bottom, and left
properties.absolute and z-index will create a stacking
context.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.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.
TIL that there’s a tool to help you apply color filters to your dom nodes!
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.
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.
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 columnsalign: deals with rowscontent: deals with the grid strutureitems: deals with the DOM nodes within the grid structureFor 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.
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);
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.
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!
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)
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'])
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.
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;
}