Tous les articles pour CSS3

  • Séparations et mise en application des rôles du HTML / CSS / JavaScript

    Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie frontale, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des Front-end Developers, des Back-end Developers ainsi que des Content Fillers (Pousseurs de Contenu). Ces techniques étant en constantes évolution, et les problématiques évoluant au fur et à mesure de mes itérations créatives, cet article est voué à se compléter et changer.


  • Version Mobile et Version Desktop : Ça n existe pas !

    J'entends tous les jours qu'une « version mobile n'est pas une option », sous entendu que l'on souhaite créer une version de site pour mobile et une version de site pour desktop « en même temps » et derrière la même adresse. J'entends aussi qu'il serait bien de s'occuper d'une « version tablette » pendant qu'on n'y est !

    Pour réaliser cela, quoi de mieux que l'utilisation du Responsive Web Design !

    Jusque là tout va bien me direz-vous ? Pas du tout.... Une « Version Desktop », c'est tactile ? Une « Version Mobile », ça a pas de bande passante ? Et bon sang, c'est quoi une « Version Tablette » ?

    Stop version desktop et mobile !

    Même si dans la théorie tout le monde croit se comprendre —avec des histoires de tailles—, je me sens contraint et forcer de faire du « Gloubi-boulga » quand j'utilise les spécifications imposées proposées par un Client ou pire parfois... par un Professionnel. Et cela au lieu de faire ce qu'on me demande en premier lieu, du Responsive Web Design.

    La simple évocation de « Mobile VS Desktop » est une preuve flagrante de l'incompréhension total de la chose. De la même manière que certain pensant utiliser une méthode Agile s'y prennent en réalité à La RACHE ; il est intéressant de s'assurer ici qu'on ne confond pas tout.


  • Activer vos effets JavaScript en fonction de vos Media Queries

    Je viens de voir un code allembiqué permettant de maintenir la hauteur de deux <div> côte à côte. Problème ? Ces éléments ne sont pas côte à côte en version mobile mais l'un sous l'autre : et maintenir la hauteur dans ce cas là ne sert à rien. La semaine d'avant, j'ai vu un code avec une cascade de if permettant d'ouvrir une vidéo dans une popup sur PC et d'ouvrir un lien Youtube sur mobile. Bien évidemment, les petits écrans PC ouvraient une popup alors qu'il aurait été intéressant qu'ils ouvrent aussi un lien. Je vous fais l'impasse sur les comportements au redimensionnement de la fenêtre.

    Bref, lançons-nous dans un petit exercice pour permettre un code JavaScript Responsive Web Design, sans se soucier de l'appareil qui l’exécute.


  • La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement

    Dans de nombreux cas, on utilise des balises superflus pour gérer ;

    • la largeur total d'une grille avec les éléments externes et
    • l'espacement entre chaque balise avec l'élément interne. Parfois même,
    • pour appliquer de la couleur de fond, on utilise une troisième balise !

    C'est notamment le cas avec le framework CSS Bootstrap qui se fait vieux. Si vous vous ventez de ne plus suporter IE8 parce qu’il à fait son temps, alors il est également temps d'arrêter d'utiliser des balises inutiles !

    Voici un exemple d'ancienne pratique et son équivalence avec la propriété CSS3 calc().


  • Utiliser les Media Queries CSS3 dans l'attribut style

    Autant vous annoncer la mauvaise nouvelle tout de suite, il n'est pas possible d'utiliser les Media Queries dans l'attribut des balises HTML style. Ainsi le code suivant ne fonctionnera pas...

    <div>
        <img 
            src="image/que/je/veux/decaller/seulement/quand/elle/flotte.png" 
            style="@media(min-width: 768px){float:left margin:-4px 16px 8px -24px;}">
        <p>J'aimerai faire flotter à gauche l'image ci-dessus uniquement sur 
        les grands écrans. Comme les valeurs de `margin` sont ajustées uniquement 
        aux propriétés de cette image (-4px 16px 8px -24px), il n'existe pas de
        classe  HTML-driven comme créer un `.float-left` (à l'avance) qui répondrait 
        exactement à mon besoin.</p>
    </div>
    

    ...c'est comme ça !

    Dans ce cas, comment faire pour gérer des propriétés CSS ponctuellement en utilisant les Media Queries ? Cela est très utile pour le remplissage de contenu pour ajuster des images ou encore manager des background-image.

    La solution n'est pas l'attribut style des balises HTML mais la balise <style> elle même !


  • Centrer verticalement n'importe quel élément en quelques lignes CSS

    Une solution rapide et qui fonctionne sur tous les navigateurs à partir de IE9 est le centrage vertical avec la valeur CSS3 translateY de la propriété transform.

    Pour mettre cela en place, trois simples propriétés :

    1. On place l'élément en relatif pour le repositionner par rapport à son élément parent avec position: relative;.

    2. On déplace l'élément de la moitié de la hauteur de l'élément parent avec top: 50%;, la référence de déplacement étant actuellement son bord haut.

    3. On re-centre l'élément non plus à partir de son bord haut mais de son centre vertical avec transform: translateY(-50%);

    Et voilà !


  • Conserver un affichage Desktop sur mobile avec une version Responsive Web Design

    Depuis que le Responsive Web Design a commencé son invasion, beaucoup de site ne possède plus qu'une unique version qui gère :

    • un affichage complet pour écrans larges de type écran d'ordinateur (Desktop) et
    • un affichage léger et partiellement complet pour les écrans de type mobiles/tablettes.

    Cela revient souvent à inhiber des fonctionnements jugés peu utiles par les développeurs ou ergonomiquement trop instables pour être présentés sur les petits appareils et empêche alors :

    • d'afficher la version Desktop sur les mobiles/tablettes ou
    • d'afficher la version Desktop dans une fenêtre de navigateur rétréci.

    Je vous propose, à travers des exemples CSS-Driven, de vous expliquer comment gérer deux versions d'affichage de vos pages avec comme toujours une seule structure HTML sémantique.


  • Bien gérer la localisation des sites en CSS3 et HTML5

    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 ».

    Responsive Web Design
    Source : www.tridentdesign.com

    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’aux mobiles 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.