Archive pour le mot-clef ‘CSS’

XHTML 1.0 ou HTML5 ?

Lundi 7 novembre 2011

Il m’est arrivée qu’on me demande quelle est la norme actuelle à utiliser. Or, certains pensent que parce qu’on parle beaucoup de HTML5 que cela signifie que les précédentes normes (XHTML 1.0 et HTML 4.01) sont obsolètes, loin de là !

Je viens donc faire une petite mise au point là-dessus.

L’état actuel du HTML5

Cette nouvelle norme étant tout récemment arrivée, elle est encore au stade expérimental, ce qui fait que des changements peuvent encore survenir avant sa finalisation, même si on peut déjà utiliser les balises <header>, <footer>, <nav>, <article> et <aside> pour ne nommer que celles-là parmi les nouvelles balises apportées.

Malgré son stade expérimental, il est déjà exploitable en autant qu’on utilise les scripts pour le support sur les anciens navigateurs, notamment IE8 et versions antérieures, et qu’on adopte le principe de la dégradation gracieuse, dont Twitter en est un bon exemple. D’ailleurs, WordPress et Blogger utilisent déjà HTML5 pour le skin principal.

Mais suis-je obligé(e) de passer à HTML5

Même si certains vous disent de l’utiliser, libre à vous de rester pour le moment à XHTML 1.0, comme je le fais d’ailleurs, si vous n’avez pas besoin de balises spécialisées comme <audio> et <video> et que le support des appareils mobiles n’est pas votre priorité
Même si HTML5 est de plus en plus présent, les doctypes XHTML 1.0 continueront d’être valides pendant longtemps.

Mais si vous voulez optimiser le support des appareil mobiles sur votre sites, l’utilisation du HTML5 est recommandé pour les raisons suivantes :

  • Contrairement au Flash, la balise <video> est supportée par les terminaux mobiles d’Apple.
  • Certaines valeurs pour l’attribut type pour la balise <input /> email, url et phone, affichent un clavier adapté au type de contenu sur les appareils mobiles, ce qui est très pratique !

Et le CSS3 alors ?

Il n’est pas nécessaire d’utiliser HTML5 pour utiliser CSS3. Vous pouvez très bien l’utiliser avec XHTML 1.0. Il n’est d’ailleurs pas rare de voir des propriétés CSS3 sur des sites en XHTML. Même si les propriétés ne sont pour la plupart pas supportés par les anciens navigateurs (IE < 9 surtout) ou ne le sont qu'en utilisant les préfixes vendeurs (-moz-, -webkit-, -o-) pour les anciennes versions de Firefox, Chrome, Safari et Opera, ce n'est pas la fin du monde si c'est un peu moins léché, du moment que ça n'affecte pas l'utilisabilité du site. C'est ce qu'on appelle la « dégradation gracieuse ».

Pour en savoir plus

Si vous voulez en savoir plus sur HTML5 ou si vous avez des questions à ce sujet, les habitués d’Alsacréations seront les mieux placés pour vous répondre adéquatement.

Lien du site : http://www.alsacreations.com

Si vous avez déjà lu le cours XHTML/CSS du Site du Zéro, sachez que le cours vient d’être totalement refondu pour se bases sur HTML5 et CSS3.

Lien du cours : Apprenez à créer votre site Web avec HTML5 et CSS3

Lâchez-moé avec le tout-tableless et le remplacement des <img /> à tout prix !

Samedi 2 octobre 2010

Je sais pas si c’est l’automne qui fait ça, mais on dirait que si je poste un article de chiâlage, d’autres viennent souvent juste après. Et justement ce soir, j’ai le goût de chiâler (ou comme le dise les Français, « râler ») suite à une rechute que je viens d’avoir à la suite d’une discussion anodine qui a tourné au débat, et j’ai donc besoin de me libérer l’esprit.

Encore une fois, il s’agit d’une difficulté à exprimer mes convictions.

Cela avait débuté pendant une discussion sur IRC où mon interlocuteur regardait mes sites et webdesigns que j’ai faits, jusqu’à ce qu’il tombe sur mon webdesign 3dblue que j’avais recyclé à partir d’une commande dont le projet n’a jamais vu le jour. Tout allait bien jusqu’à ce qu’il remarque le tableau faisant office de démo de structure de forum. C’est là que le débat est parti, où j’essayais de lui faire comprendre qu’un simple tableau est plus logique et plus ergonomique à naviguer qu’une imbrication de listes et de divs « à la phpBB3/PunBB ». Puis lorsque j’ai mentionné que c’est comme vouloir remplacer les <img /> à tout prix même pour les images porteuses de contenu, là aussi, j’ai frappé un noeud. Je lui avais alors dit de tester en désactivant toutes les images sur un forum prosilver, mais réponse non-concluante ! J’ai aussi essayé de lui faire comprendre qu’un <ìmg /> avec un alt="" correctement renseigné est plus accessible qu’une image définie en fond, mais niet non plus ! Et tout ça, malgré les liens Alsacréations que je lui envoyais !

Non mais lâchez-moé 2 minutes avec le tableless et l’imgless zélé ! Ce n’est pas parce que phpBB3 fait du tableless et remplace tous ses <img /> que ça doit devenir une référence absolue, bâtard ! D’ailleurs, si vous regardez le tableau des WCAG ou la liste d’AccessiWeb, vous verriez que les tableaux ne sont pas aussi anti-accessibles qu’on veut le faire croire, et d’ailleurs, un site en tableaux peut être accessible si les techniques appropriées sont appliquées.

Mais alors pourquoi éviter les tableaux de mise en page dans ce cas ?

Les raisons pourquoi on ne les recommande pas, et je suis d’accord avec ça, c’est qu’un site codé en tableau a un poids plus élevé qu’un site codé en DIV, en plus d’être plus rigide au niveau du stylage et de la maintenance.

Et les images alors ?

Là aussi, il y a des mythes qui circulent à ce sujet. J’ai déjà vu du monde dire que des images insérées avec <img /> ne se mettaient pas en cache, alors que c’est faux ! De plus, contrairement aux croyances, une page bourrée d’images de fond est aussi lourde qu’une page bourrée de balises <img /> et d’ailleurs, je m’en aperçois tout de suite qu’une page est lourde quand elle a une hyper grosse image d’arrière-plan, car Firefox se met à ramer et à réagir « à retardement » quand une image, même de fond, est trop lourde ! Autre mythe, c’est qu’une image en background est aussi accessible qu’un <img /> Or, quelle que soit la technique utilisée (positionnement absolue, clipping, display:none;, font-size à 0, text-indent de -9999, …), il y a toujours le risque que le visiteur change ses préférences du navigateur (taille du texte minimal, etc.) et donc, que les textes qu’on essaie de cacher finissent quand même par apparaître au grand jour, et qu’au moins une catégorie de visiteur perde quand même l’information (images bloquées au boulot, navigateur texte, dépassement de quota).

Et encore pour rappel, les WCAG et AccessiWeb, là aussi, demandent de renseigner d’un texte alternatif toutes les images de la page, et que ce texte soit explicite pour les images porteuses d’informations comme les boutons d’un menu ou le logo. l’utilisation des background en CSS doit être réservée aux images non-significatives qui sont justement celles qui sont les plus nuisibles à l’accessibilité !

Conclusion

Je finis donc avec une citation qui m’est chère : Tout mouvement a ses excès, et les mouvements en termes de création Web n’échappent pas à cette règle. Et pour continuer dans les citations, je vous en cite un qui était placardé dans un local où j’avais eu mes cours d’anglais de secondaire 5 : What is popular is not always right, and what is right is not always popular..

Je finis en vous laissant des liens vers les sites sur l’accessibilité, pour votre culture :