10 ms·
CSS3 - A Practical Introduction
- da288 16y agoThis should make it a lot easier for developers to code a sense of design, a bit like AS3 for Flash.
- kilian 16y agoAbsolutely fantastic presentation, filled with clear information I didn't know yet. (box-shadow has a spread value too? cool!)
- telemachos 16y agoThanks for the link. For anyone who prefers a downloadable version: http://leaverou.me/wp-content/uploads/2010/10/ft2010.zip http://leaverou.me/wp-content/uploads/2010/10/ft2010.zip
- pavlov 16y agoSite 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.
- xorglorb 16y agoIt was really jerky and slow in Chrome 9 on OS X 10.6.4.
- telemachos 16y agoForward 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.
- grovulent 16y agoYou 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 16y agoYou 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 16y agoYou'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.
- Alexx 16y ago
- Construct 16y agoFYI, use the arrow keys on your keyboard to navigate the slides. Took me a minute to figure that one out.
- mattew 16y agoThanks 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 16y agoOn Android, you can long-hold the menu key to bring up a keyboard at any time. Maybe iOS has a similar, undocumented feature.
- seiji 16y agoThey just have to make it respond to touch events so you can swipe left and right. It's what http://slides.html5rocks.com/ http://slides.html5rocks.com/ does and what I stole for http://slippycomics.com/ http://slippycomics.com/
- prabodh 16y agoto add to this ..one more info..it is deck of 103 slides...
- StavrosK 16y agoThanks for that, the usability is an "epical failure", as kids today like to say.
- kumarshantanu 16y agoNot working on Chrome, Firefox, Safari and Opera on Windows 7.
- Simucal 16y agoWorking on Chrome 7.0.517.41 with Windows 7. Use the arrow keys if you weren't already doing so.
- tomjen3 16y agoHow much of this works on IE6? Or even IE8?
- samdk 16y agoI 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 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 16y agoIt 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 16y agoIt 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 16y agoBy "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.
- carbocation 16y agoLet 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.
- RoyG 16y agoCrashed Safari/Snow Leopard 3x, after zooming the processor like Flash on steroids. NRFPT.
- leaverou 16y agoIt'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-presentation-framework/ 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. :)
- DCoder 16y agoThe 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 http://www.w3.org/TR/css3-ui/#box-sizing
- leaverou 16y agoI 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
- binaryfinery 16y agoIf 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 16y agoThe slides were initially made to complement my talk at Front Trends 2010, so it wouldn't make much sense in that context.
- binaryfinery 16y agoNo, 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?
- alttab 16y agoNot 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.
- rodh257 16y agoWith 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 16y agoYes, 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/ http://www.alistapart.com/articles/prefix-or-posthack/
- zarify 16y agoLoved 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 16y agoI 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.
- Robin_Message 16y agoGiven that navigation isn't working for me on Firefox 3.6, can we retitle this to "CSS3 - An Impractical Introduction"?