Articles de la catégorie CSS
Différences entre async et defer en HTML5
La balise HTML script permet de définir quand le code JavaScript dans votre page est exécuté. Les attributs HTML5 async et defer sont à présent supportés par Firefox, Chrome, Safari et Internet Explorer 10+ (sinon ils sont ignorés) et permettent de modifier le comportement de chargement des scripts. Voici de courtes explications sur les différences de chaque appel.
<script> | - | - | - | - | - |
---|---|---|---|---|---|
Analyse HTML | Chargement... | Exécution JS | Analyse HTML | ||
- | - | - | - | - | |
<script defer> | - | - | - | - | - |
Analyse HTML | Analyse + Chargement... | Analyse HTML | Exécution JS | ||
- | - | - | - | - | |
<script async> | - | - | - | - | - |
Analyse HTML | Analyse + Chargement... | Exécution JS | Analyse HTML | ||
- | - | - | - | - |
- Chargement...
- Exécution JS
- Analyse HTML
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.
CSS et sémantique d'une Intégration HTML
Pourquoi je n'utilise pas Bootstrap ? Cela peut sembler une « évolution » de nos méthodes de travail Front-end mais gare au loup et attention de ne pas tomber dans un travers que le W3C tente d'enrayer au fur et à mesure des évolutions HTML et CSS.
Commençons par le commencement. Qu'est-ce que Bootstrap ? Comme plein d'autre « Librairie » ou « Framework » CSS dans la même veine, Bootstrap est un outil permettant d'augmenter la productivité des développeurs Front-end le maîtrisant, dans le but de fournir le plus rapidement possible un rendu visuel ergonomique et si possible responsive.
Mon problème ne vient pas tant de sa finalité qui est louable, mais belle et bien de la mise en oeuvre technique qui permet d'atteindre cette finalité. Pour être concis avant de développer : Bootstrap est une régression pour un travail Front-end de qualité.
Je ne compte persuader personne, et à défaut de convaincre, je vais au moins vous expliquer mon point de vue.
Problème de z-index et priorité d'affichage
Je rencontre souvent des personnes se plaignant de problèmes de z-index et qui les évitent ou se contente de dire que les z-index ça pose problème. Bien souvent le problème vient du fait que le développeur ne s'attend pas à ce que la priorité d'affichage des z-index fonctionnent en cascade dans le DOM. Voyez plutôt l'exemple suivant :
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.
Faire des bordures en image sans la balise Table
Beaucoup de design demande que les bordures des cadres de contenu soient des images pour avoir des bords aux motifs complexes ou faire des effets d'ombre. Bien qu'il existe des propriétés CSS3 qui gèrent cela à présent, la compatibilité sur tous les navigateurs ne sera possible que si ceci est réalisé avec du CSS standard et du HTML.
Comment cibler un id qui contient un point
En CSS, tout comme avec le librairie JavaScript jQuery, il faut utiliser des sélecteurs pour cibler une balise ou un ensemble de balise :
- on utilise le sélecteur # si l'on désire accéder à l'élément par la valeur de son attribut id ou,
- on utilise le sélecteur . si on désire accéder à l'élément par une des valeurs de son attribut class.
En combinant les deux sélecteurs précédent on peut sélectionner une balise par son attribut id et son attribut class.
On peut donc cibler la balise HTML suivante
<div id="main" class="example"></div>
avec le sélecteur CSS suivant
div#main.example { /* ... */ }