Forcing Scrollbars, 2010 Edition
One of the challenges in webdesign is preventing the slight jog that happens when you — in a centered HTML design — when you go from a page that needs a scrollbar, to one that doesn’t. Think about it — you go from the short contact page to the blog, and everything is offset to [...]
jQTouch Is For iPhone-Like Web-Apps
Storing this here for my own posterity as much as yours, jQTouch is a nice jQuery addon which gives you access to doing some very nice mobile-apps effects right in your HTML webpage. Combine it with this nice iPhone PSD template, and your CV just got a little meatier.
Invoke Google Chrome Frame When Available
Google recently changed the way you harness the power of Google Chrome Frame in Internet Explorer. Chrome Frame is the plugin which adds Google Chrome as a browser renderer inside Internet Explorer, giving you access to, among other things, HTML5.
Previously, you inserted a simple meta tag. Now you have to send the headers programmatically. [...]
Vanilla CSS Un-Reset With New Clearfix
My Vanilla CSS Un-Reset has been updated to 0.9.8 and now features a new interesting clearfix.
I suppose that sentence deserves a little backstory. First of all, a “clearfix” is a solution to an issue inherent in using CSS to layout webpages. If you have a containing div box that contains two floating div boxes, the [...]
Sliding Doors In Wordpress
A default Wordpress page menu is built like this:
<?php
wp_page_menu(array(’depth’=>’0′, ’sort_column’=>’menu_order’));
?>
– which outputs a plain menu, <li><a href=” … “>Menu Item</a></li> and so on.
If you want to use the sliding doors CSS technique, however, you need more markup. So do this:
<?php
echo preg_replace(’@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span></a>’, wp_page_menu(array(’echo’=>false,’depth’=>’0′, ’sort_column’=>’menu_order’)) );
?>
– which’ll output this a more CSS friendly markup: [...]
A Temporary Way To Deal With Windows’ Awful @font-face Rendering
Windows smooths fonts, oh yes. In several different ways. Unfortunately, none of these font smoothing mechanisms properly round the edges of CSS fonts embedded using @font-face. This is most visible when using CSS fonts for body text, but it’s bad enough. So do we stop using CSS fonts for body text? No, we show CSS [...]
Bookmarklet: CSS Rotate Your Canvas Sideways For Sofa-Side Surfing
Inspired by CSS3 Sideways Google, I’ve concocted a bookmarklet that will come in handy for the couch potatoes in the crowd. Press the bookmarklet, and the webpage is rotated 90 degrees counter-clockwise for maximum bedside readability.
Drag this bookmarklet to your bookmarks bar: Rotate Sideways
This bookmarklet works only in modern browsers, and in particular WebKit browsers [...]
Handle IE8: Use Chrome Frame If Available, Fallback To IE7 [Updated]
Internet Explorer 8 wasn’t a welcome surprise. While the new rendering engine was supposed to be more standards compliant, the CSS engine wasn’t updated similarly, so the net result was it couldn’t render advanced CSS layouts anyway, even if it tried to. The solution was to add a meta tag to tell IE8 to use [...]
Zeldman Says: Web-Licensed Fonts From Font Bureau Soon
It only took calling Jeffrey Zeldman a font pirate, to find out this delicious slice of news about web fonts:
You will soon be able to purchase web-licensed fonts directly from Font Bureau’s online store. You can’t do that quite yet. I pulled some strings. Okay, I begged. And some Polaroids might have been involved.
Kidding aside, you [...]
Fixing The Box Model [Update]
As great as web standards are, the standard against which box widths are measured is ridiculous. The details are all explained in this image, but suffice to say the width of a box doesn’t count its padding or borders.
Fortunately you can fix this. Simply use the following CSS:
.box {
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
This changes the box model behavior, so [...]