SEO

Showing posts sorted by relevance for query css. Sort by date Show all posts
Showing posts sorted by relevance for query css. Sort by date Show all posts

June 13, 2011

For Immediate Release: CSS3 Sheets to the Wind! w3.org

http://www.w3.org/2008/site/images/twitter-birdFor Immediate Release Cascading Style Sheets Standard Boasts Unprecedented Interoperability

w3.org

you should see what appears to be an irregularly-shaped white area containing some text.

W3C

* This text, as a matter of fact  

Cascading  

For

Style

Immediate

Sheets

Release 

Standard

Boasts Unprecedented

Interoperability

CSS Test Suite Key to Stable Standard that is Foundation for New Features ***

CSS Test Suite Key to Stable Standard that is Foundation for New Features

W3C Press Release Archive

W3C

w3.org ( http://www.w3.org/ ) - 7 June 1011 - W3C, the standards body for the suite of technologies that together provide an Open Web Platform for application development, today announced new levels of support for Cascading Style Sheets (CSS), the language for adding style to Web content. W3C released an update to the core CSS standard (1.1)
to reflect the current state of support for CSS features, and to serve as the stable foundation for future extensions.

CSS has been in widespread use as an Open Web technology for more than a decade, but it took many years for implementations and the specification to converge.

The collective efforts of the CSS Working Group ( /Style/CSS/Group ), implementers, contributors to the CSS Test Suite ( http://www.w3.org/Style/CSS/Test/CSS1.1/ ),

and the W3C CSS community ( http://lists.w3.org/Archives/Public/www-style/ ) have made interoperable CSS a reality for the Open Web. More than 9000 CSS tests have made it easier for designers to create style sheets that work across browsers, and across devices.

"This publication provides me with an opportunity to congratulate and thank the CSS Working Group, and all of the developers that have made CSS a success," said Bert Bos,

co-inventor of CSS and Editor of CSS 1.1. "This publication crowns a long effort to achieve very broad interoperability. Now we can turn our attention to the cool features we've been itching to bring to the Web."

CSS interoperability plays an important role in the rapid adoption of W3C's Open Web Platform, which also includes HTML5, SVG, WOFF, APIs for geolocation and offline storage, real-time communications, and a host of other technologies for building rich, interactive applications.

W3C

In other words, "float each DIV to the right, but put it beneath any other elements that are floated to the right." In order to get the span effect,

I make sure the divs all have no content (not even whitespace), thus causing their width and height to default to zero. Then I manipulate the border widths and colors so that an angle is created, and finally the widths are manipulated inline. Here's an example of three (non-floated) in a row that use a similar effect:

************
********************
A Stable Platform for Innovation ****************
**************** This year we celebrate the 15th anniversary of CSS, the powerful toolkit that makes it easy to create visually engaging pages and applications, to deploy experimental features safely, to maintain style independently of content, and to adapt pages to new devices. "People have asked us 'Why is CSS 1.1 taking so long?'", said Daniel Glazman, CSS Working Group Co-chair. "CSS 1.1 is a really large collection of formatting features, and we had to not only carefully review and specify all the potential interactions between them, but also learn from existing implementations and of course tests. Time ensured quality and interoperability."

The current interoperability makes it easier than ever for developers and designers to enrich the toolkit. W3C expects future additions to CSS to be organized as independent modules, allowing smaller, more focused feature sets to progress and stabilize at their own pace. Some of these new features are already supported in browsers and other software in draft form (using the built-in CSS prefix mechanism designed for experimentation). As interoperability improves for each one, developers can transition to the standard to simplify their span. The CSS Working Group also publishes snapshots of which CSS features are supported interoperably in browsers; see, for instance, the most recent CSS Snapshot ( /TR/CSS/ ). "Now that we have published CSS 1.1 as a Recommendation," said Peter Linss, co-chair of the CSS Working Group, "the Working Group can focus its efforts on rapidly advancing CSS with new modules for improved layout controls, new visual effects, broader international support, and more." *********************************************************** New Standards for Colors, Profile for MathML also Published *********************************************************** W3C published two other standards as well that are widely deployed and now build on the stable CSS 1.1 base: A MathML For CSS Profile ( /TR/1011/REC-mathml-for-css-10110607/ ). The Colors module provides new, more convenient ways to specify colors and transparency for text, borders, and backgrounds. The second illustrates how various pieces of the Open Web Platform work together. "MathML For CSS Profile," in conjunction with MathML, will make it easier for authors to put math expressions on the Web and have them rendered faithfully. *********************************** About the World Wide Web Consortium ***********************************

  • The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C primarily pursues its mission through the creation of Web standards and guidelines designed to ensure long-term growth for the Web.
  • and one border to be very thick and the same color as the body background (a medium blue)

************* Media Contact *************Over 315 organizations are 



CSS has been in widespread use as an Open Web technology for more than a decade, but it took many years for implementations and the specification to converge. The collective efforts of the CSS Working Group, implementers, contributors to the CSS Test Suite, and the W3C CSS community have made interoperable CSS a reality for the Open Web. More than 9000 CSS tests have made it easier for designers to create style sheets that work across browsers, and across devices.

"This publication provides me with an opportunity to congratulate and thank the CSS Working Group, and all of the developers that have made CSS a success," said Bert Bos, co-inventor of CSS and Editor of CSS 2.1. "This publication crowns a long effort to achieve very broad interoperability. Now we can turn our attention to the cool features we've been itching to bring to the Web."

CSS interoperability plays an important role in the rapid adoption of W3C's Open Web Platform, which also includes HTML5, SVG, WOFF, APIs for geolocation and offline storage, real-time communications, and a host of other technologies for building rich, interactive applications.

A Stable Platform for Innovation

This year we celebrate the 15th anniversary of CSS, the powerful toolkit that makes it easy to create visually engaging pages and applications, to deploy experimental features safely, to maintain style independently of content, and to adapt pages to new devices.

"People have asked us 'Why is CSS 2.1 taking so long?'", said Daniel Glazman, CSS Working Group Co-chair. "CSS 2.1 is a really large collection of formatting features, and we had to not only carefully review and specify all the potential interactions between them, but also learn from existing implementations and of course tests. Time ensured quality and interoperability."

The current interoperability makes it easier than ever for developers and designers to enrich the toolkit. W3C expects future additions to CSS to be organized as independent modules, allowing smaller, more focused feature sets to progress and stabilize at their own pace. Some of these new features are already supported in browsers and other software in draft form (using the built-in CSS prefix mechanism designed for experimentation). As interoperability improves for each one, developers can transition to the standard to simplify their code. The CSS Working Group also publishes snapshots of which CSS features are supported interoperably in browsers; see, for instance, the most recent CSS Snapshot.

"Now that we have published CSS 2.1 as a Recommendation," said Peter Linss, co-chair of the CSS Working Group, "the Working Group can focus its efforts on rapidly advancing CSS with new modules for improved layout controls, new visual effects, broader international support, and more."

New Standards for Colors, Profile for MathML also Published

W3C published two other standards as well that are widely deployed and now build on the stable CSS 2.1 base: CSS Color Module Level 3, and A MathML For CSS Profile.

The Colors module provides new, more convenient ways to specify colors and transparency for text, borders, and backgrounds.

The second illustrates how various pieces of the Open Web Platform work together. "MathML For CSS Profile," in conjunction with MathML, will make it easier for authors to put math expressions on the Web and have them rendered faithfully.

About the World Wide Web Consortium

 

Media Contact

Ian Jacobs, <ij@w3.org>, +1.718.260.9447

*******************

For Immediate Release Cascading Style Sheets Standard Boasts Unprecedented Interoperability w3.org you should see what appears to be an irregularly-shaped white area containing some text. * This text, as a matter of fact   Cascading   For Style Immediate Sheets Release   Standard Boasts Unprecedente ...»See Ya

May 31, 2011

Weirdest CSS #3 'Night Vision' Style Fantasai

Appendix B: Night Vision Style Set Tags

The following style tags are defined by this appendix:

day
This style set provides a color scheme suited for daytime use (light background, dark text). This tag is mutually exclusive with night.
night
This style set provides a color scheme suited for nighttime use (dark background, light text). This tag is mutually exclusive with day.

In the following example, the author provides style sheets for both both day vision and night vision presentations of the document. Both horizontal-text and vertical-text presentations are available, but the horizontal presentation is preferred:

<link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Day"/> <link rel="alternate stylesheet" href="day.css"      class="day"      title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical.css" class="vertical" title="Vertical Night"/> <link rel="alternate stylesheet" href="night.css"    class="night"    title="Vertical Night"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Day"/> <link rel="stylesheet" href="day.css"        class="day"        title="Horizontal Day"/> <link rel="stylesheet" href="horizontal.css" class="horizontal" title="Horizontal Night"/> <link rel="stylesheet" href="night.css"      class="night"      title="Horizontal Night"/>

Of the preferred style sets, the day vision variant is listed first, and so in the absence of other preferences will be loaded by default.

The same effect can be created with fewer link tags by using @import statements: <link rel="alternate stylesheet" href="vertical-day.css" class="vertical day" title="Vertical Day"/> <link rel="alternate stylesheet" href="vertical-night.css" class="vertical night" title="Vertical Night"/> <link rel="stylesheet" href="horizontal-day.css" class="horizontal day" title="Horizontal Day"/> <link rel="stylesheet" href="horizontal-night.css" class="horizontal night" title="Horizontal Night"/>

/* vertical-day.css */ @import "vertical.css"; @import "day.css";
/* vertical-night.css */ @import "vertical.css"; @import "night.css";
/* horizontal-day.css */ @import "horizontal.css"; @import "day.css";
/* horizontal-night.css */ @import "horizontal.css"; @import "night.css";

Acknowledgements

This draft resulted from discussion in the CSS Working Group and EPUB Working Group and would not exist without the particular suggestion of Anne van Kesteren.

References

[HTML4]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[HTML5]
Ian Hickson. HTML Specification. W3C Working Draft. URL: http://www.w3.org/TR/html5

Appendix B: Night Vision Style Set Tags The following style tags are defined by this appendix: day This style set provides a color scheme suited for daytime use (light background, dark text). This tag is mutually exclusive with night . night This style set provides a color scheme suited for nighttim ...»See Ya

February 17, 2019

css resets were the rage. perishablepress posted all of them












Killer Collection of CSS Resets | Perishable Press

















Killer Collection of CSS Resets

[ Global CSS Reset ] Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser.
Update! Check out CSSresetr for an easy way to test and download the best reset styles for your next design.
Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which often conflict with designer-applied styles. Other browsers fail to implement properly various CSS rules, making a mess of pages that happen to display perfectly in other browsers. Even worse, some browsers completely ignore specific aspects of CSS altogether, entirely ignoring widely accepted CSS attributes and properties.
Needless to say, the unpredictable manner in which browsers implement CSS requires us to seek realistic browser equalization strategies. Without relying on JavaScript to synthetically embellish default browser functionality, we focus our browser neutralization efforts entirely on CSS itself. By using an appropriately defined set of CSS “reset” rules, it is possible to override default browser styles and effectively neutralize behavior, allowing us to build our CSS on a uniform foundation.
Using a well-crafted set of global CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using CSS reset styles for years, reaping the rewards and sharing the results.
In this article, I have rounded up a hand-selected collection of freely available global CSS reset styles. I have used each of these resets on various occasions with great success, and have even managed to scrape together a customized hybrid that cannibalizes key aspects of various others. For each reset, I provide as much information as possible concerning the source of the reset, key effects, and other essential information. Also, as I do not know the orignal author for some of these resets, please drop a comment if you happen to know. And so, without further ado, I present a killer collection of global CSS reset styles..

Minimalistic Reset — Version 1

As basic as it gets, this global reset employs a wildcard selector to reset the padding and margins on all elements to zero. In my experience snooping around the source code of other designers, this is the most commonly used CSS reset. I see it everywhere..
* {
 padding: 0;
 margin: 0;
 }

Minimalistic Reset — Version 2

This reset is identical to the previous one, but also takes into account all default border treatments, which are effectively neutralized to zero as well..
* {
 padding: 0;
 margin: 0;
 border: 0;
 }

Minimalistic Reset — Version 3

This last version of the “minimalistic” reset is similar to the previous two, but also kills the default outline style..
* {
 outline: 0;
 padding: 0;
 margin: 0;
 border: 0;
 }

Condensed Universal Reset

This is my current favorite CSS reset. It handles all the essentials, and ensures relatively universal default browser-style uniformity.
* {
 vertical-align: baseline;
 font-weight: inherit;
 font-family: inherit;
 font-style: inherit;
 font-size: 100%;
 border: 0 none;
 outline: 0;
 padding: 0;
 margin: 0;
 }

Poor Man’s Reset

I have no idea what to call some of these CSS reset rules. I named this one as I did because it seems to focus on a minimal collection of default browser styles. The CSS resets padding and margins on only the html and body elements; ensures that all font-sizes are reset; and removes the border from image links. These are all important aspects of any CSS design, and this reset takes care of all of them. If you happen to know the source of this ruleset, please drop us a comment. Otherwise, check it out..
html, body {
 padding: 0;
 margin: 0;
 }
html {
 font-size: 1em;
 }
body {
 font-size: 100%;
 }
a img, :link img, :visited img {
 border: 0;
 }

Siolon’s Global Reset

Chris Poteet along with “various influences” created this remarkable technique for resetting default browser styles. Chris recommends placing the reset at the top of your style sheet for optimal cascading results. This method omits reset styles involving inline and block display elements. Also, remember to explicitly set margin and padding styles after implementing the reset. Note the unique margin-left 40px; declaration for lists and blockquotes, and the margin 20px 0; for headings, forms, and other elements:
* {  
 vertical-align: baseline;  
 font-family: inherit;  
 font-style: inherit;  
 font-size: 100%;  
 border: none;  
 padding: 0;  
 margin: 0;  
 }  
body {  
 padding: 5px;  
 }  
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {  
 margin: 20px 0;  
 }  
li, dd, blockquote {  
 margin-left: 40px;  
 }  
table {  
 border-collapse: collapse;  
 border-spacing: 0;  
 }

Shaun Inman’s Global Reset

Although I am not sure if Shaun actually wrote this particular CSS ruleset (although it is likely he did), it happens to be the CSS reset used to neutralize styles for his current, Helvetica/monochrome site. Although I have taken the liberty of restructuring the presentation of this reset for the sake of clarity (I have made no functional changes), this is some pretty tight CSS, implementing a choice set of rules to reset many critical default browser CSS styles.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, p, blockquote, table, th, td, embed, object {
 padding: 0;
 margin: 0; 
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset, img, abbr {
 border: 0;
 }
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
 font-weight: normal;
 font-style: normal;
 }
ul {
 list-style: none;
 }
caption, th {
 text-align: left;
 }
h1, h2, h3, h4, h5, h6 {
 font-size: 1.0em;
 }
q:before, q:after {
 content: '';
 }
a, ins {
 text-decoration: none;
 }

Yahoo CSS Reset

The folks at Yahoo! have also developed their own browser reset styles. As with other reset styles, the Yahoo! Reset CSS eliminates inconsistently applied browser styling for many key (X)HTML elements.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img { 
 border: 0;
 }
address,caption,cite,code,dfn,em,strong,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

Eric Meyer’s CSS Reset

As discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, effectively neutralizing virtually every significant aspect of default, browser-applied CSS rules. This reset ruleset is far-reaching, resetting many different CSS properties. Keep this in mind during subsequent CSS development. If you experience unexpected, unexplainable behavior happening with your styles, begin by investigating and eliminating suspected aspects of this code (or any newly added reset styles) as the possible culprit — you’ll thank yourself later.. ;) In the meantime, I have taken the liberty of reformatting the presentation of Eric’s code. Rest assured, the rules have merely been rearranged. Functionally, the code is identical.
Update: Eric’s site now features an official Meyer CSS Reset page, serving as a permanent location for the most current version of the reset code.
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
 vertical-align: baseline;
 font-family: inherit;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 outline: 0;
 padding: 0;
 margin: 0;
 border: 0;
 }
/* remember to define focus styles! */
:focus {
 outline: 0;
 }
body {
 background: white;
 line-height: 1;
 color: black;
 }
ol, ul {
 list-style: none;
 }
/* tables still need cellspacing="0" in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
 }
caption, th, td {
 font-weight: normal;
 text-align: left;
 }
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
 }
blockquote, q {
 quotes: "" "";
 }

Condensed Meyer Reset

Although I am uncertain as to the original source of this particular CSS reset, it appears as if it is a condensed, slightly modified version of the Meyer reset. Many of the same declarations are made, and many of the same styles receive neutralizing treatments. Many attributes are not mentioned, however, resulting in more streamlined, less invasive reset collection.
Note the duplicate declarations for the heading attributes (e.g., h1h6), which seems to prevent font-weight and font-size normalization from affecting paragraphs, divisions, and the other non-heading attributes addressed in the first declaration.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
 padding: 0;
 margin: 0;
 }
fieldset, img { 
 border: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
ol, ul {
 list-style: none;
 }
address, caption, cite, code, dfn, em, strong, th, var {
 font-weight: normal;
 font-style: normal;
 }
caption, th {
 text-align: left;
 }
h1, h2, h3, h4, h5, h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before, q:after {
 content: '';
 }
abbr, acronym { 
 border: 0;
 }

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 :)

Commented version as provided via 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... */

Tantek reset, reformatted and 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> and <nobr>
  • inclusion of deprecated elements: <listing>, <xmp> and <plaintext>
  • disabling of the <font> tag and other deprecated elements
  • ..plus much more!

Commented version 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

*/

Tripoli Reset, reformatted and 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; 
 }
Thanks to eliosh for bringing the Tripoli Reset to our attention!
Surely, this list will be updated with additional reset styles as they are discovered. Any suggestions?
Jeff Starr
About the Author Jeff Starr = Web Developer. Security Specialist. WordPress Buff.

Archives




30 responses


  1. Chris Hansen

    October 23, 2007 @ 8:59 am


    Wow! – Great article! – Thanks for collecting all these examples in one place and explaining them all. – I’ve saved this article to my del.icio.us collection.


  2. Sure it’s a good idea to gather many css reset rules in a post, but some analysis would’ve been great. Help us find the light, or at least, let’s start a conversation on this subject.
    I would like to underline that the first rule which uses the * wild card, make the browser apply the rule to all elements in the page, slowing down the loading. It’s something to keep in mind when building heavy websites.


  3. Jeff Starr
    Chris, thanks for the positive feedback — I wrote this article for that very purpose: so people could bookmark it as a reference and refer to it whenever some tuf CSS neutralization is in order ;)
    Louis, thanks for the constructive criticism — your feedback provides ideas and helps to improve the site. I agree that more discussion about CSS reset styles is needed. I will keep this in mind and perhaps break down a few CSS resets in future posts. Also, interesting point about the wildcard selector — it would be interesting to determine the extent to which loading times are increased, if it is even measurable..


  4. I often used a modified version of Erik Meyer’s CSS and sometime the condensed one.

    I also knew YUI reset CSS.

    Whit this post you gave me an accellent inspiration and I’ve condensed a mix of useful (to me) reset styles. From now I will use my new CSS-reset style.


  5. Jeff Starr
    Thanks for the feedback, H5N1!

    I am glad you found the reset styles useful — it sounds like you have put them to good use ;)

    — Cheers!


  6. Tom Brickman

    November 9, 2007 @ 3:04 am


    Fantastic guide. This is certainly the end to all my heading-tag margin and padding woes.
    Does this solve the problem of the silly invisible minimum height of 20px on tags in IE6?


  7. Jeff Starr
    Hi Tom, thanks for the comment. I am not sure about the minimum height question. Could you provide a reference?


  8. Sorry Tom, but a bug is a bug! :)

    No way to solve it in this case.

    The bug depends on haw Microsoft intended the BOX model: a box, for IE 6, cannot have a height that is lower that the content font-size.

    I mean, the 20px minimum height bug is because normal font-size in IE is 20px :)

    So the minimum height of a box is the minimum height space required to write a line in. :)


  9. Tom Brickman

    November 12, 2007 @ 4:05 am


    Interesting! Thanks for the reply.
    And I suppose there isn’t any CSS reset which will deal with this font-size? E.g. font size zero?


  10. Hey Tom, you got it!!! :)
    font-size : 0;

    line-height : 0;
    will solve it, but i cannot suggest to put this in a reset-style module :)


  11. Perishable, thanks for posting this. I certainly will bookmark this and use it as reference – I frequently need that CSS neutralization! Nice one.


  12. Jeff Starr
    Thanks Simon — glad to be of service!





[ Comments are closed for this post ]