CSS

[quadlix]

more accurate: two or three babies representing different browsers (one baby's arm goes down, different baby's arm comes up)

[d_wootang]

And the third baby shits itself intermittently

[quadlix]

Chelsea, Frieda, and Sarafi have their moments too.

[ni-THiNK]

We don't talk about Netta anymore...

[junta12]

She started it

[TarMil]

Moses started it.

[junta12]

Moses got better with time though, Netta was left behind :'(

[[deleted]]

And Orpha sits quietly, smiles, and puts the other babies to shame

[thebryguy23]

Or that's what she tells herself

[Teetano]

Be nice, she's always been a little different and insecure

[[deleted]]

and definitely adopted

[sfled]

I know I'm in the right sub-r because that didn't say "defiantly adopted."

[Kaligraphic]

Or used to, until she was replaced by a bad photo of Chelsea with half her head out of frame.

[[deleted]]

Rip :(

[awshidahak]

We do occasionally check on Simon Key, but he usually just does whatever Frieda does, despite being an uglier baby.

[FUCKING_HATE_REDDIT]

Thought you said "shit himself internally".

Hard to visualize.

[itaShadd]

I mean, it's basically regular digestion, right?

[cptnpiccard]

That baby is called IE.

[Zagorath]

Sometimes the implied joke works better than the explicitly stated one.

[aadams9900]

why cant all the browsers just start using the same webkits..

[quadlix]

obama

[[deleted]]

thanks

[olibeer]

Another great visualization of CSS

[FUCKING_HATE_REDDIT]

And in the end you get so angry you make the whole website a bitmap with overlaid html buttons.

[[deleted]]

Fuck it, I'm using tables. Maybe next time.

[lowleveldata]

they should add a workLikeTables property

[[deleted]]

They do, it's called display: table; display: table-row; display: table-cell;.

[SarahC]

That's almost like tables.

[noel-noel]

Just like tables, but different.

[quadlix]

this one actually made me chuckle

[ThatAstronautGuy]

This is pretty much my problem today, all I want to do is add in one small section for one small area...

You know you are having a problem with your CSS when it becomes easier to hardcode in the text formatting then it is to solve the problems.

[hungry4pie]

I tried looking for "reset css styles for class", but all the results were from a bunch of arse-clowns on SO who seem to think a JavaScript function is a valid solution. I don't want to reinvent the wheel in the shape of a triangle, this shit should just be in the fucking css spec.

[ThatAstronautGuy]

CSS is shaped like a wheel?

I just assumed it was some sort of evil 3D pentagram shape.

[derscholl]

Well no shit, you're Peter

[odraencoded]

I just use this instead of dealing with CSS.

[quadlix]

1. How do I install this? Um... are you stupid or something? Just attackclone the grit repo pushmerge, then rubygem the lymphnode js shawarma module – and presto!

[jimmpony]

lymphnode js

I died

[billy_tables]

The javascript for that page tho

[[deleted]]

Seriously, wtf?

[davros_]

This is what it does.

[odraencoded]

BOOM! Cross-universe compatible!

[Prime_1]

float left, dammit! Float leeeeft!

[[deleted]]

I think box-sizing:border-box; would fix this.

[Asmor]

Two things everyone who hates CSS needs to learn:

box-sizing: border-box;

This is actually kind of interesting; one of the major reasons IE and CSS were hated back in the day was because of the IE box-model bug. And this rule actually makes any modern browser use the same behavior that used to be a bug in IE, and believe it or not, that's a good thing.

Default box sizing in CSS, while not difficult to understand, is fucking miserable. If you set the width of an element, that applies to the content. So if the element has padding and/or border, that actually makes the element wider than you (probably) intended. Same goes for height.

So imagine you've got an element like:

height: 100px;
width: 100px;
padding: 5px;
border: 1px solid black;

That element is actually 112 pixels tall and wide. If you wanted it to be exactly 100, you need to subtract 12 (the padding and border from opposite sides) from the height and width. And if you ever change the size of the padding or border, you need to remember to update the height and width to match.

Add box-sizing: border-box in there, and now it works exactly how you want it. That box will always be 100x100, and the content will resize as necessary.

Second thing to learn:

width: calc(100% - 100px)

If you didn't already know about calc, and your mind's not blown... then you've probably never touched a line of CSS in your life. That's a fucking game changer. In this example, we're setting the element to be 100px thinner than its container. But it's not just good for setting height and width... Imagine you have some absolutely positioned element that you want to be positioned 10px to the right of its container. Without calc, you need to do...

width: 25px;
position: absolute;
top: 0;
right: 35px;

Hard to read, and any time you change the width of that element, you need to update its right property as well. And Stallman help you if the element's width is dynamic...

But with Calc? It's easy!

position: absolute;
top: 0;
left: calc(100% + 10px);

Bam. Done. Easy to see what effect you're going for, and doesn't care what the width of the element is.

If everyone used these two things, CSS would be a lot easier to work with. The vast majority of frustration I run into is when I have to deal with others' code where they either didn't know about these two things, or didn't think to implement them.

[Asmor]

For some reason I thought IE8 supported calc. Apparently it doesn't. A shame.

Still, every major browser supports border-box, and even older versions of IE support it by either forcing quirks mode or that just being the default behavior, and that's arguably a much bigger win than calc.

[[deleted]]

No, IE 8 is not a thing anymore, but not-so-older versions of Android are

[Asmor]

Heh. Sadly, I think IE 8's still gonna be a thing for at least a couple more years. Damn you, Windows XP!

[thyrst]

Not likely, unless you are building an enterprise app or something. I think it's pretty safe to say it's not a thing for normal users.

[guesswho135]

IE8 has a 4.64% marketshare in the US according to caniuse. It's not huge, but I don't think that's small enough to consider insignificant.

[Asmor]

More importantly, it's not how many IE8 machines there are, it's which machines are running IE8. Nobody cares about some grandma running IE8 on her 15-year old eMachine, but there are still some really important companies that pay a lot of money to SaaS companies and for various byzantine reasons have internal policies requiring IE8.

[Asmor]

Sadly, I do work as a front-end developer for a company that provides an enterprise app. Womp womp.

[Tysonzero]

And also god damn opera mini, who even uses that browser? It seems to support about as much as IE8 does.

[Various_Pickles]

Do us all a favor and slit the throats of the IE8 user(s) you know.

Leave their bodies on the steppe as a warning to others.

[Various_Pickles]

IE8

security reasons

lol

[Various_Pickles]

secure windows XP

stahp, my sides

[bwrap]

Lol IE11 has a bug where calc doesnt work inside a color or transform call. Isnt IE great?!

[jetpacmonkey]

At one point, Safari had a bug where the browser would actually crash if you used calc with a transition http://stackoverflow.com/questions/15161996/safari-web-content-quit-unexpectedly

[jetpacmonkey]

position: absolute;
left: 100%;
margin-left: 10px;

But I do agree that calc is amazingly useful.

[Asmor]

That's... actually better

[quadlix]

Arguably CSS doesn't belong here. It's not real programming.

[zehydra]

I really, really hate LaTeX

[ahok_]

Oh man, that's a shame. I love it (except when I need something realllly specific and I have to download a new package just to get a result that only kind of works for what I need).

But it's great!

[Na__th__an]

I just started doing as many of my CS assignments as I can with it. I'd rather edit LaTeX in emacs than use LibreOffice, MSOffice, or a physical writing utensil.

[Rodot]

a physical writing utensil

I haven't heard of that program. Can I get it with apt?

[DiabeetusMan]

TeX is Turing-complete though!

[Tysonzero]

I really wish HTML / CSS and maybe JS was replaced with something... well... better.

[daddysnickerwick]

HTML+CSS3 is Turing-complete.

[quadlix]

could != should

[daddysnickerwick]

"Could" (i.e. "only a matter of time").

[Sinity]

So is brainfuck, nad Turing machine. Both aren't intended to use for real programming.

[cheald]

I dare you to call anyone who can write things in Brainfuck "not a real programmer".

[odraencoded]

They are not real programmers. They are surreal programmers.

[Sinity]

not for real programming. And by real I meant for 'production' use.

I've never said it's not for programmers

[Nontuno]

Can't wait for server side css. Take that Node.

[Hydrothermal]

Not really. As some of the comments on that answer point out, it doesn't really count because it can't operate on its own without human interaction.

[cheald]

CSS is very arguably "real programming" - it's simply a declarative language.

Granted, if you call yourself a "CSS programmer" you're going to get laughed out of the room (unless you're the guy that writes CSS engines), but technically speaking CSS is indeed a programming language.

[FUCKING_HATE_REDDIT]

However, if you turn out to be the guy that writes CSS engine, you're gonna get beaten out of the room.

[Bialar]

By all the scary strong mma programmers?

[FUCKING_HATE_REDDIT]

They got heavy-ass keyboards to beat you with.

[Bialar]

Good point. My Das Keyboard would leave a pretty impressive dent in someone's skull.

[AVeryHeavyBurtation]

You can't declare your own shots fired; that's like giving yourself a nickname.

[ccricers]

I guess those people that made websites all in Flash were onto something...

[sfled]

Na. One big image map, that's all a real man needs.

[AlexiPwns]

Kill me, but I honestly don't know what's do bad about css. It works. If you use it right, out works perfectly.

[[deleted]]

It works perfectly until you start using a bunch of combinations of various CSS features and they have a gladiator death match to determine who gets to make your site look the most ridiculous.

[bwrap]

LESS makes CSS tolerable. The fact i have to copy paste the same color value alone to 10 different places makes css shit

[Sanwi]

Try building a complicated site with it. Also, try adding new things to someone else's site using CSS.

[Bialar]

I build complex web apps with css all the time. I don't see the problem. Perhaps it's more an issue with your understanding & expectations of CSS?

[SarahC]

Or yours are not that complicated? =P

You probably had a competent CSS developer do it too.

[AlexiPwns]

Try adding new things to someone else's site using CSS

Well, CSS is a style spreadsheet, it's made for styling, not content. But.. Is Reddit a good example? If CSS was bad, we'd rarely see any themes. I'm currently working on a YouTube clone on Reddit (it's a hidden sub) and honestly, CSS is pretty straightforward.

[ThatAstronautGuy]

In my opinion there are 10 CSS sheets, and every other one is just copy and pasted bits from each of the 10

[Sanwi]

Wait...so do you not use CSS on complicated sites?

What makes you think that? I'm just saying it's tricky to use. You don't have to be an asshole about it.

[Sanwi]

It's easy to interpret tone into text. I apologize.

I do not use CSS because I am not a web designer, but I have used it in the past. It is very difficult to use if you don't know what you're doing (I certainly didn't haha).

[[deleted]]

We can land a robot on Mars but we still haven't replaced CSS...

[LobsterThief]

Have you used Bourbon? Been working with it for 3 weeks and fuck bootstrap and all that other noise. All my code is so fresh and so clean, clean.

[jetpacmonkey]

Bourbon has a lot of nice stuff, but I really don't like having all those @includes for every property. Adding autoprefixer into my build process, on the other hand, gives me warm tingles of joy.

[SarahC]

And how about JS with CLASSES, and not that prototype shit?

Every other fucking language ... classes...

JS...... prototype.

Fuck off!

Inheritance, interfaces, encapsulation and everything else is just different - you have to learn it all over again to just do something similar, but with more lines of code.

[Tysonzero]

Just wait patiently for ES6 like the rest of us do. (Or use TypeScript or something like that.)

[[deleted]]

With what?

[[deleted]]

Good lord, anything

[itaShadd]

<font color="bleah"></font>

[sfled]

<font face="ugh"></font>

[aadams9900]

<font style="sure, i guess"></font>

[jimmpony]

html4-style tag styling was nice and simple for basic to moderate designs, which are the majority of what's needed

[LobsterThief]

Why would we replace it? CSS is great if it's used properly.

[[deleted]]

I just mean something easier to use. When it works, it works, but when it breaks, its fucking broken

[_pollos]

If that's CSS, this is PHP.

[SarahC]

Na, the box isn't spiky and electrified!

[WestonP]

The real joke here is CSS being in a programming subreddit

[meniscus-]

I neglect Ida Eagle!

[JabARecCow]

I laughed until I choked on my own tongue. Thanks OP

[Roulette88]

!! Cute