

CSS3 - A Practical Introduction - gtzi
http://leaverou.me/ft2010/#intro

======
Construct
FYI, use the arrow keys on your keyboard to navigate the slides.

Took me a minute to figure that one out.

~~~
mattew
Thanks for the tip. Too bad the iPad doesn't seem to let you open up a
keyboard window if there aren't any text inputs on the page. I'll have to
check it out later from a more fully featured computer.

~~~
bconway
On Android, you can long-hold the menu key to bring up a keyboard at any time.
Maybe iOS has a similar, undocumented feature.

------
samdk
I don't think you can really claim "full browser support" with an asterisk
that says "assumes latest beta". That's really not helpful when you're trying
to figure out if you can _actually_ use something. That said, this is a pretty
nice preview of what's coming with CSS3.

(If you are looking for that kind of information,
<http://www.quirksmode.org/compatibility.html> is by far the best resource
I've found anywhere online for it, although I don't think it includes all of
CSS3.)

~~~
Thangorodrim
It does not actually say "full browser support" does it? All I see is "browser
support" with an asterisk to indicate her determination is based on most
recent builds.

I don't think this is in any way meant as an authoritative reference for
browser compatibility.

I think its purpose is that suggested by the title: a practical introduction.
A subscript might have been: How to use CSS3 instead of various klduges to
achieve interface effects.

In my opinion, anyone using the newer markup and style tools should be testing
cross-browser anyway.

Anyway, I think its a great presentation.

~~~
dhimes
It says "full support" in the browser icons. I assumed, and I guess samdk did
also, that this implied she was talking about the browsers.

~~~
leaverou
By "Full support" I meant that it fully supports the feature (without a prefix
or huge deviations from the spec). It doesn't have anything to do with browser
versions.

------
leaverou
It's best if you read the rest of the information that I posted along with
this, here: [http://leaverou.me/2010/10/my-ft2010-slides-and-csss-my-
pres...](http://leaverou.me/2010/10/my-ft2010-slides-and-csss-my-presentation-
framework/)

I mention quite a lot known compatibility issues with the presentation,
including the Firefox 3.6/Win problem (it works fine in my FF3.6 for OSX)
along with an explanation of why it only works in latest versions. :)

------
telemachos
Thanks for the link. For anyone who prefers a downloadable version:

<http://leaverou.me/wp-content/uploads/2010/10/ft2010.zip>

------
kilian
Absolutely fantastic presentation, filled with clear information I didn't know
yet. (box-shadow has a spread value too? cool!)

------
grovulent
You know - if you don't believe you can build a good enough application with
these tools such that users will feel motivated to spend 30 seconds installing
a new browser... then how on earth do you motivate yourself to learn these
tools?

I don't understand this attitude in web development that panders to this
contradictory sentiment. It's like saying - yeah, really we believe all web
applications are actually worthless and people only use them while they
represent the path of absolute least resistance.

Maybe this sentiment is true. But then, how does any web developer convince
themselves they are creating anything of value? Surely if you're going to
spend all this time on this stuff, then you HAVE to believe that you are
creating something of value. And if you do believe this, then surely you
believe that people would be willing to spend 30 seconds of investment
upgrading their browser.

~~~
andrewf
You are assuming that users:

(a) know what a web browser is (b) know that it can be upgraded, and how (c)
aren't prevented from upgrading due to school/workplace/etc (d) realise the
benefits that come with using something newer than IE6 (e) given all the
above, decide that your app and others like it aren't worth the install

At least one of (a) through (d) is false for many users.

~~~
grovulent
You're assuming that users:

a) Haven't heard sufficient word of mouth buzz about the application such that
they question why it performs so poorly for them. b) That this word of mouth
doesn't cause them to seek out the source of the problem - i.e. the old age of
their browser. c) that they don't look forward to using a platform that allows
them to enjoy the application when they are blocked from upgrading at
work/school etc, d) that it is not possible to infer the increased value of
upgrading from observing the experiences of those who have, and e) given all
of the above, still decide that your app is of no value to them.

That is to say, if you assume a) through d) then you assume your app is of
little value and you shouldn't be building it.

~~~
andrewf
I'm definitely assuming (a). I think we have different user stereotypes in
mind. I think that lots of people spend little to no time hearing about, or
talking about, applications they aren't using already.

These are the kinds of people that go to mint.com not because they've heard
about it, and are excited about it, but because they typed "track my finances"
into Google and it was the first result.

~~~
grovulent
Well I don't disagree that in one sense you're making your life harder for
yourself by adopting a platform that has a smaller install base...

But I do want to challenge the idea that you're necessarily making the right
decision by trying to appeal to the widest possible install base. It might
just be that this is more harmful than is commonly accepted.

------
pavlov
Site doesn't seem to work in Chrome 7 on Mac OS X 10.6 -- or maybe I just
couldn't figure out how to use it.

~~~
telemachos
Forward arrow worked well for me (same browser + OS) - though occasionally
slow/janky. The presentation's creator mentions that it worked best on
Firefox, I think.

~~~
toni
It doesn't work at all on FF3.6.11/WinXP

~~~
CWIZO
It says Firefox 4 in the presentation

~~~
toni
oh ok, thanks! I wouldn't know because it never went further than page 1 :)

~~~
kprobst
Works fine for me on FF 3.6.12

~~~
toni
Pretty strange, no luck on 3.6.12 as well.

------
alttab
Not very practical if you need the bleeding edge browser to even view the
slides. Couldn't get past the first slide in Safari, Chrome, or Firefox on my
Mac. And I keep that shit updated.

CSS3 will be a wasted effort if 1) not all browsers implement it in a sane way
(looking at you IE and mobile Safari) and 2) people actually update their
browsers.

The only things I use that are "CSS3" are shadows and rounded corners. If it
doesn't look 'OK' in IE7 I don't do it. If it doesn't work in IE7, I design
around it so it does.

The minute you require the nightly build of any browser to run a tech demo you
might as well be running flash. The beauty of HTML5 and CSS3 is the promised
ubiquity. Capability without wide adoption will turn CSS3 into the next
Silverlight.

------
DCoder
The presentation is nice, but I strongly disagree with the author's chosen
method of drawing browser icons:

    
    
      .browser-support dd:nth-of-type(3) { background-image:url("img/opera-logo.png"); }
      .browser-support dd.no-support:nth-of-type(3) { background-image:url("img/opera-logo-white.png"); }
    

And looking at the calculated width example reminded me of the box-sizing
property [1], which would simplify that particular use case.

[1]: <http://www.w3.org/TR/css3-ui/#box-sizing>

~~~
leaverou
I just didn't want to clutter it with duplicate things like <dt
class="opera">Opera</dt>. I kinda agree with your point though, it was
something I also wasn't very sure about.

I also agree that box-sizing is better, I have also used it in a few places. I
mentioned it in my talk too, I just didn't put it in the slides. I just wanted
to experiment with calc() a bit too :P

------
Robin_Message
Given that navigation isn't working for me on Firefox 3.6, can we retitle this
to "CSS3 - An Impractical Introduction"?

------
rodh257
With all the browser prefixes (moz, webkit, o etc) do they eventually get
changed to the proper thing when the spec is finalized?

It's sad that, as mentioned in the presentation, CSS3 should reduce markup.
but to do something like -moz-transition: 1s ease-in; -webkit-transition: 1s
ease-in; -o-transition: 1s ease-in; transition: 1s ease-in;

What is there reasoning for not just doing transition, why do they all put
their own vendor prefix on it?

~~~
leaverou
Yes, eventually the prefixes get dropped. In some engines sooner than others.
Eric Meyer recently wrote a nice article about this, on ALA:
<http://www.alistapart.com/articles/prefix-or-posthack/>

------
zarify
Loved the presentation, but alternately excited then saddened when it came to
features and then browser support.

It really makes me wonder that anything ever gets developed on the web when
there's this gradual and incomplete adoption of features/standards. Imagine
what it'd be like if there was a world-wide HTML5 Release Day, when all
browsers updated and suddenly everything Just Worked _wistful sigh_

------
pbhjpbhj
I liked the presentation, but as another commenter said it made me a little
sad as some of the features are quite ill-supported (in the latest betas) and
so realistically I think we're looking at several years until they can be used
(unless MS suddenly decide to push IE updates hard or someone makes an IE-
specific virus that takes out a few high-profile companies).

@Lea Verou: I also liked the backgrounds and was thinking about mimicking the
darker wood one, then noticed it in the credits. But then the DA page says CC-
BY-NC-ND and I wondered if you personally knew the artist or had just emailed
them to get the extra derivative and commercial use permissions?

One other comment - I had to look at the filename to find out what your
company was called looks a lot like "fresiset" in the logo.

------
da288
This should make it a lot easier for developers to code a sense of design, a
bit like AS3 for Flash.

------
kumarshantanu
Not working on Chrome, Firefox, Safari and Opera on Windows 7.

~~~
Simucal
Working on Chrome 7.0.517.41 with Windows 7.

Use the arrow keys if you weren't already doing so.

------
tomjen3
How much of this works on IE6? Or even IE8?

~~~
ronaldj
Isn't that kind of a ridiculous question? Obviously, none.

~~~
tomjen3
Not really - I can't know everything, and Microsoft would have had to add
something to IE to justify a new release right?

------
RoyG
Crashed Safari/Snow Leopard 3x, after zooming the processor like Flash on
steroids. NRFPT.

------
binaryfinery
If the author can't make it so that it tells me, on page 1, how to get to page
2, then I wonder about how credible a source they are for anything to do with
UX.

~~~
leaverou
The slides were initially made to complement my talk at Front Trends 2010, so
it wouldn't make much sense in that context.

~~~
binaryfinery
No, not in that context. But maybe when you posted them on the internet, maybe
that's a different context? And being a CSS expert, you were quickly able to
add the sentence "Use the arrow keys" in a nice, small, print at the bottom.
Right? Being an expert?

