Ironpaper Webintel: Knowledge base for internet business and web development.
Web design Web development HTML5 SEO CSS Content Management
Topic:

internet explorer hacks

HTML 5 @font-face Font Format Usage

Saturday, June 5th, 2010

font html5 directory of options for web design that are open sourceHTML 5 brings a lot of new and exciting features to the web design community. Web design blogs have been filled with discussions of the HTML 5 support for native web video. A lot of other features however deserve your attention as well, such as the canvas elements, CSS 3 transitions and font support.

Font support will greatly enhance the look and feel of the web--as the former constraints of a limited palette of typography choices are lifted.

With HTML5, designers will be able to use a font that is not present on the viewer's machine--yet still display the font. Font products that support the WOFF font format will be able to be used on a web page as real text. The declaration @font-face will allow for the display of new typography options on the web.

WOFF is not the first technology of it's kind that allows for the download of  new typography options for the web. WOFF will be the preferred way to display new fonts.

Below: Here is an example usage of @font-face within CSS:

@font-face {
font-family: 'BL Avenir Black';
src: url('fonts/BLAvenirBlack-webfont.eot');
src: local(' '),
url('fonts/BLAvenirBlack-webfont.woff') format('woff'),
url('fonts/BLAvenirBlack-webfont) format('truetype'),
url('fonts/BLAvenirBlack-webfont.svg#webfont') format('svg');
}

Using double declarations: one for Internet Explorer and one for the rest:

@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.eot');
}
@font-face {
font-family: 'BL Avenir Black';
src: url('/font-folder/arial_black-webfont.woff');
}

Notice that the font is stored on the server and the path is specified so the user system can reference the font file formats. In the definition above, we are referencing Paul Irish's Bulletproof @font-face syntax, which, for example, provides an .eot font for Internet Explorer and backup formats in .ttf and .otf. There are a number of others out there that have published helpful articles on bulletproofing @font-face as well, to name a few: Mark Pilgrim and Jonathan Snook.

Using conditional statements for @font-face for Internet Explorer can make such an ugly and wasteful mess. Instead, you can use double declarations to provide IE with the .eot font format. Currently, only Firefox is supporting WOFF font formats--other browsers plan to in future releases.

Great reference for @font-face

If you want to learn more about HTML5 and fonts, we recommend taking a look at Paul Irish's: Bulletproof @font-face syntax:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Paul Irish does a great job of breaking down the concept and demonstrating real world and helpful examples.

@font-face easy generator

Another recommendation that we can make would be to use the fontsquirrel.com for fonts that you have the right to use. This very helpful tool can create a small toolkit for web developers and designers to convert fonts into WOFF or EOT formats. Take a look: http://www.fontsquirrel.com/fontface/generator

Tags: , , , ,
Posted in Knowledge Base | Comments Off

Crash Course In CSS Conditional Statements For Internet Explorer – IF IE

Sunday, May 23rd, 2010

For web designers, Internet Explorer is a true pain in the butt. This article gives web designers a weapon to combat the various rendering engines for the Internet Explorer browsers whether 5.5, 6, 7, or 8. Since Internet Explorer does not conform to web standards that other browsers, such as Mozilla's Firefox has tried to maintain, designers have had to resort to all kinds of hacks and duplications to make web pages appear the same across different web browsers.

There is a simple technique for executing code in Internet Explorer only, which can be a great last line of defense for cross browser compatibility in web design.

Firstly, there are two types of conditions that will be generally helpful to a web designer. One is positive, which means "if a condition is TRUE, then do this...". The other is negative, which means "if a condition is FALSE, then do this...".

Positive Condition
<!--[if condition]> HTML <![endif]-->
Negative Condition
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Here are a few types of conditions that you can use.

IE
Any version of IE
if lt IE (insert version)
Versions less than the version specified in (insert version) for example if lt IE 6
lte IE (insert version)
Versions  less than or equal to version specified
IE (insert version)
Only version specified
gte IE (insert version)
Versions greater than or equal to version specified
gt IE (insert version)
Versions greater than the version of IE that you specified

In brief:
So basically, you can use this downlevel-hidden conditional comment to reveal something only in a specified version of Internet Explorer.

<!--[if IE 8]>
<p>This is Internet Explorer 8.</p>
<![endif]-->

Using IF IE Conditional Statements For Style Sheets

You can also use "If IE" conditional statements to reference (link to) style sheets for only Internet Explorer. Other web browsers such as Safari, Mozilla's Firefox and Opera will not reference the style sheet used in the conditional statement. This is a very common IE hack used by web designers to fix weird issues with spacing, margins, padding and other problems with pages rendered by IE.

Example:

<head>
<title>Test Page</title>
<link href="all-browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="only-ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie-6-and-lower.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="notie7.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not-ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Conditional Operators

! [if !IE] - The NOT operator.
lt [if lt IE 5.5] - The less-than operator.
lte [if lte IE 6] - The less-than or equal operator.
gt [if gt IE 5] - The greater-than operator.
gte [if gte IE 7] - The greater-than or equal operator.
( ) [if !(IE 7)] - Subexpression operators.
& [if (gt IE 5)&(lt IE 7)] - The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] - The OR operator.

Tags: , , ,
Posted in Knowledge Base | Comments Off