After missing the last 2 Super Bowl due to travel/living aboard, I’m excited to host my very own Super Bowl party again. The best part is it coincides (well closely coincides) with my birthday. To make things a little more fun, Kate and I made our own Bingo game with this year’s commercials.

We did a decent amount of research and came up with 50 different themes/logos and are splitting them between two 5 x 5 Bingo cards. First person to get 5 in a row/column/diagonal wins. We decided not to make columns or rows themed and just randomized everything. Any tie breakers will be solved via rock, paper, scissors.

Here are the files in PSD and JPG formats. The logos file has 50 logos that you can split between 2 boards. Feel free to customize to your liking.

Enjoy the game!

One of the W3Cs primary goals is to remove a web designer’s reliance on images in page layout and design. Which will also speed up load time. However, the only way to create multiple borders on one element would be to use the border-image property. Here is an example of border-image:

CSS

	.multiple-border-example-1 {
		border: 20px solid transparent;
		-moz-border-image: url(images/multiple-border.png) 25% round;
		-webkit-border-image: url(images/multiple-borders2.png) 25% round;
		border-image: url(images/multiple-borders2.png) 25% round;
	}

Image

If none of the above CSS syntax makes sense to you (it took me a while to finally wrap my head around), I suggest you check out the links at the bottom of the page for further reading (because frankly, I’ll do a terrible job of trying to explain this). While I find this to be a workable solution, there are two issues that I have with it: 1. It requires an image and 2. I have a hard time working with percentages (its a personal problem, believe me).

Wouldn’t it be cooler if we could use the same syntax that’s used for multiple backgrounds? It could look like this:

Code:

	.multiple-background-example-1 {
		border: 10px solid #77ccff, 10px solid #33bbff, 10px solid #0077ff, ;
	}

For this to work each border would be rendered from the center out. and they would stack with no spacing between each border. I’m pretty sure this would save me time and effort (and who knows, maybe you too!). No image to produce, no messing with percentages to get the border just right, and no extra image for the browser to load.

For more on border-image:

• CSS3 Info – Border-image
• CSS Tricks – Understanding Border-image
• Border Image Demonstration Page (this one is the best I’ve come across so far).

Apparently, Mobile Safari doesn’t like images (PNG, GIF, and JPG) larger than 3 megapixels (3 * 1024 *1024). This means any background image you want to show up on Mobile Safari needs to be height * width ≤ 3145728. This is only valid for iOS 3.0 (for below 4.0 is it okay to refer to it as iOS?) and above. Less then 3.0 can only handle 2 * 1024 * 1024.

So my 7900 x 1000 image needs to slimmed down a lot.

The reason I ran into this issue is that the client has many IE6 users and needs to fit their needs. His design is very nice, but has a lot of rounded corners and drop shadows. Rather than write two versions of the site, I’ve been making really large background areas in the sprite to avoid any potential issues with IE6.

I think I got a little heavy handed with this and didn’t create empty header and footer divs in the markup for just the bottom and top images, which I’ll be doing to solve the problem now. I am not terribly comfortable with this. The purist in me hates mark-up that has no real bearing on the content. Another solution would probably have been code a CSS3 version with rounded corners and had fallbacks for IE and non CSS3 compatible browser versions.

Thanks to the following articles for helping me fully understanding this issue more and come up with an appropriate solution:

• Shrinking large background image bug in iPhone Safari
• Mobile Safari Background Image Scaling Quirk
• Creating Compatible Web Content

Instead, I began using naming conventions. Images with semantic names like “logo.png” and “navigation.png” would get their use or location in the code appended in front of them. So “logo.png” would become “header-logo.png”, “navigation.png” would become “background-navigation.png”. If you look at the source of this site you can see this in action:

#wrapper {
    background: transparent url(images/background-header.jpg) center top repeat-x;
}

What does all this have to do with CSS3?

Basically, I can now add new styles to images based on my naming conventions. This, of course, applies to more than just images, but this was the first use I’ve found for these that naturally fits my already established workflow.

A little history: attribute selectors

These selectors allow web designers to select items based on just a portion of an attribute. I imagine this was originally developed to allow CSS target the many different kinds of forms elements (you’ve got checkboxes, text, radio buttons, etc) without needing to give each one a separate class. While useful, they were only good at matching exact strings. For example, to add a red background to text inputs I just write a rule like this:

input[type="text"] {
    background-color: #F00;
}

The future: substring matching attribute selectors

Substring matching attribute selectors are a huge leap up from attribute selectors. They free web designers from relying on matching exact strings, making just about any tag with a selector fair game. One might also find himself using less classes/ids as a result, and it increases the semantic value of attributes. Plus it makes use of naming conventions that many of us web designers have probably been using for years.

I can use these naming conventions to add styles to the images, whereas in the past I would have used an id or class. For example, in the past, if I wanted all the images in the main content area of my site to float right I would have a rule like this:

#content img {
    float: right;
}

But then let’s say that I wanted certain images to float left to mix it up a little:

#content img.left {
    float: left;
}

Now I have two rules for my content images that are difficult (well not that difficult) to override. But if I use these new CSS3 selectors, I can write two simple rules that are “easier” to override (should the need arise):

img[src*="right"] {
    float: right;
}
img[src*="left"] {
    float: left;
}

The awesome part is that these CSS rules will work for either of my methods described above:

Old method

<img src="images/right/lion.png" alt="Lion on his back" />

New method

<img src="images/right-lion.png" alt="Lion on his back" />

One last thing…

Notice that I am using the * in these, that means that the string “left” or “right” can be anywhere in the src attribute. You can alternatively us ^ or $ which will look at the end of the string only, but won’t be of much use in this instance. Unless I was to place “left” or “right” at the end of the image name, but I would need to make it look like this:

HTML

<img src="images/lion-right.png" alt="Lion on his back" />
<img src="images/lion-left.png" alt="Lion on his back" />

CSS

img[src$="right.png"] {
    float: right;
}
img[src$="left.png"] {
    float: left;
}

For more on CSS2 attribute selectors, check here or here.

For more on CSS3 substring matching attribute selectors.

Fullsize – its a plug-in but also a plea to the W3C to implement an additional feature in html to make it easier to display thumbnail and then show the full size without javascript. I’m not convinced this is a good idea at all, but the plug-in he’s got works pretty well.

Sliding Boxes and Captions – This one I can get behind. Slick animations while allowing the user access to additional information. I’m not for hiding everything because there’s no call to action, why would the user mouse over album art unless they know its going to do something? But there are several different ways to approach this issue, as shown in the demos.

Enjoy!

I was in the CSS3 panel at SXSWi on Sunday afternoon, and there were 3 companies on the panel: Mozilla, Opera, and IE. When the IE guy came up to speak, the first thing he said was, “I am not here to talk about IE and CSS3.” He went on to explain how IE8 had passed every test out there and was fully compliant with CSS2.1. And you know what happened? People applauded. They were friggin elated. I was expecting people to boo this poor guy out of the room. His message was really that IE is in the present now, and because of that, we can all move into the future together.

I think Microsoft is tired of being the whipping boy of the internet and is ready to be open with the web developer community at large, not just those that use their products. One of the major factors in the IE’s inability to move forward was being able to support old products that Microsoft had made in 90s, and I think they finally realized the segment of society still using those products has really shrunk. Oh, and their constantly shrinking market share.

While Microsoft may be moving in the right direction, they haven’t forced everyone to upgrade yet. IE8 is only available via download direcly from the IE website. And for those of you reading this right now who can upgrade, please do so (here). Otherwise, you might be seeing this in your browser the next time you come back.

One thing that angered me about Safari 3.1 was its @font-face support. This allows developers to load fonts that may not already be on someone’s computer and use them anywhere in the site. This could be a totally awesome tool, however, I thought, “Why the hell is Safari trying to become IE?”

What do I mean by that statement. Well, the reason the IE sucks to develop for is because it is too busy trying to support older websites that don’t gracefully degrade. The developers were too busy trying to get the site to work in a patched together browser, so standards weren’t followed. This comes from the fact that IE attempted to create it own standard (as did Netscape) because they were all attempting to monopolize the internet.

Anyway, so we have Safari attempting to, in my view, add its own specification to CSS. Turns out I’m wrong. The @font-face selector is actually a part of the CSS3 spec. However, CSS3 is not fully “approved” even though it is supported. I’m not really sure how that works, but I’d really like to see some definite approval before we see support.

So I guess @font-face is all good. Soon we’ll be seeing websites in font other than Arial, Verdana, Tahoma, Trebuchet MS, Georgia, Times, and fantasy? Almost. Turns out you have to host the font files on your server, in a readable directory, so you can’t put up commercial fonts because all users will have to do is read your CSS (thanks Firebug!) and navigate to the font file and download it. Not good. So we are stuck with Open Type fonts. Which can be good, and are getting better, but they’re no Din.

But wait there’s more! You can load other fonts with this handy little tool known as sFIR. sFIR is awesome because it replaces your headings with Flash files that have the font’s embedded. It gracefully degrades (if someone doesn’t have Flash, they get the heading in your default font style). It also has limitations. sFIR is no intended to be used for mainbody text, only small chunks, like headings. And the person needs Flash (who doesn’t have it now-a-days?).

For more on @font-face and how it works, check out this @font-font explanation.

I have to admit that having a blog and wanting to write well researched and thoughtful articles has really contributed to this. I’m still brewing my last critique of Safari 3.1, and in the process of doing research around this have discovered quite a bit of cool stuff (by the way, my writing still sucks, I use words like stuff too much). So I thought I would list a few way to deal with IE issues.

1. Eric Meyer is the man, and give us this bit of code to break some of the major issues you will run into with IE. You can see them at his Reset Reloaded article, which I found on this webiste, Keys to Consistent CSS. Here’s the code in case you are too lazy:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}


   ******Update*******

   The above is the old version of the reset. Eric Meyer has a new version of the browser reset, posted Jan ’08.

2. Another great resource is Dean Edwards IE7 JavaScript library, which fools anything less than IE7 into thinking its IE7. Initially I thought this was awesome. Then I realized it made me lazy. Then I thought it was too big. Now I’m so good, I don’t need it (which is partially true). Version 2 has gotten much smaller, but is still in Beta.
3. Hacks. As much as I love them, they create invalid CSS. You can use _ before your propertiess to target IE6, and * before them to target IE7 (which also targets IE6 by the way), or both to create properties that affect both:
   
/* Target IE 6 and below*/
#maincontent {
width: 400px;
_width: 410px;
}
/* Target IE7 and below */
#maincontent {
width: 400px;
*width: 410px;
}
/* Target IE6 and IE7 separately. ***Make sure to put the IE6 ("_") property second*** */
#maincontent {
width: 400px;
*width: 410px;
_width: 415px;
}

   Let me be absolutely clear, I do not endorse hacks, but I have been known to use them in a pinch (a fact that I am not proud of).
4. And here’s my preferred method, Conditional Comments, which you can use to have specific stylesheets for different browsers. Make sure you put these after your global stylesheet(s) so they properly override the styles.