

CSS3 Features That You Can Finally Start Using - fvrghl
http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

======
bbx
"Finally Start Using"??

If you're waiting for all browsers to implement these CSS3 features correctly,
you'll end up never using them.

For example, CSS animations have been around for at least _2 years_. Only
Firefox and Webkit browsers supported them and you had to rely on vendor-
prefixed properties, but animations were exciting enough for me to start
experimenting with them as soon as I could.

There is permanent rant towards "fancy" CSS3 features that haven't reached a
"W3C standard" status yet. But a website experience doesn't need to be
visually consistent across browsers. If you're using a plain hexadecimal color
code as a replacement for rgba, it's ok. If your intro is animated in Chrome
but not IE, it's ok too. If your last paragraph has a margin that the pseudo-
element :last-child should have canceled, it's ok as well.

Front-End developers have waited more than a decade for CSS improvements. You
can't wait for a unified browser environment to start implementing them. I'm
surprised by this article's tone, as if today, _suddenly_ , everything
changed. No way: browser support is a permanent process. Don't wait for that
perfect day because it will never come. Just start having fun with CSS3
_while_ providing a decent experience for IE (the main culprit).

~~~
richbradshaw
Did you say 2 years? Make that 4 and a half:
[https://www.webkit.org/blog/324/css-
animation-2/](https://www.webkit.org/blog/324/css-animation-2/)

------
lazyjones
Roughly 4% of our users still use MSIE 6 (some report that they need to due to
their restricted work environment). I need a good reason to risk 4% of our
revenue for some eyecandy, or a good fallback mechanism (difficult if my
layout relies on calc(), for example). HTML/CSS is a sad story ...

~~~
acjohnson55
I feel your pain. At my current gig, we target an IE8 minimum, which still
severely limits which of these techniques we can use. Microsoft should be
tremendously embarrassed by how bad their browser has been for so long.

~~~
drinchev
At our company we also support IE8. I almost never touch the CSS and HTML
files for that. I just load some polyfills that make IE8 more compatible
[1][2][3][4]. It seems like magic, because those scripts give me support even
for Foundation 4 out of the box ( they dropped legacy IE8 in v.4 ) and I don't
have to think that much for websites such as caniuse, etc...

The downside is that most of the CSS work is done by javascript and if you are
one of those IE8 users you will be unsatisfied with the pageload speed, but
given the bad architecture of IE8 you will not be surprised by that fact.
Although the pages using those polyfills work pretty good.

[1]
[https://code.google.com/p/html5shiv/](https://code.google.com/p/html5shiv/)
[2] [http://selectivizr.com/](http://selectivizr.com/) [3]
[https://github.com/scottjehl/Respond](https://github.com/scottjehl/Respond)
[4] [https://code.google.com/p/css3-mediaqueries-
js/](https://code.google.com/p/css3-mediaqueries-js/)

------
scotth
In the article, it's mentioned that there isn't great support for flexbox,
which is only half true.

Using a combination of the older and new syntax (display: box and display:
flex), you can already do quite a bit.

I've been using autoprefixer
([https://github.com/ai/autoprefixer](https://github.com/ai/autoprefixer)) for
a few months now, building simple flexboxes all over the place with the
attributes from the new spec, and have only run into one or two little issues
that I can generally hack away.

------
mmmbane
From the article: "The standardization bodies have probably had their reasons,
but it doesn’t feel at all intuitive to have the CSS width and height of an
element affected by its padding and borders."

And not only are height and width affected by padding+borders, they are
affected in different ways, respectively. It's just weird. Does anybody have
any insight into what the standardization bodies' reasons were?

~~~
rimantas

      > And not only are height and width affected by
      > padding+borders, they are affected in different ways,
      > respectively
    

What do you mean by that? Difference between block and inline elements,
collapsing margins or something else?

------
Lerc
I'm still waiting on decent attr() support.

[https://bugzilla.mozilla.org/show_bug.cgi?id=435426](https://bugzilla.mozilla.org/show_bug.cgi?id=435426)

In an ideal world, instead of attr() and calc(). I'd like a simple pure
functional language to calculate values for CSS properties. Properties defined
by such a system could be efficiently cached and recalculated as required.
Easy Parallel evaluation would be a bonus too.

I'd like to be able to do things like define a path as a mathematical function
and then have an <UL> that evenly spaces <LI> items along that path.
Preferably without requiring the browser to be specifically aware of the
concept of a path.

~~~
Udo
This is an interesting idea. You could implement a compiler that spits out CSS
as a proof of concept and then maybe lobby for browser support.

------
oneeyedpigeon
There's a brief mention in passing, but the lack of good support for CSS
columns is really frustrating. I have a requirement on a project that I'm
working on for columns, but they just cannot be satisfactorily implemented in
CSS alone, in any browser. Apart to resort to JavaScript instead.

~~~
scotth
What's the issue?

~~~
oneeyedpigeon
_SO_ much. Mainly a) lack of support for control over element breaking (I
haven't gone really in-depth with the spec, but even the most obvious things
are supported terribly) b) the weird behaviour of margin collapsing (and
adding _extra_ margins - WTF?!)

~~~
strictfp
Just use tables. I know that everyone recommends against it, but IMO they are
the only solution which works as expected. Everyone says they have a fancy
workaround, but none of them works well enough. And besides, whats wrong with
tables? Semantic HTML is hip again :-)

~~~
rimantas
Please, show, how do you make tables that work like CSS columns, i.e. reflow
the content to fill the specified number of columns. Unless you hardcode
content for each TD, but what the point then? And that's exactly what's wrong
with tables (semantic purity aside)—they shackle you content to one specific
structure, meanwhile using CSS for layout you can move your blocks around more
or less freely.

~~~
oneeyedpigeon
Exactly. Instead of just resorting to tables, I'd be much more likely to
resort to a couple of DIVs which would involve less markup and be less
semantically incorrect. But the whole point is that I don't want to have to
decide, on an article-by-article basis, exactly where my break between two
columns should actually be.

------
DougWebb
A bunch of those demos don't work on the Android browser. I also happen to
know that calc() doesn't work on Safari 6.x, among others.

I've been updating my webapp software to use flexbox-based layouts, and I have
to use a fair number of calc() styles to get the layout I want. (The newer css
grid layouts would probably work better, but for now flexbox is the best
available.) I've found that a combination of old and new flexbox syntax,
Modenizr's flexbox detection, and javascript code that detects whether or not
calc is available and runs a method to simulate all of my calc() styles when
it isn't, is all necessary to give me good browser compatibility. IE7 and IE8
work surprisingly well, Safari 5 on Windows and 5+ on Mac work, Mobile Safari
5 on the original iPad 1 works, and Mobile Safari 6+ on newer iPads and
iPhones work. Firefox, Chrome, and IE9+ work great as well, of course.

It's a lot of additional effort, but it's worth it and definitely doable if
you need the browser support and you want to use modern techniques.

~~~
Samuel_Michon
> I also happen to know that calc() doesn't work on Safari 6.x, among others.

Works fine on Safari 6.x, you just need to add the prefix -webkit.

[http://caniuse.com/#feat=calc](http://caniuse.com/#feat=calc)

~~~
DougWebb
Ah, good catch. It's 5.1 that doesn't support it at all. I was working on a
new feature last week, and it looked great on Firefox and Chrome (my main dev
browsers), but both my boss and UX designer use Macbooks so when I asked them
to check it out they both said it's broken. It was because I was working
quickly and didn't put in all of the backward compatibility hacks yet. So, my
memory was a bit fuzzy about which versions supported what, exactly.

------
RoboKitten
Modernizr is a great way to be able to start using some of these features with
legacy browsers. I actually have to battle with some of my customers to
_upgrade_ to IE8 (and not to set the group policy that forces "compatibility
mode").

------
tomasien
Calc() is a huge deal. For non-business oriented applications where IE8 may
still be in use, calc() is going to be a god damn lifesaver. I replicate the
function in javascript all the time, no longer!

------
pornel
There are soo many pointless uses of calc()… in this example `margin: 0 20px`
gives identical result.

In most other cases all authors really want is `box-sizing: border-box` (which
works in IE8+).

~~~
mcot2
The real benefit is mixing percentages with pixels. This makes things like
sidebars and sticky footers a breeze.

~~~
monkeynotes
As the OP says you can usually solve this problem by applying padding to a
element that has box-sizing: border-box set.

calc() will obviously have some niche uses though, and given the creativity of
the industry I'm sure some neat tricks will rise out of it.

~~~
ris
> you can usually solve this problem by applying padding to a element that has
> box-sizing: border-box set.

And what if your element is already using padding/a border for something else
and you don't want to have to fill your DOM tree with loads of pointless
levels of wrapper elements?

~~~
monkeynotes
As I say, you can _usually_ solve your problem this way.

------
welder
Speaking of cool CSS animations, try this pure-css library:

[https://daneden.me/animate/](https://daneden.me/animate/) (Animate.css)

~~~
stephp
Nice!

~~~
aymeric
Another one:
[http://tympanus.net/Development/ModalWindowEffects/](http://tympanus.net/Development/ModalWindowEffects/)

------
jebblue
I run Ubuntu on my PC, it's an i7 8 core machine with nVidia GTX 660 and the
latest tested Restricted driver from the repository. That animation drove my
CPU aggregate by top to 90% usage. I clicked the Edit button and while the
code was showing the CPU activity dropped back to minimal.

~~~
xmus
i run Ubuntu as well (13.10, Dual Core 1.1GHz - though i set the clock to
800MHz, Intel HD) and nothing unusual happened when the animations were being
displayed - if a shitty Intel chip can run the animations - i can't help and
wonder you tweaked something you weren't suppose to?

~~~
jebblue
What was your CPU time? I run GKrellM so I notice when something starts
hogging the CPU, the animation did play just fine, should it take 90% CPU time
to run an animation on modern hardware? That was the point of my post. That
CPU usage costs me money.

~~~
xmus
i've installed GKrellM and i got around 23% of cpu load when the animations
were displayed \- clock set to 800MHz [set via indicator-cpufreq] \- mind you
during the "test" lost of things were running to

if the CSS3 animations got up to 90% on YOUR hardware - where does that leave
the rest of us [i.e. shitty intel HD card owners]? :)

------
exo_duz
Calc is the most interesting item here in my opinion and the browser support.
[http://caniuse.com/calc](http://caniuse.com/calc)

I'd kill for the ability to do variables in CSS like LESS and SCSS.

------
stephp
Pet peeve: Default z-index makes elements farther down in the code display on
top of elements higher up in the code. With multiple backgrounds, the first
listed has the highest z-index.

