Ressources HTML 5 & CSS 3 par Développeur Front-End le 18/06/2013
Cette page collecte un ensemble d'articles sur les langages HTML 5 et CSS 3. Elle est régulièrement mise à jour en fonction des éléments trouvés ou rapportés par d'autres via des réseaux sociaux. Alors encore merci à tous ces contributeurs...
Ce site Internet a été créé avec 3 finalités principales :
Ce site a également été réalisé comme un exercice de style permettant de valoriser quelques-unes des nouvelles possibilités offertes par HTML 5 et CSS 3.
Il est donc préconisé de le consulter avec des navigateurs récents aptes à exploiter ces nouvelles possibilités comme : Firefox 6, Chrome, Safari,...
Ce sont essentiellement des balises de structuration répondant à l'organisation de la page et apportant un caractère plus sématique au code html :
<header></header> <article></article> <footer></footer> <nav></nav>
<section></section> <figure></figure>
Il est nécessaire dans les feuilles de styles de leur associer à chacun d'eux le style display:block car par défaut certains navigateurs risqueraient de les interpréter comme des élements en ligne.
Par ailleurs, aucune des versions d'Internet Explorer (même la dernière) ne prenant en compte ces nouvelles balises, il est nécessaire d'avoir recours à un Javascript qui crée ces éléments pour ce navigateur afin qu'il puisse les interpréter.
document.createElement
("header");
document.createElement
("footer");
document.createElement
("section");
document.createElement
("nav");
document.createElement
("article");
document.createElement
("figure");
Parmi les effets possibles, ceux qui nous ont le plus servis concernent les effets d'arrondis, les ombres portées sur des blocs ou des textes, les polices embarquées non systèmes et quelques effets d'animations.
De plus le recours aux mediaqueries et l'application des principes du responsive webdesign nous permettent de proposer des versions adaptées de ce site aux internautes le consultant par mobile et tablette. Si vous utilisez un navigateur tel Firefox, Chrome, Safari, Opéra,... il vous suffit de redimensionner la largeur de votre navigateur pour faire apparaitre les versions adaptées à ces différents supports de consultation.
Il en reste qu'avec ces quelques effets le nombre d'images nécessaires à l'affichage d'une page diminue considérablement (10 images sont utilisées pour construire la page en cours) !
