Template responsive avec flexbox

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Template responsive avec flexbox

    Salut la compagnie,

    Je suis en pleine création d'un nouveau template.
    J'ai utilisé la technique flexbox.
    Je sais que je vais avoir des soucis avec certains navigateurs.

    L'un d'entre vous a t'il un lien sérieux et régulièrement mis à jour sur les problèmes de compatibilité ???

    Papounet
    Artiste international, producteur phonographique et bidouilleur du web encore et toujours en activité.
    Compositeur du groupe : Roses Street présent sur toutes les plateformes de steaming.
    I'am happy for you !
    Dernière réalisation : http://www.pierrickservais.com/

  • #2
    Re : Template responsive avec flexbox

    Bonjour,

    La référence est http://caniuse.com/#search=flexbox
    a recouper avec http://www.w3schools.com/browsers/default.asp ou http://www.libstat.com/pages/navigateur.htm
    pour voir les risques que l'on prend

    De toute façon, utiliser flexbox veut dire que l'on va fâcher les utilisateurs d'Internet Explorer (qui sont heureusement de moins en moins nombreux)
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Re : Template responsive avec flexbox

      Super, merci beaucoup

      Pour IE, pas de soucis je vais faire une page pour le remplacer.

      Papounet
      Artiste international, producteur phonographique et bidouilleur du web encore et toujours en activité.
      Compositeur du groupe : Roses Street présent sur toutes les plateformes de steaming.
      I'am happy for you !
      Dernière réalisation : http://www.pierrickservais.com/

      Commentaire


      • #4
        Re : Template responsive avec flexbox

        salut
        j'ai utilisé Flexbox aussi sur mon site template-creator, et en le passant à la validation Google Mobile j'ai eu la bonne surprise de voir qu'il y avait un souci avec des éléments qui sortent de la page. En fouillant, j'ai trouvé que Flexbox n'est pas reconnu ...
        j'ai remis des float et tout est rentré dans l'ordre

        Donc à voir, peut etre que j'ai raté un truc dans son implémentation mais vérifie peut etre ce point
        CEd

        - - - Mise à jour - - -

        Pour IE, pas de soucis je vais faire une page pour le remplacer
        tu peux toujours utiliser les css sur le body pour détecter un mode rétrogradé avec des float en fonction du navigateur
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Re : Template responsive avec flexbox

          Envoyé par ced1870 Voir le message
          Donc à voir, peut etre que j'ai raté un truc dans son implémentation mais vérifie peut etre ce point
          CEd
          Pour le moment, je suis en local.
          A la validation, j'ai 3 erreurs "Element dl is missing a required child element.". A cause du Détail des infos article.

          On va voir quand ca va être en ligne...

          Papounet
          Artiste international, producteur phonographique et bidouilleur du web encore et toujours en activité.
          Compositeur du groupe : Roses Street présent sur toutes les plateformes de steaming.
          I'am happy for you !
          Dernière réalisation : http://www.pierrickservais.com/

          Commentaire


          • #6
            Re : Template responsive avec flexbox

            Bonjour,

            C'est fous cette mode pour Flexbox en ce moment, moi aussi je fait mon template en flexbox.

            Bon pour moi ce sera mon premier Template Joomla et flexbox le prétexte pour m'y collé

            Quel est le problème avec IE ?

            Parque j'ai cru comprendre que c'était compatible depuis ie9 et que comme certains studios l'utilise en production je me suis dit que je pouvais m'y mettre aussi .

            Merci A+
            Dernière édition par ali13 à 25/10/2016, 15h24

            Commentaire


            • #7
              Re : Template responsive avec flexbox

              Parque j'ai cru comprendre que c'était compatible depuis ie9
              à tester après ça dépend quelle version de IE tu veux encore prendre en charge
              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
              http://www.template-creator.com Outil de création de templates
              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

              Commentaire


              • #8
                Template responsive avec flexbox

                Envoyé par papounet Voir le message
                L'un d'entre vous a t'il un lien sérieux et régulièrement mis à jour sur les problèmes de compatibilité ???
                Tu peux mettre en place des polyfills avec ta propre version de Moderniz pour résoudre les problèmes de compatibilité :
                via le builder : https://modernizr.com/download?setclasses ainsi le fichier sera plus léger suivant ce que tu veux assurer en compatibilité pour les navigateurs "dinosaures"...

                Pratique, un bookmarklet te permet de tester flexbox avec modernizr : http://chriswrightdesign.github.io/tooflexy/

                Enfin, un peu de lecture : CSS 3 Flexbox: Plongez dans les CSS modernes par Raphaël Goetter
                Flexbox est en passe de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Pourquoi y consacrer un ouvrage ? Car, bien utilisé, Flexbox permet de faciliter la tâche de bon nombre de développeurs web. Un ouvrage de référence pour les webdesigners et intégrateurs "Flexible Box Layout Module", mieux connue sous le nom de "Flexbox", est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu'alors inédit. Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, et rend caduc l'usage de grilles d'affichage complexes, voire de frameworks - véritables usines à gaz où l'on n'exploite qu'à peine 10% de l'outil. Oubliez donc tout ce que vous aviez appris sur CSS et, comme moi, tombez amoureux de Flexbox ! Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign. Le design d'éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d'un mode d'affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d'adaptation aux tablettes et smartphones. Une spécification CSS 3 novatrice Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web. Les "anciennes" méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d'autre que du bricolage empirique : "tiens, à quoi peut bien servir ce position : relative ?", "pas grave, je mets une classe .clearfix partout !", "oh ! mais pourquoi ça ne veut pas rentrer ?", etc. Flexbox est conçu pour mettre de l'ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d'un positionnement propre et adapté aux besoins actuels. Cet ouvrage vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS 3, notamment à travers six travaux pratiques... À qui s'adresse cet ouvrage ? Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant. Aux développeurs et chefs de projet web soucieux de découvrir les rouages d'une technologie qui facilitera assurément la vie de leurs projets. A quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d'ouvrir ses horizons à des modèles bien plus intuitifs.
                Dernière édition par daneel à 26/10/2016, 19h21
                Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                Commentaire


                • #9
                  Re : Template responsive avec flexbox

                  Envoyé par ced1870 Voir le message
                  à tester après ça dépend quelle version de IE tu veux encore prendre en charge
                  Pour mon site perso, j’avoue que sa m'est égale car ce n'est que pour expérimenter.

                  Mais dans l'intercommunalité ou je travail il y à encore des vieux micro d’on un tourne encore avec un IE8 (vas savoir pourquoi). Et tous doivent avoir accès à l'intranet.

                  je posais la question juste par curiosité.

                  Merci A+

                  Commentaire


                  • #10
                    Re : Template responsive avec flexbox

                    Enfin, un peu de lecture : CSS 3 Flexbox: Plongez dans les CSS modernes par Raphaël Goetter
                    très bon livre je le recommande !
                    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                    http://www.template-creator.com Outil de création de templates
                    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X