CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
La technique du Reset CSS Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs. Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Si on souhaite aller plus loin et gommer d'autres différences en remettant tout «à zéro», on peut aboutir au code suivant: Problèmes avec cette technique Le problème de cette technique, c'est qu'elle annule certains styles par défaut des navigateurs qui sont réellement utiles. Seulement voilà: le sélecteur universel * a pour avantage tout comme inconvénient de sélectionner sans distinction tous les éléments HTML.
Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs. Notre feuille de styles de base Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels. L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Rappel : n'employez pas ce reset CSS sans avoir parcouru au minimum les indications laissées dans le code complet commenté. Où placer ces styles? Bonus
Box-shadow generator Cet outil permet de contruire des effets CSS de type box-shadow effects, pour ajouter des effets d'ombrage à vos objets CSS. box-shadow generator HTML Content CSS Content JavaScript Content Étiquettes et contributeurs liés au document Contributeurs à cette page :kiux Dernière mise à jour par :kiux, CSScomb: Sorting CSS Properties, The Better Way
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way By Andrey Sitnik On The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes. Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you: #The Problem We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone. We can use services like Prefixr and text editor plugins, but it is still exhausting to work with big blocks of repeating code. We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. #Under the Hood compiles to: #Demo a { } . #What Next?
SwatchBooker Features Reads color swatches from: Adobe aco, acb, act, ase, acf, bcf, clrAutoCAD acb (unencrypted only!)ColorSchemer csCorel cpl, xml (X5)GIMP gplICC named colors profilesOpenOffice.org socQuarkXPress qcl (+cui)RAL bcsRIFF palScribus xmlVivaDesigner xmlXara jcw Reads gradient swatches from: Adobe grd, clrGIMP ggrOpenOffice.org sogScribus xml Reads pattern swatches from: Adobe patGIMP patOpenOffice.org sob, soh Gets online color swatches from: Writes Adobe aseGIMP gplHTMLOpenOffice.org socScribus xml Colors are managed: you can attach a ICC profile to a color. Supports multiple swatches from the same material. Swatch informations are localizable. Limitations Colors only. Drag and drop is possible only in the tree view. Adobe ASE writing supposes there is not more than 1 group level. Opening big palettes may temporarily freeze the editor. Requirements On Debian based distributions, you need the packages python-qt4 (>= 4.6) python-liblcms (>= 1.18) and python-imaging (>= 1.1.7-2). Terminology Material <?
Button Maker Minify and Compress CSS Minifying CSS takes the beautified, well formed CSS code that you have written and removes the spacing, indentation, newlines, and comments. These elements are not required for CSS to be used successfully. It also makes the CSS more difficult to read. The 'best practice' of many developers is to maintain a 'beautified' version, and when rolling out their project will run the styles through a minification program. A Minify Example Before: After: Why use CSS Minifier? The purpose of minifcation is to increase the speed of a website. It is also common practice to combine all the CSS files for a single website into one file. External Links
WAIT! Animate FontBase — a blazing fast, beautiful and free font manager for designers.