

Little-Known CSS Facts - evo_9
http://www.sitepoint.com/12-little-known-css-facts/

======
grimtrigger
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...](http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-
aspect-ratio-when-resizing-a-div)

------
jscheel
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
Sadly, [http://giveupandusetables.com](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
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.

------
Gracana
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](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](http://www.w3.org/TR/CSS21/selector.html)

------
darksim905
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!

------
jcomis
Anyone else seeing the same codepen example for every number?

edit: hmm, a few refreshes fixed it up.

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

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

~~~
n0rm
and hopefully a css native <blink> tag !

~~~
evan_

        text-decoration: blink;
    

[https://developer.mozilla.org/en-US/docs/Web/CSS/text-
decora...](https://developer.mozilla.org/en-US/docs/Web/CSS/text-
decoration#Value)

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

------
mhitza
These all seem pretty basic CSS facts.

