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…
I’ve recently been trying RSS advertising here on CSS-Tricks through BuySellAds. Three or four advertisers have tried it and none have stuck around. Not a total loss from my perspective, but certainly not great.
CSS sprites are almost always the way to go when it comes to applying background images with CSS efficiently. One hurdle you may come across is when you want to apply an image that’s a part of a sprite to an element with an unknown height and width. We can hurdle that hurdle with CSS pseudo elements.
It’s CSS-Tricks fourth birthday. Yay! Time for the traditional mid-year mini state of the site.
There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us has slightly different jobs and slightly different skill sets. That means a little helper app that is useful to you might not be to me and vice versa. So of the probably-hundreds of these one-page apps that I’ve seen over…
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.
Making a really good CSS sprite image usually isn't trivial work. There are all kinds of tools to help with it. My favorite of them has been SpriteMe. I describe my typical workflow for using that here. Sprite Cow might be my new favorite though, can't wait to try it. With it, you design your own sprite (♥) and you use the sweet Sprite cow interface to get precise CSS background positions for the different parts of it.
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:
