How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity

One of the most important things in CSS is understanding the way rules are inherited and applied in the browser. This is one of those things that many developers “get” intuitively but don’t necessarily understand at a granular level.

There’s actually an algorithm, so if you’re stumped, you can actually count it out. It works like this:

Continue reading “How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity”

How To Make a Web Site the Modern Way. Part 12: Cascading Style Sheets

After a long break, I’m finally back with the long-awaited CSS portion of this little series.

In this article I’ll go over some core concepts. Next post I’ll outline one poorly understood, but vital part of CSS. More posts full (yes, full) of tips, tricks and best practices will follow.

Core concepts

CSS is a style sheet language used to determine the formatting of an HTML document (although it could be used to style other XML documents like SVG and XUL.) Before we had CSS (and before it was widely adopted) all of this presentation information was embedded in the document, either in the form of attributes like width or bgcolor or in the form of purely presentational tags like font. Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.

CSS fixed all that. Using separate style sheets for an entire site and leveraging semantic markup, and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles to an entire site while updating a single, cacheable file.
Continue reading “How To Make a Web Site the Modern Way. Part 12: Cascading Style Sheets”

An Ant Task to Comment Out console.log Calls from JavaScript Files

As someone who started out doing JavaScript in the 1990s, I’ve been through the dark ages of debugging. Alerts, logging application data into DOM elements, etc. After having been through all that doom, I’m clearly a fan of console.log. I use it all the time. I bet you do too. It’s super useful.

The one downside? Leaving calls to console.log into code that’s being tested (as in, QA) or is destined for production (as in, emergency bug fix.) With Firebug or a similar tool running, you’re fine. Without it?

"console" is not defined.

I’ve seen this more times recently than I care to admit.
Continue reading “An Ant Task to Comment Out console.log Calls from JavaScript Files”

I Added Keyboard Navigation to my Site

Kind of a fun little exercise. Now I just need to figure out a nice way to hint to people that they can navigate with the keyboard.

Check it out. Start here and hit your right arrow key until you start to see the same things twice.

Based on shortcuts.js
Continue reading “I Added Keyboard Navigation to my Site”

I’m Presenting on CSS in October

I haven’t posted about this yet. I’m an incredible idiot. I’m presenting at the Boston PHP group in October. My presentation is a couple of weeks before Steve Krug. No pressure.

I hope to see you there 🙂

Learn CSS (with me)

Is CSS still a mystery to you? Do you find yourself editing your styles over and over justo get them to display correctly in IE and Firefox? Have you created a powerful application, and want it to look nice and clean? Do you want to take your knowledge of CSS and Design to the next level?

In this presentation Rob Larsen will step through the basics of Cascading Style Sheets (CSS,) the visual language of the Web. Starting with the most fundamental concepts and finishing with concrete examples illustrating common patterns, this presentation will serve as a launching point for those new to CSS and will strengthen the understanding of the core principles for developer or designer more experienced with CSS.

In this event you will learn:

  • Basics of CSS
  • Design & Layout
  • Web Standards
  • Rich Visual Behaviors
  • CSS1, CSS2, CSS3
  • Frameworks, Abstractions, etc.
  • Dealing with cross browser support
  • Separation of style, content and behavior
  • Testing
  • Tips & Tricks

If you still fumble with CSS and want to take your experience to the next level, then this event is for you.

About the presenter:
Rob Larsen has more than 11 years of experience building and designing web sites and web applications. Currently he’s a Consultant at Isobar, working for some of the world’s largest brands.

Prior to joining Isobar, Rob was the Principal Presentation Engineer at Cramer. At Cramer, Rob and his team produced standards-based, accessible and SEO-friendly sites and rich media applications. Before that, Rob worked for several years as a consultant for clients like Compete, Duracell, Gillette, Boston’s Museum of Science, PC Connection, RSA Security, State Street Corporation and Webex.