Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94

    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,924
    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
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    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
    94
    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.

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao torno su questo argomento. Dunque da quanto ho capito IE 11 dovrebbe supportare i flexbox ma è pieno di bug come si dice in questa guida:

    https://github.com/philipwalton/flexbugs

    L'ho letta ma non è che ci abbia capito molto, tanto che non avevo risolto niente.

    Sicuramente la leggerò di nuovo per provare a capire.

    IE 11 è ancora usato molto oppure si potrebbe lasciar perdere?

    Ci sono altre alternative?

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

    Quali sono le altre soluzioni di cui parlavi? Io conosco solo i float e la griglia di bootsprap (row e column). Mi sembrava di aver letto che anche bootstrap supporta i flexbox.. Il problema di IE 11 permane lo stesso?

    Non è che sia fissato con i flexbox ma vorrei imparare le cose più adeguate e aggiornate.

  6. #6
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Quote Originariamente inviata da Floky Visualizza il messaggio
    Quali sono le altre soluzioni di cui parlavi?
    Tutte quelle che i CSS ti consentono di fare, ad esempio

    Float
    Posizionamenti relativi/assoluti
    Inline-block
    CSS Columns
    CSS Grid (nei nuovissimi browser)
    Table (se i dati sono realmente tabellari)

    tutto dipende da cosa vuoi fare, dalla complessità del layout, dal supporto che devi dare sui vecchi IE/iOs/Android...
    Ultima modifica di fcaldera; 07-04-2017 a 12:37
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ok grazie. Ho appena dato un occhio alla guida sui CSS Grid. Sar� uno strumento potente ma mi sembra anche non facilissimo ricordarsi tutte quello propriet� anche abbastanza contorte. La guida dei flexbox era pi� intuitiva.

    Essendo come hai detto per i nuovissimi browser non c'� sempre il problema dei browser pi� vecchi? Queste diversit� dei browser sono un vera seccatura! Non dovrebbe essere una prerogativa standardizzare e rendere le cose pi� facili?

    Io sono proprio all'inizio dell'apprendimento e gi� mi trovo in confusione con tutte queste alternative perch� da un lato vorrei imparare le cose pi� aggiornate ma quest'ultime non sono scevre da problemi.

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao, sono tornato a rimuginare su quali siano le tecniche da "preferire" per realizzare layout responsive. Tra quelle che mi hai indicato in precedenza quali sono quelle che pur funzionando sono considerate ormai superate. Mi viene da pensare proprio ai float di cui avevo letto che l'utilizzo che ne si fa non era quello per cui erano stati introdotti. Non dico che alcune tecniche siano inutili ma nemmeno vorrei "perder tempo" ad imparare tecniche superate da altre che fanno le medesime cose meglio.

    Quando facevo lo stage usavo la griglia di Bootstrap ovunque. Poi ho scoperto i flexbox che mi pare facciano tutto quello che fa Bootstrap e anche di pi�. I float non li uso pi� visto che con alcune propriet� dei flexbox ottengo lo stesso scopo. Le table ho letto che sono rognose in ottica responsive..

    CSS Gride ho gi� dato una lettura al tutorial su css-trick e sembra super (specie se combinato con i flexbox come dicono) ma mi pare sia ancora una tecnica non standard quindi i soliti problemi cross-browser.. tra l'altro ho dovuto flaggare un'impostazione su google chorme per poterli usare..

    Quindi, aspettando la CSS Grid si pu� dire che i Flexbox, seppur non gli unici, sono quelli da preferire?

    I flexbox, se utilizzati bene, fanno tutto quello delle altre tecniche pi� vecchiotte o hanno qualche lacuna per cui ci sono casi in cui non vanno bene?

    Forse l'unico problema sono i bug su alcuni IE ma dovrebbero esserci le soluzioni (anche se io non sono riuscito ad applicarle)

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 © 2024 vBulletin Solutions, Inc. All rights reserved.