Posts Tagged: css

What no one told you about z-Index

Web developer Philip Walton:

The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you’re setting a z-index of a billion on an element and it’s not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn’t going to do you any good.

Great advice. Read the rest of the article for a more through breakdown, with a simple example, of why this is the case.

Sass for web designers

Now that I’m dabbling more and more with Sass, I’m really excited to see the great Dan Cederholm will be releasing a whole book on the subject. (For those that haven’t read Cederholm’s CSS3 entry into the A Book Apart series, do so.)

All you need to know about CSS transitions

A great primer on CSS3 transitions by developer Alex Maccaw. I really like how Alex mixes up basic syntax with performance implications and cross browser support.

The good man

Astonishing CSS3 animation work by graphic design major Pedro Ivo Hudson.

CSSload.net

If you’re a web developer, you’ve probably had to implement loading animations (e.g. spinners, bars) several times. In the land of ajax and back end validation, it’s essential work. Lately instead of the usual transparent GIF route, I’ve preferred implementing CSS based animation; it’s one less HTTP request and easily customizable.

Yet writing CSS based loaders can be time consuming. That’s what makes cssload.net useful. Pick an animation, color set and download the CSS3 code.

GitHub’s CSS performance

Substantial, excellent talk by Vimeo developer Jon Rohan on steps Github took to dramatically improve their CSS performance site wide. One thing Jon stresses that I’ve found has a huge impact is just the sheer number of HTML elements on screen. People spend so much time optimizing their Javascript and CSS selectors, when sometimes the root problem is just having way too many divs.

Code smells in CSS

This article compiles a great set of tips on what to avoid when writing solid CSS. His advice on absolute values is a must read. I haven’t read much from author Harry Roberts before, but after reading this excellent article, I’m following this guy closely.

In defense of descendant selectors and id elements

Jeffrey Zeldman:

Say it with me: There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

Pretty hard to argue with one of the web godfathers on this one.

Mo’ pixels mo’ problems

I agreed with the design and development philosophy laid out by Dave Rupert in the latest issue of A List Apart:

Those of us involved in CSS and Web Standards groups are well acquainted with the concept of progressive enhancement. It’s important we stick to our collective guns on this. Pixels, whether in terms of device real estate or device density, should be treated as an enhancement or feature that some browsers have and others do not. Build a strong baseline of support, then optimize as necessary. In fact, learning how to properly construct a progressively enhanced website can save you (and your clients) lots of time down the line.

His core methodology for handling responsive images is simple: Rely on CSS first, SVG and icon fonts secondarily with the picturefill as a final solution.

Don’t fear the internet

Now that I’m teaching a front end web development class over at General Assembly, I’ve been researching HTML and CSS tutorial sites to get ideas for class. Most are pretty bad, but Don’t Fear the Internet stood out. Lots of really simple, well done videos to get web newbies on the right track. Love their intro:

Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help.