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? To ensure that the canvas is smooth and has a uniform white hue. 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? Who Uses 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
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. After discussing the rich and interesting history of CSS resets (Part 1) and going over CSS reset stylesheet options (Part 2), we will now discuss the pros and cons of using reset stylesheets here in Part 3. 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. Acknowledgements
Inclure un fichier dans une page HTML sans utiliser <iframe> Si l'usage des inclusions en langage serveur n'est pas possible et si l'on tient à éviter l'usage contesté de la balise <iframe>, il est théoriquement possible d'utiliser la balise générique <object> pour inclure n'importe quel format de fichier au sein d'un document HTML. Cependant, bien que cela fonctionne parfaitement sur Firefox, tous mes essais sur Internet Explorer avaient lamentablement échoués jusqu'à ce jour. En fait, pour utiliser l'élément <object> sous Internet Explorer il faut en définir explicitement les dimensions : Merci à Xavier pour m'avoir ouvert de nouveaux horizons ;) Il reste un seul hic : pas moyen de supprimer ou cacher les vilaines barres de scroll autour de l'objet. EDIT de derrière les fagots Merci à Cassy d'avoir exhumé cette astuce et d'y avoir apporté une solution. Exemple pour page.html : c'est la page principale qui appelle l'objet <! ... puis il faut appliquer ces styles à la page fille object.php :
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. </OBJECT></BODY> 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. Attribute definitions src = uri [CT]
About rel="canonical" - Webmaster Tools Help If you have a single page that's accessible by multiple URLs, or different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often. If you don't explicitly tell Google which URL is canonical, Google will make the choice for you, or might consider them both of equal weight, which might lead to unwanted behavior, as explained in Reasons to choose a canonical URL. How Googlebot indexes and chooses the canonical URL When Googlebot indexes a site, it tries to determine the primary content of each page. If Googlebot finds multiple pages on the same site that seem to be the same, it chooses the page that it thinks is the most complete and useful, and marks it as canonical. Google uses the canonical pages as the main sources to evaluate content and quality.
Les sprites CSS - Alsacréations Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)
Signaler les liens externes via CSS Les liens externes, c’est-à-dire les liens qui pointent vers des sites différents du site actuel, doivent être signalés selon les recommandations du W3C. Cela apporte une petite information très utile aux visiteurs lors de la lecture d’un article. Malheureusement ce système est très rarement mis en place. De tête, le seul site connu qui l’utilise est Wikipédia au sein des articles et à l’aide d’une petite icône : Cette petite astuce est facilement mise en application à l’aide de règles CSS. Pour commencer il faut ajouter deux propriétés à la règle CSS concernant les liens hypertextes : Rien de plus simple, nous ajoutons ici une icône « external.png » en arrière plan à tous les liens. Il suffit maintenant d’annuler cette même règle pour les liens qui ne sont effectivement pas des liens externes en utilisant les sélecteurs d’attributs en CSS : La seconde règle permet de préciser de nouvelles propriétés pour les liens qui contiennent dans l’attribut href le nom de domaine de notre site.
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. 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). Voici comment mettre en œuvre cette propriété : Exemple (HTML) : Partie CSS : Compatibilité Conclusion
Générer des boutons en CSS Générer des boutons en CSS Si vous développez vos petits sites vous même, sachez qu'il existe un site qui s'appelle Button Maker et qui permet de créer des boutons de toute beauté, entièrement en CSS. Vous spécifiez vos couleurs, votre texte et en cliquant sur le rendu, vous obtiendrez le code CSS qui va bien pour mettre ça sur votre site. Maaaa kéééé c'est beauuuuuu ! [Source] Vous avez aimé cet article ?
CSS Hacks Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. In-CSS hacks Up One of the drawbacks of conditional comments is that they require changes to the HTML source. Easy selectors Most in-CSS hacks deal with selector bugs. IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) Recent Opera versions 9 and below html:first-child {} Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. <! ! ! !
How to Identify CSS Elements On Any Template Easily | CSS For Bloggers: Part 7 - The Link Medic - Free Blogging Resources In Part 6, Learn the Anatomy of a Blogger Template I discussed a little about the basics of a standard Blogger template’s CSS setup. It was meant as a visual representation of how a CSS layout looks for beginners and a bit of a quick Thesis cheatsheet. But what if your Blogger template is radically different or you’re on WordPress or any other blog platform? Today I’m going to show you how to identify the CSS elements on any template using a very handy browser add-on called CSS Viewer I was debating putting this post as a Chrome Extension Must Have but it was originally a FireFox addon. CSS Viewer is a simple to use CSS property viewer that allows you to quickly find the name of the element you want to tweak. If you didn’t design the template then this can sometimes be a daunting task of viewing the source code and getting creative. I can give one little tip to do this manually, if you’re trying to find the name of the element on the page find some text by it or a image file name. 2. 3.
Clearing a float container without source markup (This clearing technique was developed by Tony Aslett, of csscreator.com. The earliest known mention of the basic :after idea is found here.) Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written. You may find this newer article very interesting. Clearing Floats The Old Fashioned Way When a float is contained within a container box that has a visible border or background, that float does not automatically force the container's bottom edge down as the float is made taller. This float-enclosing behavior in IE can also be 'toggled' off again just by hovering of links within the container, if that hovering alters either the link background or one of several other CSS properties. The W3C suggests placing a "cleared" element last in the container box, which is then recognized by the container height, forcing the container to enclose the float above that cleared element too. <div><!
Mise en page CSS avancée via propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes: