Seçiciler içindeki CSS ortam sorgularını tanımlama

Question

Css seçicilerini ortam sorguları içinde tanımlamak yerine (örnek 1), css seçicileri içindeki ortam sorgularını tanımlarsanız (örnek 2) herhangi bir sorun var (performansım birincil kaygım).

Örnek 1 - css seçicileri

.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) { ... } 
} 

Sen "? Bunu neden" merak ediyor olabilirsiniz içinde medya sorguları - medya içinde css seçiciler

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

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

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

Örnek 2 sorgular. İç ortam sorguları arasında sınıfları genişletmek ve değişkenleri kapsamak için LESS'te bazı sınırlamalar vardır.

Answer 1

Kısa yanıt, no. CSS seçmenleri içindeki medya sorgularını tanımlamada performans sorunu yoktur. sen bir şekilde medya sorguları eklemesini herhangi bir performans kaybı yoktur Anselm Hannemann harika bir yazı Web Performance: One or Thousands of Media Queries açıklandığı gibi

Ama geçebiliriz ...

.

Her seçicide aynı çift ortam sorgusu kullanılıyorsa, CSS dosyanızdan başka büyük bir performans artışı yoktur.

.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) { ... } 
} 

Ancak kullanmak ne kadar çok farklı medya sorguları yapar. Farklı farklı min-widths, max-widths vb.

Answer 2

Tarayıcıların medya sorgularını işleme biçimine bakarak bir performans farkı olmamalıdır. Tarayıcı motorları çoğaltılmış medya sorgularını serileştirir ve çıkarır, böylece her bir medya sorgusunu bir kez değerlendirmek gerekir. Ayrıca, sorguları daha sonra yeniden kullanabilmeleri için önbelleğe alırlar. Değerlerinizin çoğunlukla aynı olduğunu varsayarak, kodunuzda büyük veya çoklu bir medya sorgusu kullanmanız fark etmez.

---

olasılıklar Bazı performans sorunları

• Farklı değerleri ve tarayıcı penceresi yeniden ölçekli olduğu ile birden çok medya sorgularını kullanabilirsiniz olabilir. Tarayıcı penceresi yeniden boyutlandırıldığı için, birden fazla medya sorgusu cpu üzerinde büyük bir ek yük olabilir.
• CSS seçiciler çok karmaşık olduğunda. Karmaşık bir CSS seçici, çoklu ortam sorgularından çok daha fazla engel olur. Bu nedenle, karmaşık seçicilerin içinde birden çok ortam sorgusu olması, performans sorunlarına neden olabilir.