Introduction au CSS3

Introduction au CSS3Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment.

Sommaire

Le CSS3 c’est quoi ?

Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1.
Il s’agit par exemple d’un ensemble de nouveaux effets à appliquer sur nos éléments HTML. Vous verrez dans cet article à quel point il est simple de réaliser des effets visuels impressionnants en quelques lignes.

Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également !

La plupart des développeurs web ont découvert le CSS3 en cherchant à appliquer certains effets sur leurs sites. Pour ma part, j’ai cherché à appliquer des bordures arrondies sur mes blocs HTML. Je vais prendre donc prendre cet effet comme exemple pour introduire les concepts du CSS3.

Exemple pratique : Les bordures arrondies

Supposons que vous travailliez sur le design d’un site web qui inclut un système de commentaires, comme un blog par exemple. Vous avez la soudaine idée lumineuse d’afficher une bulle à la manière des bandes dessinées afin d’apporter une touche un peu originale à vos commentaires.
Vous êtes donc face à votre belle balise <div> contenant un commentaire de votre lecteur :

<div class="comment">
Ouah, c’est vraiment une excellente introduction au CSS3 !
</div>

Et vous vous dites :

Bon… Il va falloir que je transforme ce carré tout moche en bulle arrondie de bande dessinée. Demandons à Google ce qu’il en pense.

Après quelques recherches vous tombez sur des sites à l’allure assez vieillotte qui vous disent :

“Il faut faire un <table> à 9 cases dans lequel on va placer 9 images découpées sous Photoshop”.

L’art de faire les choses salement

Nous voici donc partis pour mettre en place l’HTML de notre tableau à 9 cases (au mieux certaines techniques alternatives réduisent à 3 cases à condition que la largeur ou la hauteur de votre bloc soit fixe).

Après avoir donc passé 2 heures sous Photoshop à essayer de bien caler au pixel près vos images, notre pauvre balise <div> s’est maintenant transformée en quelque chose du genre :

<table class="comment">
   <tr>
       <td class="top-left"></td>
       <td class="top"></td>
       <td class="top-right"></td>
   </tr>
   <tr>
       <td class="left"></td>
       <td class="content">Ouah, c’est vraiment une excellente introduction au CSS3 !</td>
       <td class="right"></td>
   </tr>
   <tr>
       <td class="bottom-left"></td>
       <td class="bottom"></td>
       <td class="bottom-right"></td>
   </tr>   
</table>

Avec pour CSS :

/* Taille des coins */

.comment .top-left,
.comment .top-right,
.comment .bottom-left,
.comment .bottom-right{
	width:50px;
	height:50px;
}

/* Taille des bords gauche et droit */

.comment .left, .comment .right{
	width:50px;
}

/* Taille des bords bas et haut */

.comment .top, .comment .bottom{
	height:50px;
}

/* Cellules du haut */

.comment .top-left{
	background:url("top-left.png");
}
.comment .top{
	background:url("top.png");
}
.comment .top-right{
	background:url("top-right.png");
}

/* Cellules du milieu */

.comment .left{
	background:url("left.png");
}
.comment .content{
	background:url("content.png");
}
.comment .right{
	background:url("right.png");
}

/* Cellules du bas */

.comment .bottom-left{
	background:url("bottom-left.png");
}
.comment .bottom{
	background:url("bottom.png");
}
.comment .bottom-right{
	background:url("bottom-right.png");
}

Et en théorie à ce moment là nous devrions prendre un peu de recul et nous poser quelques questions sur ce que nous venons d’écrire.

  • C’est long et pénible à écrire
  • Nous ne respectons pas le principe de séparation du contenu et du design
  • Nous utilisons un tableau qui ne contient pas de données tabulaires
  • La page sera plus longue à charger (surtout si on a beaucoup de commentaires)
  • Le code est difficilement maintenable, par quelqu’un d’autre et par soi-même
  • On risque potentiellement d’être pénalisé par les moteurs de recherches pour contenu mal formaté

Bref, ce type de pratique est à bannir définitivement. Les bidouilles de ce genre étaient parfaites lorsqu’il n’y avait pas d’autres alternatives, lorsque le CSS3 n’était que très peu supporté. Aujourd’hui nous sommes en 2011, et nous avons enfin la chance de pouvoir faire autrement !

Donc on sélectionne tout cet affreux code préhistorique, et on fait un grand ménage !

Nous en sommes donc revenus au point de départ :

<div class="comment">
Ouah, c’est vraiment une excellente introduction au CSS3 !
</div>

Il est grand temps de redonner à l’HTML la fonction qui lui est dûe, à savoir organiser le contenu de la page.
Pour tout ce qui concerne le design, c’est uniquement dans la feuille de style CSS que ça se passe.

La belle manière de faire en CSS3

Afin de styliser notre bulle de bande dessinée nous allons commencer par lui appliquer une simple bordure d’1 pixel et un fond blanc :

.comment{
background:white;
border:1px solid black;
}

Se pose ensuite la question fatidique des coins arrondis. Je ne doute pas que la plupart d’entre vous savent déjà que je vais vous parler de la propriété border-radius.
Effectivement, c’est ce que nous allons maintenant utiliser pour arrondier nos coins. Il s’agit d’une nouvelle propriété CSS3 que l’on utilise en spécifiant la taille de l’arrondis de notre bordure :

.comment{
background:white;
border:1px solid black;
border-radius:30px;
}

Donc là vous vous précipitez vers votre navigateur favoris pour tester ce code… et là, c’est le drame.

Je ne vois aucune bordure arrondie, tu nous as roulés !

Ah oui ? Peut-être devriez-vous essayer ceci dans un autre navigateur ?

J’ai testé sous Internet Explorer 8, Firefox, Chrome, Safari, rien ne marche !!

Avez-vous testé sous Internet Explorer 9 ? Sous Opera ?

Ohhhh… ça marche ici ! … Mais c’est débile ! Personne n’utilise Internet Explorer 9 ni Opera, ça n’a aucun intérêt !

Effectivement, vous auriez totalement raison si nous en restions là…

Les préfixes propriétaires (ou préfixes vendeurs)

Si je vous disais que nous pourrions faire fonctionner ces coins arrondis sous Firefox, Chrome et Safari, ce serait déjà mieux non ?
Ces navigateurs, qui ont été des précurseurs de l’implémentation de border-radius, utilisent des préfixes propriétaires qui sont théoriquement des expérimentations des nouvelles propriétés. Ils sont ainsi libres de ne pas suivre les recommandations du W3C, aussi bien dans la manière d’afficher l’effet que dans la manière de l’écrire en CSS.

Ce doit être un beau bazar si chacun fait ce qui lui plait ?

Heureusement, ces navigateurs ont une forte volontée de respect des standards. Et à part quelques rares exceptions, ils suivent très exactement les spécifications du W3C.
Par conséquent l’écriture des nouvelles propriétés est la même, mais en incluant simplement le préfixe spécifique à chaque navigateur :

  • -moz- pour Firefox
  • -webkit- pour Chrome, Safari, iPhone, Android
  • -o- pour Opera
  • -ms- pour Internet Explorer
  • -khtml- pour Konqueror
  • - …et il en existe encore d’autres…
Donc on va devoir écrire 6 fois une propriété pour qu’elle fonctionne partout ?

En pratique non ! Tout d’abord, certains navigateurs n’implémentent pas certaines propriétés CSS3, donc préfixes ou non, ça ne marchera pas (c’est le cas d’Internet Explorer). Ensuite, on peut considérer que les navigateurs très fortement minoritaires tels que Konqueror peuvent être ignorés. Et enfin Opera se veut avant-gardiste en implémentant directement la plupart des propriétés CSS3 sans préfixe.

Ça nous laisse donc avec :

  • -moz-
  • -webkit-

Ce qui est bien plus digeste.

Pour en revenir à notre exemple de border-radius, en écrivant ceci :

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Notre bordure s’affichera correctement arrondie sur :

  • Internet Explorer 9
  • Firefox
  • Chrome
  • Safari
  • Opera
  • Le navigateur iPhone
  • Le navigateur Android
  • Le navigateur Blackberry

Et ne s’affichera pas arrondie sur :

  • Internet Explorer 8 et versions inférieures

Reconnaissez que ce serait vraiment dommage de ne pas tirer profit d’une telle simplicité uniquement parce vous n’avez pas de bords arrondis sous IE8…

Sur mon site, au moins 30% des utilisateurs utilisent Internet Explorer 8 et inférieurs !

Ah mais c’est certain, Internet Explorer couvre encore une grande partie de la population, c’est clair. Mais la question importante à laquelle il faut maintenant répondre c’est : Si elles ne s’affichent pas, est-ce si grave ?

Est-ce si grave que mes bordures ne soient pas arrondies ?

…Probablement pas

Si le coeur de votre site repose sur le fait d’afficher des blocs aux bords arrondis, et que celui-ci perd tout intérêt sans ces bords arrondis, alors effectivement, il est important que les utilisateurs d’Internet Explorer 6, 7 et 8 voient s’afficher correctement vos bordures.

Dans tous les autres cas, demandez vous sérieusement : Est-ce que c’est si grave que mon site n’affiche pas de bordures arrondies ? A-t-il l’air bancale, cassé, non fonctionnel s’il ne les affiche pas ?
Soyons raisonnables 5 minutes, des coins arrondis ne sont à 99,9% jamais vitaux pour nos sites. Il s’agit la plupart du temps d’une bonne idée qui nous a traversé l’esprit pour améliorer un peu notre design, mais reconnaissez que ça n’est pas si dramatique de ne pas les avoir.

Est-ce que ça vaut réellement le coup de se priver de 3 belles lignes de CSS3 pour garder… CA ?

Franchement ?

Chaque année, chaque mois, chaque jour, des gens achètent de nouveaux ordinateurs, font des mises à jour, Internet Explorer 9 est un énorme pas en avant qui va faire basculer une grande partie des utilisateurs non-techniques vers le monde du CSS3.

Oui mais… Et le reste ?

Le reste verront des bords carrés. Voilà, c’est dit.
Et vous savez quoi ? Ça n’est vraiment pas grave. Pourquoi ? Parce qu’ils n’auront aucune idée du fait que votre design affiche des bords arrondis sur d’autres navigateurs.

Ils n’en sauront rien !

Prenons un exemple connu de tous : Facebook.

Vous savez tous que ce bandeau bleu est présent en haut du site :

Facebook Header

Il est tout à fait satisfaisant ce bandeau bleu non ?. Certains le trouvent même particulièrement joli et simple. Tout va bien.

Si je vous révélais maintenant un scoop : Sur Opera, il y a une légère ombre sous le bandeau bleu en haut de la page de Facebook.

Facebook Header Shadow

Est-ce que votre monde s’écroule ? Est-ce que le bandeau bleu qui ne posait aucun problème est devenu subitement immonde et dépassé ?

Non.

Tout simplement parce que nous n’avions aucune idée de l’existence de ce design alternatif sur un autre navigateur. Et ça ne nous avait jamais posé de problème.

Les utilisateurs lambdas (ou “Madame Michu” pour ceux qui préfèrent ce nom) ne savent pas que le site qu’ils ont sous les yeux pourrait s’afficher d’une autre manière sous un autre navigateur. Ils ne se poseront même pas la question du fait que nos bords carrés seraient plus jolis s’ils étaient ronds.

Tant que vous fournissez à Internet Explorer 6, 7 et 8 un design correct, fonctionnel, qui n’a pas l’air cassé… alors vous pouvez vous faire plaisir et utiliser le CSS3 tant que vous voulez et dès aujourd’hui.

Les nouveautés – Quoi de neuf docteur ?

Nous allons maintenant voir un bon nombre de nouveautés que je vais diviser en 3 grandes catégories :

  • Les effets visuels
  • Les sélecteurs
  • Les nouveaux outils pratiques

Il ne s’agit pas de l’intégralité des nouveautés, mais ça vous permettra d’avoir un très bon aperçu global.

Les effets visuels

border radius

Arrondit les bords d’un bloc :
CSS3 border-radius

box-shadow

Applique une ombre sur un bloc :
CSS3 box-shadow

text-shadow

Applique une ombre sur un texte :
CSS3 text-shadow

gradients

Affiche un dégradé de couleurs :
CSS3 gradient

font face

Permet d’utiliser n’importe quelle police :
CSS3 font-face

opacity

Ajuste la transparence d’un élément :
CSS3 opacity

transform

Déplace, déforme, ou effectue la rotation d’un élément :
CSS3 transform

transition

Passe d’un état à un autre d’un élément avec par une transition animée :
CSS3 transition

3D transform

Effectue des transformations en 3D :
CSS3 3D transform

Les sélecteurs

Le CSS3 introduit un ensemble de nouveaux sélecteurs.
En voici quelques uns :

Sélection par position des fils

:nth-child(expression) permet de sélectionner un ensemble d’éléments selon leur position grâce à une expression mathématique (rassurez-vous, pas de cosinus d’exponentielle au carré au programme !) ou bien grâce à certains mots-clés.
Un cas d’utilisation très fréquent est la coloration d’un tableau.
Il est plus lisible d’utiliser 2 couleurs de fond différentes alternées afin que l’utilisateur puisse se repérer plus facilement :
CSS3 nth-child

On pouvait auparavant utiliser du Javascript ou un code côté serveur pour colorer une ligne sur deux. On a maintenant une méthode bien plus simple grâce à :nth-child :

table tr:nth-child(odd){
background-color:#EEF;
}

Le mot-clé “odd” signifie “chiffres impairs” (et “even” pour les chiffres pairs), mais nous aurions également pu construire une expression mathématique simple en utilisant la variable n :

table tr:nth-child(2n + 1){
background-color:#EEF;
}

Ce qui produit exactement le même effet, mais permet une utilisation bien plus poussée dans certains cas spécifiques.

Séléction d’éléments par la valeur d’un de leurs attributs

[attribut^=”valeur”] sélectionne les éléments dont l’attribut spécifié commence par une certaine valeur.
Voici un exemple d’utilisation :

<a href="http://www.exemple1.com">Lien externe</a>
<a href="http://www.exemple2.com">Lien externe</a>
<a href="#">Lien interne</a>
<a href="http://www.exemple3.com">Lien externe</a>
a[href^="http://"]{
	color:red;
}

Ce qui colorera en rouge uniquement les liens externes.

Il existe également 2 autres notations qui permettent de filtrer les éléments dont les attributs se terminent par une valeur ([attribut$=”valeur”]) et les éléments dont les attributs contiennent au moins une fois une chaine de caractères ([attribut*=”valeur”]).

Exclusion d’éléments

:not permet d’exclure certains éléments de la sélection. Par exemple, le code suivant n’affichera en vert que les 2 derniers liens :

<a href="#" class="notme">Je suis rouge</a>
<a href="#">Je suis vert</a>
<a href="#">Je suis vert</a>
a{
	color:red;
}
a:not(.notme){
	color:green;
}

Les nouveaux outils pratiques

Les media queries

Les media queries sont une manière élégante de définir des styles différents selon le type de média de l’utilisateur. C’est particulièrement utile pour avoir des styles différents sur les écrans de petite taille des smartphones et des tablettes tactiles.
Ainsi une seule page HTML utilisant les media queries peut distribuer des versions différentes de son design, afin de s’adapter par exemple à la largeur de l’écran ou même à l’orientation du téléphone.

body{
	background-color:green;
}

@media screen and (max-device-width: 600px) {

/* Style appliqué uniquement sur les écrans de moins de 600px de largeur */

body{
	background-color:red;
}

}

Dans cet exemple le fond de la page s’affichera en vert sur les grands écrans et en rouge sur les petits écrans.

Les colonnes

Avec le CSS3 il est désormais possible de définir des colonnes, à la manière des contenus éditoriaux de journaux. Ce cas d’utilisation était assez rare avant l’apparition du CSS3, qui simplifie grandement les choses. Avec un code aussi simple que :

p{
	column-count:2;
}

On peut passer très facilement de :
CSS3 columns

à

CSS3 columns

ou bien encore :

CSS3 columns

Il était auparavant très délicat de reproduire une telle structure de page, ce qui impliquait un découpage du texte avec du code serveur ou Javascript. Cette nouvelle méthode ultra simple permet de créer des mises en page originales afin d’aérer davantage le texte.

RGBA et HSL(A)

Il est désormais également possible d’utiliser de nouvelles notation pour spécifier des couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui gère l’opacité. Cette nouvelle notation diffère beaucoup de la précédente.
On utilise le format rgba(r, g, b, a) avec “r”, “g” et “b” étant des entiers de 0 à 255 et “a” un décimal de 0 à 1.
Ainsi pour colorer un arrière plan en rouge semi-transparent nous devons écrire :

div{
background-color: rgba(255, 0, 0, 0.5);
}

La notation HSL (Hue, Saturation, Lightness) un peu moins commune permet d’obtenir les mêmes résultats en jouant sur la teinte, la saturation et la luminosité.

Conclusion

Vous êtes arrivé jusqu’ici ? Félicitations ! C’est probablement que vous portez un intérêt réel au CSS3 et je ne peux que vous encourager.

Pour terminer, s’il y a une seule chose que j’aimerais que vous gardiez en tête c’est le fait qu’il n’est pas nécessaire qu’un site s’affiche exactement de la même manière sur tous les navigateurs.
Il s’agit d’un changement de philosophie actuel dans le webdesign qui va de pair avec des sujets tels que l’amélioration progressive (ou enrichissement progressif) et la dégradation gracieuse.
Nous aurons l’occasion d’en reparler, mais pour le moment un petit instant de détente en rapport avec le sujet sur le site :

http://DoWebsitesNeedToBeExperiencedExactlyTheSameInEveryBrowser.com/

Un passage de la souris sur le texte révélera le potentiel de votre navigateur, mais l’important est bel et bien le contenu et le message à faire passer. A méditer !

Comme vous pouvez le voir, le CSS3 apporte énormément de nouveautés. Chacune d’entre elles mérite un tutoriel complet spécifique, et c’est un des objectifs de ce site. Je vous invite donc à suivre l’activité de ce site au cours des prochains mois, qui seront particulièrement intenses !

A bientôt pour une avalanche de tutoriels !

31 thoughts on “Introduction au CSS3

  1. Salut,

    Je ne connaissais pas ton site, mais c’est un vrai régal que de le lire! Merci encore pour cette introduction, ça m’est très utile!

    Vivement le prochain tutoriel ;)

  2. Franchement, le tuto est clair et bien expliqué, juste je regrette un petit exemple sur certains éléments de découverte tel que la syntaxe HSLA, gradient, etc.

    Mais à part ça, bah continue !

  3. Bonjour,
    voila un article clair et concis, une très bonne introduction à css3.

    Il me semble que css3 n’est pas encore finalisé, j’hésitai justement à utiliser un langage en évolution.
    Finalement, vaux t-il mieux utiliser jquery pour de simples transitions ou css3 ?

    • Bonjour Rodolphe,

      CSS3 n’a pas besoin d’être finalisé pour être utilisable. La seule chose à prendre en compte est le support des navigateurs. Voici l’état actuel du support des transitions et celui des transformations qui sont les deux composantes des animations en CSS3. Tu peux donc voir qu’Internet Explorer ne les supporte pas encore (ou seulement IE9 pour les transitions). Il faudra donc utiliser un fallback jQuery pour IE si tu souhaites un support complet. Il est également important de prendre en compte que les animations CSS3 peuvent bénéficier de l’accélération matérielle, et sont donc plus fluides que les animations JavaScript ! Une solution couplant les deux est donc idéale.

  4. Je viens de m’y mettre et je comprends tout, j’adore ça ! Entre le http://www.siteduzero.com où j’ai appris les bases de la création d’un site et celui-ci, qui explique en détail CSS3 (qui n’est pas encore très à jour sur le SdZ, je crois), c’est le pied ! Je ne deviendrais sans doute pas une experte mais je me défendrais un peu quand même XD !

    Sur mon facebook, le mot est passé, ce site est très intéressant !

  5. je viens d’essayer la page “dowebsites…” sur explorer 9, pas de chance… les coins ne sont pas arrondis et le texte n’augmente pas de taille. Il va être temps qu’ils se mettent au boulot et surtout à faire comme les autres chez Microsoft !

  6. Bravo pour votre blog avec tous ces articles de vulgarisation très bien rédigés et fort instructifs. Merci !

    Petite question polémique cependant…

    Constat : lorsqu’on tente d’afficher une page web avec un contenu multi-média non supporté nativement par le navigateur, en général un message s’affiche invitant l’utilisateur à télécharger et installer la dernière version du plug-in ou lecteur compatible. Cette pratique largement répandue et adoptée par les utilisateurs n’a jamais posé de problème, autre que celui d’un certain agacement parfois mais dont la plupart des personnes s’en sont accommodées depuis le temps pour pouvoir suivre les évolutions rapides des technologies internet.

    Question : pourquoi les développeurs web, les web-designers et les web-masters n’adoptent-ils pas une pratique analogue s’agissant des navigateurs internet ?

    Tous ces professionnels du contenu “online” sont souvent contraints de se couper les cheveux en quatre pour rendre leurs sites compatibles avec les anciennes versions des navigateurs, que d’heures passées (perdues surtout) pour optimiser tout ce bazar, ne serait-il pas plus simple, et utile de surcroit, d’inviter chaleureusement (voire impérativement) les utilisateurs à mettre à jour leurs applications afin de pouvoir accéder correctement au contenu d’un site ?

    Pourquoi ce nous avons depuis longtemps adopté comme contrainte s’agissant des composants annexes ne peut pas s’appliquer sereinement aux navigateurs internet ?

    Bizarrement, lorsqu’un éditeur sort une évolution majeure d’un logiciel bureautique, par exemple, tout le monde se précipite pour le mettre à jour, a fortiori si un nouveau format de fichier accompagne la nouvelle version du programme.

    Pourquoi s’agissant des navigateurs tout le monde traine des pieds pour les mettre à jour ?
    Les acteurs du web n’ont pas un rôle à jouer pour que les utilisateurs adoptent des pratiques plus saines ?

    Bref, au lieu d’imaginer de tas de solutions pour rendre les sites compatibles avec tous les navigateurs (tous les éditeurs et toutes les versions), ne serait-il pas plus simple d’afficher un lien invitant l’utilisateur à mettre à jour son logiciel ?

    Question un peu longue, désolé, mais interrogation réelle en ce qui me concerne… votre avis m’intéresse.

    Fredo

    • Salut Fredo et merci d’avoir pris le temps de rédiger un commentaire si détaillé !

      Je comprends totalement ton avis et je vais tenter de te faire comprendre le mien au travers d’une petite métaphore.

      Les logiciels lourds, les plugins – add-ons et compagnie sont systématiquement une démarche lourde et pénible pour les utilisateurs, qui la plupart du temps ne comprennent rien à ce qu’ils installent (il suffit de voir les 5 barres d’outils insupportables installées dans la plupart des IE chez les utilisateurs non-geeks). Forcer les gens à installer des choses c’est un peu comme refuser l’entrée à quelqu’un qui voudrait entrer en boite / dans un bar sélect parce qu’il n’est pas suffisamment bien habillé par exemple. La seule chose qui en résulte est de la frustration et de la haine pour la boite / le site en question. Inutile de préciser qu’un utilisateur énervé ne revient pas, voire dit du mal du site, ce qui n’arrange personne.

      Je dirais que le web, contrairement à une boite de nuit, est plutôt comme une plage. Elle n’appartient à personne, chacun est libre d’y venir habillé comme il veut, il n’y a aucune discrimination, et tout le monde est content. Apprécierais-tu que l’on te refuse l’entrée à la plage pour des raisons techniques incompréhensibles alors que tu veux simplement aller tremper les pieds ? Je n’apprécierais pas en tout cas ! Rien que d’imaginer le site d’Apple me forçant à installer Safari par exemple me rendrait fou de rage ! :D

      Du côté du développeur, je comprends bien que cela est plus pénible à gérer effectivement. Mais en prenant en compte les nombreux correctifs CSS tels que les CSS Resets (ou CSS Normalization), on réduit déjà très fortement les différences entre les navigateurs. Je viens de coder un site en utilisant normalize.css de Nicolas Gallagher sans jamais tester IE8 ni IE7 (il n’est vraiment plus nécessaire de prendre en compte IE6), et j’ai été ravi de voir que le site était parfait sous IE8, et n’avait que quelques défauts sous IE7 (le tout a été développé en utilisant exclusivement Chrome). Avec un petit effort pour IE7 on peut obtenir un résultat tout à fait satisfaisant sur tous les navigateurs.

      Alors certes c’est pénible, et l’on préférerait que tous les visiteurs de nos sites utilisent Chrome 28, mais il serait trop agressif de les forcer à changer de navigateur (la plupart des gens ne savent pas ce qu’est un navigateur, ni un moteur de recherche, et pensent qu’internet c’est Google). Imagine un plombier qui t’engueule parce que tu n’as pas de tuyauterie de type B à liaison fluide compacte dans ton évier, que lui répondrais-tu ? Que tu te fiches de la techniques et que tu veux simplement que l’eau coule normalement du robinet. C’est exactement la même chose ;)

  7. du même avis que les précédents contributeurs pour dire que le blog est très bien fait pour qui débute en html5 et css3. Bravo. Juste une petite remarque : il semble qu’il y ait une erreur dans le tutorial CSS3 sur la partie “exclusion”. En fait, c’est l’inverse : les ancres qui ne sont pas de classe notme sont rouges.

  8. Quel talent ! De l’information technique plaisante à lire… Une invitation au progrès, où l’on souhaite être actif.
    Il est temps pour moi de reprendre ma tenue d’écolier, apprendre c’est garder sa jeunesse.
    Merci

  9. Bonjour,

    Vraiment c’est un super travail de vulgarisation, j’apprécie tout ce travail, qui va beaucoup m’aider.
    Par contre une petite question qui fache (mais ce n’est pas le but), ayant testé votre site sur les validateurs du W3C, ils m’affichent des erreurs tant sur le HTML que sur le CSS, la question est donc la suivante:
    Est-ce les validateurs du W3C qui ne sont pas encore au point pour le HTML5 et le CSS3 ou juste quelques erreurs de développement respectant strictement le HTML5 et le CSS3 ?

    Amicalement,

    Laurent

    • Oh il ne s’agit pas de leur validateur, qui est très bien !
      C’est simplement que je n’ai pas pris le temps de résoudre les erreurs, puisque j’utilise un template de blog WordPress qui n’est pas le mien. Et honnêtement, le but n’est pas d’avoir un blog parfaitement valide HTML5, ça n’apporte pas grand chose. Le seul intérêt de la validation selon moi, est de savoir si tu as bien fermé toutes tes balises.
      De plus, dès que tu utilises des outils tiers (des boutons de partage sur réseaux sociaux par exemple, ou bien du Flash), tu peux être certain de te retrouver avec des tonnes d’erreurs à la validation ! Bref ne te prends pas trop la tête avec la validation, sincèrement. Privilégie le fonctionnel et prends soin de tes utilisateurs avant de prendre soin du W3C :)

  10. Super tuto sur les possibilitées du Css3

    J’ai essayé la Sélection par position des fils expliqué dans ton article avec cette propriété Css3
    table tr:nth-child(2n + 1){
    background-color:#EEF;
    }
    Avec les navigateurs ça marche bien, mais pas sur un iphone ;-)
    Donc pas possible sur un site en version mobile.
    Merci pour tout les autres tutos qui sont de très bonne qualité.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>