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.

And that’s how we get a hexagon in CSS. The 30:52 ratio in the border widths is approximately 1:√3 which is ratio required for a hexagon.

Are the quotes in font-family: 'Comic Sans MS' required, or not?

According to the the CSS validator, the quotes are required in this case because the font family name contains spaces:

Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

However, this is an error in the CSS validator. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to.

In reality, it’s a bit more complex. To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first.

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.

Click on the drop downs above. That’s done all in CSS; no kind of javascript whatsoever. Pretty cool, eh? It’s a fun use of the :active and :hover selectors. You can browse the source code for the demo above here. If you’d like a more in-depth tutorial of how to accomplish this, continue reading.

To be honest, I’ve never really played around with inline-block too much before today, but I’ve been seeing more and more suggestions in the comments that I explore this method as an alternative to floats so I thought I’d take the advice. I was hopeful going into it that it was indeed some magic, no-hassle way around floats, but in truth it really isn’t. There are still several unexpected behaviors that you have to know about and respond to, resulting in some hacky code much like we often see with float clearing fixes.

To be fair though, it is in fact a pretty simple way to accomplish float-like layouts. More importantly, the CSS that you have to implement to make sure it’s cross-browser compatible is briefer than even the popular micro clearfix hack from Nicolas Gallagher. This may make it a better way to go for many projects.

Ultimately, I think I will in fact begin adding this method to my bag of tricks. I suspect that certain times will arise when floats aren’t ideal (example: right floats render everything in reverse) and this will be a great alternative to have in those situations.

What do you think? Is inline-block a good alternative to floats? What situations can you think of where one clearly has an advantage over the other?

A list of questions you can use to help interview potential candidates for a front-end development position.

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.

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

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.

Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS. The idea came together from various code snippets I had lying around for drawing circles and lines in other projects. I decided to make an attepmpt at a drawing API using these ideas after using Raphael.js in my Node Knockout team project.

Once upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we've graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter - from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we're going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it - we're not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Just a few moments ago, Adobe’s CTO Kevin Lynch took the stage at their annual MAX conference and explained the company’s Creative Cloud strategy. Part of that announcement is very big news for us: Typekit has been acquired by Adobe.

We are thrilled. There honestly is no better place for us to continue building our platform. But perhaps even more significantly, this represents a huge step forward in bringing fonts to the web.

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages. To start blogging with Jekyll, you have to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Octopress All of that is already taken care of. Simply clone or fork Octopress, install dependencies and the theme, and you’re set.

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.

I'm afraid Firefox doesn't support printing web fonts, so there's no workaround for this.

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”:

Cabin is a super light, super modular CSS framework that allows you to add extensions when you need them. Download it now.

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.

A JavaScript library for building modern HTML presentations. deck.js is flexible enough to let advanced CSS and JavaScript authors craft highly customized decks, but also provides templates and themes for the HTML novice to build a standard slideshow.

The idea of "CSS Tabs" has been around for a long time. If you Google it, a lot of what you get is styled CSS tabs, but less stuff on the building an actually functional tabbed area. At least, functional in the sense as we think of tabbed areas today: click a tab, see a new content area with no page refresh.

Tackling functional CSS tabs has less of a deep history. Brad Kemper was messing around with it in 2008 trying to utilize the :checked pseudo selector with radio buttons and adjacent sibling combinators. This is a really cool technique that can be utilized to do things like an expand/contract tree style menu or visually replace form elements with graphics (pioneered by Ryan Seddon).

I personally tried messing with functional tabs a while back, and came up with seven different ways to do it. Most of them centered around the use of the :target pseudo class selector and most of those techniques sucked. One was OK. They all had one major flaw and that was that URL hashes needed to be used, which "jumps" the page down to the element with the matching ID, and that is totally unexpected, jerky, and just a bad overall experience.

Working with the radio-button/:checked technique is way better, but there was a long-standing WebKit bug that prevented pseudo class selectors and adjacent sibling combinators from working together. Good news! That's fixed as of stable browser releases Safari 5.1 and Chrome 13.

So let's get this thing done the :checked way, which I think is the cleanest way to do it for now and for the next few years.

A spinning activity indicator

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.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Chosen is a library for making long, unwieldy select boxes more friendly.

Turn your checkboxes into iPhone-style binary switches

In a way, WebPutty is sort of like the first scenario outlined above…only it works the way you actually want that scenario to work: in one pane you edit your CSS, and in another pane you see a preview of how that CSS will make your website look. In realtime. No saving (we auto-save for you as you type), no refreshing the preview (we handle that too), and no reverse engineering the changes you’ve been making out of some browser extension.

See exactly which lines of code are not supported in over 24 email clients.
Email designers that are tired of trawling through check lists, this is for you.

Last week we reported some early results from the Stanford Security Lab's new web measurement platform on how advertising networks respond to opt outs and Do Not Track. This week we're back with a new discovery in the online advertising ecosystem: Epic Marketplace,1 a member of the self-regulatory Network Advertising Initiative (NAI), is history stealing.

Mobile Safari, the browser found on iPhones, iPod Touches and the iPad, does not (currently) implement the same label behaviour as other browsers. Clicking on labels doesn’t do anything—possibly, as Ben Darlow suggests, it is because it would interfere with the tap-to-select-text functionality, although personally I think that usability trumps obscure text-selection use cases.

What’s even weirder is that, in over an hour of googling, I couldn’t find a single reference to this issue. Surely someone, somewhere must have noticed that clicking or tapping on labels in forms on iPad doesn’t select the input? I resolved that when I published a fix for the issue, it would include a couple of clunky sentences stuffed with as many keywords related to the tap click form label input select checkbox radio button problem as possible…

Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods.

It's taken 9 desktop clients, 5 mobile handsets, 4 webmail accounts and a solid week of hard labor, but we've finally updated our ever-popular guide to CSS support in email to reflect the email clients that your subscribers are using today. Covering the gamut of CSS selectors and properties as well as some useful tidbits along the way, it's a must read for anyone that's elbows-deep in coding HTML email.

Nathan Smith let me know about this little gem. 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.

Not so long ago, we wrote about overriding Yahoo! Mail's default link colors with your own, using the now-famous .yshortcuts CSS hack. However, with the rollout of Yahoo! Mail Beta, we've woken to the fact that this no longer works - alas, our links have turned that ugly default blue color again.

Will hurt your feelings*

(And help you code better)

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

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.

CSS-Sprit.es is an online tool to help web designers and web developers to build CSS Sprites.
If you don't know what is a CSS sprites and are a web designer/developer please, do Internet a favor and consult this great article on A List Apart on the subject.

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

It looks like there’s finally some major improvements in mobile Safari, some of which I’ve found below on my “first glance” after downloading the SDK. Chime in if you find anything yourself!

normalize.css makes browsers render all elements consistently and in line with modern standards.

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.

If you Google around about this problem (at the time of this writing), you'll find some incomplete answers and some other snippets advocating this bad practice:

CSS Spritemap Generator

Block level elements are naturally as wide as their parent element. So let's say you put an <h1> in your <body> (and you've used reset CSS so there is no padding on the body) that <h1> is automatically the full width of the browser window. It doesn't need any help.

But it's pretty rare (and stupid) these days to set text at the full browser window width (for desktop/laptop size screens). It's just too wide, the line length is too long to be readable. It's reasonable that we would want an element to stretch the full width of the browser window, for aesthetic reasons, but limit the text inside to a readable width.

Adapt.js is a lightweight (845 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions.

I’ve been using this trick for quite a while, but I never thought to blog about it. However, I recently realized that it might not be as common as I thought, so it might be a good idea to document it in a blog post.

If you follow the discussions on www-style, you might have noticed the proposal for a @supports rule to query property and value support. Some people suggested that it should also test for selectors, for example whether a certain pseudo-class is supported. However, you can do that today, albeit in a limited manner (no OR and NOT support).

The main principle that you need to keep in mind is that browsers are expected to drop rules with selectors they don’t understand, even partially. So, if only one selector in a group cannot be parsed, the whole rule will be dropped. This means we can construct selector “tests”, which are use cases of the selector whose support we want to test, that will not match anything, even if the selector is supported. Then, we include that selector in the beginning of our selector group. If all this is unclear, don’t worry, as there’s an example coming next

Using descendant selectors is inneficient, but when your key selector (the rightmost selector) is a ID selector, then things get worse.

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

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

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.

holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website. It has a simple implementation and a mostly unobtrusive effect on your page. Not recommended for live enviroments.

Remember too that these are just guidelines: if something is flagged but you can't change it for a good reason, don't worry about it :) Also use a validator if you want to be 100% sure.

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.

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Laker is a compendium of files, frameworks, styles and tips for designing digital publications in HTML5

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:

inuit.css—cooler than a polar bear’s toenails…
Another CSS framework?!

Yup, ’fraid so, but this one’s different… It combines years of my best dev tips, tricks and practices in one handy file.
inuit.css keywords

Progressive
Flexible
Mobile
Tablet
Sensible
Extensible
Accessible
Pragmatic
Functional
Useful
Production-ready
More

Asset Compress is CakePHP plugin for helping reduce the number of requests your application requires for Javascript and CSS files. It comes with a handy set of pre-processing features.

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.

I’m not a designer, but I like to play one on the internet. Having spent a fair amount of time in front-end code, and teaching myself the basics through necessity, I think I have a decent sense of when something is amiss. So here are my short list of design annoyances. The frustrating (but also good) bit about each of these is how easy they are to fix. I’ve included relevant CSS where applicable.

Ultimately, are CSS frameworks good? Of course, for the same reason automatic transmission is good in cars. Meaning, most will use automatic transmission because it helps them drive how they need to simpler and faster. And when you get a new car, you get used to it pretty quickly. But there is a smaller subset of drivers who want to or need to drive using manual transmission – either for fuel efficiency, enjoyment, racing, or whatever other reason.

Most will benefit from the web development and design simplification that CSS frameworks give. But there will be a smaller subset who will stick to doing those tasks themselves to get precise control and results – just like manual drivers with gear shifting.

So should you use a CSS framework? For most designers, yes, you should consider using a CSS framework (hooray for no wishy-washy answer). However, it does ultimately depend on if you are the automatic or manual transmission of web designers.

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.

The <html> element is the highest level element on any web page. Every other element is within it. If you are making a fluid width site but wish to limit the maximum width it can expand (a good idea), you can do so easily by literally applying a max-width to the html element.

"This plugin is yet another product from my development work on Build It With Me. I wanted a sweet & simple custom tooltip, but nothing I found seemed to be smart enough for what I needed. I needed a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does!"

"No one likes being told what to do, especially if it’s work related, but nevertheless jobs need done. Why present boring stuff in a boring way? If you’re going to be told what to do, at least soften the blow by being told nicely. Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff."

"Typography is a massive subject and I am sure many will disagree with the suggestions I have made. Remember these rules are always made to be broken. With knowlege and experience comes the decision if it is appropriate to stick to or break these rules. These rules are kind of beginners guide to typography. Stick to them and I think you can’t go far wrong." Basic typography rules.