#csswtf — Public Fediverse posts

#CSSWTF The scrollbar is a part of which box?

https://codepen.io/thebabydino/pen/LYKKqVQ

You would think

`background: teal content-box`
and
`background: linear-gradient(teal 0 0) content-box`
produce the same result. Except...

`background: teal content-box` doesn't stretch under transparent scrollbar track

`background: linear-gradient(teal 0 0) content-box` stretches under transparent scrollbar track

#CSS #WTF #code #coding #frontend #scroll #web #dev #webDevelopment #webDev

Extremely annoying #CSS gotcha: container query units seem to be relative to the `content-box` dimensions. And there doesn't seem to be any way to make them relative to the `border-box` dimensions... which is what I need to solve other problems caused by container queries. 😭

#cssWTF #gotcha #layout #cssLayout #wtf #code #coding #containerQueries #containerQuery #frontend #webDev #webDevelopment

#tinyCSStip (or #gotcha)

If you use a vertical `writing-mode` and you also have a pseudo with some `content`, that `content`... may or may not be rotated, depending on its nature! 😼

I'm not even kidding. And it's the same in every browser.

#CodePen test https://codepen.io/thebabydino/pen/VwNGbYg

#CSS #csswtf #wtf #writingMode #typography #textEffect #code #coding #frontend #webDev #webDevelopment

In #CSS

😵`grey` is darker than `darkgrey`
😵`pink` is lighter than `lightpink`
😵‍💫R channel at 255 with G & B at 0 is `red`, B channel at 255 with R &G at 0 is `blue`... but G channel at 255 with R &B at 0 is not `green`, it's `lime`!
🥴`fuchsia` is `magenta`
🥴`aqua` is `cyan`

For real, see this page by @Meyerweb https://meyerweb.com/eric/css/colors/ (which I've been using for over a decade)

A bit of history https://twitter.com/briankardell/status/1157667417381842945

#cssWTF #wtf #dafuq #code #coding #frontend #web #webDev #webDevelopment

Unexpected errors on #CodePen.

I ended up replacing Autoprefixer.

#CSSWTF #CSS #coding #frontend #webDev #webDevelopment

The !important things in life...

(cannot for the life of me understand why some are 9999px and some are 99999px)

¯\_(ツ)_/¯

#CSSWTF #CSS #coding #frontend #webDev #webDevelopment #bestPracticesLOL

TIL https://twitter.com/SelenIT2/status/1697941636087443591

The spec, though I don't understand what's written in there https://drafts.csswg.org/css-images-3/#radial-color-stops

Meaning I can only get fixed constant thickness elliptic arcs only with two radial gradients, the second one being a cover for the inside of the ellipse.

https://codepen.io/thebabydino/pen/bGOePWE

#CSS #CSSWTF #CodePen #CSSgradient #coding #frontend #webDev #webDevelopment

Are you okay, Chrome DevTools?

280x360 element. The padding is 24px in the normal state and 0px in the hovered state.

I force the hovered state from DevTools. The result on the page looks fine, the computed value shows up as 0px. It's just the box model illustration that's WTF.

#css #wtf #csswtf #devTools #devToolsWTF #chrome #coding #frontend #webDev #webDevelopment

Making test cases for filing bugs at 4:30am because why not... 😭

#css #csswtf

Web dev in real life.

This is not how I'm used `justify-content: space-between` works. There are no other properties other than `padding: 6px` set on the flex container or children.
Flex container is a `div` and the children are a `ul` and a `p`.

If I set `flex-grow: 1` just on the 1st child, I'm still left with a space on the right of the second one.

The two gaps aren't even equal, the second one is bigger than the first.

Losing it.

#css #csswtf