CSS3 - A Practical Introduction | Hacker News Reader

CSS3 - A Practical Introduction

leaverou.me

127 pointsgtzi48 comments

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

Took me a minute to figure that one out.

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.

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

They just have to make it respond to touch events so you can swipe left and right. It's what http://slides.html5rocks.com/ does and what I stole for http://slippycomics.com/

to add to this ..one more info..it is deck of 103 slides...

Thanks for that, the usability is an "epical failure", as kids today like to say.

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.)

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.

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.

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.

Let me reword that slightly into something I'd endorse: it is less helpful for me to know the compatibility with the latest version of each browser than it is for me to know compatibility with the most commonly used version of each browser.

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...

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. :)

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

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

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

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.

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.

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.

I think you're hugely over estimating the competence of a large percentage of internet users.

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.

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.

>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.

Or, you feel your app is so valuable that it is worth the time and effort making it capable of reaching the widest possible audience.

It really depends on the target demographic of your app (technical vs non-technical users).

In most cases, the signaling works the opposite way. If the authors of a website can't be bothered to make it work well in current browsers (which shouldn't be that hard, just don't do anything fancy), people assume either that they're amateurs or they're targeting a specialized audience, most likely the former.

Requiring a specific browser is a form of playing hard-to-get. That's also a form of signaling, but it doesn't work by itself. You need some other way of convincing people that it's worth jumping the hurdle.

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.

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.

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

It says Firefox 4 in the presentation

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

Works fine for me on FF 3.6.12

Pretty strange, no luck on 3.6.12 as well.

It was really jerky and slow in Chrome 9 on OS X 10.6.4.

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.

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

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

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

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?

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/

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

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.

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

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

Working on Chrome 7.0.517.41 with Windows 7.

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

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

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

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

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

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.

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

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?

Reply on news.ycombinator.com