Grow your CSS skills. Land your dream job.

Article Archives

csscss

A CSS redundancy analyzer that analyzes redundancy.

Gives you output like:

{.contact .content .primary} and {article, #comments} share 5 rules

If you have multiple selectors sharing five or more rules (properties with the same value), that's likely a good opportunity …

April 11, 2013

Can You “Over Organize” JavaScript?

There's no question that on sites with lots of JavaScript, you need a strict organizational pattern to keep everything making sense and the code approachable. I've mentioned in the past I like grouping things into individual files each containing a …

April 10, 201342 comments

CSS-Tricks Chronicle XII

SITEOWNR: Thers new ifnormation inthe site foryou. (puts on sunglasses). STRETEMAN: yesyes Im hapy !
April 8, 201314 comments

Body Border, Rounded Inside

Reader Arun wrote in with a question on how to make a body border that was rounded where the edges met on the inside. Like this. We've covered body borders before, but this was slightly different.

It does look rather …

April 5, 201336 comments

Blink

Chrome is going to use "Blink" as a rendering engine now, a fork of WebKit. I imagine the Chromium team will stop committing back to WebKit, so that project will stagnate a bit. Safari is already rather slow to update, …

April 3, 2013

Pop Hovers

POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text colors change, and the text …

April 3, 201348 comments

Repoll! Whose Responsibility is “Mobile” Design?

In this first time ever in CSS-Tricks history, we're going to re-run the same poll we've ran in the past. Now, more than five years after the original poll, we're going to ask:

What is your opinion as to …

April 2, 201345 comments

SVG Patterns Gallery

Using SVG for background patterns is great because they 1) are very small 2) are vector, thus crisp at any screen resolution and 3) work in IE 9 (unlike gradients). Gallery by Philip Rogers.…

April 1, 2013

Poll Wrapup: How Much Effort Do People Put Into Alt Text?

From over 16,000 people surveyed, more than half (54%) say they "do some" when it comes to alt text for images that are important to content. The example provided did provide insight into the content and relevance of the image.…

April 1, 201320 comments

The State of Spinners

If you need to indicate "please wait, something is happening" on a website, a spinner has long been the go-to choice. Probably an animated GIF, although there are other options like CSS animations, apng, SVG, or canvas. James Padolsey …

March 31, 2013

Brand New Series in The Lodge: Building a Mobile-First WordPress-Powered Artists Website

I finished up a brand new series in The Lodge! It's all about building a website from scratch. My friend Jeff, the ceramic artist's website, to be specific.

It is a 40-video series that goes from a blank …

March 29, 201319 comments

Slide In (as you scroll down) Boxes

I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you swipe down, new modules of content …

March 27, 201368 comments

You Can Transition z-index

Zoe Gillenwater reminds us it's just a number, so why not? So obviously I made this dumb wall-phasing ghost. …

March 27, 2013

Let’s Say FeedBurner Shuts Down…

A lot of us around here have blogs and a lot of us use FeedBurner to "host" our RSS feeds. I thought it was worth talking about what might happen if we lose FeedBurner, which seems especially likely these …

March 26, 201351 comments

Printing the Web

Hans Christian with the state of web printing. All the old classics are still important, like display: none; on irrelevant stuff (like navigation) and using pseudo elements to display the URL's of links. But there are new kids on the …

March 25, 2013

Line Number Mapping for Sass in Chrom Dev Tools

I've always wanted to get this going since seeing this Lennart Schoors post, but this Lee Mallabone tutorial finally pushed me to do it. The debug settings are specific to Rails, but if you're a CodeKit users you probably …

March 25, 2013

Hang On Placeholders

The way that placeholder text works on inputs and textareas is either that 1) the placeholder text disappears immediately when the empty input is focused or 2) the placeholder text stays until actual text is entered. Perhaps a middle ground could also make sense.
March 25, 201345 comments

There’s more to the CSS rem unit than font sizing

Many web designers and developers are familiar with the CSS rem length unit. But, you may not know that it has a couple of handy alternate uses. In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit.
March 22, 201314 comments

Tricky Textarea Pulltab

In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing …

March 21, 201322 comments

Automatic Table of Contents

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can …

March 20, 201377 comments

Finer Grained Control of Hyphenation

David Storey shows off the latest work-in-progress CSS Level 4 stuff for hyphenation. Like properties to make sure multiple subsequent lines don't hyphenate ("ladders"), how many characters need to be left on the old line and new line, and what …

March 14, 2013

The Lengths of CSS

There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the …

March 13, 201370 comments

Learn CSS Layout

Learn by seeing examples and code together in an easily digestible page-by-page format. Works on screens large or small, which we all know is darn important these days. By Greg Smith and Isaac Durazo.…

March 12, 2013

Responding to Voice

Jordan Moore experiments with talking to the browser to adjust how things look. For instance, "Make the text larger." Like in, you know, the future.…

March 10, 2013

CSS-Tricks Chronicle XI

A brief summarization of the events that have been and events that are to be. Wherein ‘events’ refers literally to physical events as well as figuratively as in ‘some kind of thing that happened, loosely.’
March 9, 20135 comments

Client-Hints

We all know UA sniffing sucks. But it's really common because there is a real need to know stuff about the browser on the other end when serving up content and resources. What if instead of just a UA string, …

March 7, 2013

Flat UI

Really nice set of user interface elements from the folks at Design Modo. This style is hitting a real design nerve right now. I like how they went the extra mile and made all the components actually work (e.g. sliders …

March 5, 2013

Quotes & Accents

Reminders about what keys to press to get curly quotes and accented characters by Jessica Hische. I'm a major offender (SEE?!). I should be writing in Markdown which automatically fixes it. …

March 5, 2013

Using SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Why…
March 5, 2013151 comments

Mixing Responsive Design and Mobile Templates

You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.

Me and the team are working hard on …

March 4, 201335 comments

More CSS Secrets

How could I not link to this CSS trick saturated talk by Lea? Great follow up to the original. …

February 27, 2013

Uniqlo Stripe Hovers

For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers …

February 27, 201354 comments

Search with Filters Responsive Design Pattern

Some design patterns have been explored fairly thoroughly as we've moved into an era of responsive design. Others not so much. There are plenty of complex patterns that are still worth exploring, like this one.
February 25, 201313 comments

[W3Conf] Eric Meyer: “The Era of Intentional Layout”

Eric Meyer (@meyerweb) is a CSS champion, author, and co-founder of the An Event Apart conferences. He talked about the end of an era of layout (and the beginning of a new one).

These are my notes …

February 22, 201311 comments

[W3Conf] Nicolas Gallagher: “The purification of web development”

Nicolas Gallagher (@necolas) is a front end developer at Twitter and has worked on big projects like HTML5 Boilerplate and Normalize.css. Nicolas talked about questioning old assumptions about front end web development.

These are my notes from …

February 22, 201319 comments

[W3Conf] Tomomi Imura: “Mobile Web: Real Life Examples of HTML5 for Mobile”

Tomomi Imura (@girlie_mac) works on the Open Web at Nokia and talked about real life use cases for HTML5 on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this

February 22, 20136 comments

[W3Conf] Luz Caballero: “Device (dis)orientation?”

Luz Caballero (@gerbille) used to be Dev Relations at Opera and talked about the mathematical world of device orientation on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this

February 22, 20130 comments

[W3Conf] Ariya Hidayat: “Fluid User Interface with Hardware Acceleration”

Ariya Hidayat (@ariyahidayat) works at Sencha and created PhantomJS and Esprima. He talked about front end web performance.

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series

February 22, 20134 comments

[W3Conf] Brad Hill: “HTML5 Security Realities”

Brad Hill (@hillbrad) works at PayPal work works with the W3C on security issues.

These are my notes from his presentation at W3Conf in San Francisco as part of this live blog series.

You can't read anything …

February 22, 20131 comment

[W3Conf] Léonie Watson: “Design like you give a damn: Practical accessibility for web professionals”

Léonie Watson (@leoniewatson) is a digital accessibility consultant from Bristol, UK. She believes in the importance of accessibility and also that it's not a hinderance to creativity.

These are my notes from his presentation at W3Conf in San …

February 22, 20131 comment

[W3Conf] Joshua Davis: “Beyond Play: the Art of Creative Coding”

Joshua Davis is an artist who sees the web as a creative canvas. He uses computers to make art, but isn't limited to that as a tool.

These are my notes from his presentation at W3Conf in San Francisco as …

February 22, 20132 comments

Setting a Performance Budget

I read this Tim Kadlec article a while ago but the more I think about it the more I like it.

If you are going to take performance seriously (instead of just paying lip service to it or chipping away …

February 21, 2013

Using WAI-ARIA Landmarks

I need to do a better job at at using the role attribute. It's so easy and has so many benefits. Important note: all content should be within a landmark role. Steve Faulkner shows the way.…

February 18, 2013

Using Flexbox: Mixing Old and New for the Best Browser Support

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and …

February 18, 201358 comments

Notes from My Workshop at Webstock ’13

I thought my trip to New Zealand for Webstock warranted a special workshop. In honor of their unique national bird, I created a little one-pager website The Kiwis of New Zealand. The site started life as a simple Photoshop …

February 17, 201322 comments

The Amazing Web Interview

Martin Wolf interviews yours truly on his blog, which is a very good mostly-link-blog-with-commentary you should subscribe to.…

February 11, 2013

Group Advice: Working on an Anti-RWD Team

A reader (let's leave them anonymous) writes in:

The agency where I work has never produced a responsive design. As a developer I'm handed fixed-width designs in the form of static PSD comps. I'm then expected to slice these up, …

February 11, 201380 comments

REMux: An Experimental Approach to Responsive Web Design

In which Dirk Lüth shows an experimental RWD technique where layouts (and just about everything) is controlled with rem units and the base font size is adjusted based on screen width available.
February 10, 201366 comments

Dig Deep Into CSS Gradients

Ana Tudor with some fantastic visualizations to help understand how CSS gradients are rendered.…

February 7, 2013

Wrapup of Navigation in Lists

The recent post about marking up navigation in lists (or not) generated nearly 200 comments of mostly-great discussion on this topic. I thought it would be of benefit to wrap up up the important points.

"Against" navigation in lists
  • At
February 4, 201357 comments

*May or may not contain any actual "CSS" or "Tricks".