I have been using an inexpensive no name backpack to carry the necessary baggage (work clothes but not shoes, cycling clothes for trip home, tools and spare tube) for the ride to work for the last couple of years, and it has done the job.

However, I start riding the recycled single speed to work and that did not have mounts for drinks bottle. One of the reason I bought that specific noname backpack was it could also be used as a hydration pack. So I tried to use it as a hydration pack, and it did not work for me. The tubing was in the wrong spot, the provided bladder pack was difficult to use, the mouthpiece leaked and my CamelBak 1.5l bladders did not fit the pack.

Then purely by accident I saw the Crumpler Yee Ross on the Crumpler web site, a Crumpler backpack that can be used as a hydration pack. So I went to my local Crumpler store, check it out and walked away after purchasing last year’s model (more on that later).

A few days later it was pressed into service as a hydration pack with a CamelBak 1.5l bladder and it performed exceptional well, the routing put the mouth piece in the right spot and the CamelBak 1.5l bladder did it’s job providing me hydration. It was also far more comfortable to ride in than the noname backpack. The weight was well distributed, the shoulder straps where in the right spot for me and did not dig in.

I started using the Yee Ross as a regular backpack for all my other commutes and I am completely sold on it. The comfort factor has it.

Pros

• Comfortable, even with a moderate load.
• Works as a hydration pack with a variety of bladders.
• It is a Crumpler it will be durable.

Cons

• Smaller than most backpacks, need to pack carefully.
• Tight squeeze sliding a MacBook Pro in, not a problem with the Acer Aspire One though.
• It is a Crumpler ;-)

There is a difference between last year’s model which is made from thicker more durable material, has a waterproof pocket and wider belt straps than this year’s model which comes in more funky colours. So if you want one and I recommend last year’s model for durability and practically I would head into your local crumpler store now. I have owned mine for 8 weeks and I would highly recommend it.

This is my infamous bag that has been reported to the local Crumpler store on more than one occasion, because I had the audacity to stencil my blog URL on it, to clearly identify as mine.

Three years ago, I bought a Crumpler bag on the recommendation of a couple of friends, to protect my then laptop, an ancient and battered Ti Powerbook from my daily adventures. I had used at least four other bags, but none had the durability, protection or usefulness offered by the Part and Parcel. The fact it was a full blown courier bag, that I could use while cycling really swung it for me.

Shortly after purchasing the Part and Parcel, I was heading to Web Directions 06, so to clearly identify my bag from the other crumpler loving geeks at the conference. I created a stencil and using a small foam roller and acrylic paint put my blog URL on the top flap. I did not even get to the first workshop on the first day, without seeing an identical bag. I sat down to breakfast at a nearby cafe and at the next table was an identical bag sans URL.

Over the three years, I have used the bag with a number of different laptops, including the current MacBook Pro. The Part and Parcel must be doing a good job, because the MacBook Pro is far less battered than Ti Powerbook was at the same stage of it’s life.

The bag has been used on an almost daily basis to take a laptop to work. Except when I am riding most or all of the way in. I started using the Part and Parcel to carry clothes (a change of clothes for work, no shoes and cycling clothes for the return trip) and emergency tools for my 90 minute plus, 42km commute into work. The problem was after an hour or so, I would start losing sensation in my left shoulder, which had the bag slung over. This is the shoulder that has suffered a couple of major fractures and nerve damage in the past dozen years, so it should not be the same for you.

I bought an inexpensive backpack for the long cycling commute and continue to use the Part and Parcel for everything else, including the regular ride to the station with laptop.

I have used the Part and Parcel for a lot more than lugging a laptop, it has been used to carry a variety of objects various distances by foot and by bike and it does the job well.

Pros

• Durable
• Practical
• Looks good

Cons

• Not that comfortable after an hour with moderate load.
• Too popular.
• Brand fanatics

Conclusion

I am very happy with the Part and Parcel, it is a practical and durable courier bag that doubles as a laptop bag. And yes I would recommend it to anybody who needs a laptop bag and particularly anybody who cycles.

As I have only worked 50 of the last 100 days, this blog should be full of interesting posts on CSS and other web geekery. Instead nothing, why?

• Most of my blog posts are written on the train to and from work. Working less and cycling more has reduced this time from five hours a week to less than two.
• Work often provides inspiration for posts, however, instead of working with HTML, CSS or web 2.0, I have been working with JavaScript, jQuery and the intricacies of MySource Matrix workflows. While this keeps me busy, it is not pushing any boundaries or providing material to blog about.
• I am spending more time on my other passion, cycling, including acquiring a couple of project bikes to build. While I am happy and confident in my web mechanic skills to blog about building anything web related. My bicycle mechanic skills are limited and I rather not exposed them to the everybody.

So what does this future hold for this blog, well until I my interest in CSS, HTML and web 2.0 topics is fired up, you will see a few cycling related posts. Most will be reviews of cycling related products (I have a couple of c
Crumpler bags to review) as well as some progress reports on my project bikes. It will not be another 100 days of silence.

The specs for :first-letter pseudo-element state:

These are the properties that apply to :first-letter pseudo-elements: font properties, … ‘line-height’, … margin properties, padding properties … UAs may apply other properties as well.

Width and height are not properties that have to be applied to first-letter. Only the WebKit family (Safari, Chrome etc.) apply these properties. The main issue is line-height which could be used to control the vertical size of the first-letter pseudo-element, as according to the specs.

To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter

Internet Explorer, Webkit and Opera have chosen not to apply line-height and unless one is specified, a :first-letter pseudo-element will inherit line-height from the parent element. Firefox has chosen to apply a line-height to all first-letter elements equal to the height of the element and you have no method of changing it. This automatically aligns the top of the floated :first-letter pseudo-element in the parent block element.

Because the line-height is the height of the type, you get different line-height for different characters eg a, t and p. Which makes it virtually impossible to use lower case letters to produce drop caps like effects.

So you need to reduce the line-height of first-letter to the cap height of your chosen typeface then use margin-top or padding-top to vertically align the top of first-letter with the top of the remaining text. Not only is this more complicated than just changing line-height, you need to do two calculations instead of one. Internet Explorer applies margin and padding to floated :first-letter pseudo-elements differently than other browsers. By fixing the :first-letter pseudo-element in place after applying line-height then applying margin and padding to it, which does not effect surrounding elements.

Five different browsers rendering floated :first-letter pseudo-elements with slightly different properties. Chrome produces the same results as Safari. Note IE8b2 does strange things to backgrounds both colour and images of the:first-letter pseudo-element.

So to get a cross browser drop cap effect using :first-letter pseudo-element that vertically aligns, you need to apply float: left, then find the height of the typeface cap height, reduce the line-height to that, adjust margin-top so it aligns correctly in Firefox and in Opera or a WebKit browser, and then using conditional comments for an IE only stylesheet remove margin-top and change line-height to correctly vertically align the type.

It would of been a lot easier if Mozilla Corporation and Microsoft read the CSS specifications the same way as everybody else and applied the same rules.

Then on December 1 24 Ways showed what could be done and how not to do it with regards to graceful degradation. After problems with the initial design, there was a couple of great articles on using CSS3 for progressive enhancement by John Allsopp and Elliot Jay Stocks.

A few days ago, Smashing Magazine published Push Your Web Design Into The Future With CSS3, which is a general introduction to CSS3. It also lead me to the Zen Elements blog of Alex Mitchell, which like me is experimenting with CSS3 properties and putting it on display for everyone to learn from.

I have not forgotten my demonstration of @font-face, first-letter and adjacent selectors. I am having issues with vertical alignment cross browsers. You will see that demonstration is the near future.

Internet Explorer 7

This would of been a great browser if it was released in 2003, instead it was released in 2006. The improvements over IE6 were good but not worth waiting 5 years for. It still has a number of the IE6 idiosyncrasies that require work arounds. It is the most popular browser is common use today, and likely to remain so for another year, before succumbing to IE8. Still you and I will supporting it for a few years to come.

Google Chrome

A fast, lightweight browser, which I was happy to use while in beta. Since it reached 1.0 release, I have become aware of a few short comings. It branched from the webkit evolution far too early and has not included recent improvements that other webkit browsers have. For example the problem with border-radius and box-shadow, lack of support for @font-face. In addition the Chrome renders type differently from all other browsers. Still while it has a decent market share for a new browser and the opportunity to improve exists, so it needs to be supported.

Internet Explorer 6

A great browser in 2001, which should of been replaced in 2003 and disappeared from view by 2006. It has a number of idiosyncrasies that require work arounds, and you have to spend considerable time after getting a design to work in IE6 after you had it working in more modern browsers. However, over two years after being replaced it still commands around 20% of the IE market share. This has very little to do with computers not being able to support IE7. Less that 5% of all IE6 users are on an OS other than XP.

Unfortunately IE6’s reign of 5 years cemented it’s position in the corporate market and their intranet systems. A large number of corporate networks could not upgrade to IE7, because major tools like the finance and human resources system (in our office) would not work with IE7. These are not quick and dirty locally built tools, but major applications built by vendors like Oracle, IBM and the ilk. However, more than 2 years after it’s release, IE7 is now getting support from these applications and as corporates upgrade these system, most are also upgrading their corporate browser to IE7. Unfortunately this will take a couple more years, before IE7 or IE8 rule the corporate sector.

A more disturbing trend is the netbooks and inexpensive laptops that connect to the free wifi at work, over 50% of the machines running XP use IE6, compared to less than 25% of the XP machines accessing the regular website. I do not know if this is because IE6 is the preferred browser for low spec machine running XP or something to do with the large number of Chinese and Korean language devices.

Still while IE6 is our corporate browser, I will have to support it, no questions asked. As I will while it remains popular in either in the corporate or low end netbook/laptop sectors.

Internet Explorer for Windows Mobile 6

If you thought supporting IE6 or the old IE5 was painful, you have never had to support IE for WM5 or WM6. It does not know if is a mobile browser or a full blown browser for the small screen, it loads both screen and mobile profile stylesheets, it only supports XHTML-MP which is missing a few key elements from HTML4. JavaScript support is interesting, some scripts work, other do not and some just crash the browser. Unfortunately it is one of the major mobile browsers and Windows Mobile is popular in the corporate sectors. Around 10 times more popular than the iPhone and Mobile Safari and a lot more than Opera Mobile, my favourite small screen browsers.

Browsers I will stop supporting this year

I have already made a decision not to worry about getting the new website I just launched for work, perfect in Firefox 2 and Safari 2. they accounts for less than 1% of all traffic. So as long as it functions correctly that is all I am concerned about. Minor defects are acceptable. On the other hand, Firefox 2 support will be a concern if I every get round to redesigning this blog because it accounts for 5% of all traffic. Apparently web geeks are twice as likely to stick with Firefox 2 than the average Firefox user, probably something to do with the trusty web developer toolbar. Still I will review that later in the year.

I am a little more ruthless than the Yahoo browser support chart, I have already dropped Windows 2000 support. I currently only worry about XP, Vista, OSX 10.4 and 10.5 and Ubuntu as OSes and IE6, IE7, Safari 3, Chrome, Opera 9.5, Firefox 2 & 3 as browsers for computers. Though I am looking at dropping Chrome and Firefox 2 to functional only, while adding IE8 and Opera 10 to supported. I also support Mobile Safari, Opera Mobile, Internet Explorer for Windows Mobile 6 and would support the latest S60 browser if I had access to a test device.

edited 17 February 2009 for grammatical reasons

On close inspection, I like Cambria and the idea of using it for body copy. Just need to find a suitable Mac font and a fallback for those XP machines without it. Times New Roman has never cut it as a body copy font for me. On the other hand Times New Roman looks so elegant at large text sizes, that I could not bear to use Cambria as a display text(Title and headings) if Times New Roman was available.

Mindful of the recent Chrome and Safari render the same…or do they? discussion on the WSG mailing list. I fired up all the test browsers on that machine to see if there are any differences in font rendering between IE8, Firefox3.1 beta, Safari 3.1, Opera 10 alpha and Chrome. The results have been combined into single image.

The shock was how differently Chrome rendered the text to all the other browsers. The type is significantly heavier with Chrome, looking more like a semibold version of the typeface, when compared to all the other browsers, which rendered the type identical to my untrained eye.

I have always known that type on the web is far from perfect. But by selecting the right fonts and using relative sizes, you could deliver a fairly consistent typographical experience to most users no matter what OS, browser, installed fonts and user settings they had. Chrome takes your carefully constructed typography and makes it darker and dramatically changing your design. Oliver Reichenstein said Web design is 95% typography that is because Google Chrome now has a 5% market share.

I have just finished reading The State of the Web survey results. I was surprised by the results of the survey of current web practices, I always considered myself an early adopter of design and development practices and technologies when it comes to HTML, CSS and the ilk. With an early adopter audience for this survey, I expected to be in the middle of the pack of with my design and development practices.

Well I am with my choice of OS, Tiger on the laptop, XP (not my choice) at work, browser of choice Firefox 3 (well 3.1 beta) and even our work environment with linux, apache, PHP, PostgreSQL and MySQL. But then things do take a surprising turn.

Around 25% of respondents test sites in a mobile browser, 33% use microformats, 4% use RDFA (it has been in my footer for a couple of years now), 4% use @font-face (I was one of the six respondents to use both TTF/OTF and EOT formats), all things I do and most for a year or two (@font-face excluded).

So I am ahead of the early adopters and this scares me. Because for the last two years I have not been pushing my craft, I have been reading less, particularly leading edge web development blogs and up until a few weeks ago not experimenting.

So if I have lazy for the last couple of years, why am I still ahead of the pack. Wishful thinking is that most people have been gaining knowledge with javascript libraries and frameworks, as well as back-end frameworks. A couple of areas I need to invest some time in, but looking at the survey results I could still be classed as an early adopter with javascript libraries and frameworks and my back-end skills have never been good.

Instead I believe not enough people are pushing their skills, not spending enough time seeking out what other people are doing, learning new and cool stuff and just having fun experimenting. Well I am not going to be one of them, so I hope you will at least join me for the ride if you are not going to push yourself.

I will stick with my original decision of placing conditional comments first, because while IE7 and below do not handle the !important keyword as per the W3C specifications, they do apply !important consistently.

IE7 and below does apply !important correctly in all but one circumstance:

<style type="text/css" media="all">
.class1 {
color: red !important;
color: blue;
}

IE6 ignores the !important keyword when a property with !important keyword is given another value in the same declaration. However, IE does apply !important correctly, when the property is given a another value in a second declaration, such as:

.class2 {
color: red !important;
}
.class2 {
color: blue;
}
</style>

If you have access to IE7 or below view a demonstration, otherwise here are the screenshots.

IE7

IE8 (which does apply the !important keyword correctly.

Lets you style the first letter of any element.

Supported by:

Firefox, Safari, Chrome, Opera, IE5.5+

Known bugs

They are detailed at pseudo-class, pseudo-element, pseudo-CSS. IE6 & 7 has more than a few, negative margins and vertical-align separating from the box are the most frustrating for me. As well as Safari and Firefox handling the text-indent property differently (sorry but I can not get my head around the specs today).

Not support by:

Old browsers and some mobile browsers.

What happens when first-letter is not supported:

The first letter is not individually styled, instead it has the same styling as the rest of the element.

Properties

Only a limited number of properties can be applied to first-letter:

• color properties
• border properties
• font properties
• text-transform
• line-height
• background properties
• margin properties, though it appears only margin-top and margin-bottom works when combined with float.
• padding properties, note padding-bottom does not affect the size or text flow of the holding container unless combined with float.
• text-decoration
• letter-spacing, only when floated
• clear, only when floated
• vertical-align, only when not floated
• float
• clear

If you want to see the properties in action here is an example.

Screenshots from IE7, Firefox 3.1b and Safari 3 (note the differences in the last second and third last items in Firefox and Safari, otherwise it is the usual IE vs everybody else.)

Issues

If you look at the examples, you will see two choices. After working out what properties you can use with IE, you will either spend a time tweaking margin-top and padding-top when combined with float or learning the difference between vertical alignment: baseline, centerline, mathline and topline (another experiment for me) and adjusting line-height, depending on your desired results.

Example

Not yet, I will combine it adjacent selectors for an example shortly.

Will I use it now?

I will definitely look at combining first-letter, adjacent selectors and @font-face when I redesign this blog and for any other project.