Open Web Camp II at Stanford today was a blast! Lots of information. Plenty I’m already familiar with, but also lots I learned.
I woke up late, only to see people tweeting about the conference (doh!), so I missed seeing Molly Holzschlag. But I arrived just in time to see…
Estelle Weyl: “CSS3 Implementable Features”
Estelle Weyl (@estellevw)
Estelle’s talk was about what features of CSS3 are available to use right now. She covered all the usual: border radius, text shadow, box shadow, tilted images, etc. And she showed off Paul Irish’s css3please.com, which greatly helps implement these cross-browser, with even the filter hacks required to pull it off in IE! (no word about the performance hit of these IE hacks, which I’m sure I’ve read about somewhere…)
One of the cool new things I learned was that you can use CSS shorthands to declare border-radius (rounded corner) values. So instead of this mess (courtesy of border-radius.com):
-webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px;
All you need to do is this, which is equivalent to the above (disclaimer: I’m not sure about the compatibility of this shorthand!):
-moz-border-radius: 10px 20px 30px 40px; -webkit-border-radius: 10px 20px 30px 40px; border-radius: 10px 20px 30px 40px;
Or if you get bored of doing a perfectly rounded border radius, you can also do elliptical border radius (again, I’m unsure about the compatibility!):
-moz-border-radius: 20px / 10px; -webkit-border-radius: 20px / 10px; border-radius: 20px / 10px;
Matt Henry: “Going Mobile”
Matt Henry (@greenideas)
I’ve worked closely with Matt at Yahoo! Mobile for the past year, so not much was new for me. It seemed that the audience really dug the talk though (lots of questions were asked!).
Essentially, Matt explained that you have to make at least two different versions of your website: one for feature phones and one for smartphones like the iPhone, and with the help of something like WURFL, detect the phone and direct the user to the appropriate site.
Matt also emphasized that feature phone browsers are terrible, much worse than IE6.
As part of a response to someone’s question, Matt talked about the idea of feature detection on smart phones, essentially saying that by the time you’ve sent the JavaScript feature detection to the device, it’s already too late, and in some cases might end up crashing the browser (for feature phones that have an extremely small page weight such as 9KB). So for now it looks like user agent sniffing on the server-side is the way to go.
And there was a brief shoutout for Yahoo! Blueprint, which renders a website across thousands of phones.
Victor Tsaran and Todd Kloots: “Accessibility 101″
Before joining Twitter, Todd Kloots spent some time with Victor Tsaran at Yahoo! on accessibility.
In this talk they went over common misunderstandings and showed that even today, big companies such as Digg.com are still not investing in making their site accessible.
This was a pretty high level overview of basic accessibility, including an introduction to screen readers and ARIA attributes.
Here’s some of the stuff covered:
-making forms accessible with fieldset and legend elements and linking captions to their inputs.
-adding alt tags to images even if blank (so the screen reader doesn’t announce the entire URL)
-the title tag doesn’t make things more accessible, whereas the alt tag does
-screen readers obey display: none and visibility: hidden and that to hide something from normal users you have to position it offscreen (with negative left or text-indent).
-how to make basic tables accessible by taking advantage of table summary and caption, as well as putting tables headings into the <thead> element.
I’m still trying to absorb it, but Todd also mentioned that a simple anchor tag for a button didn’t semantically make sense, and that it was more semantic to have a span wrapped around a <button>. I guess I either don’t understand fully or I just disagree, since a <button> appears within a form and sometimes it just may be a cleaner solution to use a simple anchor tag. I guess I will need to look into this more.
Joseph R. Lewis: “Refactoring for Mobile”
Joseph R. Lewis (@sanbeiji)
This talk was basically a live demo of implementing CSS media queries in a WordPress installation to make an iPhone-friendly version of the site. There was a good use of the viewport tag, media queries, @font-face, text-shadow, box-shadow, border-radius, etc.
One surprising thing I learned was that apparently Mobile Safari recognizes border-radius without the webkit prefix? I’m going to follow up on this.
Dirk Ginader: “5 layers of web accessibility”
Dirk Ginader (@ginader)
Dirk is another Yahoo! (we’re everywhere!) whose presentation was also about accessibility.
As web developers, we’re already familiar with three layers of the web:
-HTML, responsible for content
-CSS, responsible for presentation
-JavaScript, responsible for interaction
Dirk introduced another two levels:
-CSS for JavaScript: special styling for when the full-featured JavaScript is available (this can be used by having JS add a “js” class to the document, and therefore writing CSS rules with “.js” in the front)
-WAI-ARIA: special HTML attributes to help define roles, landmarks, allow the developer to give instructions directly through the screen reader, etc.
Also a few more points:
-use the JavaScript focus() method for events (alerts that are injected at the top of the document and are otherwise ignored by the screen reader, windows that open and close, etc.)
-:hover CSS pseudoclass is for the mouse only.. be sure to also use the :focus pseudoclass! (my note: this is also important on mobile, for touch devices!)
Summary
Overall a great day. The food was pricey but good, and the whole event was free, so I can’t complain! Nice event, I just wish I could’ve seen the other talks in the other tracks!
Targeting Internet Explorer (IE): the age-old struggle
July 7th, 2010As long as I can remember, developers have always been trying to target IE one way or another. Thanks to the wonders of modern technology, there have been multiple ways to pull this off.
I guess I really haven’t been keeping up with the latest frontend trends (doh!), as I’ve just recently discovered this very elegant solution circa 2008 offered by Paul Irish, which sticks a class on the body tag using proprietary conditional IE tags (no JavaScript magic needed here!):
No need for creating multiple stylesheets for each version of IE (that makes extra network requests… boo)! Now you can add adjustments to your main stylesheet just as you would with CSS hacks, except now you’re doing it in a not-so-hacky way.
For instance, if you have some peculiar CSS quirk in IE6, you simply apply a fix like this:
.some-element { width: 200px; } /* standards-based browsers */ .ie6 .some-element { width: 160px; } /* elegant ie6 fix! */The old way: CSS hacks
Previously I considered some CSS hacks the most elegant solution, but that was in the days when IE6/7 ruled. You can see that the following CSS hack gets really unruly for IE8 (that hack thanks to David Bloom):
.some-element { width: 200px; /* standards-based browsers */ /* some yet-to-be-determined IE9 hack goes here */ width /*\**/: 180px\9 /* targets IE8 standards mode */ *width: 170px; /* targets IE7/IE6 */ _width: 160px; /* targets IE6 */ }This works, but becomes quite difficult to maintain and understand. And it just creates a need for someone to find yet another hack for each new version of IE that’s released. By using the IE conditional comments to add a class to the body tag, we can accomplish the same result in a way that is easier to read and maintain and is dead simple to update when a new version of IE is released:
.some-element { width: 200px; } .ie9 .some-element { width: 190px; } .ie8 .some-element { width: 180px; } .ie7 .some-element { width: 170px; } .ie6 .some-element { width: 160px; }Woohoo!
Leave a Comment