Pojedynczy sprite CSS dla 2 różnych klas. Czy to dobry sposób na zrobienie tego? - css, image, css-sprites

Próbuję zmniejszyć liczbę połączeń HTTP za pomocą obrazu sprite w moim projekcie. Struktura wygląda następująco:

<div class="parent">
<div class="child-1">Content here</div>
<div class="child-2">Content here</div>
</div>

<div class="outsider">
Content here
</div>

Mam jeden pojedynczy sprite, który ma 3 obrazy - każdy dla 2 klas potomnych rodzica i ostatni dla klasy "outsider".

Mogę spróbować podać CSS w ten sposób:

.parent{
background-image: url("../img/4-in-one-sprite.png");
}
.child-1{
background-position: 0px -10px;
width: 10px;
}
.child-2{
background-position: 0px -20px;
width: 10px;
}
.outsider{
background-position: 0px -30px;
width: 10px;
}

Ponieważ outsider nie należy do rodzica, nie dostanie tego tła, prawda? Tak więc będę musiał ponownie określić ten sam obraz tła w jego definicji klasy, na przykład:

.outsider{
background-image: url("../img/4-in-one-sprite.png");
background-position: 0px -30px;
width: 10px;
}

Moje wątpliwości to:

1. Przeglądarka Wont tworzy dodatkowe żądanie graficzne dla klasy outsiderów? Wyobraź sobie, że obraz nie jest zapisywany w pamięci podręcznej i jest pierwszym ładowaniem tej strony.

2. A może przeglądarka w jakiś sposób inteligentnie zrozumie to samo źródło i wykona tylko jedno połączenie?

3. Kiedy wyświetlamy obrazy tła, na jakim etapie renderowania strony, przeglądarka prosi o zasób? Czy to podczas parsowania css lub podczas malowania ich na dom?

4. Jaki jest najlepszy sposób korzystania z ikonki tutaj i zredukowania połączenia http do absolutnego minimum bez umieszczania trzeciego obrazu jako osobnego?

Odpowiedzi:

1 dla odpowiedzi № 1

background-position dotyczy tylko background-image elementu, to nie jest coś, co jest dziedziczone (nie musisz dodawać background: none na każdym dziecku, aby zatrzymać kaskadowanie i mając to samo tło w kółko z rodzicem, dzieckiem, elementami grand-child to nie to?).

Masz 3 wystąpienia background-image tutaj, jeden dla outsidera, jeden dla dziecka-1 i jeden dla każdego dziecka-2 (masz literówkę z tym ostatnim) i 3 różne pary wartości dla pozycji.

Przeglądarki będą żądały tylko raz każdego unikalnego zasobu, nie martw się, ale kolejność CSS, JS, obrazów, opóźnień, asynchronizacji itd. Ładowanie zasobów może się różnić.

Najlepszym sposobem używania sprite'ów jest wiedza, kiedy ich nie używać: nie używaj ich, gdy powinieneś używać obrazu HTML z alt attibute.

W końcu brakuje jednej ważnej własności: background-repeat. Brak sprite'a dla powtarzających się (zobaczysz wszystkie sprite'y na raz) 3 różne sprite'y dla no-repeat, repeat-y i repeat-x są konieczne.

---

0 dla odpowiedzi nr 2

Całkiem niezłym sposobem jest użycie nazwy "sprite" tylko na tych elementach ..

A następnie użyj czegoś takiego w css:

[class^="sprite-"], [class*=" sprite-"] {
background:transparent url("../img/4-in-one-sprite.png") no-repeat;
}

Tak więc, ".sprite-outsider" i ".sprite-child-1" obaj dostaną duszka jako tło i potrzebują tylko pozycjonowania na nich.

Nie działa w ie6, ale jak się teraz dba? ;)

I, dzięki temu, przeglądarki są inteligentne!

---