nys

nys

@nys

definitely a human

  • she/it

30-ish, definitely not a personality construct running on an android. nope.
S/N: 3113

not everything is 18+, but this an adult page

pfp is by moonlitvesper

This user is an it

log inask
nys
@nys
exerian
@exerian
lexyeevee
@lexyeevee

css for css baby 2: boxes and blocks and stuff

  1. 1

    text stuff mostly

  2. 2

    boxes, transform
    🌟 your here 🌟

  3. 3

    positioning, clicking stuff

  4. 4

    flexbox and grid

  5. 5

    animation and other nonsense

Are YOU a CSS BABY or hopefully you already read part 1 so now you are a... uhh... Css Preteen??? wow the age metaphor is rapidly getting away from me

Are your friends doing stupid css tricks and leaving you feeling
left out?

Do you wish Help I Am Trapped In This Box
Please Let Me Out would help you out?

alright great here we go

namelessWrench
@namelessWrench

WAIT A GOODNESS MINUTE

do you even know how incredible it was when browsers got this. do you even know what we had to do to get rounded corners before this. it was ugly man. it was so bad. you can't even imagine.

Y'ALL GET ROUNDED CORNERS NOW WITHOUT SLICING UP A PSD AND USING BACKGROUND IMAGES ON EMPTY FLOATING DIVS?!?!

exerian
@exerian

the first time i did rounded corners on the web floating divs could not be reliably positioned on all browsers. we had to stack a couple tables together because one wasn't enough.

shit. i'm old.

nys
@nys

back in my day if you wanted a fancy table you had to write your html uphill both ways

but no joke it feels that way sometimes

i feel like the "hacking" part of getting cool things to work has gone away and was replaced with "here are a bunch of unnecessary prefixes and you should just get a preprocessor that changes each one to be the right order but it's not like you have to support ie5 anymore lol"

also i'm realizing i do not remember my geocities address and that saddens me

You must log in to comment.

in reply to @lexyeevee's post:

CyanSorcery
@CyanSorcery

But I've already been doing that, but the issue is that I've been doing it since

2001

because we didn't have a computer before then, so yea, I lost some time there

(also I was sitting here using styles to try to make my text big before I realized you just used h1) (edit 2: ok that doesn't work either so I'm gonna have to accept my puny 2001 because my attention span doesn't last this long) (edit 3: oh yea markdown is a thing)

login to reply
lexyeevee
@lexyeevee

i guess it helps to follow members of the csswg on twitter and also just browse MDN for kicks every few months

once i got a taste of "border-radius might be implemented in browsers soon" i tried to keep tabs on what else they were up to

login to reply
mogg
@mogg

I find it extremely helpful to open the inspector tools whenever there's something cool, just to learn how people achieved that stuff. Sometimes it's stuff done with js, sometimes you acquire css trickery

login to reply
lexi
@lexi

also it is ![alt text](url), kinda like a link with a ! in front for some reason

thats the normal markdown image syntax. the markdown guys realized that images kinda work like URLs: you have a destination URL, and a text describing it. so they yoinked that syntax, but autodetecting images is hard, so someone just added a ! in front of it so its clear if its an image or a link

login to reply
lolle
@lolle

Had to shudder at reading "what we had to do to get rounded corners before this", remembering blind tables with sliced up image borders.... at least border-image only requires one image to do this these days 😅

login to reply
widr
@widr

these are incredible

box model is honestly so fucked up and convoluted that you could probably make a 6 part series this complicated just about how margins and flexboxes and nested layouts work too hahaha, i had to find someone else's shitpost with relative position and negative margins to see how to make a trick possible a couple weeks ago. we are in a hell of our own makign

login to reply
widr
@widr

z-index layering or what's that one thing i forget and can't find it where you can prevent that from overlayering elements outside the containing one or not do that, something about stacking contexts or something? also how the space reserved for elements is only coincidentally related to their actual position if it even has any? amazing technology

login to reply
arbe
@arbe

These are so informative and fun to read! I'm learning a lot from this series, thank you.
That expressed, I think I've found a typo: In the paragraph just below the box model diagram, I believe it should say padding: 0 .25em instead of padding 0 0 .25em. Such mistakes are, of course, completely inexcusable and you should be hanged in the public square. /s monospaced fonts have betrayed me. I knew this day would come
Looking forward to learning more about the arcane, dark arts of Positioning Elements™!

login to reply
Scribble-Sheep
@Scribble-Sheep

Finally got around to doing some fuckery using this as a guide. Def makes more sense when you're actually doing something and not just reading this in isolation, lol.

I'm assuming that putting scaleY and not having a scaleX causes an issue, tho? Bc trying that threw an error until I just used the normal combined scale thing.

login to reply

in reply to @namelessWrench's post:

in reply to @nys's post:

nys
@nys

we are!! its super nice!! but it also makes me wonder if it's because the horror that is chromium and google's outsized influence or because we actually decided split standards were bad

login to reply
Pinned Tags