Articles de la catégorie CSS3
Gérer plusieurs langues en HTML5 et CSS3
Il y a des solutions simples pour gérer avec une feuille CSS l'affichage de différentes langues. Vous vous êtes peut-être déjà confronté à un problème similaire : votre super menu s'affichant en ligne est parfait dans la langue des Vulcains avec une taille de caractère mais malheureusement ne l'ai plus avec la langue des Na'vis. Quand votre site sera déployé pour des localisations différentes, les feuilles CSS ne pourront alors pas être les mêmes et vous allez maintenir autant de fichiers différents que de localisation ? C'est ce que vous ferriez en faisant un très mauvais choix. Arrêtons-nous 5 minutes pour explorer une piste bien pratique pour assurer la maintenance d'une feuille CSS et de ces différentes localisations.
Les concepts autour du Responsive Web Design
Le « Responsive Web Design » comme son nom l’indique est le concept de « Responsive Design » adapté au Web. Il est parfois raccourci par le terme « RWD » ou simplement par « Responsive ».
Dans la majorité des cas d’utilisations, il est utilisé comme raccourci pour désigner la version Mobile d’un site web originalement conçu pour un écran d’ordinateur.
La vérité est que le Responsive Web Design n’est qu’un des nombreux concepts appliqués à un site web pour le rendre « utilisable agréablement » sur mobile tout en sachant qu’il ne se limite pas qu’au mobile et qu’il vaut tout aussi bien pour :
- une tablette,
- une phablette (terminal intermédiaire se situant entre le smartphone et la tablette),
- un ordinateur et tous ses types d’écrans (HD, 3D, tactile),
- une télévision numérique,
- un tableau de bord de voiture,
- une console de jeu portable,
- …et tout appareil capable d’afficher un site web par l’intermédiaire d’un navigateur web.
En plus du fait que Responsive Web Design ne signifie donc pas obligatoirement « version mobile », il est le porte étendard d’une liste de concept comme l’« Adaptative Web Design ». Difficile de comprendre ce dont on parle réellement quand il est question de Responsive Web Design.
L'attribut HTML5 lang et la pseudo-class CSS3 :lang()
Savez-vous qu'en HTML5, l'attribut lang (équivalent xHTML de xml:lang) peut être placé dans n'importe quelles balises de la page. Il définit alors dans quelle langue doit être interprétée la portion de code dans cette balise et ses enfants. Cet attribut fonctionne de paire avec la pseudo-class :lang() que l'on retrouve en CSS3. Nous allons mettre en avant ces deux amis le temps d'un article et le temps de comprendre à quel point ils s'entendent bien.
L'animation et le survol souris avec CSS3 ou jQuery
Les ergonomes s'accordent à dire qu'un des moyens pour informer l'utilisateur qu'il peut interagir avec un élément est de changer son apparence au survol de la souris. On peut réaliser cela rapidement en CSS avec plus ou moins d'effets et de complexité ou utiliser JavaScript pour faire quelque chose de plus poussé. Il va être question ici d'étudier une autre possibilité du survol de la souris qui consiste en l'apparition et l'animation d'éléments autres que l'objet survolé. En outre cet article va vous présenter la manière de gérer des menus contextuels en passant par jQuery et même CSS3.