The 2nd Annual Worldwide HTML5 Exam: 87%

If you haven’t yet, you should check out jsdo.it.  In addition to tests for Javascript, HTML5, and CSS, they have many free online learning resources.  Below are my results from their 2nd Annual HTML5 Exam. They think a B is a good grade I guess. Well, I don’t.

2nd Annual Worldwide HTML5 Exam
My Results: 87%

The Grammarist | Gray vs. Grey

I didn’t write this, but wanted to share…

Gray and grey are different spellings of the same word, and both are used throughout the English-speaking world. But gray is more common in American English, while grey is more common in all the other main varieties of English. In the U.K., for instance, grey appears about twenty times for every instance of gray. In the U.S. the ratio is reversed.…
[continue @ The Grammarist.]

Google Web Fonts: Open Sans EOT Files

The CSS below can be included in an IE8 Conditional Stylesheet to specify each weight & style of Open Sans as it’s own font-family when using Google Web Fonts. This can be used to fix a common font-rendering issue in IE8 caused by a limitation in the number of files it recognizes for each font-family.

The purpose of this post is to share the code below which links directly to the EOT files for Open Sans on Google’s servers.  This IE8 font-rendering issue has been written about many times already:

Step 1. Create your ≤ IE8 stylesheet

If you don’t have an LTE IE8 CSS file , create a new one and paste the code below for each version of Open Sans that will be utilized on your site.
/*----Open Sans----*/
@font-face {
font-family: 'Open Sans 3';
font-style: normal;
font-weight: 300;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/DXI1ORHCpsQm3Vp6mXoaTXZ2MAKAc2x4R1uOSeegc5U.eot');
}
@font-face {
font-family: 'Open Sans 4';
font-style: normal;
font-weight: 400;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot');
}
@font-face {
font-family: 'Open Sans 6';
font-style: normal;
font-weight: 600;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot');
}
@font-face {
font-family: 'Open Sans 7';
font-style: normal;
font-weight: 700;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot');
}
@font-face {
font-family: 'Open Sans 8';
font-style: normal;
font-weight: 800;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/EInbV5DfGHOiMmvb1Xr-hnZ2MAKAc2x4R1uOSeegc5U.eot');
}
@font-face {
font-family: 'Open Sans i3';
font-style: italic;
font-weight: 300;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/PRmiXeptR36kaC0GEAetxrXcjzEax2LfQAlK8DdMzhA.eot');
}
@font-face {
font-family: 'Open Sans i4';
font-style: italic;
font-weight: 400;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/xjAJXh38I15wypJXxuGMBmfQcKutQXcIrRfyR5jdjY8.eot');
}
@font-face {
font-family: 'Open Sans i6';
font-style: italic;
font-weight: 600;
src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/PRmiXeptR36kaC0GEAetxo8mkAiYpFywqG2RvpzBnTU.eot');
}
@font-face {
font-family: 'Open Sans i7';
font-style: italic;
font-weight: 700; src: url('https://themes.googleusercontent.com/static/fonts/opensans/v5/PRmiXeptR36kaC0GEAetxrFt29aCHKT7otDW9l62Aag.eot');

 

Step 2. Update Main CSS

For the fix to work properly, the font-stack in your main CSS file must reference the font-family as designated in the IE8 stylesheet first.  This is because browsers pick up on the first font-family they recognize in the stack.

Example—Open Sans 700 Italic

h1 { font-family:'Open Sans i7','Open Sans',sans-serif; font-weight:700; font-style:italic; }
IE8 will recognize Open Sans i7 from the conditional stylesheet.  Other browsers will recognize the entire family of Open Sans and load the correct font file based on the weight and style designated above.

Step 3. Include ≤ IE8 CSS

Include the LTE IE8 CSS.  One way of doing this is to include the code below in your document’s head tag:
<![endif]--> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="lte-ie8.css" /> <![endif]-->