5 ms·
8 CSS gotchas to start your morning off right (satire)
- Kiro 10y agoThe one about vertical-align seems wrong. I use it all the time when aligning text next to images and that has nothing to do with tables afaik. https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-al...
- isaaclyman 10y agoYeah...I wouldn't say that "accuracy" was one of the main goals of this post per se.
- Kiro 10y agoOh, sorry. I only skimmed it and missed the gist of it.
- derimagia 10y agoVertical align needs to be in a table cell. Although most of the article is satire, vertical align has a lot to do with tables. Centering only works in table-cell elements. Take a look at the code http://howtocenterincss.com/#contentType=text&horizontal=center&vertical=middle&browser.IE=9 http://howtocenterincss.com/#contentType=text&horizontal=cen... Or, one of the references mozilla links to there is: http://phrogz.net/css/vertical-align/index.html http://phrogz.net/css/vertical-align/index.html
- Bahamut 10y agoCan't say I agree with this article - I don't really run into CSS gotchas too often anymore. This just reads like a massive complaint-fest TBH.
- isaaclyman 10y agoThat's pretty much what it is. I guess my artistic goals have been accomplished, so I'll go home now
- rhizome 10y agoSuch is Medium, often enough.
- Fifer82 10y agoCSS is a bloody disgrace. A hideous abomination. Is there any word on the street, any alternatives coming down the road?
- isaaclyman 10y agoYou should be a street preacher ;) CSS Grid and flexbox are a nice improvement over what I had to work with in, say, 2010.
- drivingmenuts 10y agoIt's interesting that, in order make life livable, I don't actually write pure CSS anymore. I write Sass w/Bootstrap (and I like it). I know that it makes for a bloated stylesheet, but it beats drinking myself to death, mumbling about how the W3C failed to do their damn job. And fail they did. Rather than hammer out an explicit standard, they just kind of winged it and left the actual implementation details to the browser builders. Those guys were never going to play nicely together, but at least we'd be able to blame someone else.
- lucideer 10y agoI was reading the first few and thinking "No... No... Hrmmm... this seems really misinformed" before it dawned on me around point 5 that the whole thing is satire. It eases you into the realisation nice and slowly. I'm guessing given the penchant for people to comment based purely on titles, some won't even get that far.
- isaaclyman 10y agoExcellent, that's exactly the effect I was going for. My posts have about a 75% abandonment rate, though, so most of the people who hit the post probably won't stick around long enough to get the joke. Oh well.
- scanr 10y agoGreat article. I laughed a lot. Thanks for that!
- isaaclyman 10y agoYou're welcome! Thanks for the compliment.
- ozaark 10y agoThe satire doesn't come across very strong and makes the author look uninformed. CSS has its ups and downs but the problems faced in the article have been known and solved for years in production environments across the web. The article is basically misleading with no answer for those unaware. Sorry if this feels harsh but reading through was fairly unpleasant.
- isaaclyman 10y agoThanks for the feedback. I basically feel like if someone can get through number 6 without smelling the satire, perhaps they're not paying attention.
- deckiedan 10y ago
- wingspan 10y agoFantastic, thank you for making me laugh so much. Almost makes up for the years spent being tortured by CSS just so I could appreciate your tale.
- isaaclyman 10y agoYou're welcome, glad it could be part of your day.
- uwootm8 10y agoLoled much, thank you
- danieka 10y agoI enjoy working in CSS (or maybe I'm just oblivous of a better way/paradigmn of styling, if so please enlighten me :)) so this was a great read. Thank you!
- dsego 10y agoNumber 7, so many projects include bootstrap and don't even use the damn thing.
- lucideer 10y agoThis! I browse with uMatrix with some extra strict defaults (no 3rd-party CSS/images) and about 90% of sites that link bootstrap from a CDN work fine without.
- nothrabannosir 10y agoI thought the "SS" part stood for Stockholm Syndrome. Looking at some of the comments here, it seems I may have been right..
- dntrkv 10y agoOn number 3, that behavior is exactly what I would expect. Not sure what other logical behavior you would propose... The other options don't make sense: "A) Aligned horizontally with the first two, but after both of them?" Floats are taken out of the normal flow so they will be pulled as far to the side as possible until they reach another floated element or the edge of the BFC. "B) On the row after the first two, on the far left side?" "C) On the row after the first two, on the far right side?" They are floated elements in the same BFC, if they fit on the same line, they will. Unless you clear them. Pretty simple stuff.
- isaaclyman 10y agoI'm mostly with you, but it seems like an antipattern to ignore HTML structure like that.
- have_faith 10y agoIt doesn't ignore HTML structure, it ends up like it does precisely because it iterates through the structure in order when moving the boxes to either side. It makes it fairly predictable if you just loop through the structure in your head and push the boxes to the side they are floated at.
- freeone3000 10y agofloat deliberately takes elements out of content flow ("ignores HTML structure"). That's its entire thing. That's its deal. You don't want that? Don't use float.
- freeone3000 10y agofloat deliberately takes elements out of content flow ("ignores HTML structure"). That's its entire thing. That's its deal. You don't want that? Don't use float.
- lucideer 10y agoIt's satire. The most obvious behaviour was left out of the MCQ deliberately to frustrate the reader.
- pavlov 10y agoUsing CSS to design software user interfaces is like using Microsoft Word and a parallel port modem to compose symphonies. I'm sure there's some awe-inspiring way to print from Word to the modem so that it produces sounds that vaguely remind you of a French horn and viola -- but it's not clear why anyone should want to use these tools to create works of such complexity, if only they had an alternative.
- isaaclyman 10y agoAgreed. If you come up with a way to write user interfaces using French horns and violas, I will start using it right away.