Article Archives

RoboHornet

Paul Irish:

The past few years’ browser focus on speed has been great for us and our users. We’ve seen a huge and dramatic performance boost on benchmarks like Sunspider, Kraken, and Octane. But, these benchmarks, often crafted by JavaScript VM engineers, test raw JavaScript performance, which is rarely the bottleneck we have in our apps.

There is a new kid on the block for testing browser performance that testing things that developers actually care about.…

CSS FilterLab

Little one page tool from Adobe for playing with filters (blur, grayscale, brightness, etc). Filters are working in stable Chrome and Safari 6 now. I predict filters to be a huge trend in 2013 as browser support grows and designers start figuring out what kinds of interesting/effective things they can be used for.…

18 comments

CSS-Tricks Chronicle V

This week in things that by for which have transpired and thus exude fresh relevancy upon theyself.

ShopTalk Episode 35

This week Dave and I were joined by Brad Frost. The overall theme is responsive design and we end up addressing quite a few nuanced issues and concerns with it. Big thanks to Harvest and Environments for Humans for sponsoring. …

32 comments

Using LESS as a Live CSS Engine

Andrew Powers of PageLines explain how they use LESS in their product to give it some neat features.

Open-Dyslexic

Open-Dyslexic is a new open sourced font created to increase readability for readers with dyslexia.

#Lazyweb: They have an iOS app, but someone should make a bookmarklet to swap out the font on page with this font for desktop browsers. Or browser extension(s). Update: all of which now exist on the downloads page.

via Instapaper Blog

Responsive Measure

A jQuery plugin by Josh Brewer and Mark Christian that adjust the font size based on your ideal line length to keep a consistant typographic measure across all screen sizes. Kinda like FitText.js but for use on body copy. The new vm/vh units may obsolete this, but not with the same simplicity.…

127 comments

WordPress Plugins I Use

I think this is a fun and useful style of post that any WordPress blogger can do. It's always interesting to hear in what ways people are extending what WordPress can do out of the box. I'll share the ones I'm using here on CSS-Tricks then you can share yours (either in the comments or in a post on your own WordPress site). My list is quite a bit different than the last time I did this in 2008. If …

ShopTalk Episode 34

This week Dave and I were joined by Jeremy Keith, long time super genius. We talk about the lack of a main content element in HTML5, the HTML5 vs Native classic debate, mobile first hindering creativity, and more. Big thanks to Squarespace and Environments for Humans for sponsoring.…

28 comments

Rundown of Handling Flexible Media

When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article></article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That's not too hard. But media - images, video players, and audio players - demand a bit more attention …

Preprocess THIS!

Allison Wagner shares her thoughts after 10 months of working with a CSS preprocessor. Many of the thoughts resonate with my own. On variables:

What I love most about them is they force consistency across the design system.

Being DRY is cool, but it's more about saving you from yourself. To me, it makes CSS fun again instead of tedious. …

21 comments

CSS-Tricks Chronicle IV

The week in "sort of interesting things that happened to me" and "stuff I've been working on."
53 comments

Opt-Out Responsive Design?

Should we allow users to opt out of our responsive designs? Isn't that admitting failure? Or are there reasonable circumstances when it's a good thing? How would we do it?

ShopTalk Episode 33

This week Dave and I were joined by WordPress mastermind Alex King. We mostly talk about WordPress stuff, including some tech stuff but also bigger issues like the business around it and motivation. Big thanks to BD Conf and Environments for Humans for sponsoring. …

28 comments

Video Source by Screen Size

Right after The Lodge opened up around here, I started getting reports right away about some videos not playing on the iPad. Ugh, crap, these are paying customers and they should be able to watch these things on a modern device.…

“Stacking” Responsive Pattern

Demo by Neil Carpenter in which it looks like a bunch of regular blog posts in a row on large screens and turns into a "stack" of blog posts with navigation on small screens.…

SOLID CSS

Miller Medeiros:

SOLID is an acronym for five basic principles of object-oriented programming and design that when applied together can make systems easier to maintain and to extend over time.…

jQuery Fundamentals

Rebecca Murphey updates her incredible "guide to the basics of jQuery."…

.htaccess Made Easy

My Digging Into WordPress partner in crime Jeff Starr now has a brand new book!…

36 comments

Crashing Mobile Webkit

One of the big heart sinking bummers when the new design launched was that the announcement blog post would cause Safari on some mobile devices to crash. It would crash my iPhone 4S, I heard reports of crashing other Android devices, but it wouldn't crash my iPad 2. Debugging on mobile is already kinda hard but debugging a page that crashes the entire application is extra hard. …

298 comments

Design v10

It's been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won't recognize it. There is a fresh coat of paint, but all the old stuff is there. …

12 comments

CSS :target for Off-Screen Designs

Matty Collins shows us how using the Checkbox Hack (or even :target in simple situations) we can create navigation heavy mobile UIs without any JavaScript.
28 comments

Play Sound on Hover – Web Audio API Edition

The Web Audio API is a totally different beast than HTML5 audio elements. It provides lower level access to the sound system allowing for higher precision sound output. Notary Sojac explains it and provides a simple framework to make working with it easier.

position: sticky;

For real. Eric Bidelman explains. It's non-standard (yet) but shipping in WebKit nightly and Canary.…

53 comments

Responsive Web Above The Fold

A guest post by Arley McBlain on using media queries to adjust for available vertical space.

Responsive Retrofitting

  1. Go here and install bookmarklet
  2. Go to apple.com
  3. Resize browser very narrow and click bookmarklet

Pretty fun project by Ben Callahan. You can submit your own retrofittings through GitHub.…

90 comments

Retina MacBook, Three Weeks In

I rationalized buying a new Retina MacBook Pro a few weeks ago by telling myself 1) it's my responsibility to stay on top of new things that affect the web 2) I want to make sure the redesign looks good on retina displays 3) my current laptop had very little RAM and a small hard drive. I was always running out of space. And finally 4) I needed the extra horsepower for exporting/converting all the video I'd be doing.

But …

19 comments

CSS-Tricks Chronicle I

I'm going to start a new style of blog post around here called CSS-Tricks Chronicle. It's going to be a (probably) weekly roundup of all the relevant happenings around the site and stuff I'm doing. Kind of a throwback to the spirit of blogging. It will give me a good home to link up interesting stuff that I didn't otherwise have a good home for. …

The innovations of Internet Explorer

While IE is the butt of half the web developer jokes ever written, it has been responsible for its fair share of web innovation over the years. Nicholas C. Zakas shares some of that, starting as far back as IE 3.…

2 comments

ShopTalk Episode 30 & New Design

This week Dave and I were joined by JavaScript avenger Rebecca Murphey where we talk a little #hotdrama followup, the future of JavaScript, GitHub etiquette, charging while learning, and more. And OH HEY there is a brand new design for ShopTalkShow.com by our own Dave and his Paravel brother Reagan Ray! Go look around. Thanks to Squarespace (use code SHOPTALK for 10% off) and the Responsive Web Design Summit (use code SHOPTALK for 20% off) for sponsoring. …

256 Classes Beats an ID

According to the spec, one ID should be infinitely more specific than a class. But as it turns out, if you add 256 classes to a single element (same or different) it will override the ID. Dumb little edge case that probably will never be fixed, but interesting. Ryan Seddon digs in a little more. …

124 comments

Don’t Overthink It Grids

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot …

Smashing Mag CSS Q&A 3

The third installment of my recent question and answer series. This one includes code for dealing with retina version of sprites, fiddling with flexbox, and some of my favorite CSS tricks lately.…

ShopTalk Episode 29

This week Dave and I were joined by Tab Atkins and we talk about Tab's job as a spec writer working at Google, Flexbox, the future of float clearing, using encoded characters, smooth animations, and more!

Thanks to the Responsive Web Design Summit for sponsoring. RWDSummit is an online conference and you can save 20% by using coupon code SHOPTALK.…

Made to Measure

Allen Tan:

So if static templates are too limiting, but per-piece art direction is too costly, how else can we make scalable, sustainable digital publications that are beautiful and accessible? To find a middle path, we can take a cue from the art of the tailor.

I totally agree that the future of good design on digital publishing is somewhere in that middle ground. Art direction "lite", perhaps. And maybe with a bit of automation.…

104 comments

CSS Style Guides

As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide.

Let's round up some existing ones.…

Multiple Pseudos Work by Adobe

Things are moving along in the pseudo elements world again which is exciting. Alan Stearns put together this mock spec that defines usage like ::before(n) and ::nth-pseudo().…

We have a pretty good* newsletter.