Definiowanie zapytań o media CSS w selektorach

Question

Czy są jakieś problemy (wydajność jest moją główną troską), jeśli zamiast definiować selektory css w zapytaniach o media (przykład 1), definiujesz zapytania o media w obrębie selektorów css (przykład 2).

Przykład 1 - selektory CSS w mediach odpytuje

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

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

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

Przykład 2 - zapytań multimedialnych ciągu selektorów CSS

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

można się zastanawiać "dlaczego to zrobić?". W LESS istnieją pewne ograniczenia dotyczące rozszerzania klas w obrębie zapytań o media, a także zmiennych ustalania zakresu.

Answer 1

Krótka odpowiedź, nie. Podczas definiowania zapytań o media w selektorach CSS nie występują problemy z wydajnością.

Ale niech nurkować w ...

Jak opisano w Anselm HANNEMANN wielkim artykule Web Performance: One or Thousands of Media Queries nie ma strat wydajności z dodaniem zapytań o media w sposób jesteś.

Dopóki ta sama para zapytań o media jest używana w każdym selektorze, nie ma większego trafienia wydajności niż twój plik CSS może być nieco większy.

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

Jednak robi ważne ile różnych zapytań multimedialne użyć. Różne są różne min-widths, max-widths i tak dalej.

Answer 2

Nie powinna występować różnica w wydajności w związku z obsługą zapytań o media w przeglądarce. Silniki przeglądarki serializują i usuwają zduplikowane zapytania o media, więc muszą ocenić tylko jedno zapytanie o media raz. Ponadto buforują zapytania, aby móc je później ponownie wykorzystać. Nie ma znaczenia, czy używasz jednego dużego lub wielu zapytań o media w kodzie, zakładając, że twoje wartości są w większości takie same.

---

niektóre z możliwości, gdy nie mogą być problemy z wydajnością

• korzystania z wielu zapytań o media o różnych wartościach i okno przeglądarki jest re-size. W miarę zmiany rozmiaru okna przeglądarki wiele zapytań o media może być dużym obciążeniem dla procesora.
• Gdy selektory CSS są zbyt złożone. Złożony selektor CSS znacznie ogranicza wydajność niż wiele zapytań o media. Zatem posiadanie wielu zapytań o media w złożonych selektorach może powodować problemy z wydajnością.