Winn » CSS

Font face in CSS

Greg Winn — Fri, 17 Jun 2011 13:08:42 +0000

Use @font-face in your CSS

Computers have been capable of displaying multiple fonts for several decades now, so it might seem odd that fonts are only just now becoming standardised on the web. However, disagreement on file formats along with complex font licensing issues have turned this into quite a difficult challenge to overcome. Fortunately, CSS 3 has put the spotlight back on web fonts, and the web is rapidly moving into a multi-font future.

Applying various fonts to blocks of text is nothing new. However, the ability to include new font faces is indeed new, where as before, we were limited to the browser defaults. To include a new font, download the font file that you’d like to include, and then use the @font-face rule to specify a name for the font along with a file path. After that, you can use the font as you normally would.

@font-face {
   /* Select a name for your font */
  font-family: special-font;
 
  /* Point to the font file */
  src: url('myfont.otf');
}
 
/* Now use it! */
body {
  font-family: special-font, Arial;
}

Browser Compatibility

This seems simple enough, and indeed, the @font-face rule works in every browser going all the way back to early versions of Internet Explorer. Including fonts isn’t quite that straightforward due to a few lingering file format compatibility issues, but fortunately, several font services have greatly simplified the process and abstracted away these problems. My favourite font service is Google Web Fonts, and I highly recommend you check it out. You can pick any fully licensed font for free, and then all you have to do is include a CSS file from Google’s fast content delivery network. Once the external CSS file has been included, the new font is available to use in other CSS documents.

Jumping page content

Greg Winn — Fri, 14 May 2010 02:36:25 +0000

You are likely aware of the page-centering technique of adding auto left and right margins to an outer div:

1
2
3

#some_div   {
     margin: 0 auto;
}

One of the issues of this is that when used on websites with multiple pages, the layout can appear to “jump” a little bit when going back and forth between pages that require scroll bars and pages that do not. This is because the ~16px width of the scroll bar in the browser window causes the content area to become that much narrower and the wrap div re-centers itself in the narrower content area causing the jump.

One way to eliminate this jump is to force scroll bars onto every page regardless if they need them or not. This may annoy some purists out there, but I think it’s a decent solution.

1
2
3

html    {
     overflow-y:scroll;
}

I just used this in a recent project and it checks out with all browsers including IE6.

Browser detection using jQuery

Greg Winn — Tue, 10 Feb 2009 17:31:05 +0000

Browser sniffing is messy. There are a million ways to do it but none of them are particularly clean and most involve conditional statements such as “” for IE and various other CSS selector hacks for other browsers.

It get around this common issue i am now using jQuery to add a class to my body tag.

if($.browser.msie){
        $('body').addClass('browserIE');
        // Add the version number
        $('body').addClass('browserIE' + $.browser.version.substring(0,1));
}

If the user is using IE it will add a class to teh body tag like so:

1	<body class="browserIE browserIE#">

The “#” stands for the version of IE the user is running.

You can now access elements on your page that neeed to be corrected for IE by calling:

1
2
3

.browserIE6 #myDiv {
     display:block;
}

This will work much better then current hacks. Hope that helps someone!!

CSS 3 talk – Rounded corners

Greg Winn — Tue, 11 Nov 2008 04:50:13 +0000

So the last few years have brought amazing things, with the standards movement and getting companies to pay attention to the importance of following standards. In that time, I have seen over five big changes in PHP, three great changes in rails and only one in CSS. Why are we not seeing css3? Why does IE 8 beta still barley work with CSS 2.1? Crazy!

Well, time for a CSS 3 trick! I will cover rounded corners! This is only supported by Firefox and Safari. Below you should see a box with rounded corners!

This box has rounded corners!

Here is the code:


 
This box has rounded corners!

Web User Controls

Greg Winn — Fri, 24 Oct 2008 03:08:15 +0000

Using the user controls may be one of the best moves you will make when developing an application in .NET. The user control will allow you to separate your reusable logic and keep it in one place. For many developers this is a great thing! Many of us have to re-create items over and over, after some time your code can look like crap and then you feel like crap because you have to deal with it.

Let’s say we have a site where I needed a “Quick Search” on every other page, but each page had a different look and feel or a different CSS document. All I would need to do is create a web user control “.ascx” file and lay down the basics of my quick search. Assign the div’s ID’s or classes, then include your control in each page that needs it. To style, just use your style sheet assigned to that page an add your styles.

Web controls make life a little easier when developing in .NET, so be sure to take advantage of this great tool and stop duplicating your work!