Vraag CSS-mediaquery's definiëren binnen selectors


Zijn er problemen (prestatie is mijn voornaamste zorg) als u in plaats van CSS-selectors binnen mediaqueries definieert (voorbeeld 1), media-queries definieert binnen CSS-selectors (voorbeeld 2).

Voorbeeld 1 - css selectors binnen mediaquery's

@media (min-width: 600px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1000px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1500px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

Voorbeeld 2 - mediaquery's binnen CSS-selectors

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.hello {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.world{
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

U vraagt ​​zich misschien af ​​"waarom dit?". Er zijn enkele beperkingen in LESS over het uitbreiden van klassen binnen mediaquery's en ook over scopingvariabelen.


11
2018-03-05 06:46


oorsprong


antwoorden:


Kort antwoord, nee. Er zijn geen prestatieproblemen bij het definiëren van mediaquery's binnen CSS-selectors.

Maar laten we duiken in ...

Zoals beschreven in Anselm Hannemann groot artikel Webprestaties: één of duizenden mediaquery's er is geen prestatieverlies door mediaquery's toe te voegen zoals u bent.

Zolang hetzelfde paar mediaquery's in elke selector worden gebruikt, is er geen grote prestatiehit, behalve dat uw CSS-bestand mogelijk een beetje groter is.

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

Echter, het doet er zijn er zoveel verschillend mediaquery's die u gebruikt. Anders wezen anders min-widths, max-widths enzovoort.


10
2018-03-05 07:16



Er zou geen verschil in prestaties mogen zijn als we kijken naar de manier waarop browsers met mediaquery's omgaan. Browser-engines serialiseren en ontdubbelen mediaquery's, zodat ze elke media-query slechts eenmaal hoeven te evalueren. Ook cachen zij de query's, zodat ze deze later opnieuw kunnen gebruiken. Het maakt niet uit of u één grote of meerdere mediaquery's in uw code gebruikt, ervan uitgaande dat uw waarden grotendeels hetzelfde zijn.


Enkele van de mogelijkheden wanneer er prestatieproblemen kunnen zijn

  • U gebruikt meerdere mediaquery's met verschillende waarden en het browservenster wordt opnieuw bemeten. Naarmate het browservenster opnieuw wordt bemeten, kunnen meerdere mediaquery's een grote overhead vormen op de CPU.
  • Wanneer de CSS-selectors te complex zijn. Een complexe CSS-selector is veelbelovend voor de prestaties dan meerdere mediaquery's. Dus het hebben van meerdere mediaquery's binnen complexe selectors kan prestatieproblemen veroorzaken

2
2018-03-05 07:11