background preloader

A Comprehensive Guide to CSS Resets

A Comprehensive Guide to CSS Resets
This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset Related:  css-delicious

Should You Reset Your CSS? By Michael Tuck This article explores the ongoing debate on whether or not web designers and web developers should reset their CSS, sharing the thoughts and opinions of several web professionals. This is a three-part series of articles on the topic of CSS resets. The Benefits of Resetting Your CSS Web designer/developer and book author Morten Rand-Hendriksen is a huge fan of CSS resets; he has advised everyone to use them as the foundation of their stylesheets. Defending the "hard reset" method, Coyier outlined two main concerns that web designers typically have against using the universal selector. The first is that it can break web browser default styles for things such as form elements, which he said was "untrue" unless you use a border:0 property in the style rule. The other concern of using the universal selector to reset your styles is the performance hit caused by using such an unspecific selector. In Support of No CSS Reset Main Concerns with CSS Reset Stylesheets Dissecting Reset CSS

CSS Reset.com - CSS Resets and Free CSS Tutorials & Resources Gérer les débordements de contenu grâce à CSS - Alsacréations Sommaire Précision : cet article se limite volontairement au dépassement de contenus et non à d'éventuelles erreurs de conception de design, de mauvaise gestion de la fluidité, ou à des débordements de blocs flottants. Préambule J'ai une mauvaise nouvelle pour vous : le Web n'est pas un média figé ou paginé tel que le média d'impression. Vous n'êtes pas maître de votre contenu et il va falloir vous y faire. Puisque - heureusement - il n'est plus possible de fixer la taille, voici un point sur les différentes techniques modernes permettant de canaliser les caprices de vos contributeurs… overflow: hidden : circulez, y'a rien à voir ! La propriété CSS2 overflow a été conçue pour administrer les débordements d'éléments au sein d'un bloc. A l'heure actuelle, le peu de valeurs prises en charge par cette propriété la rend quelque peu abrupte : soit le contenu est tronqué et masqué (valeur hidden), soit de laides barres de défilement apparaissent (valeur scroll ou auto). Exemple (HTML) : Partie CSS :

CSS Specificity Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity. Download the PDF Legend: X-0-0: The number of ID selectors, represented by Sharks0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish 0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob*: The universal selector has no value +, >, ~: combinators, although they allow for more specific targeting of elements, they do not increase specificity values:not(x): The negation selector has no value, but the argument passed increases specificity CSS SpeciFISHity You can download the PDF of fishy CSS specificity here Specificity determines which CSS property declaration is applied when two or more declarations apply to the same element with competing property declarations. With CSS3 Selectors, order is even more important, as is understanding specificity: !

The History of CSS Resets When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas . Why? Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use. This is Part 1 of a three-part series of articles on the topic of CSS resets. What Is CSS Reset? When you use a CSS "reset," you’re actually overriding the basic stylesheet each individual browser uses to style a web page. The problem is that every browser’s stylesheet has subtle but fundamental differences. Some of the most common elements that are styled differently among different browsers are hyperlinks ( <a> ), images ( <img> ), headings ( <h1>through <h6>), and the margins and padding given to various elements. So which browser is right, Firefox or IE? It might be useful to peruse this chart showing the various browser defaults. The Yahoo!

Tutorial 8 - Step 1 Tutorial 8 - Liquid two column layout Step 1 - Start with the semantically marked up code To lay out a page into two columns, you need to start with the basic page structure. For this tutorial, obvious names have been used to help illustrate the point, but any name can be used. Go to Step 2 → Subheading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. CSS CODE None HTML CODE <div id="container"> <div id="top"> <h1>Header</h1> </div> <div id="leftnav"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

Image Reflections with CSS Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images. The minds behind WebKit have their own idea behind image reflection: pure CSS. The Webkit CSS The -webkit-box-reflect property accepts a value in the following format: -webkit-box-reflect: <direction><offset><mask-box-image> A sample usage of -webkit-box-reflect looks like: An involved CSS value but well worth the work. WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. Be Heard Tip: Wrap your code in <pre> tags or link to a GitHub Gist! Older Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III Newer Dijit's TabContainer Layout: Easy Tabbed Content

CSS Style Guides As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → More?

Objects, Images, and Applets in HTML documents 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY><P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. The chart indicates that each type of inclusion has a specific and a general solution. 13.2 Including an image: the IMG element src = uri [CT]

Microformats CSS Triangles This post has been updated to include CSS triangles without markup via :before and :after pseudo-elements. I was recently redesigning my website and wanted to create tooltips. Making that was easy but I also wanted my tooltips to feature the a triangular pointer. The CSS The secret to these triangles is creating giant borders to the two perpendicular sides of the direction you'd like the triangle to point. CSS Triangles with :before and :after The CSS examples above uses true elements but what if you don't want to add single triangles? The border side you add the color to is the opposite side of the arrow pointer. I don't know how I didn't know about this technique sooner! Object Oriented CSS · stubbornella/oocss Wiki

Related: