Présentation et analyse de

:

Fait par: Imad LAMTOUNI & Mohamed CHEDDAD Encadré par: M. Ahmed SEMOUD

Plan:
 C’est quoi HTML5/CSS3?
HTML5: CSS3:

 La compatibilité HTML5/ CSS3 avec les nouveaux navigateurs et les problèmes rencontrés:  Exemples de solutions:

C’est quoi HTML5/CSS3?
HTML5:
HTML5 est sans doute la révolution de 2010 pour les technologies web. Cette nouvelle version du langage offre en effet un grand nombre de fonctionnalités innovantes tant au niveau graphique qu’en terme d’intégration avec l’environnement.

Les nouveautés dans le code HTML5: Mobile: le site développé en HTML5 pour fonctionner sur votre navigateur Web de PC va fonctionner aussi facilement sur le terminal mobile sans développement spécifique. .

Utilisable dès maintenant: Tous les navigateurs récents du marché permettent désormais de bénéficier pleinement d’HTML5. Chrome 8+. Safari 5+ . comme: Firefox 4+. IE9.

Format non propriétaire: Ce qui signifie que l’ensemble des éditeurs et des fabricants peuvent intégrer HTML5 librement dans leurs logiciels et matériels. .

Sémantique : Avec de nouvelles balises sémantiques. La structuration des contenus devient plus facilement compréhensible pour les moteurs de recherche. Parmi ces balises sémantiques on trouve entre autres: <header> <footer> <nav> <aside> <article> . le Web « 5″ devient plus intelligent.

. des barres de progression intégrées. sans usage d’images GIF à charger.Ergonomique: De nouveaux types de champs de formulaires.

Offline: .

.Drag and drop: Gère le glissé déposé de données depuis la machine de l’utilisateur dans les deux sens (web <-> PC).

.Géolocalisé: La page web peut récupérer de façon native vos données de position .

Multimédia HTML5 gère désormais de façon native les vidéos [aux formats h.264 et WebM] et les fichiers sons MP3. <video> <audio> <canvas> .

CSS3: Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2. Mais le CSS3 est également un ensemble de nouveaux sélecteurs.1. . des calculs dans les feuilles de style.Il s’agit d’un ensemble de nouveaux effets à appliquer sur nos éléments HTML. des SVG en arrière plan. de nouvelles manières de spécifier les couleurs. une détection des caractéristiques de l’appareil de l’utilisateur.

Les nouveautés dans le code CSS3: Les effets visuels: Border radius: Box-shadow: Text-shadow: (Applique une ombre sur un texte) .

Gradients: (Affiche un dégradé de couleurs ) Font face: (Permet d’utiliser n’importe quelle police) Opacity: .

3D transform: (Effectue des transformations en 3D) Ainsi que d’autres effets visuels comme transform. transition… .

Les sélecteurs: 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 ou bien grâce à certains mots-clés. .

Sélection 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. .

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

Les nouveaux outils pratiques: Les colonnes: .

Les media queries: Les media queries sont des propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions. .

Cette nouvelle notation diffère beaucoup de la précédente. .RGBA et HSL(A): C’est une nouvelle notation pour spécifier des couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui gère l’opacité.

HTML5 est encore récent et tous nos navigateurs n’ont pas encore eu le temps de faire face à tout ce qu’apportait HTML5.La compatibilité HTML5/ CSS3 HTML5 nous propose un gros paquet de nouveautés qui doivent chacune être traitée par nos navigateurs. Dans la partie suivante nous allons détailler un peu ces différences en pointant l’absence de prise en compte de fonctionnalités par certains navigateurs. . Nous verrons aussi que CSS3 pose aussi encore souvent des problèmes.

chrome et Firefox ne traite que 33% des sélecteurs de CSS3. .Pour le CSS3: CSS3 sélecteurs: D’aprés ce tableau on remarque que la totalité des sélecteurs sont supportés par Opera contrairement à IE.

Effets visuels et outils pratiques: .

Opera et Chrome supportent ces nouvelles fonctionnalités de CSS3.Pour les effets visuels presque tous les navigateurs sous MAC en prennent en charge. . mais IE restent toujours reculé surtout pour les versions 6. 7 et 8. sous Windows FireFox .

Pour le HTML5: Les applications WEB: Sous MAC y a aucun souci. Sous Windows cette fois ci le plus Compatible est Chrome. . le problème reste pour IE qui ne supporte que 60% pour les versions 8 et 9 les autres versions ces nouveautés sont quasi-absentes. Firefox et Opera prennent en charge presque 80% de ces nouvelles fonctionnalités introduites par HTML5.

7…) . audio.Multimédia: Tous les navigateurs soit sous Mac ou Windows traitent les nouvelles balises Multimédia(Video.sauf les anciennes versions de IE( 8.. Canvas…) du HTML5.

IE avec toutes ces version ne supporte pas ces nouveautés. Firefox est compatible à 30% et 46% pour Chrome.Les champs d’entrées: Opera est compatible avec HTML5 concernant les nouveaux champs d’entrées. .

concernant FIREFOX et CHROME ils supporte presque la totalité de ces fonctions.Attributs Formulaires: On constate encore le retard di IE par rapport aux autres navigateurs au niveau des attributs formulaires. .

Par exemple. Il existe des solutions simples permettant de résoudre un certain nombre de ces problèmes. il est possible de prévoir des styles qui seront afficher dans ces cas là. Nous vous en proposons ici quelques unes : . on peut prévoir un fond monochrome simple à la place d’un dégradé. ou tout du moins les amoindrir. . Grâce au système de cascade du CSS.Pour le CSS.Exemples de solutions: C’est compliqué de satisfaire tout le monde avec le magnifique design tout en CSS3 et HTML5. il est important de prévoir le cas où une propriété ne s’afficherait pas correctement.

<!–[if IE]> Ce code ne sera lu que par Internet Explorer <![endif]–> Il est même possible de préciser la version d’Internet Explorer concernée : <!–[if lte IE 8]> <![endif]–> .-Internet Explorer possède des balises spéciales rien que pour lui permettant d’écrire du code.

et identifier un certain nombre de problèmes ! . Internet Explorer sera capable d’afficher des propriétés de CSS3 qu’il ne sait pas utiliser en temps normal.org qui permet de tester la compatibilité d’un site sous différents navigateurs. Le probléme est que cette bibliothèque est encore en développement et IE9 n’est pas encore parfaitement géré. Autrement dit.-Utiliser la bibliothèque Javascript CSS3Pie: Avec cette bibliothèque CSS3Pie. IE8 risque de mieux afficher votre site que IE9… Il y a un site: http://browsershots.

com http://www.findmebyip.com http://www.fr http://www.Bibliographie: http://ru3.wikipedia.com http://caniuse.com http://fr.siteduzero.ec-nantes.com/ http://veille-techno.winastuce.org .blogs.

Conclusion: Les problèmes de compatibilités se posent donc à tous les niveaux que ce soit pour les navigateurs. les développeurs ou les simples “surfers“. Il ne faut pas chercher à lutter contre le progrès mais en même temps. il n’est pas toujours évident d’utiliser toutes les nouvelles ressources scintillantes que propose le web. . Utiliser le HTML5 et le CSS3 n’est donc pas toujours la solution de faciliter.

Sign up to vote on this title
UsefulNot useful