Grow your CSS skills. Land your dream job.

Five Questions with Nicolas Gallagher

Published by Chris Coyier

Nicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future of the web, his life, and if he had any advice for others.

*Chris: I hereby title you: Dr. Pseudo Element. You've clearly done a lot of experimentation in that area and put together some great demos. What do you think the role of pseudo elements is in modern, production web work? Do they have a bright future?

Nicolas: With wider browser support for pseudo-elements than for many CSS3 properties/values/functions I can't see any reason not to take advantage of them, where appropriate. In addition to their basic use with generated content, there are several pseudo-element-based hacks that offer some excellent and flexible ways to progressively enhance web sites without the need for presentational HTML or images. When combined with CSS3, they offer even more possibilities.

Most people already use pseudo-elements in modern, production web work. Injecting generated content, whether it's text or an image, is their basic purpose. The most widespread pseudo-element hack has to be the 'clearfix' hack. More recently, some of the newer pseudo-element hacks that I've been weaving into production work include cropping sprites without extra markup, creating paper corner-fold effects without images, applying drop-shadows without images, more accessible forms of image replacement, and 'protruding' background images.

I use hacks like these to let me do things that are currently beyond the explicitly built-in capabilities of web technologies. They help me to keep HTML semantic and lean. When something better comes along and is sufficiently supported, these hacks - like others before them - will simply be retired from my toolbox. It's hard to know how they will fit into front-end development in the future, but for now, I think they form the basis of some useful hacks. The fact that more people are starting to use them in experiments and visual effects suggests that there is increasing interest in what you can do with them and in the desire to reduce the amount of presentational HTML used in production work.

*Chris: Psuedo-elements are actually a part of CSS2, but you pointed out to me recently that the CSS3 spec has a whole section for them. It hasn't been updated since 2003 and none of what is described there is implemented by any browser. However, it's got some really interesting stuff in it. Things like multiple/chained pseudo elements and things like :outside which could put content outside the pseudo elements superior. These kind of things would take this already powerful idea and make it far more powerful. Why do you think it's been ignored? Do you think it's potentially problematic?

Nicolas: I presume it is currently considered quite a low priority. There are clearer immediate benefits to implementing HTML5 (and related technologies) and the parts of CSS3 modules that provide value to developers and web users. Things like selectors, shadows, gradients, rounded-corners, transforms, transitions, etc., have long been on developer wish lists. They're in such demand that JavaScript libraries have long been filling in the gaps. I imagine browser vendors are directing their limited resources towards the areas where there are the greatest gains to be made.

The features of the CSS3 Generated and Replaced Content Module might be a 'nice to have' - we could create some crazy experiments - but it's always possible that most of it won't be implemented at all. Other parts of CSS3 are, in my opinion, more useful and urgent. A proper CSS grid or layout module being right up there. We're still using floats and other hacks to produce simple web layouts. This recent proposal looks quite interesting - http://www.interoperabilitybridges.com/css3-grid-align/. There are lots of smart people working on the CSS specs and on the browsers; these things can't be easy. But it has been a long time!

I'm also curious about your experience while developing the new CSS Tricks site. You've used plenty of experimental CSS on it but what things did you still find yourself wishing for?

Chris: Certainly a better layout system would have been nice. I'm still making use of floats just because it's the most cross browser compatible CSS-based layout technique. One thing that comes to mind is the sliding main navigation I'm using. I played around with a variety of ways to do that, one of which being the flexible box model technique that is started to get some support. On a site like this and for a little flourish like this, I would have had no problem using a progressive technique like that. However, even in browsers that support it, animating it was choppy and crappy. I definitely found myself wishing that some of this cutting edge CSS stuff was implemented more soundly. It was also a bummer to find little cross browser disappointments, like Opera supports transitions with -o-transition, but doesn't support background-position transitions. So just because a browser "supports" a certain property, doesn't mean it's supported in the same way in other browsers.

*Chris: There is more and more crossover between what JavaScript (particularly libraries) can do and what CSS (particularly 3) can do. Things like transitions and animations, and even things that cross over into "events" territory like reactions to clicks with :target and pointer-events. If you were in a position where you had to pick which technology to use, which way would you lean?

Nicolas: Despite the crossover between what JavaScript and CSS can do, I think most of the time it isn't about choosing one over the other but deciding which technology is most suitable for specific components of an effect or interaction. Those decisions are going to be dependent on the context: the requirements of a project, the nature of the effect or experience you're aiming for, the browser support, etc.

If something can easily be done entirely in CSS across a wide enough range of browsers, then I'd go with a CSS solution. There was a time when JavaScript was used for image rollover effects because CSS wasn't available or widely implemented. Now, it's easily achieved with CSS. Some effects, like simple transitions, may also go from being done in JavaScript to routinely being done in CSS once browser support improves. Right now, I'd rather use CSS transitions for minor enhancements. If an effect is not essential, I'd lean towards using CSS and leaving it out for incapable browsers.

For more complex and important interactions that are being used to improve the experience on a web site, JavaScript is the main tool. There are things scripting can do that won't ever become part of the CSS layer. As CSS continues to move forward we might be able to move a few more components of an interaction (e.g. transforms, transitions, and animations) into the CSS layer. But there will always be a role for JavaScript to handle the binding, logic, calculations, coordination, and anything else that scripting provides over CSS. The JavaScript experts out there (of which I am not one) could provide more insightful commentary on the increasingly important role of JavaScript in modern web development. However, once you step away from basic interactions, I usually find myself using CSS and JavaScript together to achieve desired outcomes.

*Chris: I recently ran a poll about college degrees and their relationship to people current jobs. Turns out most people's at least tangentially related to their jobs as web workers. I see you have a masters in Social Anthropology. Would you say that's at least tangentially related to your current job or would that be a stretch?

Nicolas: For me, it’s definitely related. What I do now feels like a seemless continuation of what I was doing when I was studying anthropology in an academic setting. I still research, sketch, try to identify and challenge assumptions, learn from others, work with others, create things...and often feel like I know nothing! As a way of thinking, there are more similarities than differences.

You find a lot of web workers who write about the connections between their jobs and martial arts, or music, or gardening, or cooking. When you enjoy things, and perform them regularly, you see the similarities between them. There isn’t anything I do that I don’t see as related to, and benefiting from, what I learnt from studying anthropology.

As a discipline, all aspects of the internet are the subject of anthropological enquiry. The world of “user research” and anthropology are fundamentally linked and many anthropological methods have also been adapted in different ways to help with UX work and product design. There is research being done by Google and Facebook (among others) that is the domain of anthropology and both companies employ anthropologists as a result. It’s an incredibly versatile discipline and you’ll find anthropologists working in practically every setting imaginable.

*Chris: What would you tell a college kid today who is thinking about getting into the web as a career?

Nicolas: I'm not sure what a web career looks like; I don't think I have one! But something I see repeated over and over again - and that I agree with - is that you should really enjoy what you do. Build things for fun, hack out your ideas, try new things, release your stuff, and engage with others in the community. Ideally, what you describe as "work" to your friends and family should feel more like "play" to you. The rest will follow; no need to rush it.

Comments

  1. Jack Nycz
    Permalink to comment#

    Great stuff. I’m definitely the same way with “the cool stuff”. I support as many browsers as I can with the cool little transitions and stuff but if your rocking ie6 then you don’t get cool stuff! Still get to see all the content, just not crunkified!

  2. I hadn’t seen Nicolas Gallagher’s blog before, but going through a few posts, I’m already very impressed. Thanks for calling attention to another great blog.

  3. Permalink to comment#

    Nice interview, i definitely enjoy it, would be nice to see more of them, thanks!

  4. William
    Permalink to comment#

    This is my first post on CSS Tricks, I often trawl through the articles via Google Reader, but I’ve gotta say, this was an awesome interview and I really enjoyed the read.

    This year’s NY resolution was to get more involved in the progress that’s being made, predominantly, in CSS/HTML. So Chris, thank you for drawing attention to so many aspects of this.

    Also, as Steven said, I wasn’t aware of Nicolas Gallagher’s blog – but it’s got such a wealth of knowledge. Thanks for the hook up!

    Cheers!

  5. Great read.

    As an aside, I attended university for Computer Science, but the bulk of what I actually use on a day to day basis is stuff that I learned on my own: CSS, HTML, Photoshop.

    I still think my education gave me a firm grounding in the field that allows me to read and understand tutorials or documentation that I find online.

  6. Permalink to comment#

    Nice interview, Chris.

    I stumbled upon Nicholas’ blog the other day and I also was really impressed about the way he used the ‘before’ and ‘after’ pseudo-elements for extra styling. Especially his post how he created icons with it… awesome!

    It was very inspiring so I had to experiment myself with it and it is really awesome what you can do with it and include some CSS3 to it. The only drawback is that your stylesheet can get veeeeery long. :)

    Gentle Greetz!

  7. Permalink to comment#

    I really like Nicolas for his way of speaking and writing. I think he is an enthusiast on doing great stuff with really Cutting Edge technologies. As you are, too. This is why I think every spend minute on your blogs is worth it.

    Thanks for this interview, Chris.

  8. Sam
    Permalink to comment#

    Thanks goes to Chris for his great blog and then to this newly discovered wealth from Nicolas, Chris added another Nicolas to my collection of interesting Nicolases!

  9. Permalink to comment#

    I am a regular viewer of nicolas’s blog…

  10. Thanks for sharing the interview with Nicolas, I am defo going to have a good look at his website, seems to really know his stuff.

  11. Brad
    Permalink to comment#

    Nicolas’s blog has always been a go to source for me. And I should add that CSS-tricks is also one of those sites

    I am very grateful that there are people like Nicholas and Chris out there who give up such incredibly important and interesting information

  12. good job ..

  13. Great Review and Site!

    -Luke

This comment thread is closed. If you have important information to share, you can always contact me.

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