css quick maffs

so you did this:

.foo:hover {
transform: scale(1.1);
}

and now ugly scrollbar is there when the element is scaled.

No, don't do overflow: hidden. There's a better way. Instead, do this:

.container {
padding: 1rem;
box-sizing: border-box;
}

the element total width is calculated based on the width of its content. That's true unless you specified width and height explicitly (if you did so, you're a doofus, I'm sorry).

Scaling makes content somewhat larger. With border-box, paddings work differently with the total width.

By default, if you set width to say 100px, and paddings are 20px, total width will be 140px — it's your 100px of content plus two paddings of 20px. width property set the width of the content, not the total width.

With border-box, width property sets the total width. So if you set width to 100px and paddings to 20px, total width would be 100px, just like you set it, and content will be 60px wide — it's 100px minus 20px times two.

The key part is it doesn't end with explicit width. The algorithm remains. When some node is rendered, its total width is calculated. When you use border-box, the total width will stay the same even if your content grows by some value that is less than your paddings. So, your content was 100px, you scaled it, and it became 110px. Well, then that extra 10px will be subtracted from your paddings, and they will be 15px each instead of 20px.

No more ugly scroll bar. Yaaay!

aight bye

CSS quick maffs

You need to make a responsive grid that should wrap its columns on smaller screens. That's whay you do:

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, auto));
}

Replace 15rem with minimal width of a grid cell. Putting 0 there is bad because columns won't wrap then.

Now, let's make our task harder. We want the same grid, but we want say 4 columns max. That's what we should do:

.grid {
--columns: 4;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(15rem, (100% - (var(--columns) - 1) * 1rem) / var(--columns)), 1fr));
}

--columns regulate the maximum amount of columns we can have.

Aight bye

css quick maffs

so, you want to make a css gradient from a certain color into transparent. The logical way would be doing it like this:

linear-gradient(#112233, transparent)

however, this will cause a blurred black stripe to appear in safari. This is due to safari-specific algorithms (that also make it the quickest browser, especially on arm-powered macs).

stackoverflow and other boubas will suggest doing this:

linear-gradient(#112233, rgba(255, 255, 255, 0))

this is better, but instead of a black stripe, a half-transparent white stripe will appear.

To finally make this gradient render consistently across different browsers, do this:

linear-gradient(#112233, #11223300)

Now, you're only changing alpha. See, CSS is a declarative language, so you should be telling it EXACTLY what you want to achieve. You don't want to change one color into another (in that case, "#112233" into "transparent", yes, they are distinct colors that are totally different. CSS doesn't treat "transparent" in some special way like we do) but to only change the alpha channel of #112233.

Feel free to use rgba notation if you want to support older browsers:

linear-gradient(rgba(11, 12, 13, 1), rgba(11, 12, 13, 0))

aight bye

Afraid of CSS? Here’s a snippet of completely valid stylesheet to ease your anxiety:

.container {
break-before: verso;
display: ruby;
mask-border-slice: 0;
overflow-anchor: none;
touch-action: manipulation;
font-variant: historical-forms;
initial-letter: 3.0 2;
}

CSS is magic.
CSS is a katana blade.
CSS is a tiny bristle scratching Gorilla Glass Victus. It shouldn't exist, yet it does.
CSS is a plastic-based sticker that you peel off, and it leaves no residue behind.
CSS is a summer breeze of 2004 that you felt while riding longboards with your girlfriend.
CSS is plugging a '86 Les Paul into a Marshall JCM800 and switching to a dirty channel.
CSS is diving into a freshly made bed after an evening shower.
CSS is getting your winter coat and finding a hundred dollar bill in the pocket.
CSS is the front right burner.
CSS is stomping onto a Big Muff pedal before you do solo.
CSS is David Gilmour inviting you for lunch.
CSS is cracking open a cold bottle of Perrier.
CSS is falling asleep in the attic hugging your loved one and watching the stars.
CSS is a glass of just below the room temperature cold pressed orange juice after you run 5k.
CSS is stepping on a scale and seeing yet another pound of body weight gone.
CSS is a supportive, beautiful person saying they love you just after you escaped an abusive relationship.
CSS is putting on your cold white gold Rolex in the Friday afternoon before meeting with friends at the bar.
CSS is discovering your old Sansa Clip+ and booting RockBox.
CSS is giving cunnilingus to Mary Elizabeth Winstead.
CSS is finally feeling empathy to another person after two years of therapy and realizing you're alive.
CSS saying "unleaded" after you pull up to the gas station in your vintage 911.
CSS is your ex-boss apologizing to you after they hit the rock bottom.
CSS is smelling her hair in the back seat of a Maybach taxi.
CSS is giving presents to your grandparents.
CSS is hitting bong while watching Home Alone with your friends after New Year's Eve.
CSS is getting a new job that pays 3x your old one and removing your old job's Jira bookmark from a bookmarks bar.

It's CSS quick maffs time! Consider the following code:

<div class='container flex'>
<nav class='menu flex'>
<a href='#'>Menu item 1</a>
(arbitrary amount of links)
</nav>
<button type='button'>Sign in</button>
</div>

You want the layout to look like a horizontally scrolling, single line menu with a Sign in button to the right. Both container and menu are flex containers. So, here's the code for the menu:

.menu {
overflow: auto;
}

The problem is, as there is no flex-wrap, menu will not be wrapped, and it will occupy all the space it's needed to accommodate all the elements, breaking its container. Pesky horizontal scroll appears on the whole body.

Boubas will set menu's width to some fixed value like 800px, and this is a bouba approach because bye-bye responsiveness.

Here's what you should do:

.menu {
overflow: auto;
min-width: 0;
}

.menu * {
flex-shrink: 0;
}

This way, menu will occupy exactly the width of an empty div. In flexbox, its width will be equal to all free space that is not occupied by the Sign in button. Setting flex-shrink is needed for items to preserve their original width. We don't care about making those items narrower on narrower screens, because we now have infinite amount of horizontal real estate. Pure, inherent responsiveness achieved without filthy media queries, yay!

The menu will scroll horizontally just like you wanted.

aight bye