Create a menu that, on smaller screens, changes into a dropdown menu. A dropdown takes up much less screen real estate and can be easier to use. This tutorial shows you how and discusses the ups and downs.
There are rules when it comes to leaving your attribute values unquoted in HTML. Then there are the actual problems that are caused by breaking them. Then there are problems that can happen outside of those rules. Yeah it’s kinda complicated but I’ve tried to document it here.
IE 8 (only) thinks that all table cells have a colspan attribute, whether they do or not. So if you are looking to style table cells uniquely that have that attribute, it’s a bit tough.
The new poll is up (in the sidebar on the actual site, RSS folks) and it reads:
Would you rather host a 200k file on a major CDN or a 20k file self-hosted?
This requires a little explanation.
Nearly a third of CSS-Tricks readers work from home! Isn’t that crazy? Well I was surprised, anyway. I know working from home is becoming more and more prevalent at companies. I bet a bunch of you are the freelancer types as well. But wow, a third, I never would have guessed that.
Next up at 20% is an “open office” where you have a bunch of tables with computers and multiple people sit at them and work. That’s what the…
New project from Mozilla team to tackle the long-standing issue of single-signon (not needing a unique login/pass for every single app in the world). I love it when apps have "Sign in with Twitter", but I'm not sure Twitter should be the hub of all login activity, I'd rather it be some project solely dedicated to it. I hope it takes off. Seems easier than Open ID which always eluded me.
The <progress> element has landed in the Firefox nighties, one of the new HTML5 forms related elements. Of particular note is that they exposed the ability to style it via pseudo elements right away. Mounir Lamouri fills us in:
... the progress element is two div's. You can access to the outer div by styling progress and to the inner one with
::-moz-progress-bar
I wish all "widgets" were this easy and straightforward to style.
Two of the CSS properties most lamented by mobile website developers is fixed positioning and scrolling overflow. These are absent for a reason. Poorly implemented, they might single-handedly render a website unusable on a small screen. (Imagine a giant fixed position header that hides all the content, or being zoomed into a small scrollable area and now you can't scroll the rest of the site.)
Johan Brook notes that these are now present in Mobile Safari in iOS 5 Beta 2, with a proprietary property and vendor extension. Will be interesting to see how they solved the potential pitfalls.
HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it works, great, the form is better, if not, whatever. In this screencast we look at all the new types, attributes, and elements and finish up looking at real world forms and how they could be better if they used these HTML5 features.
Links from the video:
