Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Flexbox e autoprefixer per compatibilit� vari browser

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    15

    Flexbox e autoprefixer per compatibilit� vari browser

    Ciao a tutti.

    Da quando sono venuto a conoscenza dei flexbox (prima usavo le colonne di Bootstrap e i float) sto cercando di usare solo questi in quanto, dalle guide che ho letto, dovrebbero avere pi� vantaggi.

    Per� c'� il problema del supporto cross-browser che � una vera rogna soprattutto nei browser pi� vecchi (dove servirebbero regole con sintassi pi� vecchia ecc...).

    Allora cercando una soluzione al problema ho scaricato autoprefixer (installato su sublime text) che mi aggiunge automaticamente anche le regole con vecchia sintassi cosi che io mi debba solo preoccupare di quelle con nuova sintassi.

    Come esercizio ho fatto il mio curriculum vitae in html e css e mentre su chrome e opera neon � tutto perfetto in internet explorer � un disastro (tutte cose una sovrapposta sull'altra). Anche su Edge c'� qualche problemino.

    Quando io ho scritto il css, scrivevo solo le nuove regole (es: display: flexbox, flex-direction: column, align-items: justify-content e cosi via) e poi il resto lo facevo fare automaticamente ad autoprefixer. Ho letto che ad esempio la nuova sintassi deve stare per ultima (es: -webkit-flex-direction e poi flex-direction). Secondo me ho dimenticato qualcosa oppure le varie sintassi non sono in ordine.. Ricontroller� appena possibile.

    Al di l� del mio caso specifico, la domanda che vorrei porvi � se (per coloro che lo usano) l'autoprefixer aggiunge davvero tutte le regole per tutti i vari browser o se anche loro hanno lo stesso qualche incompatibilit�.

    Detto terra terra autoprefixer � sufficiente a garantire il supporto per tutti i browser? Il fatto che in explorer e in Edge ho dei problemi � sicuramente dovuto a qualche mia distrazione o incapacit� nell'utilizzo dell'autoprefixer?

    In aggiunta cosa ne pensate dei flexbox? Sono veramente da preferire ad altre regole css?

    Grazie in anticipo per eventuali risposte.

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,933
    io uso autoprefixer come gemma ruby con middleman. Nel mio caso lo configuro con la lista dei browser da coprire nel config.rb e lui aggiunge le regole con vendor quando compilo i file SASS.

    Forse nel tuo caso non hai configurato correttamente la lista dei browser (non hai comunque specificato quale versione di explorer ti d problemi, ad esempio andando a memoria IE10 ha un bug sul flex-basis)

    I flexbox sono di certo un'ottima soluzione per semplificare layout complessi laddove non sono a disposizione soluzioni diverse altrettanto efficaci. Sono uno strumento in pi, non l'unico strumento da preferire sempre e comunque.
    Ultima modifica di fcaldera; 16-03-2017 a 16:28
    No thread tecnici in privato, grazie!

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    15
    Ti ringrazio per la risposta. Scusami ma le prime 2 righe per me sono arabo essendo relativamente nuovo al mondo del web (ho fatto giusto qualche mese di stage).

    No infatti non ho configurato niente, avevo solo seguito una guida che mi faceva installare autoprefixer direttamente da sublime text.

    Quindi ci sarebbe solo da configurare la lista dei browser?

    Se per caso conosci qualche guida che spieghi come fare ci� te ne sarei grato.. altrimenti prover� a cercare io.

    Explorer � l'11 ma credo che i problemi ci saranno pure nelle versioni precedenti.

    Avevo anche pensato di creare io degli snippet (scoperti anche questi da pochissimo) cosi che ogni volta chiamo una regola avrei gi� tutti i corrispettivi dei vari browser (prefissi) e delle vecchie versioni. Sarebbe un rinventare la ruota ma lo farei solo cosi per curiosit� e per imparare. Dovrei andarmi per� a recuperare tutte le vecchie e "quelle di mezzo" sintassi. Per� si potrebbe fare giusto?

    Ok, consigli quindi di non fossilizzarmi sul solo uso dei flexbox?

    Ad esempio i float fanno il loro dovere, ma mi sembrava di aver letto che non fossero stati concepiti esattamente per l'utilizzo che ne si fa oggi, e poi non ho mai capito il clearfix da usare dopo..

    Ci sono altre soluzioni per la strutturazione dei layout che � indispensabile sapere?

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    15
    Quote Originariamente inviata da fcaldera Visualizza il messaggio
    Nel mio caso lo configuro con la lista dei browser da coprire nel config.rb e lui aggiunge le regole con vendor quando compilo i file SASS.

    Forse nel tuo caso non hai configurato correttamente la lista dei browser (non hai comunque specificato quale versione di explorer ti d problemi, ad esempio andando a memoria IE10 ha un bug sul flex-basis)
    Ciao, ho provato a cercare qualche guida da seguire e ho trovato questa:

    https://github.com/sindresorhus/sublime-autoprefixer

    Dice di andare in (Preferences → Package Settings → Autoprefixer → Settings - User) ma un file vuoto.

    Se invece vado in (Preferences → Package Settings → Autoprefixer → Settings - Default) ho le seguenti impostazioni:

    codice:
    {
        // Run Autoprefixer on file save
        "prefixOnSave": false,
    
    
        // Autoprefixer options:
        // https://github.com/postcss/autoprefixer#options
    
    
        // See: https://github.com/ai/browserslist#queries
        "browsers": ["defaults"],
    
    
        // Use visual cascade if CSS is uncompressed
        "cascade": true,
    
    
        // Remove outdated prefixes
        "remove": true,
    
    
        // Add prefixes for @supports parameters
        "supports": true,
    
    
        // Add prefixes for flexbox properties
        // Set it to "no-2009" to only add prefixes for the final and IE versions of the specification
        "flexbox": true,
    
    
        // Add IE prefixes for grid layout properties
        "grid": true
    }
    E' al posto di default (evidenziato in neretto) che devo mettere la lista di browser? Non so default quali browser preveda (forse mi pare di aver capito le ultime 2 versioni di ogni browser e i browser > 5%) ma nel mio caso cosa dovrei specificare? [default, IE] andrebbe bene?

    Infine dove lo scrivo? nel file vuoto Settings - User o in Settings - Default ?

    Grazie per la pazienza.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.