{"partition": "head_middle", "source_domain": "www.alsacreations.com", "digest": "sha1:IFE62OOMXKTAXETGZH4LBPB7SLM3NVGZ", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2016-26/000_00003.parquet"}
Aller à la recherche TutorielsAstucesOutilsLivresQuiz Osez HTML5 et CSS3 !
Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes.
La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2012 ?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs ?".
Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde.
Tutoriel par Raphael (Intégrateur du Dimanche, Strasbourg)
Créé le 27 Janvier 2010, mis à jour le 27 Décembre 2011 (404236 lectures)
Tags : css, positionnement, xhtml, web, arrondis, ie8, IE6, html5, ie7, css3, ombrages, rotation, font-face, transition
Un site perso en fil rouge
Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités.
Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...).
Voyons en détails le cheminement et les écueils de cette intégration...
Les Grands Anciens
Rappel historique
Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Le premier d'entre-eux est que CSS3 est toujours en état de brouillon pour une grande partie.
Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres".
A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.
Le cas Internet Explorer
Internet Explorer 9, débarqué en 2011 annonce fièrement reconnaître une bonne partie des propriétés classiques CSS3, ce qui n'était pas le cas de son prédécesseur, mais il est encore à la traîne en ce qui concerne les technologies les plus évoluées.
Là où le bât blesse, c'est que les anciens IE6 à IE8 sont toujours vigoureux sur de vastes parcs informatiques. On parle encore début 2012 de statistiques comprises entre 6 et 10% d'usage d'Internet Explorer 6 et 7 réunis.
Vaut-il mieux utiliser des technologies obsolètes (tableaux, frames, float) pour concevoir des sites qui fonctionnent partout même sur IE6, et donc perdre du temps en production pour gérer tous les différents bugs d'affichages ? ...Ou proposer quelque chose de stable (CSS2, CSS3, voire HTML5) sur les navigateurs modernes et des "patchs" (correctifs) uniquement pour les mauvais élèves ?
En ce qui me concerne, j'ai pris la décision récemment de systématiquement privilégier la seconde alternative, que ce soit pour mon site personnel que nous allons décortiquer ici (Goetter.fr), mais aussi pour des sites professionnels, par exemple la dernière version du site de l'agence Alsacreations.fr.
La problématique est biaisée puisque les intégrateurs ont depuis plusieurs années l'habitude de procéder de la première manière et le passage à la seconde va forcément nécessiter un temps de veille technologique... un peu comme le passage des "tableaux" aux "tableless".
Alsanaute ? connectez-vous
S'inscrire (gratuit)
Alsacréations, C'est quoi ?
Alsacréations est une communauté dédiée à l'apprentissage des standards web (W3C, HTML, CSS, JavaScript) ainsi qu'à l'accessibilité numérique (en savoir plus...)
Quiz à vous de jouer
XHTML moyen Accessibilité PHP débutant Apprendre Nouveautés
Mini Convention CSS
Originellement conçu pour des web designers, CSS se veut être un langage de description et non de programmation.
Mais ça c'était avant.
Le Web a évolué, nos usages et consommations… Lire la suite » Images responsive, flexbox et souci de ratio d'affichage
Tendances Web Design 2016
Partis tiers : maîtrisez leurs impacts sur la vitesse et la sécurité de vos sites
Introduction à Gulp
Forum Derniers sujets
[Outil] - Tester ses courbes de Bézier en ligne (Greg_Lumiere)
Problème de responsive (Marinou)
Framework Bootstrap (kiar)
Comment avoir des couleurs différentes selon les liens? (abeille)
Probleme head.php (anthony30190)
Besoin d'avis tarifs des autres dev web comme moi ! (CVFlashJob)
Réalisation : Alsacreations.fr
Hébergement : Nikozen
À propos et mentions légales
Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin. (Allain Bougrain-Dubourg) Suggérer une citation best-of
Haut de page Alsacréations est une communauté dédiée à la conception de sites et applications web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité
http://www.alsacreations.com/