Reset CSS: Tous les navigateurs au même niveau

Je vous fait part d’une petite découverte, mais qui m’a sortie d’un problème de décalage de 1px entre Firefox et le reste du monde des navigateurs.

Le reset CSS est un petit bout de code CSS qui permet de mettre tous les navigateurs sur la même base, et de réduire les erreurs de rendements.

Il en existe plusieurs, mais font tous la même chose. Vous pouvez le trouver ici.

Ensuite il suffit de faire un copier/coller de ce bout de code au début de votre fichier CSS.

Créer un dégradé en CSS

degradé-css

A ce jour, aucune propriété CSS pour créer un dégradé existe au niveau de la W3C , donc chaque navigateur y va de sa petite propriété personnelle.

Nous allons donc voir ici, comme créer un dégradé simplement pour Firefox, Chrome/Safari, Opéra, ainsi que Internet Explorer!!! Oui mais pour la version 10, ca reste IE…

Chaque navigateur possède sa propriété, mais elles se ressemblent toutes et fonctionnent de la même manière.

Linéaire

Il existe 2 formes de dégradé, et nous allons commencer par la forme linéaire:

Sur chaque propriété il faut définir la direction du dégradé (ici top), ensuite la première couleur (#000000) et la deuxième couleur (#00a9e0).

Ce qui donne:

Le premier exemple est un dégradé partant de « top », le second de « left » et le dernier du coin en haut a gauche, donc « top left ».

Note:Si vous ne voyez pas de dégradé ou pas de différence entre ces trois blocs, mettez votre navigateur ou changez-en. Merci pour l’internet mondial 🙂

Afin de rester compatible avec les navigateurs vieillissants, il suffit de rajouter un background-color en tout début de votre classe ou id, afin de ne pas court-circuiter les autres propriétés.

Radial

Maintenant nous allons voir la deuxième forme de dégradé, qui est « radial », donc en forme de rond. Ca fonctionne exactement de la manière que pour les dégradés linéaires: une direction, une couleur de départ et une couleur de fin:

Ce qui donne:

Afin d’avoir un dégradé qui part du centre, il suffit de mettre la direction « center ».

Bonus

Et oui, vous pouvez mettre plus de deux couleurs à vos dégradés afin de créer des trucs totalement psychédéliques!