12 July 2008
Reset A Reset
Posted by Todd under: Programming; Web; Work .
The question in my head had been churning through my cerebellum, my cerebrum and all throughout the grey matter in my skull. “Do I see if I can either improve upon or create my own CSS reset?”
My answer, “Nope.”
The only thing I can really “tweak” in the reset I have been using (Eric Meyer’s CSS Reset) is the link selector that gives you no outline around a link, a link being a text link that is. I asked Eric at AEA Boston this past June about it and he did say that yes, it needed to be revised. So what I have been doing is this.
Instead of this block, with the “a”;
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
I have taken out the “a” and have done this with my little tweaked reset;
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
a {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
Yes, it is a relatively small, minute and probably not very noteworthy change, but for accessibility sake, I chose to do this. Thinking back to sites I have come across and read, (SonSpring, Zeldman and Snook are 3 I can name right off the bat) they mention that it was a Firefox bug.
Personally, I don’t ever remember hearing that it was ever a bug, nor have I ever read it was an “official” bug, nor do I think (now) that it ever was a bug. Now it may be a nuisance to some who design, but it isn’t a nuisance to others who need some visual guidance when navigating through a site.
To make it clear, all I have done is remove the a { outline: 0; } from the first big chunk off css and just removed the previously mentioned outline attribute and just thrown the rest in. I’ve been a bit more keen and clear on accessibility issues lately, but even more so after I attended An Event Apart.
So I have one project down. It took me a month just to come up with what I have here. I cannot improve on something that works and works fine, I can only make it so the accessibility issue is taken care of which I have done.
During the event, he mentioned this is just a starting point, that people are able to tweak and adjust to their liking, which I do on occasion. Hope I have done well.
That is all.
