AWP Reset
We’re all pretty familiar with the concept of a reset.css file to level the playing field across browsers. The work done by Eric Meyer has greatly enhanced the consistency of cross browser development. At AWP, we have taken it one step further and implemented some other useful css nuggets into our awp-reset.css.
Cursor: pointer;
It’s surprising how often this gets overlooked. When you change the border and background properties of an input[type="submit"], most major browsers discard the default cursor: pointer. This simple line ensures that this accessibility feature does not get lost:
a, a *, input[type="submit"], input[type="button"] { cursor: pointer; }
Inputs and Buttons
Firefox comes with some unique pre-styled features on submit and button inputs. For cross browser evenness, the following code levels the playing field:
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner{ border: 0; padding: 0; }
Consider the following example:
<style>
input[type="submit"]{
border: none;
padding: 0 8px;
background: #00F;
color: #FFF;
height: 24px;
line-height: 24px;
font: normal 12px Arial, sans-serif;
}
</style>
<input type="submit" value="Submit One" />
Results:
With the reset code from above:
Although they are not 100% identical, you can clearly see we are now all speaking a much more similar language.
Textarea Resize
There are only specific times when a resizable textarea is useful. Most of the time, your textarea size should remain the size you specified. We shut this off in the reset:
textarea { resize: none; overflow: auto }
To turn it back on, use the following syntax:
resize: none | both | horizontal | vertical | inherit
Also, note the overflow: auto. This removes the annoying default scrollbar IE injects into textareas.
Bicubic image interpolation
Have you ever noticed that IE horribly distorts images when resized using html/css?? The following line fixes the issue and renders a much less pixelized “on-the-fly” html/css resize:
img { -ms-interpolation-mode: bicubic; }
Conclusion
There you have it! A little more robust, but not terribly obnoxious, bit of code to help level the playing field amongst browsers. We welcome your comments and feedback – any other useful one-liners for a reset are much appreciated. Enjoy!
Comments
October 8, 2010 at 4:10 pm
Shazaam!! Very useful info to share.