Lmst

#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

The relevant CSS:

```
body { writing-mode: vertical-lr }

div {
font: 1.5em sans-serif;

&::before {
color: crimson;
content: attr(data-c)
}
}
```

And the visual result: the checkmark and the cat face emoji don't get rotated like the rest of the element text, but the letter 'A' does.

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

Grumpy-looking beautiful fluffy cat sitting on a keyboard.

Unexpected errors on #CodePen.

I ended up replacing Autoprefixer.

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

CodePen CSS error: Replace transition-property to transition, because Autoprefixer could not support any cases of transition-property and other transition-*

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

DevTools screenshot of a lot of style elements, each with just a character vomit class setting the width to either auto, 9999px or 99999px and making it !important too!

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

Screenshot comparing the results in the two cases in the CodePen demo.

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

Screenshot of the Computed tab in Chrome DevTools. The computed padding values are fine, but the values on the box model diagram aren't.

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

#cssWTF

Client Info