Little-Known CSS Facts

http://www.sitepoint.com/12-little-known-css-facts/

by evo_9 • 12 years ago

87 19 12 years ago

jscheel• 12 years ago

This article does a great job reinforcing the fact that the w3c has made an absolute mess of the css spec, and that browser vendors continue to implement crap. It's disheartening at best to think about css. I say this as I am wrangling YASCI (yet another stupid css issue).

Pxtl• 12 years ago

Sadly, http://giveupandusetables.com is no longer up, because I always liked pointing to that.

The amount of time we spend fighting with CSS to do things that are simple is insane.

The web is not a well-designed platform. It grew organically out of a document system under the stewardship of a million browser developers with no leadership, and it shows. It's a series of hacks upon hacks upon hacks that only make a reasonable, decent computing platform by the combined might of the entire software industry making tools and frameworks and JavaScript optimizing compilers and whatnot for it.

null_ptr• 12 years ago

Client-side web technologies are rotten and ill-designed, a mountain of patches and inconsistencies. That's why it's so painful to see people try to shoehorn JavaScript everywhere just because it's the unfortunate status quo.

matthewmacleod3• 12 years ago

CSS isn't really all that bad, and the trope is getting boring now.

Hindsight is 20/20, and it would have been difficult to foresee that the web would become an application platform in 1994, when the concept was being introduced to the web. CSS was primarily intended as a specification for styling documents, and not for implementing application layout - I would wager that most of the objections actually focus around it's unsuitability for this role.

That said, it's obvious that CSS is not currently optimal for the use cases that emerged. That's why we've had so much work on new versions, which attempt to solve some of the long-standing objections. From my perspective as a developer, it's working relatively well; even minor changes in the general availability of things like border-box sizing have made a huge difference to the ease of doing application layout in CSS, and the situation only continues to get better.

Tloewald3• 12 years ago

CSS is bad and hindsight is not required. Consider all the obvious page layout things that everyone wants, such as centering, columnar text, non-moving navigation elements, footers, and so forth that are either unsupported or require rocket science tricks to get half-working. And that's without getting into the inobvious requirements that they've had at least ten years to grapple with.

To be fair, some of CSS's shortcomings follow from HTML design errors that are equally egregious (and in some cases have been magnified by HTML5). E.g. It ahould have been possible to create decent looking navigation elements in HTML with no CSS or Javascript, but still isn't.

Qantourisc• 12 years ago

border-image isn't used at the moment, because it's out of fashion, but one day perhaps it will be back.

n0rm• 12 years ago

and hopefully a css native <blink> tag !

evan_• 12 years ago

    text-decoration: blink;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decora...

(Doesn't actually seem to work in Chrome. Here's a CSS animation alternative: http://stackoverflow.com/questions/13955163/imitating-a-blin... )

russellsprouts• 12 years ago

If you really want to re-enable blink tags, drop this in. It's terrible code, but it is also tweetable. Besides, if you are using blink tags, who cares about a few global variables?

Example: http://ryanrussell.me/404

    setInterval('for(v="visibility",b=document.querySelectorAll("blink"),a=b.length;a--;)c=b[a].style,c[v]=c[v]?"":"hidden"',999)

grimtrigger• 12 years ago

A nifty little trick regarding #5:

You can create elements that maintain their aspect ratio using width:100% and padding-bottom:100%. Unintuitive, since you wouldn't expect padding-bottom to be based of the width.

http://stackoverflow.com/questions/1495407/css-a-way-to-main...

jcomis• 12 years ago

Anyone else seeing the same codepen example for every number?

edit: hmm, a few refreshes fixed it up.

ImpressiveWebs• 12 years ago

For some reason, that happens occasionally. Seems to be a CodePen bug, but it does fix if you refresh, as you mentioned.

mhitza• 12 years ago

These all seem pretty basic CSS facts.

darksim905• 12 years ago

I haven't done CSS in a while & my site is pretty lame, but:

There's a CSS clip property? And a collapse toggle? holy shit.

This is really cool, thanks!

Gracana• 12 years ago

I thought the first one about the color property seemed pretty obvious and fundamental. That's the whole "cascading" thing! But, if you learn CSS in bits and pieces, it's certainly something that's easy to miss.

Positioning is another fundamental topic that is hard to learn without really taking a close look. It's not glamorous or new, but I think a lot of people (myself included, until recently) don't fully understand how positioning works. A List Apart has a good article on the subject: http://alistapart.com/article/css-positioning-101

In the same vein, another good topic is selectors. They're quite powerful, but if you only ever look at simple styling examples, you'll never really be exposed to their breadth and power. Check out the docs: http://www.w3.org/TR/CSS21/selector.html

Little-Known CSS Facts

Related Stories