This panel had representitives from each vendor (not apple) and they each took turns showcasing the upcoming CSS3 support in their browser.

MOZ

• nth-child selector
• color module [opacity, rbga]
• border-image
• border-radius
• box-shadow
• * word-wrap:break-word
• * font-adjust
• @font-face
• @media queries ( @media(width:22em){blah}
• -moz-transform: skewX(20deg);
• -webkit-transform: skewX(20deg);

Future from MOZ

• width calculations
• new layout systems for user interface

Microsoft – IE and CSS

• implementing 2.1
• 1st complete implementation on 2.1

In IE8

• no new CSS3 properties

Future of CSS in IE

• opacity
• backgrounds
• web fonts
• media queries
• mutil-column

Opera

• text-shadow (css2)
• webfonts (css2)

CSS3

• backgrounds and borders
• border-radius: 150px / 50px;
• box-shadows, blur, inset
• border-image
• a box css3 style
• css transitions (animations)

Getting your own iPhone app icon is easier than you’d think. I was recently working on a project where the client wanted to make sure that if a user added his site to their iPhone home screen, there would be a pleasing icon.

Apple used a lot of forward thinking when they implemented the apple-touch-icon. It’s treated very much the same way a favicon is treated. There are 2 ways to set your Apple icon.

• You can simply put a file called apple-touch-icon.png in your root directory
• You can put the icon where ever you’d like and link to it in your document head element

I’m one of those people who prefers to do a combination of both to make sure it gets set. I put apple-touch-icon.png in my root directory and also link to it with the following code.

Apple icon code

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

That will make sure it gets set.

Icon specs

The great thing about this is that you don't need to dress up your icon to match the iPhone theme. The software will round your corners and add the nice glossy effect for you.

Like the favicon, the Apple touch icon has a size requirement. Your icon must be 45x45 pixels to properly fit. I haven't tried to do it any other way; my gut tells that it would either crop the icon or squish it down the size.

In action

This is the Apple icon for csskarma.com:

Note that the corners are not rounded and I didn't add the Apple gloss.

In bookmarking a site on the iPhone/iPod you can "Add to Home Screen". This makes the bookmark look much like and app with the shiny icon and whatnot.

Then your new Apple icon shows up on the home screen

A brilliant and easy bit of marketing for a site that anyone can jump on board with... you may want to dress yours up a bit more.

Evernote is a program to help you remember things. Think of it like a post-it not that you wear on your forehead all day.

Microsoft CSS Vendor Extensions

It looks like Microsoft IS actually doing work on IE8, They just beefed up their CSS support. It actually looks pretty promising so far. Looks like their goal is for full CSS 2.1 support and then branching into CSS3.

Measuring SEO: why rankings are worthless

A pretty good read from Yoast about what you should really be focusing on with SEO.

A List Apart

New issue of A List Apart this week, always a must read.

10 Principles of the PHP Masters

Another on from NETTUTS about some tip and best practices while working in PHP

I did some digging around after that and came across a short post on iPhoneAppr about how to auto-detect a browser based on the user agent (what is essentially the browser).

The HTTP User Agent

When you visit a web page, your user agent changes based on the media you’re using. So, right now, if you’re using Firefox 2 your user agent string looks something like this:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14)
Gecko/20080404 Firefox/2.0.0.14

and if you’re on an iPhone it will look something like this:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like
Gecko) Version/3.0 Mobile/4A102 Safari/419.3

As you can see, the user agent string has some key difference. The iPhone agent actually says "iPhone" in it. With this in mind we can use a neat little function built into PHP 5 called stripos to search the user agent and return some code (like code to send someone to a mobile version of a web site).

Let’s just get into it shall we? Here’s the PHP:

<?php
//setting the variables
ipod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");

//detecting device
if ($ipod == true || $iphone == true){
    echo "iPhone or iPod";
    } else {
    echo "Screen";
}
?>

Stripos is a function that takes 2 arguments. The first is what you want to search (the haystack) and the second is what you want to search for (the needle). If the needle is found in the haystack it will return "true", and if not, it will return false. An important thing to note about stripos is that it’s case insensitive[edit], so if you have some initial trouble, check your spacing and maybe try trim().

Trouble I had

In the PHP manual it says to use === when checking the value (which is for an exact match, true=true), but for some reason that didn’t work for me so I used == (match, but not exact so true=true & true=1 for boolean values). It’s usually just a spacing issue, but I’m not real sure this time. Feel free to tell me I’m wrong.

view live demo

I like this, it’s pretty easy, light, and useful if you just want an iPhone/iPod interface.

Anyway, I’ve been reading up on some user interface principles in the past few months and have been talking up designing for mobile devices. First, I was looking into Fitts’s Law (I’ve seen it spelled a few different ways, so I just chose one and went with it) which wasn’t meant to apply directly to the web, but is still very useful in relation to link size, deceleration, and general usability issues. Then reading up on some Mediatyping on Mezzoblue. And I started dumping all that stuff into the research section of CSSKarma, mainly so I could keep track of it, but also to try and centralize some of the happenings on the web and show some of the better resources I’ve come across, but that haven’t made it to the lab yet.

I’ve been speaking pretty frequently about mobile design/development and there’s one particular aspect of it that seems to escape a designer’s mind in almost every conversation: a finger, while far more accurate than a mouse, is around 10 times larger. Very often, you get something like this:

I have no idea who’s finger that is, got it from Google images.

This seems like common sense, but you’d be surprised how many times people have trouble hitting a small link on their mobile device because it doesn’t translate from the regular web browser well. It’s true that the iPhone/iPod touch have that cool zooming feature, but it’s still kind of a pain for browsing a site. Fitts’s Law, as part of it applies to link size (target area) is very useful where it basically says that increasing the size of a small object will improve hit accuracy, but only to a point (increasing the size of a large object will not necessarily increase accuracy).

I really recommend reading up on Fitts’s Law. It’s pretty useful, especially in a time where the future of web design is moving towards mobile devices (can the future move?).

General handheld style media: media=”handheld”

iPhone/iPod Touch style media: media=”only screen and (max-device-width: 480px)”

Just some stuff to remember while you’re designing for the mobile web

with ease,

Tim

div{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}

to make a transparent background. It works great in all browsers, but have you ever tried putting text in that div? Right, it applies the opacity to everything inside the div as well. So then you try something like this to bring the opacity level back up to nornal:

div h1{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

That, in theory should work, but it doesn’t. So then you try to up the opacity to 140 & 1.4 to try and account for the extra transparency… but that doesn’t work either. So you settle on using a small opacity level to read the text or use a background image.

Thanks to a challenge issued by a friend at Sporting News we now have a technique, without using any extra markup, to have your opacity without dimming the “containing” text. Why is containing in quotes? Well, you’ll see.

First off, here’s the live example

CSS

body{
background:#5A6163 url(bg_floral.gif) no-repeat 0 0;
}
a#skip-link{
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
background:#000;
display:block;
height:8em;
margin:70px 0 0 0;
text-indent:-9999px;
}
div#branding{
position:absolute;
top:70px;
height:8em;
width:98%;
}
div#branding h1{
font-size:1.8em;
padding:.5em 0 0 .5em;
}
div#branding h1 a{
color:#fff;
text-decoration:none;
}

WordPress really sucks at displaying HTML code, so you can just view source on the live example.

It’s very simple HTML, just a skip to content link, div called “branding” and an H1 link inside of branding. I also added some other stuff to jazz it up a bit.

Tested in FF2, IE7, IE6, Safari 3 with no errors.

Clean code will transcend browsers

My thoughts

Looks like the IE team created a really complex system to account for all the uproar in the web community. Seems to be a large step in the right direction. Didn’t someone say this would happen?

Either way, I still think it’s a good thing and I really hope Microsoft does a better job at upgrading IE7 folks to IE8 than they did for IE6 users.

Just a quick post today.

Anyway, our LMS login page is located at http://vista.ncsu.edu, it’s probably one of the top 2 or 3 most visted NC State web sites for students, coming in at around 25,000 hits per day, everyone uses it to log into their course. I’ve been running Google Analytics on it for about 6 months now, watching the browser habits of all the students. Having so many hits every day I figured this was the best place I could use to gather a good sample; and over the past 6 months or so I’ve noticed an immerging trend.

These are my findings for the 4 major browsers, I didn’t list to others since there’s around 15 used on the site (well, 3 majors and Opera).

At first glance these stats don’t really say anything shocking, but when you dive into them further you can see what I’m talking about. The trend I’ve noticed lies in Internet Explorer. Here are those stats:

That’s it! That’s IE7 taking over the market share from IE6. So we have a new order of things:

1. IE7 (38%)
2. Firefox (35%)
3. IE6 (20%)
4. Safari (6%)
5. Opera & others

It’s been a very gradual change over the time I’ve been paying attention, but I think it’s finally noticable enough to mention. I know this data isn’t 100% accurate, but it does represent a very Internet-savvy demographic of 18–25 year olds. And just to show that IE7 is still gaining ground, here are the stats for the past month:

Firefox has been holding strong around 34%–36% market share throughout this whole dataset.

This news actually makes me a lot less weary of the upcoming release of IE8. My initial reaction when I heard about it was “oh great, now we have to deal with IE6, IE7 and IE8 compatibility”. With the slow death of IE6 it gives me some hope that maybe Microsoft will push IE8 hard and get it out to canabalize the IE6 market share even further. If this trend continues, let’s say IE8 comes out around December (I think that’s a fair assumption, although I really don’t know how far along they are in development, since I haven’t even heard about a beta yet), version 7 adoption should be around 80%-85% (within IE, not global market share). That’s very managable and with the CSS advancements in IE7, I can deal with it until IE8 takes over even further. We can only hope that it doesn’t take as long as IE7 to overtake its predecessor.

It’s not that bad, the web is cleaning up its act!

with ease,
Tim

After I read Andy Clarke’s Transcending CSS about 6 months ago I started using the one he has in the book. And then Eric Meyer released a version on his blog. Ever since then I’ve been using a hybrid of the two and I added a little extra in there for myself.

Eric and Andy’s reset files don’t include reset rules for the HR element, rightfully so; it’s damn near impossible to get it right since IE treats it weird (try it, you’ll see). So I added the HR into my version of the reset file, it’s not perfect, but I think its better than the default value… and really…how often do you use a horizontal rule? I rarely do.

So today I was poking around my reset file and decided to remove some of the absurd elements that I’ve never used but somehow found their way into my reset file, like q, var and dfn. I have never once used those elements; so I took them out, slimmed down the file a little and thought I’d FINALLY release it. So here it is:

/**
* reset browser defaults
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td          {margin:0;padding:0;}
body                      {line-height:1;color:#121212;background:#fff;}
h1,h2,h3,h4,h5,h6,p       {font-size:100%;font-weight:400;}
ol,ul                     {list-style:none;}
caption,cite,code,th      {font-style:normal;font-weight:400;}
fieldset,img              {border:0;}
caption,th                {text-align:left;}
:focus                    {outline:1px dotted #eee;}
table                     {border-collapse:collapse;border-spacing:0;}
hr                        {border:0;border-top:1px solid #555;margin:0;height:1px;}

You can also download it at: http://www.csskarma.com/css/reset.css

with ease,
Tim

This is the META tag IE wants you to use:

< meta content="IE=8" http-equiv="X-UA-Compatible" />

It basically tells the browsers that you want to use standards available for IE8 when rendering your page. If you don’t use it, the default rendering engine will (as of right now) be IE7. As an added feature, you can also set the tag to:

< meta content="IE=edge" http-equiv="X-UA-Compatible" />

for the latest version of IE standards.

There’s a lot of talk about how this tag will hurt progressive enhancement in relation to CSS and JavaScript. But elements such as Microformats should be unaffected, as it just deals with current XHTML elements.

It has to be realized that this may well be the only way for IE to advance its standards support in a reasonable time frame, or at all. Version targets let them avoid breaking existing sites, especially intranet sites, while fixing and adding their DOM, CSS, and other implementations. That has to be understood and accepted if the discussion is to be anything more than people talking past each other. Within the world of IE, they must have a way to uphold backwards compatibility with sites developed under older versions of IE.

That was a section, from Eric Meyer’s post yesterday

I think the only thing about this that irritates me is that, right now, we have to do all these special things for IE, add all these little extra pieces of code (whether it be browser detection, CSS hacks, conditional comments, etc). And now here’s yet another line of code to put in.

This is all fine, but I think the key to this not causing an uproar is publicity since the default rendering will be for IE7. If it defaulted to “edge” then it wouldn’t matter if no one new about this. If the word doesn’t get out enough (it apparently seems to be getting out just fine) then it will just cause more and more hacks to come out of the woodwork.

For example: IE stand alone versions are kinda crappy, I run an IE6 stand alone, it’s pretty unstable and you have to edit the registry to get conditional comments to work. So, let’s say a developer is running IE v10 and for some reason doesn’t add in this meta tag and it defaults to an IE7 rendering, but this person doesn’t have IE7, they’re running IE v10, so their site looks messed up pretty bad. what can they do? They can use hacks and conditional comments to make it look right, as they see it.

I have a feeling that this sort of thing will happen quite a bit unless Microsoft changes the default to “edge”, maybe builds in a soft error message or makes sure developers are well aware of this tag.

I’m unclear on why Microsoft feels like they need to re-invent to wheel when they release a browser (using Trident and now a new rendering engine). Why don’t they just use Gecko or Webkit to really create some consistency across browsers. Maybe they have a financial obligation to fight open source with every fiber of their being… I don’t know.

Since I had some time to mull over all this stuff, the version targeting seems like it actually does have a valuable place. Mainly when developing a site for a client. Since a lot of client sites (that I’ve done) are just basically for marketing and they don’t really care to integrate a lot of extra features it seems logical to lock something like that into a browser version if it’s just going to sit around anyways.

Where I think version targeting would be a bad this is for sites that actually have a web team behind them. In my experiences I’ve done my most innovative stuff when a site breaks in IE.

So I think that’s my official stance on the whole matter. I like it for websites that will essentially go untouched for extended periods of time.

Related articles:

• Version Targeting For IE8, Developer Wars
• Version 2 from Eric Meyer
• From Switches to Targets: A Standardista’s Journey
• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
• Microsoft’s Version Targeting Proposal

with ease,
tim