Cascading Style Sheets links, thoughts, and code samples

Dude, What’s My User Agent?

I’m just wrapping up a 45+ hour WordPress project, and I’m in testing and refining mode, and lo and behold, iPads and iPhone browsers don’t want to display like the other browsers.

When I test on the iOS browsers, I have text that’s partially hidden and has to be raised 70 pixels. The odd thing is that the Galaxy S4’s default browser has the same issue.

The problem with these changes are that the mobile devices don’t have a way to show you the source code; there’s no right click and view source, no F12 key, and no menu items available for help. Without the source code, I can’t read the user agent.

What’s a front-end developer to do?

Behold, WhatsMyUserAgent.com!

When you are in the same situation, simply

  1. Go to What’s My User Agent, and you’ll get a huge string of information.
    1. For example, my Galaxy S4 Default browser showed me the following:
    2. Mozilla/5.0 (Linux; Android 4.3; en-us; SAMSUNG SGH-M919 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.3
  2. Choose a string that will be unique for the device you are trying to hack adjust,
    1. In my case, I targeted SGH-M919
  3. Target your selector by preceding the tag, class, etc. with the following data-useragent attribute selector like so:
html[data-useragent*='SGH-M919'] div.classIWantToChange { }


Be careful of the following:

  • When choosing a string from the user agent to target, be careful not to select something that might target other devices and browsers (for example, KHTML also appears on my Chrome browser on Windows, and I don’t need to adjust it.
  • Be sure to test on as many devices and browsers as you can (within some reason–are you getting paid for the testing? is the remuneration commensurate with the migraine inducing testing and fixing?
  • Are you ready for all the new browsers to be? How about new devices?

OSU SuperQuest WordPress Showcase

I wanted to show off the brilliant work of my WordPress workshop participants from the Web Design: from Soup to Nuts course at OSU a few weeks back. Students (mostly teachers) learned about the core web technologies used in WordPress (X/HMTL, CSS, PHP, JavaScript, MySQL), manually installed WordPress on a server, developed a blog or website using WordPress, and learned how to modify the layout & structure of their site using the Appearance Editor.
Click a thumbnail to visit the site:

Sanders' Resources

Sander’s Resources
Image of Rainy Day Books Website

Rainy Day Books
Picture of Math Dude screenshot

Math Dude’s website

Picture of the Literature website

Literature is About Life web site
Image of THS Tech website

Tigard High School Tech Website
Picture of Twenty-Five into Twenty-Four Website

Twenty-five into Twenty-four Website

I had more participants, but I’m still waiting to see if they’ll send me the links to their sites. If I get more, I’ll post them here.

Web Design from Soup to Nuts PowerPoints

This post is intended for all OSU SuperQuest workshop participants, but I share the resources freely for all the world to see. I hope the notes make sense out of context.

Web Design From Soup to Nuts Introduction

Web Design From Soup to Nuts Day Two

I should make the disclaimer that I never did codify the explanation of MySQL and PHP in a PowerPoint presentation, so there is no record, other than oral tradition. If you would like an overview of MySQL and PHP, you should read the W3School’s tutorials on MySQL and PHP.

One Giant Step for IE: One Baby Step for the Web

It looks like I’ll be calling IE Internet Exploder for years to come. The reports are coming out, and it looks like even though IE9 supports the main HTML5 and some CSS3 technologies, they left out some of the best: like transitions (animations), border-image (it’s a lot of fun, but can be tricky at first), text shadows & gradients.  

Microsoft has opted for a conservative approach to new web technologies in IE9. While the nearly complete Firefox 4 and the recently released Chrome 10 support more of the HTML5, CSS 3 and web API stack, IE9 is a huge step forward for Microsoft. IE9 offers support for the most widely used elements of HTML5 — like the new audio, video, canvas and semantic tags. Still, Microsoft has decided to pass on many of the new APIs. Cutting edge web tools like the offline web applications API, the File API, Web Workers API and the Web Notifications API won’t work in IE9. That’s bad news for web developers, but it’s also bad news for IE users since the web shows no signs of slowing down to accommodate IE.

If you want the full list of IE9 features, go to the IE9 Guide for Developers. Designing websites for Internet Explorer (all of them, even v9), is like paying alimony: the marriage was a bad idea to begin with, and we’ll be paying for it for years to come.

A few posts ago, I defined a layout that degrades gracefully is one that works on Internet Explorer, now I classify Internet Explorer 9 as legacy software.

A comparison between Chrome9 (scored 242) and IE9 (scored 116) from Feb. of 2011 -
Here are the results of an HTML5 test comparing Chrome9 beta build and the release candidate of IE9.

Website Layouts Made Simple Starter Code

I’m in the heart of open source country: Corvallis, Oregon, preparing to teach a workshop on website layout design for the 2010 SuperQuest Summer Institute at Oregon State University. I’ll be covering a variety of CSS techniques to generate cross-browser layouts (1, 2, & 3-column). We’ll also cover typography, use of color, background graphic positioning, and other fun techniques.

So we can get right to the meat of the matter, I decided to post some “starter” code.

XHTML 1.0 Strict Template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">


Since our concern will be primarily with coding layouts, I want to jump right to some sample code to drop into our various columns, headers, & footers. A great site to drop sample code is the HTML-Ipsum site. Look at the page, decide how much or what type of sample code you want, click the title box above the code, and you’ll get the sample code copied to your clipboard, ét voilá!

Stay tuned for some more yummy CSS goodness forthwith…!