Proposals in the works for new media queries specific to touch enabled devices. Examples include pointer, which will differentiate wether the device has a fine or coarse pointer (finger vs mouse) and hover, which would say if the device supports hover states. I can see this being helpful and useful for building mobile friendly sites where you want good control over interactive elements with hover states.
I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope to see it in use for the sake of consistency!
Embedded Link
Zocial Button Set: 72 CSS3 Buttons
The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear. The standard buttons provided by third parties (such as Facebook, Twitter and SoundCloud) vary in size, style and interactivity. A consistent button…
Here is a great example but an even better writeup on the full process. Some great details on the inner working on css3 animations and the different browser implementations. It's amazing the things that css can accomplish now, especially when we don't support ie! Jokes!
Another great article from Jonathan Snook reasoning thorugh the benefits of specific css class selectors with some good examples. Really calls to mind his SMACSS principles I've been loving.
Embedded Link
Decoupling HTML From CSS | Smashing Coding
For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript…
Hakim / CSS3 Scroll Effects
Decided it was time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. Not intended for any practical use but the visuals are surprisingly impactful.
Dave Rupert shares a quick tut on how to use percentage based padding-top (and height:0) with images as background images to let them be responsive and still keep the proper proportions. Thanks for sharing Dave!
Embedded Link
Uncle Dave’s Ol’ Padded Box
Uncle Dave's Ol' Padded Box. Here's a CSS trick I've been using lately in my responsive designs. April 09, 2012 • Articles • Tweet. Recently on ShopTalk, we were asked about our favori…
Here's a great example of how to embellish a design without adding (much) markup and using tools available to progressively enhance the experience while not burdening users with downloading any more kbs.
I hadn’t heard there was support for calc() in css yet, but apparently you can use it in a couple browsers! This is very exciting news and I wonder how long until it’s fully supported. Currently it can be used in the chrome 19 (with vendor prefix: -webkit-calc), firefox since ff8 (with the vendor prefix: -moz-calc) and the biggest surprise of all is that IE9 supports it already with no prefix! It seems css will begin contending with some of the css preprocessors.
I’ve customized pears.I’veforked it, adding support for coding in LESS as well as code highlighting! The LESS auto compiles to CSS and then is applied to the HTML content.
Apple and Chrome: They’re supporting vendor prefixed properties like they’re a standard part of development.
Firefox, Opera and Internet Explorer: They should have been on the ball more. Need to push their evangelism further. Teach developers that it’s not exclusively -webkit to style elements.
All the browsers: experimental suggests that it will either be discarded or implemented fully at some point. It’s both not clear what’s a real specification be experimentally supported, nor when those experimental prefixes will be dropped.
The working group: for not getting these properties to standards quickly enough. The web moves quickly, and as much as a I appreciate that the standards will not move as quickly, they’re still taking way too long.
Evangelists: We’re too eager to show off experimental effects. They’re cool, right? But it’s cost us, and we should always used vendor prefixes as a backup, not as the final thing.
Developers: We know better. We know/hope that eventually these prefixes will be dropped, but we’re propagating this problem.
You and me: I’m just as guilty as everyone else in using WebKit only prefixes.
Browsers need to:
Non-production ready browsers should support experimental prefixes, production ready releases should not. If it’s Chrome 16 – the stable version – experimental support should not be baked in. The properties should be full available without the prefix.
Drop experimental prefixes – not entirely, but after a finite amount of time. It’s unacceptable and a disservice to the developers working with your browser. You need to give timelines to dropping these things.
Work with the working groups (…Apple).
