Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer): perishablepress.com/wordpress-… #WordPress #security #html
Perishable Press

More Killer CSS Resets

[ Global CSS Reset ] Just a note to let everyone know that I have updated my previous CSS reference article, A Killer Collection of Global CSS Reset Styles. The updated version features two more excellent CSS resets, as well as the updated Meyer reset and a link to Eric’s official CSS Reset page. The two new reset styles are the Tripoli Reset and Tantek’s Reset.

Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design.

Tantek’s CSS Reset

Dubbed “undohtml.css”, Tantek’s CSS Reset is a solid choice for removing many of the most obtrusive default browser styles. This reset removes underlines from links and borders from linked images, eliminates padding and margins for the most common block-level elements, and sets the font size to 1em for headings, code, and paragraphs. As an added bonus, Tantek’s reset also “de-italicizes” the infamous address element! Nice :)

Here is the original Tantek reset, exactly as provided at Tantek’s site:

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

Here is the Tantek reset, reformatted and with explanatory comments removed:

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */

:link, :visited {
	text-decoration: none;
	}
ul, ol {
	list-style: none;
	}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
	}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, 
form, body, html, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	}
a img, :link img, :visited img {
	border: none;
	}
address {
	font-style: normal;
	}

The Tripoli Reset

The Tripoli Reset by David Hellsing is part of a complete CSS standard for (X)HTML rendering. By neutralizing browser-default CSS styles, Tripoli “forms a stable, cross-browser rendering foundation for your web projects.” After resetting CSS styles, Tripoli’s generic.css rules may be used to “rebuild” the browser defaults for content typography. Some of the more prominent reset features include:

  • white-space in all code tags
  • disabling of the <hr> element
  • all text reset such that 1em equals 10px
  • targeted disabling of deprecated elements: <marquee>, <blink>, <nobr>
  • inclusion of deprecated elements: <listing>, <xmp> and <plaintext>
  • disabling of the <font> tag and other deprecated elements
  • ..plus much more!

Here is the commented version of the Tripoli Reset as provided at David’s site:

/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }

/*

CHANGELOG

23/8-07

Added deprecated tags <listing>, <xmp> and <plaintext> in the code block

Resorted to normal white-space in all code tags

Disabled the deprecated <marquee>, <blink> and <nobr> tag in some browsers

*/

Here is the Tripoli Reset, reformatted and with explanatory comments removed:

/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
	}
code, kbd, samp, pre, tt, var, textarea, 
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
	}
dfn, i, cite, var, address, em { 
	font-style: normal; 
	}
th, b, strong, h1, h2, h3, h4, h5, h6 { 
	font-weight: normal; 
	}
a, img, a img, iframe, form, fieldset, 
abbr, acronym, object, applet, table {
	border: none; 
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
caption, th, td, center { 
	vertical-align: top;
	text-align: left;
	}
body { 
	background: white; 
	line-height: 1; 
	color: black; 
	}
q { 
	quotes: "" ""; 
	}
ul, ol, dir, menu { 
	list-style: none; 
	}
sub, sup { 
	vertical-align: baseline; 
	}
a { 
	color: inherit; 
	}
hr { 
	display: none; 
	}
font { 
	color: inherit !important; 
	font: inherit !important; 
	color: inherit !important; /* editor's note: necessary? */ 
	}
marquee {
	overflow: inherit !important;
	-moz-binding: none;
	}
blink { 
	text-decoration: none; 
	}
nobr { 
	white-space: normal; 
	}

Props: Thanks to eliosh for bringing the Tripoli Reset to our attention!

Jeff Starr
About the Author Jeff Starr = Web Developer. Book Author. Secretly Important.
Archives
8 responses
  1. “whoever thought blue linked image borders were a good idea?”
    This made me laugh to death!!! ^^
    Very amusing, isn’t it?
    :)

    Hey, Perishable, what about enabling emoticons on the next version of this blog? ;)

  2. Hey thanks for sharing these! The idea of having CSS resets never ever came across me – usually I’ll just reset the image border and the default padding and marging to zero when I create a CSS file, nothing more than that. Oh and I will also reset the text-decoration of links. That’s a whole lot of resets, but they’re really useful and most importantly, cross-browser compatible.

    I’ve spotted one little glitch though – for the reformatted Tripoli Reset, here’s the problematic line:

    marquee {
       !important; -moz-binding: none;
       overflow: inherit;
    }

    I think you meant:

    marquee {
       -moz-binding: none;
       overflow: inherit !important;
    }

    Sorry that I’m being a little perfectionist.

  3. Jeff Starr

    @H5N1: I know, I actually laughed out loud when I read that! True though, right? As for the emoticons.. yikes, I just don’t know — maybe if I go with a theme that isn’t so “minimalist” they would look a little less.. um, “loud”. Actually, I wouldn’t mind finding an alternate set of emoticons that I could actually groove with on such a “dark” design.. Or perhaps I will have to create my own set of “chilled-out” emoticons.. hmmmm.., now you’ve got me thinking..

  4. Jeff Starr

    Hi teddY, Thanks for the catch! I guess I totally messed up those lines in my hurry to post the article. I have edited both this article and the original (which now includes these same resets) with the correct code. Very keen of you to have spotted that otherwise infinitesimal detail — it is unlikely that anybody else would have noticed the error, let alone taken the time to tell me about it. So I am totally grateful for your obvious “perfectionist” disposition! Cheers! :)

  5. Nice Read and I like the day and night theme on this website, but it would be better you use cookies to keep the selection consistent, it should not reset once you browse another page.

    I like the day theme :)

  6. @Perishable: I’m available for developing my own set of emoticons :)
    Never thought ’bout a dark theme emoticons :D

  7. Jeff Starr

    @CSS:Jockey: Yes, the toggling light/dark functionality does use cookies and should keep your preference persistent across all pages on the site. I have tested this functionality in several browsers, but not all. May I ask which browser you are using to view the site?

    @H5N1: Lead the way, Sir! I am open to just about anything! ;)

  8. advertising agency March 9, 2011 @ 2:06 pm

    I like the Killer CSS Reset and global style sheet. But I am partial. The jourey’s not out totally though. http://thegorillaagency.com/2011/01/23/killer-reset-global-css/

[ Comments are closed for this post ]