Nasty

A boilerplate for body fonts and colors.

Framework for making responsive websites.

Insane.

Roundup of lots of pseudo-element tricks.

Something to refer next time I … wait, I never code emails. Something to point others too, I guess.

For the next time I need to make an image scale.

Something to at least take a look at before starting the next project.

Tip for making HTML5 and Flash videos expand with the browser.

Elliot Jay Stocks demos a technique for transition image sizes as the browser width varies.

Consistently styled form elements across browsers.

Andy's right. Expecting the site to look the same in all browsers is rarely the client's perspective. Too often we introduce that requirement internally. It's beyond time to move on.

Depressing news from Jeffrey Zeldman on the near-term viability of @font-face font embedding.

Mark Boulton with a handy primer on @font-face plus useful font stack advice.

More hot CSS animation action. Thank you Tim Van Damme.

More CSS ammo for those willing to use it.

I'd better check my reset.

Making sense of the CSS quotation mess.

More CSS from the future — animated buttons.

Example form marked up with HTML5 and styled with CSS3

iTunes Extras using web technologies

Star Wars Episode IV opening crawl in HTML and CSS

«CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.»

«Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.»

«For now though I thought people mind find it useful to know the state of support in the current browser market. I've taken all the A-Grade browsers and tested them one-by-one for their feature support . Needless to say it's produced some interesting results.»

«A quick refresher: following a different path than every other browser out there, IE requires a custom-created, rights-managed font file called EOT (Embedded OpenType). The syntax to safely serve up an EOT to IE was shown in that previously-mentioned post. What we’re covering here is, how in the world do you create an EOT file in the first place?»

«Click the "Add Fonts" button and select all the TTF and OTF fonts you want in the @font-face kit. Choose your options then click the download button at the bottom. Voila!»

«For many years, “smart” font formats such as OpenType and AAT have provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag. But these have typically only been available to those using professional publishing applications such as Adobe InDesign. Firefox currently renders using font defaults; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.»

«Over the last few months, as I've learned more about HTML5, I've wondered about the advantages that I might gain by using it. Recently I realised that the question shouldn't be why use HTML5 but why not? From what I've learned from reading and by talking to people, the only reason that I can find not to use it is that without JavaScript, HTML5's added elements (section, article, aside, figure etc.) cannot be styled in Internet Explorer.» # A look at what's possible now with CSS and HTML5.

«In Firefox 3.5 we included support for linking to TrueType and OpenType fonts. In Firefox 3.6 we’re including support for a new font format – the Web Open Font Format, or WOFF. This format has two main advantages over raw TrueType or OpenType fonts.»

«Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that!»

«On top of this, I have found that developing my own package of conventions and library items makes designing in a browser as easy, I would argue easier, than plugging in a third-party framework like 960gs or Baseline. So what is stuffed into my package?»

"Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention."

"An unofficial feed aggregator for An Event Apart"

"This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own."

On this page I compare 19 WebKits in order to prove that there is no “WebKit on Mobile” and to figure out which one is the best. My hope is that eventually I’m going to gain some insight in the “family tree” of all WebKits.

"We’ve had a number of people asking about templates, boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and use, edit, amend and update in your projects."

"To the extent that W3C specifications remain modular, practical, and accessible to the non-PhD in computer science, they will be adopted by browser makers and the marketplace. The farther they depart from the principles Bert articulated, the sooner they will peter out into nothingness, and the likelier we are to face a crisis in which web standards once again detach from the direction in which the web is actually moving, and the medium is given over to incompatible, proprietary technologies."

"For me, at the core of this debate is a much bigger question: Is one site for all really feasible? Traditionally, I’ve believed it is. But increasingly I’m finding that it’s not always practical."

"We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM."

"Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block. With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do."

"That is why I'm now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client's money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout."

font-size-adjust

"Lately I’ve been questioning if it isn’t time to move beyond 960 for websites, and if so, what the ideal width may be."

If you ever wondered when you're going to benefit from those advanced CSS features you keep hearing so much about …

"I'm building a framework to allow others to build their own applications quickly and easily. This framework, I have dubbed Streamliner."

WebKit steals styled scrollbars from Internet Explorer.

Don't shoot the messenger. "Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” These three words contain a powerful magic, under the cover of which we churn out fixed-width layout after fixed-width layout, perhaps revisiting a design every few years to “bump up” the width once it’s judged safe enough to do so. “Minimum screen resolution” lets us design for a contrived subset of users who see our design as god and Photoshop intended. These users always browse with a maximized 1024×768 window, and are never running, say, an OLPC laptop, or looking at the web with a monitor that’s more than four years old. If a user doesn’t meet the requirements of “minimum screen resolution,” well, then, it’s the scrollbar for them, isn’t it?"

Keep learning. The world ain't standing still.

IE6 begone! Ah, someday.

"I realize that the syntax I depict would cause backwards-compatibility problems, as in older browsers would not behave as intended when exposed to this sort of thing, but I’ve also stopped being concerned about that. We can’t keep holding ourselves hostage to decisions made a decade or more back."

"The idea of graded browser support is to support all browsers so that your site is usable, accessible and at least reasonably attractive."

Using (css) tables for layout.