So am I.  I  make changes a lot live on the server (using the Web Dev Toolbar), and I have to hard-refresh every time I make a change.  Doesn’t sound like a big deal, but it cuts down on valuable time that could be done… well, not refreshing a page.  There is a way; versioning your CSS file.  The upside: it makes changes go live automatically without having to clear the cache.  The downside: it’s difficult to do, because the correct way to do it is by adding v=XXX manually every time you make changes.

Unless… you can find a way to do it automatically.  And Mark Jaquith has done just that.

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(TEMPLATEPATH . '/style.css'); ?>" type="text/css" media="screen, projection" />

So what does the ‘filemtime’ function do?  From the PHP website:

This function returns the time when the data blocks of a file were being written to, that is, the time when the content of the file was changed.

So everytime you change the file, the new change time gets parsed in using PHP and you’re able to have a new version every time.

Thanks to Mark for this great (and really clever) tip!

Using images on a design is pretty well necessary in today’s visually stunning web.  However, while images look great, there’s no substitute for text when it comes to Search Engine Optimization.  But is there a way to get the visual effect of an image while still having the SEO benefits of text?

With CSS, there absolutely is.

Social Media

See this image above me?  Look like a standard image, with a standard <img> tag doesn’t it?  Well, if you were disable the stylesheets, all you’d see is this:

Social Media

Just text.

So, how can we achieve this?  By using a technique called the Revised Phark Method, with a bit of a twist to make sure that things work no matter where they are.

First, the code (simplified from above because the styles are inline for less “stylesheet bloat”)

<p class="socialmedia">Social Media</p>

Next, the CSS.  First we give it a definitive height and width:

.socialmedia{
height: 277px;
width: 101px;
}

Next, we need to set the display to “block” in order to give it the properties of other “block” elements (like H1, H2, and other similar tags):

 .socialmedia{
height: 277px;
width: 101px;
display:block;
}

After that, we need to set the background image:

 .socialmedia{
height: 277px;
width: 101px;
display:block;
background-image: url(http://www.studionashvegas.com/wp-content/themes/juicy/images/socialmedia.png);
}

Social Media

That’s starting to look right, but the text is still overlaid on the image.  To get rid of it, we simply indent the text –9999 pixels to the left, removing it from view:

.socialmedia{
height: 277px;
width: 101px;
display:block;
text-indent:-9999px;
background-image: url(http://www.studionashvegas.com/wp-content/themes/juicy/images/socialmedia.png);
}

So, what is the benefit of doing this?  Number one, browsers that don’t support images will show text, so you don’t lose the effect just because the image can’t be shown.  Also, the SEO benefits of using an H1 tag with text far outweigh those of using an H1 tag with an image and alt text.  Finally, it allows you to write your markup first without having to worry about jamming items into the design; write the markup, then style the elements in order from top to bottom, which saves time in the long run.

I’ve recently discovered a nice way to standardize the view I get between Internet Explorer and Firefox, which have a standard “stylesheet” built in to render websites.  The problem: both browsers use a different stylesheet, which can lead to inconsistancies between the same site on different browsers.

So, I’ve adopted a “CSS Reset” file.  What it does is basically clean the slate and neutralize the styles embedded into the browser, thus rendering IE and Firefox to a 90-99 percent similarity when viewing a page (there will always be bugs in IE’s website rendering, but for the most part pages show up fantasically).

The CSS Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

This is the Yahoo! UI Library Reset.css file, for those that care.