Back to Question Center
0

Haluan jakaa suuren CSS-mediakyselytiedoston erillisiin tiedostoihin kullekin näytön koolle?

1 answers:

Työskentelen herkästi suunnitellulla verkkosivustolla, joka toimittaa sisältöä kaikille näytön kokoille. Minulla on mediakyselyt 5 erilaiselle "askeleelle" ja CSS-tiedosto on noin 30 kt.

On syytä jakaa asia erillisiin tiedostoihin ja tehdä niistä samanlaisia:

         

tai pitäisikö ne yhden CSS-tiedostossa?

Semalt: Halusin vain lisätä, että tärkein huolenaihe oli risti selain / laitteen sivun avaaminen / renderointi nopeus, ei helppokäyttöisyyttä.

. - ray ban original mix
February 12, 2018
.

Ainoa todellinen haittapuoli, jonka voin ajatella jakautumisesta, olisi se, että jos elementin attribuutti ilmestyy kaikissa tyylisivuissasi, sinun on päivitettävä 5 erillistä tiedostoa sen muuttamiseksi (sen sijaan, että se näkyisi rinnakkain yhdessä paikassa ).

Tämän viestin vastauksen mukaan selaimet lataavat kaikki tyylitiedostot riippumatta, joten jakaminen resoluutioon ei ole kaistanleveyden säästäjä: https: // stackoverflow. com / questions / 16657159 / when-using-media-kyselyt-does-a-phone-load-ei-relevantteja-kyselyt-ja-kuvia

. Minusta on helpointa käyttää yhtä suurta tiedostoa, koska tämä antaa yleiskuvan kaikista ilmoittamistasi tyylistä.

Jos haluat nopeamman lastaussivun, kuin paras panos olisi minimoida pyyntöjen määrä, koska pyyntökerroin on melko suuri. Lisäksi voisit pitää kehitysversion itsellesi ja palvella minimoitua css-verkkoa (löydän YUI: n hyvän menetelmän: http: // www. virkistää-sf. com / yui / ).

Lisäksi yritän optimoida css itse. Voit yrittää yhdistää hyvin samanlaisia ​​luokkia, esimerkiksi:

 . bold-and-italic {font-weight: bold; teksti-tyyli: italic; } 

Voidaan muuntaa:

 . bold {font-weight: bold; }. italic {teksti-tyyli: italic; } 

Ainoa asia on, että sinun täytyy vaihtaa html hieman foo bar "> foo bar

Voin stronly ehdottaa sinua katsomaan Bootstrap ( http: // getbootstrap. com ), nämä kaverit ovat tehneet hyvää työtä jakamalla luokkia useisiin "aliluokkiin".

Toivottavasti tämä auttaa.

Sen on todennäköisesti paras olla vain yksi CSS-tiedosto, mutta minify ja gzip se. Olettaen, että 30 kilotavun pituus on ennen tekemistä, tiedoston koko on todennäköisesti noin 5 kilotavua, minification (white space removal) ja gzipping.

Jakaminen todennäköisesti vie hieman nopeammin, mutta vain tietyissä olosuhteissa.

  • Sinun on varmistettava, että vain yksi tyylitaulukko on ladattu joka kerta - muuten tarvitset kahta tai useampaa HTTP-pyyntöä, joilla on yläpuolinen itseään, mikä ainakin osittain hylkää pienemmän tiedostokoon. -tagit, joilla on erilaisia ​​mediaattribuutteja, selaimet näyttävät lataavan kaikki ed tyyppitasot riippumatta mediakysymyksistä (kiitos @cimmanon tästä tiedosta, ei tiennyt sitä).
  • Tyyli-arkkien välisten CSS-sääntöjen määrän on oltava vähäinen - muuten jokaisen monisivuisten tyylitietojen on sisällettävä kaikki yhteiset säännöt ja niillä olisi siis lähes alkuperäisen Tee niin vain, jos sinulla on suorituskykyongelmia.

Olisin taipuvainen sanomaan tämän.

Tuottaa aina ne yhteen tiedostoon; syy on se, että se on tehokkaampi selaimelle, ja sen pitäisi olla sinun ensisijainen etu (IMO), kun siirryt kehityksestä tuotantoon. Minulla on tapana jakaa Media-kyselyjä niin, että ne ovat millä tahansa elementillä, esimerkiksi:

 . foo {//. jotkut css}. foo: hover,. foo {//. jotkut differentcss}
} 

Kuten yleensä, jos muutan elementtiä, en halua metsästää koko CSS: n paikkaa (vaikka voit käyttää jotakin sellaista kuin grep ).

Mutta yksi asia, jonka sanoisin, on syytä harkita itse sivustoa, kehitysprosessia ja niin edelleen. Jos uskot aidosti, että se kannattaa erottaa ne näytön kokoisiin tiedostoihin, anna sille mennä. Tee kopio sivustosta (jos mahdollista), pelaa leikki kopiolla - jos se helpottaa, käytä sitä.

CSS-tiedostosi pitäisi jakaa mediakyselyihin perustuen, koska CSS-tiedostot tekevät eston.

Kun selain rakentaa DOM: n, sen on ensin odotettava ja ladattava kaikki CSS-tiedostot .

DOM: n ei tarvitse odottaa JS-tiedoston lataamista.

Yksinkertainen: käytä 1 tyylitaulukkoa ja lisää vain niihin kommentteja CSS-tyylien löytämisen ja muuttamisen helpottamiseksi e. g. :

  // arkki 1 (mobiililaite 800 px)
koodi// levy 2 (mobiililaite 768 px)
koodi// levy 3 (mobiililaite 480 px)
koodi// levy 4 (työpöydän koko 1024 px)
koodi 

Jos haluat, voit käyttää useita tyylitiedostoja ja soittaa heille kullekin tietylle koolle.

Haluan mieluummin katsoa Bootstrap . Se on 1 CSS-tiedosto, joka sisältää kaikki CSS: n. Se toimii lähes 99% selaimissa ja on erittäin herkkä.