Over the last couple years HTML5 and CSS3 have rocked our worlds and the way we approach common website issues. Every few days it seems there is some new fangled snippet or approach that is a game changer. Today might just be another one of those days (kind of).

One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future.

There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

The Specification

The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

What it says here, is that a selector with a :not() in it will match all elements that do not match what’s between the parenthesis.

A simple selector is a term used in the specifications. A simple selector is: a single element, attribute selector, class, id or pseude-class.

Some websites now contain 'responsive images'. These scale (or crop) depending upon your screen's viewing area, so the image sizes remain appropriate whether you're looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS level 3 relating to the hierarchical nesting of style rules. It includes and extends the functionality of CSS level 2 [CSS21], which builds on CSS level 1 [CSS1]. The main extension compared to level 2 is the ability to nest a style rule within another rule, allowing greater modularisation and readibility of CSS documents.

CSS3 Generator

Ultimate CSS Gradient Generator
A powerful Photoshop-like CSS gradient editor from ColorZilla.

So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

Looking for a way to conditionally load these scripts client-side based on feature detects? See Modernizr. Looking for a guide to writing your own polyfills? See Writing Cross-Browser JavaScript Polyfills.

CSS3 Social Sign-in Buttons with icons. Small and large sizes.

Super-smooth CSS3 transformations and transitions for jQuery
jQuery Transit is a plugin for to help you do CSS transformations and transitions in jQuery.

LungoJS
HTML5 Mobile Framework, and stuff.

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you're working on your next project, you don't have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

No longer must your rainbow dividers be images slowing down your computer! Make them hardware accelerated!

Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner.

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:

Google launched its Chrome Web browser on September 1, 2008—three years ago today. In the time since its debut, Google's Web browser has attracted a considerable following and influenced other browser vendors. To celebrate the anniversary, Google has published an interactive HTML5 infographic that presents the history of the major Web browsers and Web standards.

Chrome's contributions to the Web and browser design are significant. Google set the pace of development for modern browsers by being the first browser vendor to adopt a radically shorter development cycle and a release management strategy that emphasizes fast-paced incremental improvement. Chrome's transparent update system and channel-based prerelease distribution model are being adopted by Firefox and could eventually be picked up by other browser vendors.

Chrome's distinctive minimalist design has also changed the way that browser vendors think about usability. Chrome's approach to paring down the interface and offering a more streamlined user experience has been embraced by other browsers. Google took the lead on some controversial moves, like not displaying "http" in the location bar.

The technical influence of Chrome can even be felt outside of the browser ecosystem. The performance of Chrome's sophisticated V8 JavaScript engine and the ease with which it can be embedded in other software have led to its adoption in a range of other environments. For example, V8 was used to produce Node.js, a server-side JavaScript runtime that is popularizing the use of JavaScript for backend Web development.

Although Chrome has come a long way, the browser still lags behind its competitors in some key ways. When we first reviewed Chrome in 2008, one of our biggest gripes with the user interface was the lack of tab overflow handling. After three years, this issue still hasn't been fixed. Chrome's user interface for browsing history is another major weak area relative to other browsers. History autocompletion in the Omnibox is also quite limited compared to Firefox's AwesomeBar.

Despite the limitations, Chrome's audience has grown explosively since its 2008 launch. According to statistics from StatCounter, the browser's marketshare hit 10 percent last year and continued growing to 23 percent, as of this month. It's become an important part of Google's product landscape, serving as the central pillar of the company's ambitious Chrome OS operating system.

After three great years of innovation and raising the bar, Chrome's future looks bright.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it's really not that hard. The way I did it was to make one big long graphic where the first part and the last part are visually identical.

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

Some Google projects really do start from one person hacking around. Last summer, an engineering intern named Pieter Senster joined the mobile advertising team to explore how we could display Flash animations on devices that don’t support Adobe Flash player. Pieter made such great progress that Google hired him full time and formed a team to work on the project. Swiffy was born!

Today we’re making the first version of Swiffy available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari. It’s still an early version, so it won’t convert all Flash content, but it already works well on ads and animations. We have some examples of converted SWF files if you want to see it in action.

Swiffy uses a compact JSON representation of the animation, which is rendered using SVG and a bit of HTML5 and CSS3. ActionScript 2.0 is also present in the JSON object, and is interpreted in JavaScript in the browser. This representation makes the Swiffy animations almost as compact as the original SWF files.

Swiffy is a great example of how far the web platform has come. Swiffy animations benefit from the recent advancements in JavaScript execution speed and hardware accelerated 2D graphics in the browser. Viva la Web!

One of the biggest gripes of web apps in Mobile Safari comes to an end. In iOS 5 Beta 2, you are able to do this on an element with CSS:

overflow: scroll;
-webkit-overflow-scrolling: touch;

And the content inside that element should get native style momentum scroll. Just like any other app in iOS. Leaked screenshot of release notes (click for larger view):

Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Gridless is an awesome HTML5 and CSS3 boilerplate for making responsive, cross-browser websites with beautiful typography

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

These progress bars were created by Galen Gidman using no images what-so-ever... just CSS3.

And voila, we now have consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers.

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you’ll need. This often occurs when you’re using a web font in a logo or heading.

That’s why we’re introducing a new beta feature to the Google Web Fonts API. The feature is called “text=”, and allows you to specify which characters you’ll need. To use it, simply add “text=” to your Google Web Fonts API requests.

In case you weren't aware, CSS animations are awesome. They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint. One of my favorite effects is the spinning, zooming CSS animation. Let me show you how it's done!

Soon after publishing our recent post on 'Mobile email design in practice', it was pointed out to us that using @media queries to optimize email for mobile devices has a glaring downside. As it turns out, Yahoo! Mail inexplicably gives precedence to the @media stylesheet, using the CSS styles defined within, over any inline styles in the HTML email. The result is predictably sub-optimal:

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. Mobile Boilerplate is not a framework, but works well with projects like jQuery Mobile, Sencha Touch, Phonegap and Appcelerator. You get an offline caching setup for free, fast button clicks, a media query polyfill, and many common mobile WebKit optimizations waiting for you. Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn't obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let's say you wanted to create a pulsing effect as an animation. One way to do that would be to have an animation which changes the opacity on 0% and 100% and then set the iteration-count to have it run a couple of times. But you can accomplish the same thing by making the pulsate animation have multiple value along a single iteration, like this:

This is what I'm thinking is the best current way to progressively enhance forms. That is, use HTML5 features when they are available and fall back to JavaScript alternatives when they are not.

"Because if you notice, no one else is complaining. The fact is, Firefox 2, a browser released in 2006 and predates Acid 3, scores a 52/100 versus the current IE9 score of 32/100. And did I mention? Every major browsers scores over 90 on ACID 3."

"CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let’s look at a couple of quick, simple, cheezy examples."

"Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as it’s foundation." The forms styling seems a little weird to me.