Prsentation et analyse de:

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

Plan:
Cest quoi HTML5/CSS3?
HTML5: CSS3:

La compatibilit HTML5/ CSS3 avec les nouveaux navigateurs et les problmes rencontrs: Exemples de solutions:

Cest quoi HTML5/CSS3?

HTML5:
HTML5 est sans doute la rvolution de 2010 pour les technologies web. Cette nouvelle version du langage offre en effet un grand nombre de fonctionnalits innovantes tant au niveau graphique quen terme dintgration avec lenvironnement.

Les nouveauts dans le code HTML5: Mobile: le site dvelopp en HTML5 pour fonctionner sur votre navigateur Web de PC va fonctionner aussi facilement sur le terminal mobile sans dveloppement spcifique.

Utilisable ds maintenant: Tous les navigateurs rcents du march permettent dsormais de bnficier pleinement dHTML5, comme: Firefox 4+, IE9, Chrome 8+, Safari 5+

Format non propritaire:

Ce qui signifie que lensemble des diteurs et des fabricants peuvent intgrer HTML5 librement dans leurs logiciels et matriels.

Smantique : Avec de nouvelles balises smantiques, le Web 5 devient plus intelligent. La structuration des contenus devient plus facilement comprhensible pour les moteurs de recherche. Parmi ces balises smantiques on trouve entre autres: <header> <footer> <nav> <aside> <article>

Ergonomique:

De nouveaux types de champs de formulaires, des barres de progression intgres, sans usage dimages GIF charger.

Offline:

Drag and drop:

Gre le gliss dpos de donnes depuis la machine de lutilisateur dans les deux sens (web <-> PC).

Golocalis: La page web peut rcuprer de faon native vos donnes de position .

Multimdia HTML5 gre dsormais de faon native les vidos [aux formats h.264 et WebM] et les fichiers sons MP3. <video>

<audio>

<canvas>

CSS3: Le CSS3 est le nom employ pour caractriser lensemble des nouveauts depuis le CSS2.1.Il sagit dun ensemble de nouveaux effets appliquer sur nos lments HTML. Mais le CSS3 est galement un ensemble de nouveaux slecteurs, de nouvelles manires de spcifier les couleurs, une dtection des caractristiques de lappareil de lutilisateur, des calculs dans les feuilles de style, des SVG en arrire plan.

Les nouveauts dans le code CSS3: Les effets visuels:

Border radius:

Box-shadow:

Text-shadow: (Applique une ombre sur un texte)

Gradients: (Affiche un dgrad de couleurs )

Font face: (Permet dutiliser nimporte quelle police)

Opacity:

3D transform: (Effectue des transformations en 3D)

Ainsi que dautres effets visuels comme transform, transition

Les slecteurs:
Slection par position des fils: :nth-child(expression) permet de slectionner un ensemble dlments selon leur position grce une expression mathmatique ou bien grce certains mots-cls.

Slection dlments par la valeur dun de leurs attributs: [attribut^="valeur"] slectionne les lments dont lattribut spcifi commence par une certaine valeur.

Exclusion dlments: :not permet dexclure certains lments de la slection. Par exemple, le code suivant naffichera en vert que les 2 derniers liens :

Les nouveaux outils pratiques:

Les colonnes:

Les media queries: Les media queries sont des proprits CSS permettant d'adapter une page HTML diffrents types d'crans et rsolutions.

RGBA et HSL(A): Cest une nouvelle notation pour spcifier des couleurs. La mthode standard RGB accueille maintenant une composante Alpha qui gre lopacit. Cette nouvelle notation diffre beaucoup de la prcdente.

La compatibilit HTML5/ CSS3

HTML5 nous propose un gros paquet de nouveauts qui doivent chacune tre traite par nos navigateurs. HTML5 est encore rcent et tous nos navigateurs nont pas encore eu le temps de faire face tout ce quapportait HTML5. Dans la partie suivante nous allons dtailler un peu ces diffrences en pointant labsence de prise en compte de fonctionnalits par certains navigateurs. Nous verrons aussi que CSS3 pose aussi encore souvent des problmes.

Pour le CSS3:
CSS3 slecteurs:

Daprs ce tableau on remarque que la totalit des slecteurs sont supports par Opera contrairement IE, chrome et Firefox ne traite que 33% des slecteurs de CSS3.

Effets visuels et outils pratiques:

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

Pour le HTML5:
Les applications WEB:

Sous MAC y a aucun souci, Sous Windows cette fois ci le plus Compatible est Chrome, Firefox et Opera prennent en charge presque 80% de ces nouvelles fonctionnalits introduites par HTML5, le problme reste pour IE qui ne supporte que 60% pour les versions 8 et 9 les autres versions ces nouveauts sont quasi-absentes.

Multimdia:

Tous les navigateurs soit sous Mac ou Windows traitent les nouvelles balises Multimdia(Video, audio, Canvas) du HTML5..sauf les anciennes versions de IE( 8,7)

Les champs dentres:

Opera est compatible avec HTML5 concernant les nouveaux champs dentres, Firefox est compatible 30% et 46% pour Chrome. IE avec toutes ces version ne supporte pas ces nouveauts.

Attributs Formulaires:

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

Exemples de solutions:
Cest compliqu de satisfaire tout le monde avec le magnifique design tout en CSS3 et HTML5. Il existe des solutions simples permettant de rsoudre un certain nombre de ces problmes, ou tout du moins les amoindrir. Nous vous en proposons ici quelques unes : - Pour le CSS, il est important de prvoir le cas o une proprit ne safficherait pas correctement. Grce au systme de cascade du CSS, il est possible de prvoir des styles qui seront afficher dans ces cas l. Par exemple, on peut prvoir un fond monochrome simple la place dun dgrad.

-Internet Explorer possde des balises spciales rien que pour lui permettant dcrire du code. <![if IE]> Ce code ne sera lu que par Internet Explorer <![endif]> Il est mme possible de prciser la version dInternet Explorer concerne : <![if lte IE 8]> <![endif]>

-Utiliser la bibliothque Javascript CSS3Pie:

Avec cette bibliothque CSS3Pie, Internet Explorer sera capable dafficher des proprits de CSS3 quil ne sait pas utiliser en temps normal. Le problme est que cette bibliothque est encore en dveloppement et IE9 nest pas encore parfaitement gr. Autrement dit, IE8 risque de mieux afficher votre site que IE9 Il y a un site: http://browsershots.org qui permet de tester la compatibilit dun site sous diffrents navigateurs, et identifier un certain nombre de problmes !

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

Conclusion:
Les problmes de compatibilits se posent donc tous les niveaux que ce soit pour les navigateurs, les dveloppeurs ou les simples surfers. Utiliser le HTML5 et le CSS3 nest donc pas toujours la solution de faciliter. Il ne faut pas chercher lutter contre le progrs mais en mme temps, il nest pas toujours vident dutiliser toutes les nouvelles ressources scintillantes que propose le web.