CSSquirrel A look at web development and web design by Kyle Weems

On December 16th, 2009, I had the opportunity to do something I’d been meaning to do for a while. I gave a presentation (in front of an audience, even) about web standards! I was invited to speak at Refresh Bellingham, which was a great experience. Discussing the topics of CSS3, HTML5 and Mobile, I definitely bit off a larger chunk than I needed to (in the future I think I’ll pare the experience down to CSS3 and HTML5 unless it’s for a much longer time format), but by the end of the presentation I felt like I’d done a good job of entertaining the audience and maybe teaching some of them a thing or two.

And, by George, that was a really good feeling.

Entitled: “The Ghosts of Web Standards Present: CSS3, HTML5 and Mobile”, the whole thing ran about an hour and fifteen minutes. Fortunately people laughed at all of my jokes, so it wasn’t too torturous. I talked about the varying level of support in modern browsers for new CSS3 and HTML5 features (and how that shouldn’t matter), as well as my thoughts on the need to be ready for mobile devices today in our designs. If I did it again, I’d probably put more advanced CSS3 techniques and HTML5 tricks in, as I uncovered a whole slew of new things I’d not experimented with before while doing research for it.

Although the slides don’t contain the majority of my witty dialog (I’m so modest), I’ve put them up (after some corrections and modifications) for you to look at if you’d like. The background will flash into it’s proper place two seconds after the page loads, by design (I had some issues with the popdown request for the geolocation interfering with the way the background looked on the slide projector).

The Ghosts of Web Standards Present

Today’s comic is not reactive, but rather, predictive. As October is the month where Halloween brings its ghouls, ghosts and other monsters to the mind, I can’t help but think about the terrors I’ve seen on the Internet from the days of yore (and sadly yes, even today). Horrible, blighted monstrosities involving the blink and marquee tags, or garish color combinations that unlock portals to the deepest circles of hell.

As someone who is something of a typographic idiot, I can’t help but wonder what foul, plague-ridden beast I might accidentally birth someday while wielding the power of @font-face. And this example at CSS3.Info helps highlight the terrors that text-shadow can bring to the modern era.

I’m not seeking to serve as some sort of doom-saying prophet, but I fear for us all. I’ve seen what high-school students are producing in their “web design” classes (the quotes indicate my sincere lack of confidence). If we don’t shove some taste down their throats, the inheritor to MySpace’s throne of bile-filled ineptness may allow even more control over the pages by amateur authors, allowing some sort of vortex of evil that’ll suck the world’s light away, leaving a black speck in an empty universe.

So, for the love of all humanity, do us all a favor. Remember this motto: Friends don’t let friends use CSS3 without taste.

Eric Meyer wrote a little post about new project in development by John Resig called Sizzle that should be making every web designer wet themselves. He’s really excited about this. Almost to the point where in my mind’s eye I can see him skipping down hallways. How excited?

“I’m absolutely going to use it and recommend its use far and wide.”

Sounds pretty excited to me. What is all this enthusiasm being caused by? What is Sizzle?

(more…)

Every time I have to slave away at a CSS solution to a problem that could be easily solved by CSS3’s multiple backgrounds or border-radius, I want to inflict harm upon myself. This is exasperated by the number of rounded corner designs I seem to be working on today. (Are those currently in, out, or tacky?)

At the moment, the only notable (sorry Konqueror) browser to support both is Webkit (Safari). Firefox supports border-radius, but neither IE or Opera support either. Granted, Opera’s percentage of the browser population doesn’t make its feature set a deal breaker, but it’s simply impossible to put these solutions into play when IE’s massive user-base can’t see them.

*sigh*

I’d be less melancholy about it if Internet Explorer 8 was going to bring at least one of these with it. But no, that would be too nice.

It annoys me that out of the various improvements CSS3 is supposed to bring to the table that these two are so far away from implementation. The amount of presentation-only markup (the great enemy that CSS is meant to fight) that would be eliminated is immense.

That’s alright. I don’t mind putting three to five elements on a page where I should only need one.

I’m going to go get some warm milk and cry myself to sleep.

As discussed here, I’m really getting into CSS3 Attribute Selectors. As mentioned earlier in my Yo-Yo post, I’ve been looking into solutions to make these guys more accessible, and I’ve come full circle to realize that I don’t need to do anything extra to incorporate them in my website and have users see them in any major browser. This is because:

1. The modern versions of Internet Explorer, Firefox, Safari, and Opera all support them. (Here’s a test page at Mindfly’s website to prove the point).

2. The Dean Edwards IE7 script DOES extend full CSS3 attribute selector support to IE6 (I’m guessing my earlier tests had an error, because now I’m showing full compliance with this second test page that includes that script (once again, at Mindfly).

The CSS3 features I’m really looking for support for now, then, are the CSS3 pseudoclasses and multiple background images. *drool* Multiple background images alone would help cut down on my markup immensely, making features such as rounded boxes so much less of a pain in the arse.