background preloader

CSS Tools: Reset CSS

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. Related:  Outils utiles

CSS Tools: Diagnostic CSS Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Similarly, the validator will be happy to let through empty class and id values. Maybe you wanted things that way, but more likely not. That's where diagnostic styles come in. With a diagnostic stylesheet, you can quickly see where your markup might have some trouble. The more advanced version, which uses the :not() syntax and outlines and so isn't suitable for IE7The IE7 version, which does much the same things but in a less straightforward manner and uses borders instead of outlines The styles for each are embedded in the demo pages, but they have a few extras meant to make the demo pages themselves understandable.

Auteur photographe de mariage et reportage : Olivier Tops 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

ViewLikeUs - Check Sites in Various Resolutions! Use CSS Diagnostics with Stylish to find bad HTML | 456 Berea St A while ago I mentioned Obtrusive JavaScript Checker and Inline Code Finder as useful quality assurance tools that will help you find potentially obtrusive JavaScript and CSS. A similar approach to checking HTML quality is using CSS to highlight invalid or deprecated code, which I talked about in Helping your client maintain markup quality. In that post I mentioned Marco Battilana’s Big Red Angry Text and Eric Meyer’s Diagnostic Styling. Both articles contain examples of stylesheets that will highlight problematic HTML. Neal Grosskopf has taken the concept a step further and created a diagnostic stylesheet that highlights, among other things, deprecated and proprietary elements and attributes. Including a diagnostic stylesheet works fine for sites that you develop and have write access to. With Stylish installed in Firefox you can do things like easily toggle user stylesheets on and off, and specify which sites they should be applied to.

openvpn Cette page est considérée comme vétuste et ne contient plus d'informations utiles. Cette page est en cours de rédaction.Apportez votre aide… OpenVPN est un logiciel libre permettant de créer un réseau privé virtuel VPN. Différents usages nécessitent l'utilisation d'un VPN Il peut être utilisé pour simplement accéder à un serveur VPN existant ou pour mettre en place un serveur… et y accéder. Que ce soit en configuration client ou serveur, il est possible de tout configurer en CLI ou par interface graphique. Il faut aussi installer le support pour gnome : sudo apt-get install network-manager-openvpn network-manager-openvpn-gnome Dans le cas contraire, cela affiche une erreur dans la gestion de l'identité : "impossible de charger l'éditeur de connexions VPN" Par paquet Installez les paquets : Les ports par défaut pour OpenVPN sont : 1194 UDP Webmin : Interface d'administration web Un module Webmin est disponible pour faciliter le paramétrage d'OpenVPN. Cas d'un fournisseur de VPN Principe sudo -i . . . .

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.

CSS Tabbed Navigation This page demonstrates a pure CSS method to generate a 'Tab' style interface (see here for more). It first uses the trick of an inline list to generate the tabs. To get the tabs to really look the part - the 'active' tab needs to blend into the 'content' area. This is achieved by giving the active tab a different class, and changing its properties (border-bottom and background) accordingly. Additionally, it allows one to change the active tab's :hover by not highlighting the active tab in the same way as the inactive tabs. Because the purpose of the tab interface is to 'guide' the user as to their present location, these small features do actually improve the 'usability' of the tab structure. The code is very simple, the CSS is embedded to let you see 'under the hood'. Note that for IE5/5.5 you probably need to add hacks to the CSS to overcome their bugs, I would have done it but I'm tired of box-model hacks...

How to add file type Icons to Links with CSS | Psyked | Psyked CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons. First, a look at the end result :- Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. Here’s a simple ‘absolute’ link selector – a[href="http:"] – this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Another operator we can use is $, which means ‘ends with’. Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here. And you’re away – limited only by your icon supply, and the volume of conditional statements you want to make!

HTML - Атрибут target Спецификация Описание По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. Синтаксис <a target="имя окна">... Обязательный атрибут Нет. Значения В качестве значения используется имя окна или фрейма, заданное атрибутом name. _blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. _parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. _top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. Значение по умолчанию Валидация Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <! Пример HTML5IECrOpSaFx <!