Touch Specific Media Queries in CSS4

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.

Embedded Link

CSS4 media queries to tackle touch | News | .net magazine
Shift to input concepts rather than explicit lists will benefit developers

CSS3 Button/Icon set

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…

CSS3 Only Cycle

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!

Embedded Link

A Pure CSS3 Cycling Slideshow | Smashing Coding
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

Separate HTML and CSS for fast clear & clean code

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…

Some great CSS3 Effects on scrolling from Hakim

Some really cool examples here. I really like the helix effect personally. Check them out: http://lab.hakim.se/scroll-effects ! And the code on github: https://github.com/hakimel/scroll-effects

Embedded Link

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.

Padding for elements to responsively maintain aspect ratios

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…

Stacked Visual with CSS pseudo elements

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.

Embedded Link

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element
By now, hopefully you're familiar with the use of the :before and :after pseudo-elements in order to do some interesting effects with CSS. Here I'm going to show you how you can create a simple 'stack…

CSS layout gets smarter with calc() – HTML5Rocks Updates

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.

html5

CSS layout gets smarter with calc() – HTML5Rocks Updates.

LESS and syntax highlighting for Pea.rs

Pears is an open source WordPress theme by Dan Cederholm (simplebits), enabling people like us to get your own pattern library up and running quickly. Collect, test, and experiment with interface pattern pairings of CSS & HTML.

I’ve customized pears. I’ve forked 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.

  1. Grab the original or fork at Github.
  2. Install the theme.
  3. Create markup & style patterns.
  4. Learn.

Check out my own pattern library (at http://pears.circlecube.com/) to see it in action!

or visit the original.

Vendor Prefixes – about to go south

What are “standards” coming to?

Who’s guilty?

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).

via Vendor Prefixes – about to go south.