We continue with our examination of CSS with some real basics- formatting, writing rules, organization and the like. Nothing groundbreaking, but the basics are important in any endeavor, so here they are.

Formatting

During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.

It looks like this:
Read the rest of this entry »

Continuing our examination of HTML5, this time we’ll take a slightly deeper look at the state of HTML5 support in browsers. We’ll step through several major features, examine the technical hurdles in place, identify the level of browser support and finally provide some recommendations on whether or not to pull the trigger with that shiny new feature.

New Semantic Elements

HTML5 has added many new semantic elements. These both codify existing, common patterns and offer new, meaningful ways mark up your content. So, for example, going forward, instead of using <div id="header"> we will now just use <header>. Some other examples (with definitions culled from the specification) include:

section

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

article

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

That’s far from a complete list, but it should serve to give you the flavor of what’s available.

Support

This is a curious case. If, by “support” we mean “doesn’t break anything” then the support here is broad. Using the HTML5 Shiv code snippet or the full blown Modernizr library every browser that matters supports the HTML5 elements. If you’re expecting user agents to do something interesting with your new elements, then the support level is much lower.
Read the rest of this entry »

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:

Read the rest of this entry »

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.
Read the rest of this entry »

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.

In case you missed it the latest Internet Explorer 9 Platform Preview is out and it’s a thing of beauty. It added Canvas support so the first thing I did was run it through some demo code. It’s faster than Chrome. Visibly faster. No benchmarks needed. It’s such an incredible difference from the current Internet Explorer family which are many times slower than the good browsers out there.

The good news doesn’t stop there. There’s actual standards support.

PPK enthuses:

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

And then enthuses some more:
Read the rest of this entry »

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:

<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
  <fieldset>
    <legend>Contact Info:</legend>
    <p>
      <label for="author">Name (required)</label>
      <input type="text" name="author" id="author" value="" tabindex="1" />
    </p>
    <p>
      <label for="email">Mail (will not be published)(required)</label>
      <input type="email" name="email" id="email" value="" tabindex="2" />
    </p>
    <p>
      <label for="url">Website</label>
      <input type="url" name="url" id="url" value="" tabindex="3" />
    </p>
  </fieldset>
  <p>
    <label for="comment">Comments</label>
    <textarea name="comment" tabindex="4"></textarea>
  </p>
  <div class="button">
    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
  </div>
</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Read the rest of this entry »

Before I jump into the proper way to use tables, I’m going to share an anecdote that should bring a smile to the face of anyone who’s done this stuff for a while.

A few months ago I was both pleased and surprised to discover a web developer who didn’t really know how to lay out a page using tables. He had a sense of how it might work, but had never really done it. I was having him help out with an HTML email (where tables are still the safest bet) and the whole thing was a novelty for him. Looking at it, this makes sense as he’d been at the job for only a few years so he learned entirely in the modern era and he was lucky enough to only learn from good sources. Still, it was a new phenomena for me- encountering a developer who was purely from a CSS-based layout world.

Yes! We’re winning.

If you don’t know what I’m talking about when I talk about tables for layout, move along. There’s nothing to see here.

Anyway, tables.

Tables

Tables are for Tabular Data

Here’s a table full of data.

Read the rest of this entry »

Last time out we looked at the Anatomy of a Web Page. Using that, let’s move on and look at the first of the two major sections, the head.

For the sake of this blog post, the head includes two pieces of code that are actually before the head. Sue me

Using the head from my (recently updated) starter assets project as an example, let’s look at the code in detail. First, what it looks like in total:
Read the rest of this entry »